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