• p5.js is a JavaScript-based variation of the Processing language, which is a coding language designed for the arts

basic program structure

• initialize global variables at the top, outside of a function
• setup() runs once at load time
• draw() runs 60 times per second to redraw the canvas and recalculate values
• aside from global variables, all your code should pretty much be either in setup or in draw—or in a helper function that gets called by one of those

drawing shapes on canvas

• first call an attribute function to set features of the shape you wanna draw, then call a shape function to draw it

functions

• createCanvas(width, height) - call at the beginning of setup generally
• background(color) - call at the beginning of draw if you’re working with objects that should move; if you’re trying to draw lines via movement, then call it in setup instead?

shapes

• rect(x, y, width, height)
• ellipse(x, y, width, height)
• line(x1, y1, x2, y2)
• shapes reference

attributes

• fill(red, green, blue) - each value from 0 to 255
• noFill() - takes no arguments
• stroke(red, green, blue) - each value from 0 to 255 - outline color