Variables
Time 1.7 hrs

Difficulty Beginner
Prerequisites Processing
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None

### Blurb

Learn how to use variables. Declare them, add them, subtract them, and perform many other logical operations.

### Outline

 Learner OutcomesStudents will: ... Competency Focus ... Interdisciplinary Connections ... ReflectionWhat was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used? ... CreditsAny CC attribution, thanks, credit, etc. Image by Gerd Altmann from Pixabay

5 mins
Variables
The Pitch
• Variables are awesome because they let our code change.
• Using variables, we can create things that move, animate, change colour, and disappear.
• They let us store data, as well as manipulate and change data over time.
• Without variables, we couldn't create games or animations.

10 mins
What is a variable?
Getting Started
• A variable is a way to store information as we write code.
• The best way to think of a variable is like a bucket:

• If you have a new bucket, it would start out empty.
• Then, you could put stuff in the bucket, dump it out, and put other stuff in the bucket.
• The important part: the bucket is reusable. That's why we call it a variable.

• Conversely, a constant is a way to store information that doesn't change.
• For example, the value of Pi is a constant. It's always the same.
5 mins
Declare a variable
Theory
• Before we can use a variable, we must create it.
• Creating a new variable is called declaring the variable.
• To declare a variable, we use a keyword like var or let.
• Then we give our variable a name:
``````var myNewVariable;
``````
• When we name a variable, we're naming the "bucket": the contents of the bucket can change.
• In many languages, we would have to declare the type of variable we were using, such as int, string, etc.
• Luckily, in Javascript, we can declare a variable without knowing it's type.
• We can also declare more than one variable at a time by using commas:
``````var playerName, hitPoints, score;
``````
5 mins
Naming variables
Important Stuff
• Writing readable code is important.
• Your teacher will thank you.
• Your peers will thank you.
• Your future self will thank you!
• One of the best ways to write readable code is by using good variable names.
• Consider the following:
``````if(y > 2){
m = m+100;
j = j+5;
}
``````
• What's happening here? I'm not sure...
• With some readable variable names, it becomes more clear:
``````if(level > 2){
playerHealth = playerHealth+100;
difficulty = difficulty+5;
}
``````
• By reading the code, we could guess this is part of the player level-up.

• A common practice in programming is to use lower case for the first word, and capitalize following words.
• This is called camelCase (because of the humps!)
• There are other types of cases, but for now, practice using camel case for your variable names.
15 mins
Using Variables
Digging In
• You may recognize this guy from the Hello Processing tutorial.
• Daniel Shiffman has a great explanation for using variables in your code:

• Open up a new sketch and play with some variables.
• Can you use a variable for the size of an ellipse? Can you use it in other places?

5 mins
Assign a variable
Theory
• To set a variable to a specific value, we use one equal sign.
``````var playerScore = 0;
``````
• This is called variable assignment, because we assign a value to the variable.
• One the variable has been declared, we can assign values without needing a var or let keyword.
``````playerScore = 50;
``````
• We read this as: playerScore is 50.
5 mins
Compare a variable
Theory
• To compare values, we use two equals signs.
``````if (playerHealth == 0) {
// Game over!
}
``````
• This is called a comparison operation.
• We read the above example as: if playerHealth equals 0, then game over!
• There are other types of comparison, such as not equal to, which is:
``````if (playerHealth != 0) {
// Player health is not equal to 0
}
``````
• As well as greater than,and  greater than or equal to:
``````if (score > 5000) {
// Greater than 5000
}

if (score >= 3000) {
// Greater than or equal to 3000
}
``````
• And less than, and less than or equal to:
``````if (playerHealth < 50) {
// Less than 50
}

if (playerHealth <= 0) {
// Less than or equal to 0
}
``````

10 mins
Conditionals
Hands On
• Any time we use an if, elseif, or else, these are called conditionals.
• We can check a condition, like `mouseX > 50` to enable something to happen only when that condition is true.

• Conditionals are the core of most programming.
• Without conditionals, we could write a sequence of steps, but we couldn't make any decisions in our code. It would execute the same every time.
• Conditionals, combined with variables, allow for our program to change.
• See the example below for how a conditional can let us change the direction of a bouncing ball:

40 mins
Designing with Variables
Evidence
• With the power of variables, we can start to make things that move and change.
• Your goal is to design a scene where several different objects are changing in different ways:
• Bouncing around the scene
• Getting bigger and smaller
• Changing colours
• Changing shapes
• Something else?
• Create a new p5js sketch. Be sure to save it as you go!
• Consider how you can use variables and conditionals to change your drawing over time.
• Feel free to grab some graphing paper and sketch out your scene.
• When you're happy with your creation, use the share option to submit the url to your sketch.

## Embeds

There are no records to display.

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support