let's learn about variables and if statements!

Led by Gina Lee and Zoyah Shah

Description

This workshop will provide an introduction to variables and if statements by using real life examples. You will learn about why variables and if statements are important, and how to use them in p5.js.

Preview

Alt text: Screenshot from the workshop describing what variables are. An example of variables using a basket of apples, with text description next to it.

Alt Text: Screenshot from the workshop describing what if statements are. Image example includes a green traffic light, a right arrow emoji, and a car.

Step by Step Guide

Variables

1. What is a variable?

2. Variables are a container that holds information that you can access and change. Variables are a key component in p5.js, and coding in general, because they allow you to have more concise code and allow you to edit your code easily.

3. One way to visualize variables is through an example using a basket of apples. We see that this basket has 4 apples in it right now, but that can change depending on if we add apples or remove apples from the basket, but we always know it will be a number. You can talk about the number of apples in the basket without actually knowing how many apples there are. This is essentially how variables work.

4. When it comes to naming your variables, it’s good practice to be consistent. CamelCase is a common variable naming system.

5. The way CamelCase works is that single word variables are all lowercase. Multi-word variables start lowercase and the second word, and third word, and so on are uppercase with no spaces between the words. Variables cannot start with a number. Examples of variables would be “color,” “myName,” “myFavColor.”

6. Another way to visualize variables would be with name tags. Name tags typically say “Hello, my name is ___.” The blank would be someone’s name. We can change the name of the blank if we give the name tag to someone else. This is just how variables work. We can change the blank at any time.

7. (slides 8-10)

When it comes to writing variables in your code, you would do something like:

My name = _____
My age = _____
My favorite color = _____

In p5.js this would look like:

var myName = “_____”;

var myAge = “_____”; var favColor = “_____”;

When it comes to writing variables you start the line with “var” to indicate to the computer that you are writing a variable. This is followed by the variable name, an equal sign, whatever you input as the variable in quotation marks, and ends with a semicolon.

If Statements

1. What is an if statement?

2. We can identify some real life examples of if statements. Some would include:

   If I click the light switch, then the light turns on. If I am hungry, then I eat. If it is raining, then I bring my umbrella.

3. If statements are essentially a form of cause and effect. They are decision making statements that tell a program what to do based on a set of rules.

4. If statements are important because they are a part of the computer’s decision making process. It tells a computer what to do, and when to do it. If statements allow you to add interactions to your code.

5. Here are a couple examples of if statements: https://editor.p5js.org/zshah/sketches/ZYKqBwn9m https://editor.p5js.org/ginalee/sketches/pbooFyVOn

6. (slides 18-19)

The syntax for variables looks like this:

if(                    ){


}

We can note the format of the statement— it begins with “if” followed by parenthesis and your “cause”, then a curly bracket. The next line would contain your “effect,” and it would end with another curly bracket.

7. If we were to fill this in using a real life example from earlier it would look like this:

   if(Traffic light is green){

    The car can go

   }

8. If an if statement is not true, we use something called “Else.”

9. Going back to real life examples:

If I click the light switch, then the light turns on. Else, light stays off. If I am hungry, then I eat. Else, I wait till dinner time. If it is raining, then I bring my umbrella. Else, I leave my umbrella at home.

10. (slide 23)

To incorporate this into the syntax it would look like this:

if(Traffic light is green){ The car can go } else{ The car stops. }

10. (slides 25-26)

In p5.js it would look like this:

Links to tools and resources:

If Statement Examples

https://editor.p5js.org/zshah/sketches/ZYKqBwn9m https://editor.p5js.org/ginalee/sketches/pbooFyVOn

https://editor.p5js.org/ginalee/sketches/pbooFyVOn

Activity to try out If Statements:

https://tinyurl.com/39vvnseb

For this activity, you can create a copy of the p5.js file, and use the original as a reference. Try creating your own interaction using if statements! An idea could be a shape that when you click it it changes to a different shape or color.

p5 Reference Page

https://p5js.org/reference/

Slides

https://docs.google.com/presentation/d/1x1s1bZ9_hqwWHsP_eVGgCmv-q98RmuW060N0LIvln2I/edit?usp=sharing