Reference Guide

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)