Time 1.7 hrs

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


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


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
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
  • 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
  • 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
  • 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
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
  • 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.
There are no records to display.
Powered by Gibbon v27.0.00dev

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