Drawing

Drawing on a canvas is a lot like drawing on a piece of graph paper. To start, create a new drawing surface by callingcreateCanvas(width, height) inside setup() specifying the required dimensions in pixels.

function setup() {
  createCanvas(400, 400)
}

This creates a new 400x400px canvas. The width is the horizontal length and the height is the veritcal length. The x axis runs from left to right and the y axis runs from top down. The origin or(0, 0)of the coordinate system is at the top-left.

Each point or pixel on the canvas is denoted by two numbers (x, y), where x is the distance between from the left edge of the canvas and the y is the distance from the top edge. You can draw a point with point(x, y).

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  point(200, 200)
}

To draw a line you need to specify 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.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  line(100, 300, 300, 100)
}

To draw a triangle you need to specify the coordinates of all three of its points. Use triangle(x1, y1, x2, y2, x3, y3), where (x1, y1) are the coordinates of the first point and (x2, y2) are the coordinates of the second point and, finally (x3, y3) are the coordinates of the third point.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  triangle(100, 300, 200, 100, 300, 300)
}

Drawing more complex shapes requires specifying both coordinates of its key points as well as various lengths. To create a circle use circle(cx, cy, d) where (cx, cy) are the coordinates of the center point and d is the length of the diameter.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  circle(200, 200, 200)
}

An ellipse is an oval defined by a center point, a width, and a height. To create a ellipse use ellipse(cx, cy, w, h) where (cx, cy) are the coordinates of the center, w is the width, and h is the height.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  ellipse(200, 200, 200, 100)
}

Squares are defined using the coordinates of its corner point and a side length. To create a square use square(x, y, s) where (x, y) are the coordinates of the top-left corner point and s is the length of its side.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  square(100, 100, 200)
}

Sometimes, it's easier to define squares using its center point instead of the top-left corner. To change this, you can set the rectangle drawing mode (which affects both squares and rectangles) by callingrectMode(CENTER) once inside the setup() function. Then on, any calls to square(x, y, s) will set(x, y) are the coordinates of the center point.

function setup() {
  createCanvas(400, 400)
  rectMode(CENTER)
}

function draw() {
  background(255)
  square(200, 200, 200)
}

Like squares, rectangles require coordinates of its corner point, along with a width and height. To create a rectangle use rect(x, y, w, h) where (x, y) are the coordinates of the corner point,w is the width, and h is the height.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(255)
  rect(100, 150, 200, 100)
}

Like before, if its easier to define rectangles using its center point instead of the top-left corner, change the rectangle drawing mode by calling rectMode(CENTER) once inside the setup() function. Then on, any calls to rect(x, y, w, h) will set(x, y) are the coordinates of the center point.

function setup() {
  createCanvas(400, 400)
  rectMode(CENTER)
}

function draw() {
  background(255)
  rect(200, 200, 200, 100)
}

In geometry, an angle defines the degree of rotation of a line. Typically, these are measured in radians or degrees.

Angles increase clockwise, with the zero being the horizontal line. Rotation by half of a circle equals 180° or π radians, π being roughly 3.14159. If you think of a clockface, then 3pm corresponds to 0°, 6pm to 90° or π/2 radians, 9pm to 180° (π radians), midnight to 270° (3π/2), and 360° (2π) would bring you back to the horizontal line.

P5.js expects angles to be in radians, but its usually easier to use degrees when starting out. We'll set angleMode(DEGREES) once inside setup().

let angle = 0 // degrees

An arc is a section of an ellipse and requires all the same parameters as an ellipse (coordinates of the center point, width, height) along with two additional start and stop angles. To create an arc use arc(cx, cy, w, h, start, stop) where (cx, cy) are the coordinates of the center w and h are the width and height of the ellipse, start is the starting angle of the arc, and stop is the stoping angle.

function setup() {
  createCanvas(400, 400)
  angleMode(DEGREES)
}

function draw() {
  background(255)
  arc(200, 200, 200, 100, 0, 90)
}