P5 library - Coordinates, angles & shapes

Use size(width, height) to set the width and the height of the canvas.

The x-axis goes from left to right but the y-axis goes from top to bottom.

There are two predefined variables to get the canvas dimensions: width and height. Generally you should use these variables to calculate coordinates instead of using hard-coded numbers because it will make it easier to read and understand your code. Also your code should continue working when the canvas is resized. For example, if the canvas is 300 by 200:

• use width/2, height/2 instead of of 150, 100 for the center
• use width, 0 instead of of 300, 0 for the top-right corner
• use 0, height instead of of 0, 200 for the bottom-left corner
• use width, height instead of of 300, 200 for the bottom-right corner

For example size(8, 8) makes the canvas 8 pixels wide and 8 pixels high.

P5 uses radians instead of degrees. One full turn is 2π (= 360°). The angles are measured clockwise with zero being east. You can convert degrees to radians with radians(degrees) and radians to degrees with degrees(radians). Besides the usual PI, P5 also defines TWO_PI, HALF_PI, QUARTER_PI, and TAU which is 2π.

Use point(x, y) to draw a single point at coordinates (x, y).

For example the following code will draw this:

Use line(x1, y1, x2, y2) to draw a line between coordinates (x1, y1) and (x2, y2).

For example the following code will draw this:

Use triangle(x1, y1, x2, y2, x3, y3) to draw a triangle between coordinates (x1, y1), (x2, y2), and (x3, y3).

For example the following code will draw this:

Use quad(x1, y1, x2, y2, x3, y3, x4, y4) to draw a quadrilateral between coordinates (x1, y1), (x2, y2), (x3, y3), and (x4, y4).

For example the following code will draw this:

To draw a rectangle specified by its top-left corner and dimensions, use rect_mode(CORNER) and rect(x, y, width, height).

For example the following code will draw this:

To draw a rectangle specified by its center and dimensions, use rect_mode(CENTER) and rect(cx, cy, width, height).

For example the following code will draw this:

To draw a rectangle specified by two opposite corners, use rect_mode(CORNERS) and rect(x1, y1, x2, y2).

For example the following code will draw this:

To draw rounded corners, specify one radius number (all the corners are identical) or four radius numbers (all the corners are different).

For example the following code will draw this:

square is a special case of rect where the width and the height are identical.

To draw a square specified by its top-left corner and size, use rect_mode(CORNER) and square(x, y, size).

For example the following code will draw this:

To draw a square specified by its center and size, use rect_mode(CENTER) and square(cx, cy, size).

For example the following code will draw this:

To draw rounded corners, specify one radius number (all the corners are identical) or four radius numbers (all the corners are different).

For example the following code will draw this:

To draw an ellipse specified by its top-left corner and dimensions, use ellipse_mode(CORNER) and ellipse(x, y, width, height).

For example the following code will draw this:

To draw an ellipse specified by its center and dimensions, use ellipse_mode(CENTER) and ellipse(cx, cy, width, height).

For example the following code will draw this:

To draw an ellipse specified by two opposite corners, use ellipse_mode(CORNERS) and ellipse(x1, y1, x2, y2).

For example the following code will draw this:

circle is a special case of ellipse where the width and the height are identical.

Use circle(cx, cy, diameter) to draw a circle centered at coordinates (cx, cy).

For example the following code will draw this:

To draw an ellipse arc, use arc(cx, cy, width, height, start_angle, stop_angle, OPEN).

For example the following code will draw this:

To draw an ellipse chord, use arc(cx, cy, width, height, start_angle, stop_angle, CHORD).

For example the following code will draw this:

To draw an ellipse pie, use arc(cx, cy, width, height, start_angle, stop_angle, PIE).

For example the following code will draw this:

To draw an arbitrary polygon, start with begin_shape(), then add as many points as needed with vertex(x, y), and finish with end_shape(CLOSE).

For example the following code will draw a "C":

It is also possible to draw complex polygons with holes and inner shapes:

• start with begin_shape()
• add the outer shape with vertex in clockwise order
• add each hole with vertex in counter-clockwise order between begin_contour() and end_contour()
• add each inner shape with vertex in clockwise order between begin_contour() and end_contour()
• end with end_shape(CLOSE)

For example the following code will draw an "O" with a dot in the middle:

To draw smooth and artistic looking curves, use bezier(start_x, start_y, cp1_x, cp1_y, cp2_x, cp2_y, stop_x, stop_y).

For example the following code will draw the left half of a heart:

Note in particular how:

• the curve at the start point is tangent to the line passing through the start point and the 1st control point
• the curve at the stop point is tangent to the line passing through the stop point and the 2nd control point

Drag the dots hereunder to get a feeling for how the start, stop and control points interact with each other.

Use text(string, x, y) to draw text at coordinates (x, y).

For example the following code will draw this:

Check the Typography page to find out how to style text.