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

2.2 Custom Variables

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

90 minutes

Objectives

Students will be able to:

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

Student Outcomes

Abstraction:

  • Describe how I might use patterns to express an idea.
  • Describe different things I tried in order to achieve a goal.
  • Explain why using patterns is necessary when creating with a computer.

Algorithms:

  • Describe more than one set of instructions that might complete a task.
  • Describe how instructions can have different outputs depending on inputs.
  • Explain why I used specific instructions to complete a task.
  • Compare and contrast my instructions with other instructions that complete the same task.

Programming:

  • Experiment with the commands of a programming language.
  • Explain why I chose specific commands to communicate my instructions.
  • Discuss what can and cannot be done with a specific set of commands.

Vocabulary

Scope Where a variable can be ‘seen’ by the computer within a program.
Global Variables Variables declared outside of a function which can be used in any function.
Local (script) Variables Variables declared within a function whose scope is limited to that function.
var Declaration of variable words in p5.js.

Resources

Position Elements With Custom Variables

Suppose we want to have 5 ellipses in a row. This is one way to do it.

Here is the code of the example above. Try moving the entire row 10 pixels down, we have to change all five y positions, setting them to be 70 instead of 60:
  • ellipse(120, 70, 60, 60);
  • ellipse(200, 70, 60, 60);
  • ellipse(280, 70, 60, 60);
  • ellipse(360, 70, 60, 60);
  • ellipse(440, 70, 60, 60);

This is a repetitive task, and error-prone. Instead, we can use variables. So far, we have used p5 built-in variables: mouseX, mouseY, width and height. We can read their values, but not change them. Our next step is to create our own variables! There are three steps to creating a variable:

  1. Declare - Declaring our variable is basically just telling the program "hey! I'm creating a variable, and this is what it's going to be called." All you need to do when you want to declare a variable is write the term "var variableName".
  2. Initialize - give variableName a value. This is called an assignment operation. We are assigning a value to our variable. If I write variableName = 50, every time I use my variable name, the program will replace it with the number 50.
  3. Use the variable - Your code won't break if you don't use the variable, but then what was the point? If we add an ellipse at ellipse(100,100,variableName,variableName), our ellipse will be 50px wide and 50px high.

These three steps will be used in three lines of code. See the image below.

Notice where we placed these lines of code. The declared variable is way at the top before setup. We gave it a value in setup, and then use it in our draw function although we can use it in setup as well. Play with the variable here. Change the value or use it for the x or y location of the ellipse.

To make the code in the previous example more efficient, we'll declare our own variable, and call it y with var y. Then we assign a value to our variable. We told the program that there is a container called y. Now we need to give it a value to hold inside that container. We will do that by setting the value of our variable to 70. Now if we want to move all five ellipses 10 pixels down, we can just change the value of our variable: one line of code instead of five. See the code below and here is the link to the code.

Keep in mind that it does not matter what we name these variables. If we are creating these variable we can call them whatever we want. Try changing the name to any random word or letter to demonstrate that it is just a "container" word that holds a value which we can then apply and quickly change in multiple places in our code. In this example I called the variable 'bob' and it works the same way.

It is good practice, however, to give our variables names that make sense to us so that we would remember what they are used for. If you are using a variable for a position on the y-axis, it's a good idea to call that variable "y", "ypos" or the like.

There is also a shortcut to creating our own variables. We can declare, and initialize a variable in one line of code. See the image below:

You'll see custom variables created this way very often, but it won't work using built in variables like width, height, or random. In this code change the value of variableName to 70, then set the value to the width of the canvas using the built in variable 'width'.

Change the Position of the Face

Draw a simple face here by adding eyes and a mouth. No matter where you place it, the positions of face, eyes, and mouth, are going to be relative to the top left corner of the canvas:

Now let's create and initialize variables for the x and y location of the face. We can keep the values the same and nothing will change. Keep working on your drawing, but you can refer to this example, here.

Change the values of x and y and see what happens. You should notice that the face moved but the eyes and mouth are left behind. If you recall what we did in learning activity 4, we placed the shapes in relation to the canvas using width and height so that the placement of the shapes remained the same when we changed the canvas size. We'll need to apply this idea by placing the features in relation to the position of the face using the variables that we created.

Let's first position the features relative to the center of the face. We created a variable for the x position and y position of the face. Let's return those variables to their original location and then add the features based on that variable. If the left eye is 20 pixels to the left of the center of the face, and 20 pixels higher, the ellipse should be placed at (x-20,y-20). The right eye will be 20 pixels to the right of the center of the face, and at the same height as the left eye placing it at (x+20,y-20). Reference this example.

Finally, we can change the values of x and y and all of the pieces will move together.