1-2 More Drawing Functions

A Quick Summary (so far)

Last time I asked you to research several basic p5.js drawing functions, here’s a quick recap:

Function	Description
point(x, y)	Draws a single pixel (dot) at location (x, y) on the canvas.
line(x1, y2, x2, y2)	Draws a straight line between points (x1, y1) and (x2, y2).
rect(x, y, width, height)	Draws a rectangle of the given width and height, whose upper-left corner is at coordinate (x, y).
ellipse(x, y, width, height)	Draws an ellipse of the given width and height, whose center is at coordinate (x, y).

Many other functions support drawing shapes in p5.js, in this lesson we’ll look at some of them and how greyscale works.

rectMode() and ellipseMode()

By default, a rectangle is drawn by first specifying the (x,y) coordinate of its top-left corner, in the example below (10,20):

rect(10, 20, 100, 200)

1	rect(10, 20, 100, 200)

It’s possible to change this behaviour such that the (x,y) coordinate refers to the center point of the rectangle by using the rectMode() function. Here’s a complete example:

/* Name: Vik-20
   Date: July 8, 2021
   Desc: Demo of rectMode() function
*/

// This function is called once to "setup" the drawing area
function setup() {
  // Create drawing area: 400px wide x 400px tall 
  createCanvas(400, 400)
}

// This function is called 60 times per second
function draw() {
  // Use dark grey background
  background(123)

  // Change rectMode to CENTER
  rectMode(CENTER)
  rect(10,20,100,200)

  // Change rectMode back to default (CORNER)
  rectMode(CORNER) 
  rect(200,200,150,100)
}

/* Name: Vik-20

Date: July 8, 2021

Desc: Demo of rectMode() function

// This function is called once to "setup" the drawing area

function setup() {

// Create drawing area: 400px wide x 400px tall

createCanvas(400, 400)

}

// This function is called 60 times per second

function draw() {

// Use dark grey background

background(123)

// Change rectMode to CENTER

rectMode(CENTER)

rect(10,20,100,200)

// Change rectMode back to default (CORNER)

rectMode(CORNER)

rect(200,200,150,100)

}

This will cause the rectangle on line 19 to be drawn with its center at (10, 20). Since the height and width are unchanged the rectangle will appear to be drawn partially off the canvas. To adjust this so that it looks the way it did before, we’d need to revise the (x,y) center coordinate like so:

rect(60, 120, 100, 200)

1	rect(60, 120, 100, 200)

Note that p5.js will assume that you want all rectangles drawn after calling rectMode(CENTER) to be drawn using this mode. On line 22, I changed it back to the default of using the top-left corner.

Try This! There is also an ellipseMode() function that works the same way for drawing ellipses, however, you may have noticed that the default mode for ellipses is CENTER rather than CORNER.

Code Commenting

You’ll notice something else new in the example code above. I’ve included what are called code comments to explain what certain lines of the program are doing. Code comments are intended to help human readers understand your code, and are ignored by p5.js when the program is run.

There are two styles of comments. The first is for comments that span multiple lines:

/* Name: Vik-20
   Date: July 8, 2021 
   Desc: Demo of rectMode() function 
*/

/* Name: Vik-20

Date: July 8, 2021

Desc: Demo of rectMode() function

Everything between the /* and the */ is ignored by p5.js when you run the program. It is a best practice in programming to include a multi-line comment (a.k.a. a file header comment) at the top of all programs stating the author’s name, the date it was last modified, and a brief description of the code’s purpose.

Single line comments begin with // and any text following that on that line is ignored when the program is run by p5.js. Consider:

// This function is called once to "setup" the drawing area
function setup() {
  // Create drawing area: 400px wide x 400px tall 
  createCanvas(400, 400)
}

// This function is called once to "setup" the drawing area

function setup() {

// Create drawing area: 400px wide x 400px tall

createCanvas(400, 400)

}

Line 1 is a single-line comment explaining the purpose of the setup() function that follows it, and line 3 is a comment explaining the createCanvas() function. Adding single-line comments to explain code is a balancing act. You don’t want to explain obvious things, just parts of your code that might be tricky for others to quickly understand. As a beginner, a good rule of thumb is about 1 comment for every { block } of code that follows it, sometimes a little more.

NOTE: Going forward in this tutorial I will not include file header comments, and I will not comment code that I have already explained and you should already understand. I’ll focus on commenting only new code in future examples. This is mainly to shorten the length of my examples in case you are printing these notes.

You should always include a file header comment and complete single-line code comments in every program that you write.

Greyscale

Shades of grey are defined using a range of integers between 0 (black) and 255 (white), in between are various shades of grey. You already have experience passing a greyscale value into the background() function to control the lightness/darkness of the drawing canvas.

We’ll talk about adding more vibrant colours next time!

stroke() and fill()

By default, p5.js uses black (0) for the line colour and white (255) for the fill colour when drawing shapes. You can change the outline colour by using the stroke() function, and the interior colour by using the fill() function. Lines and points are not affected by fill() since they are not 2D shapes.

The following code will draw a white pixel, white line, and a rectangle and ellipse using a white line colour and light grey interior.

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

function draw() {
  background(123)
  
  // Change line color to white
  stroke(255) 
  // Change fill colour to light grey
  fill(200)

  point(10,10)
  line(10,20,350,50)
  //noStroke()
  rect(50,50,100,200)
  //noFill()
  ellipse(250,200,90,60)
}

function setup() {

createCanvas(400, 400)

}

function draw() {

background(123)

// Change line color to white

stroke(255)

// Change fill colour to light grey

fill(200)

point(10,10)

line(10,20,350,50)

//noStroke()

rect(50,50,100,200)

//noFill()

ellipse(250,200,90,60)

}

Note that stroke() and fill() are applied to all shapes drawn after these functions are called unless you call the functions again with a different argument value.

Watch out! Remember that the draw() function is called automatically over and over again. Any changes made to stroke and fill colours will continue to apply the next time the draw() function is run.

You can also eliminate the stroke() or fill() by calling the noStroke() or noFill() functions to make the outline or fill colour invisible (transparent). Just be careful not to try to draw a point() or line() after calling noStroke() or you won’t see them! Similarly, never call both noStroke() and noFill() together or you won’t see anything you are trying to draw. Try uncommenting lines 15 then 17 to see the effect of these functions.

You Try!

Write a program to draw the following pattern (use a 350 x 350 canvas):
With paper and pen/cil, draw a quick sketch of your dream “Virtual Pet” using points, lines, rectangles, and ellipses. Demonstrating all of the functions you’ve learned so far, create a program to draw your pet in p5.js.