Drawing Shapes

Authored by John Kuiphoff


P5.js refers to a program as a sketch. So, it makes sense to begin by learning how to drawing shapes onto the screen using code.

P5.js supports the following shapes:

Creating an Empty Sketch

To begin, open up the 'sketch.js' file inside of the empty-example folder using Sublime Text (or any other code editor). This file includes the following code:

function setup() {
  // put setup code here
}

function draw() {
  // put drawing code here
}

There are two functions included in this sketch. If you are new to programming, a function can be thought of as the English equivalent as a 'verb' - it does something. The setup() function will run a block of code (contained inside of it's two curly braces) one time when the sketch first loads. During the next step, we will determine what size (in pixels) we would like our sketch to be. The draw() function will run a block of code continuously - over and over and over again. It's almost like a flip book.

P5.js includes many functions (not just setup() and draw()). Let's add another function createCanvas() inside of our setup() function to determine how big we want our sketch to be:

function setup() {
  // set canvas size
  createCanvas(600, 600);
}

function draw() {
  // put drawing code here
}

The createCanvas() function requires two parameters: width and height. This sketch will be 600 pixels wide and 600 pixels high. Parameters are separated by commas. We also added a comment - // set canvas size to our code. This will be ignored by our sketch when it runs, but it helps us, as programmers, to understand what the code is doing.

Next, we will draw an ellipse inside of the draw() function. The ellipse() function requires four parameters: x position, y position, width and height.

function setup() {
  // set canvas size
  createCanvas(600, 600);
}

function draw() {
  // draw a circle
  ellipse(300, 300, 250, 250);  
}

Try running this example in your web browser to make sure that you typed everything in correctly:

Color: white, black & grey

Now this looks pretty much like the same sad circle we saw in the previous tutorial. Let's make the circle grey - it'll cheer it up, at least a little.

In P5.js, colors are determined by numbers. In the example below, we are using the fill() function to choose what shade of grey we'd like the circle to be. To make a grey circle, we will need to provide the fill() function with a number from 0 - 255.

To create a grey ellipse, you can use the following code:

function setup() {
  // set canvas size
  createCanvas(200, 200);
}

function draw() {
  // set a fill color
  fill(125);

  // draw a circle
  ellipse(100, 100, 150, 150);  
}

Use the slider to see how changing the parameter in the fill() function changes the ellipse's fill color:

Color: all colors

What if we want the circle to be red, green, blue or purple? We can provide the fill() function with three parameters (red, green, blue). For example, fill(10, 100, 100); would allow us to make an ellipse that is greenish-blue. It's a bit like mixing paint colors.

function setup() {
  // set canvas size
  createCanvas(200, 200);
}

function draw() {
  // set a fill color (red, green, blue)
  fill(0, 180, 180);

  // draw a circle
  ellipse(100, 100, 150, 150);  
}

Try using the sliders below to see how you can mix these three colors:

Changing the stroke (outline) properties

You can easily change the stroke properties of any shape. By default, our ellipse has a black stroke that is 1 pixel thick. What if we wanted a blue stroke that is 10 pixels thick? Try the following in your code editor:

function setup() {
  // set canvas size
  createCanvas(200, 200);
}

function draw() {
  // set a fill color (red, green, blue)
  fill(0, 180, 180);
  
  // set stroke properties
  stroke(0, 0, 255);
  strokeWeight(10);
  
  // draw a circle
  ellipse(100, 100, 150, 150);  
}

Or, how about completely eliminating the stroke? You simply specify noStroke();

function setup() {
  // set canvas size
  createCanvas(200, 200);
}

function draw() {
  // set a fill color (red, green, blue)
  fill(0, 180, 180);
  
  // remove stroke
  noStroke();
  
  // draw a circle
  ellipse(100, 100, 150, 150);  
}

Drawing Two Shapes

Our circle gaining some personality and wants a friend to hang out with now. They grow up so fast! So, we are going to provide our circle with a triangle buddy. To draw a triangle, we will need to use the triangle() function - it requires six parameters (x1, y1, x2, y2, x3, y3). Type the following code into your text editor to add a triangle:

function setup() {
  // set canvas size
  createCanvas(400, 200);
}

function draw() {
  // set a fill color (red, green, blue)
  fill(0, 180, 180);
  
  // set stroke properties
  stroke(0, 0, 255);
  strokeWeight(10);
  
  // draw a circle
  ellipse(100, 100, 100, 100);  
  
  // draw a triangle
  triangle(200, 150, 250, 25, 310, 150);
}

Notice something? Our new triangle buddy has inherited the same properties of our circle. That's not cool - the triangle needs to have it's own identity. Let's change some of the triangle's properties. And while we are at it, let's change the background color of our sketch:

function setup() {
  // set canvas size
  createCanvas(400, 200);
}

function draw() {
  // set background color
  background(200, 200, 225);

  // set a fill color (red, green, blue)
  fill(0, 180, 180);
  
  // set stroke properties
  stroke(0, 0, 255);
  strokeWeight(10);
  
  // draw a circle
  ellipse(100, 100, 100, 100);  
  
  // set a new fill color
  fill(255, 0, 0);
  
  // set a new stroke property
  noStroke();
  
  // draw a triangle
  triangle(200, 150, 250, 25, 310, 150);
}

Ok, that's a little better now. We choose a new fill color for the triangle after we drew the circle. It's almost like painting:

Experimenting with other shapes

Now that we have gotten comfortable drawing circles and triangles, let's try some of other shapes. The links below link to the P5js documentation. Developers spend a lot of time looking at documentation when learning a new programming language.

Rotating Shapes

Rotating shapes using P5.js is a little bit tricky. It requires use of the translate() function. This function helps to create 'pivot points' by temporarily moving the coordinate grid (using push() and pop()) instead of the shape itself. Sound confusing and weird? Well, it is - but you can get a better grasp on the concept this by reading a detailed explanation using the Processing programming language.

The example below draws three rectangles: a red one with no rotation on the left, a green one rotated 45 degrees in the middle of the screen and a blue on with no rotation on the right.

The rotated green rectangle begins by calling the push() function. This function starts a new drawing state. Then we conceptually move our graph paper (or sketch) 200 pixels to the right and 100 pixels down using the translate() function. Then we rotate tell P5js that we want to rotate our graph paper or sketch (not the shape actually) 45 degrees (converted from radians). Then, we draw a normal rectangle on a moved and rotate sketch paper (which will make the rectangle appear to be moved and rotated). Finally, we call the pop() function to restore the original drawing state.

function setup() {
  // set canvas size
  createCanvas(400, 200);
}

function draw() {
  
  // set background color
  background(255);
  
  // remove stroke
  noStroke();
  
  // set rectMode for all three rectangles
  rectMode(CENTER);

  // draw a red rectangle
  fill(255, 0, 0);
  rect(100, 100, 50, 50);
  
  // draw a green rectangle - rotated 45 degrees
  fill(0, 255, 0);
  push();
  translate(200, 100); 
  rotate(radians(45));
  rect(0, 0, 50, 50);
  pop();
  
  // draw a blue rectangle - without any rotation at the top-left of the screen
  fill(0, 0, 255);
  rect(300, 100, 50, 50);
  
}

Additional Resources

comments powered by Disqus