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.
point(, )
Line. To draw a line specifies the coordinates for its start and end points.
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.
circle(, , )
To create an ellipse, specify its center coordinates, width and height.
ellipse(, , , )
Squares and rectangles. Squares and rectangles are drawn by an anchor point which by default is the top-left corner. Square also require a size and rectangles require a width and height. Sometimes it is also useful to change the anchor point to the center of the rectangle with rectMode.
rectMode(CORNERCENTER)
square(, , )
rectMode(CORNERCENTER)
rect(, , , )
Arc. 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).
angleMode(DEGREES)
arc(, , , , , )
Settings 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.
fill(, , )
stroke(, , )
strokeWeight()
circle(120, 100, 100)
square(200, 50, 100)