TIS - Gibbon - Free Learning

Variables

Time 1.7 hrs

Difficulty Module 2

Prerequisites Processing

Departments Career & Technology Studies

Authors Sandra Kuipers

Groupings Individual

Minimum Year Group None

Unit Overview
Enrol
Content
Resources
Outcomes
Exemplar Work

Blurb

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

Outline

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

This page requires you to be logged in to access it. Please login and try again.

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.

Images

Embeds

There are no records to display.

Single Sign-on

Login

Blurb

Outline

Links

Images

Embeds