Unit 1 Drawing, Variables, Random
How can code be used as a creative and expressive medium?

2.1 Center elements with built-in variables: width and height

How can I create custom variables to hold values in my p5.js projects?


Overview

In this learning activity, students create their own variables to set the position, size and grey scale color of their shapes without repeating code.

Suggested Duration

45 minutes

Objectives

Students will be able to:

  • Identify repeated values in their code and use variables in their place.
  • Create and implement custom variables

Vocabulary

Variables In CS, variables hold an assigned value or data of a specific type, they can also hold arrays of values which will be introduced later.
Width System variable that holds width of canvas as declared in set up.
Height System variable that holds height of canvas as declared in setup.
MouseX System variable that holds the current x-position of the mouse.
MouseY System variable that holds the current y-position of the mouse.
console.log() A function that logs a value to the console when the program is run.

Resources

Instructions

Center elements with built-in variables: width and height

We have already used two built-in variables in the previous learning activity: mouseX and mouseY. Variables are placeholder names for values that change over time. We type mouseX knowing that p5 will replace that name with a number that represents the latest X position of the mouse. This number will change as the user moves the mouse across the canvas.

Next we will use two other variables built into p5: width and height. In the following example, their values are 600 and 240 ––the dimensions we gave our canvas when we created it in the setup function.

In the sketch below we use width and height to place an ellipse at the center of the screen:

The advantage of using these variables to place our ellipse is that, if we change the size of our sketch later, the ellipse will still be centered. To prove this, try changing the width and height of the canvas to 500 and 200, and run the sketch again.

width and height can also be use to place shapes in positions like "a third of the screen across", or "two thirds of the screen across", or "two thirds of the screen down". Try drawing these:

  • ellipse(width/3, height/2, 60, 60);
  • ellipse(2*width/3, height/2, 60, 60);
  • ellipse(width/3, 2*height/3, 60, 60);