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.
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:
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
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);