0% found this document useful (0 votes)
136 views1 page

p5.js Beginner's Cheat Sheet

Uploaded by

nefim34124
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
136 views1 page

p5.js Beginner's Cheat Sheet

Uploaded by

nefim34124
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

math attributes

[Link] a cheat sheet


for beginners! + - / * //basic math operators background(color);
//set the background color
random(low,high); //ranged random number
program structure fill(color);
map(value, in1, in2, out1, out2); //set the fill color
//runs once when program starts //map a value from input range to output range
function setup(){ noFill();
createCanvas(800,600); //width,height in pixels //disables fill
} 2d primitives
stroke(color);
//run continuously after setup line(x1, y1, x2, y2); //set the stroke color
function draw(){
//rendering loop ellipse(x, y, width, height); strokeWeight(weight);
} //set the stroke’s width in pixels
rect(x, y, width, height);

system variables arc(x, y, width, height, start, stop);


noStroke();
//disables stroke
windowWidth / windowHeight beginShape();
//width / height of window ellipseMode(MODE);
vertex(x1, y1); rectMode(MODE);
vertex(x2, y2); //CENTER,CORNER
width / height vertex(x3, y3);
//width / height of canvas //add more vertex textSize(pixels);
endShape(CLOSE);
mouseX / mouseY
//current horizontal / vertical mouse position text("string", x, y, boxwidth, boxheight); if/then logic
non-visual feedback grid system line() ellipse()
if(test){
//statements
print(); }
//report data to the output console
=== //equal to
//double slash to comment code (program skips it) !== //not equal
> //greater than
< //less than
color >= //greater than or equal
<= //less than or equal
fill(120); //gray: 0-255 rect() arc() vertex()
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //color string
fill('#ccc'); //3-digit hex
fill('#222222'); //6-digit hex fill
color(0, 0, 255); //[Link] object

Compiled by Ben Moren [Link] CC-BY-SA-NC-4.0


Translation by Ben Moren

You might also like