Coordinates. Think of the canvas as similar to a graph sheet: each point is denoted by two numbers, the x coordinate and the y coordinte. The x axis runs from top-left to top-right and the y axis runs from top-left to bottom-left.
createCanvas(400, 200)
Points. You can draw a point with point(x, y), where x is the x-coordinate and y is the y-coordinate. See: point.
point(, )
Lines. To draw a line specifies the coordinates for its start and end points. Use line(x1, y1, x2, y2), where x1, y1 are the coordinates of the start point and x2, y2 are the coordinates of the end point. See: line.
line(, , , )
Circles and ellipses. More complex shapes like circles and ellipses require both coordinates and sizes. To create a circle, specify its center coordinates and diameter. See: circle, ellipse.
circle(, , )
To create an ellipse, specify its center coordinates, width and height.
ellipse(, , , )
Squares, rectangles, and quadrilaterals. Squares and rectangles are drawn by an anchor point which by default is the top-left corner. Squares also require a size and rectangles require a width and height. See: square, rect, quad.
square(, , )
rect(, , , )
Quads are different in that they require you to specify coordinates for all four corners.
quad(
, ,
, ,
, ,
,
)
Arcs. Similar to ellipses, arcs require a center point, width and height along with the start and end angle. Angles in p5 are defined in terms of radians, but I find degrees easier to use. You can set the angle mode to use degrees with angleMode(DEGREES). See: angleMode, arc.
angleMode(DEGREES)
arc(, , , , , )
Fill and stroke. You can add color to shapes by setting fill and stroke values. Colors are represented as red, blue and green values, each ranging between 0 and 255. Note that fill and stroke settings are sticky: after setting these values, any shape drawn after will have these colors unless you explicitly change them. See: fill, noFill, stroke, noStroke, strokeWeight.
fill(, , )
stroke(, , )
strokeWeight()
circle(120, 100, 100)
square(200, 50, 100)
Frame rate and frame count. Frame rate determines the number of frames drawn per second. Higher the frame rate, faster the draw loop. You can set the frame rate by using frameRate(fps), where fps is the target frames per second. See: frameRate, frameCount.
frameRate()
The variable frameCount is automatically set by p5.js inside the draw loop and is incremented by 1 each time the draw loop runs.
frameRate()
Mouse coordinates. The x and y position of the mouse is read and set by p5.js to the variables mouseX and mouseY by p5 inside the draw loop. See: mouseX, mouseY.
mouseX
mouseY