Processing+-+Data+Types+and+Variables

Maybe you remember playing with a toy as a child (or you’ve seen such a toy), where you have to put the round block in the round whole, and the square block in the square whole.
 * ​Data Types**

When a computer tries to figure out how to store information, it looks at information in several ways. When it stores information in a particular place, that place needs to be the right “shape.”

There are a few common shapes, and many less common shapes in Processing. We call these data shapes "data types."

A few of the most common data types in Processing are: int - whole numbers that can be positive or negative (Integers) boolean - true or false String - words or characters float - decimal numbers (positive or negative)

Exercise: Try to categorize each of the following pieces of data into their types of data:

"Chocolate ice cream" 12.345 -15 true 1003 -45.1 "false" (watch out - the last one is tricky!) Check your answers here: @Data Types Answers

We can also create our own data types using @Objects.

Before we store these values in the computer, we may want to be able to use them in some way. The first thing we'll do with them is print them out to the **console** (the black box at the bottom of the screen).
 * Printing Out**

will print out "blah blah" (try it now!)
 * print**("blah blah");


 * println(15);**

will print out 15, but it will be on it's own line!

Try printing out your name and other fun phrases until you are comfortable with this!


 * Math** **in Processing**

Sometimes, you might want to do to some math in Processing. In fact, the further along you get, the more math you'll want to use.

You can use the mathematical operators: + (plus) - (minus) / (divide) &#42 (multiply) as you usually would. However, Processing is even smarter than (some) humans and can actually do operations with the correct order of operations (PEMDAS).

Try it! Enter these statements into the setup section of a new Processing sketch. Before you do, however, see if you can determine the output. a) **println(4 + 6*10);**

b) **println((8-3)*2+15);**

c) **println(15*6/2);**

There is one other math operation that is very, very useful: % The % symbol stands for remainder. Can you determine what it does from trying these examples in Processing? a) **println(7%3);**

b) **println(3%2);**

c) **println(5%2);**

d) **println(10%5);**

We can use the % operator to determine if a number is even or odd, or to get the ones digit (or any other digit, actually!) in a large number.


 * Variables**

We can create our own places to store these bits of data, called **variables.** You can imagine each variable as a box where we can store one of these bits of data, and change what is in the box.

The data is stored in **memory** - you can't see it on the screen, but your program can access and change it. Each variable has a **name** and a **type** (remember, data types!)

To create a new variable (in Processing), you need to tell the computer 3 things: 1. The type of variable. 2. The name of the variable. 3. The first value that the variable will hold. (This is actually optional, although good practice.)

We do this in code: code format="java" int age = 28; code Can you identify the type, name, and initial (first) value?

We can do this with any of the types from above. Try it: Create a variable to store:
 * Your favourite flavour of ice cream
 * Whether or not it is raining outside
 * Your telephone number (no dashes!)

Run your program to make sure you didn't get any errors. Notice that nothing prints out or shows up. How can we know if what we stored was actually stored?

Answer: We can print it out! We can use the commands **print****** and **println** (that's LN at the end) will print out whatever you tell them to print out. So, we can just give these commands the variable name and it will print whatever the variable is storing.

Try it: Get **println** to print out your three variables from above. Check to see that they print out the values you expected! Here's how you'd print out age: code format="java" println(age); code

We can use and change the values of variables by calling their names. For example, code format="java" int kidsInClass = 9; //a new kid joins! kidsInClass = 10; code Whatever is on the right side (->) of the = sign, gets stored in whatever is on the left side (<-) of the = sign.
 * Variables with Math**

So we can do things like this: code format="java" int mealsPerDay = 2; //but I'm hungry! mealsPerDay = mealsPerDay + 3; //that's better! code What does mealsPerDay store now? (Try pasting this code into the setup section and printing out mealsPerDay.

Remember that variables on the left of = are storing and variables on the right of = are for calculations. What does this code do? code format="java" int pizzas = 10; int numSlices = pizzas*8; int numServings = numSlices/3; println("The number of servings is" + numServings); code (Try it!)

Notice that the + sign in the last line did not do addition. (Really! Go back and try it if you didn't already!)

How is this useful? Well, often we'll want to do math.

As well, we can use variables in handy ways, such as making our objects move!


 * Mouse Variables**

There are two variables that are built-in to every program (you don't have to create them). They tell us where the mouse is at any time.

They are called - mouseX and mouseY and both have a data type of int.

Since mouseX and mouseY are just numbers, they can be used anywhere that a number can be used. Try It! 1. Can you print out mouseX and mouseY in the draw section of your code? Start by printing them out on their own, on separate lines. Then, try printing them on one line with a comma between them.

2. Add a background command in the draw section of your program. Change one of the colors (R, G, or B) to be mouseX and another to be mouseY. Run your program to see what happens.

3. Make a shape follow your mouse. Remember, mouseX and mouseY are just locations on the screen! Hint: If you add a call to background(R, G, B) at the beginning of draw, you will not see the "old" shapes on the screen.

4. Then, see if you can make the shape run away from your mouse, like in this game (level 5): @http://hoodamath.com/games/duckthinkoutsidetheflock.php Hint: There are two other built-in variables - width and height (which give the width and the height of the program), that might be useful for #4.

Challenge: See if you can use a variable to move a rectangle on the screen! Hint 1: Think about what controls where the rectangle is on the screen. Can you change this in some way? Hint 2: Remember that the draw section repeats over and over and over and over. If you change the value of a variable in this section, it will change over and over and over and over!
 * Using Variables for Animation**

Can you get this car to drive?