p5.

js a cheat sheet
for beginners!
2d primitives
line(x1, y1, x2, y2)
attributes
background(color)
set the background color
program structure ellipse(x1, y1, width, height)
fill(color)
//runs once when program starts rect(x1, y1, width, height) set the fill color
function setup(){
createCanvas(800,600); arc(x1, y1, width, height, start, stop) noFill()
} disables fill
beginShape();
//run continuously after setup vertex(x1, y1); stroke(color)
function draw(){ vertex(x2, y2); set the stroke color
//rendering loop vertex(x3, y3);
} strokeWeight(weight)
//add more vertex
set the stroke’s width
endShape(CLOSE);
system variables noStroke()
text(“string”, x, y, boxwidth, boxheight) disables stroke
windowWidth / windowHeight
width / height of window grid system line() ellipse() ellipseMode(MODE)
(0,0) rectMode(MODE)
width / height (x1,y1) CENTER,CORNER
width / height of canvas

height
(x1,y1)
textSize(pixels)
mouseX / mouseY
current horizontal / vertical (x2,y2)
width
mouse position if/then logic
rect() arc() vertex()
non-visual feedback (x1,y1) (x1,y1)
if(test){ test
false
height

statements
height

(x1,y1)
print()
report data to the output console
stop } true
start

(x2,y2)
width (x3,y3)

color width
statements

fill(120) gray: 0-255

math
fill(100,125,255) r, g, b: 0-255 + - / *
fill(255, 0, 0, 50) r, g, b, alpha == equal to continue
program
fill(‘red’) color string != not equal
random(low,high)
fill(‘#ccc’) 3-digit hex > greater than
< less than
fill(‘#222222’) 6-digit hex fill map(value, in1, in2, out1, out2) >= greater than or equal
color(0, 0, 255) p5.Color object map a value from input to output range <= less than or equal
Compiled by Ben Moren http://benmoren.com CC BY SA NC 4.0