Your browser does not support the canvas tag.

Week 2

Q: How many times can you fold a regular sheet of paper (0.099mm-thick) in half?
Ray Kurzweil Ted Talk

Variables
In Processing, to create a variable you need to define what kind of information that variable is going to hold. You have to designate what the variable is going to be before you use it. In nerd terms this is called being "strongly typed". The most common variables in processing are:

• int (a whole number)
• float (a number with a decimal)
• boolean (true or false)
• color (red, green, blue, alpha)
• String (text)
String we'll save for another day but the other variables are explained on this page.
In the example below we create an int called var1 (the name could be anything we want), and give it a value of 200. Then when we make our circle we use the variable instead of a number. Declaring the variable before the setup area means the variable is "global" and accessible throughout the entire sketch. You can also declare a variable within a section, these variables are "local". For example, if you declared a variable within setup you would not be able to access it in the draw section.
• global if declared outside a function can be used everywhere
• local if declared inside a function can ONLY be used in that function
```int var1 = 200; // "var 1" is the variable name.
void setup() {
size(400, 400);
}
void draw() {
background(255);
ellipse(var1, 250, 100, 100);
}```
Whup-de-doo right? Well the power of variables is we can change it each time the program cycles through the draw routine. Add this line inside the draw area and play the sketch.
var1 = var1 + 1;
There is a shortcut way of writing the line which is
var1 ++;
The ++ adds 1 to the value of var1 each time through the program. (So when they came out with C++ it was a clever programmer joke - as a rule programmers are hi-fricking-larious.)

To make the ball go faster try

var1 += 5; // adds 5 to the variable var1 each time.

Converting from a float to an int
You can make a float an int and an int a float, but if you just set one to the other like this:
float joeFloat = 2.8;
int joeInt = joeFloat;
you will get the error "cannot convert from float to int", instead you need to use int() and float() like this:
float joeFloat = 2.8;
int joeInt = int(joeFloat);

Notice that when you do this the int will round down so joeInt becomes 2

If Statements
But how do we get our ball back? We need an "if" statement.

```int var1 = 200;
void setup() {
size(400, 400);
}
void draw() {
background(255);
var1 ++;
ellipse(var1, 250, 100, 100);
if (var1 == width) { // the conditions of the statement
var1 = 0; // the results if true
}
}
```
Inside the parenthesis are the conditions of the if statement - the results of the if are in the curly brackets. You can have more than one thing happen as a result of an if statement, and more than one condition of the if.

Notice the double "==" sign? One = means we are setting one value to another the double == means we are comparing one side to the other. This is one of the most common mistakes you will make. When this happens you will get an error message that says something like "you cannot convert from int to boolean" - meaning the program thinks you are using the = to set something to something else and it doesn't like it.

Logical AND, and Logical OR
Let's say you wanted to have someting happen if two conditions are met, in this case x equals ten and y equals 12. You could write it like this.

```  if(x == 10){
if(y == 12){
// do something.
}
}
```
This can get sort of confusing to follow - you can combine both with logical AND which uses two ampersands
```  if(x == 10 && y == 12){
// do something.
}
```
Logical OR means it will be true if either of the conditions are met. The OR symbol is two vertical slashes, often called "pipes"
```  if(x == 10 || y == 12){
// do something.
}
```
My friend has a Gallery in LA called AND OR Gallery.

"Else if" and "else"

If we follow an if statment with an "else if" it means, it the first condition is not met, but this second condition is, perform the following actions. If you follow with an else statment it means if the fist condition is not met, then do the following. You can have multiple else if's.

In the following code we are checking the condition of the variable x. In order for the first if statement to be true var1 has to be greater than 1 and less than 20. If this is true then the fill will be red and the stroke will be yellow. Otherwise if var1 is greater than 20 and less than 60 it will be red. If neither of those conditions are met the fill will be yellow.

```
if(var1 > 1 && var1 < 20){
fill(255, 0, 0);
stroke(0, 0, 200);
}
else if(var1 > 20 && var1 < 60){
fill(255, 0, 0);
stroke(0, 0, 200);
}
else{
fill(255, 255, 0);
stroke(0, 255, 0);
}
```

Printing
keeping track of your variables can be tricky. fortunately you can easily "print" your variables as the sketch runs. Add the line

println(var1);
to your sketch and the value will be printed out at the bottom of the programing window. You can write a phrase by putting it in quotes
println("joe is good");
or you can combine variables and phrases with the "+"
println("the value is" + var1);

Random
Random() will return a random value as a float.
```float randomX;

void setup() {
size(400, 400);
}

void draw() {
background(255);
randomX = random(400); // creates a random number between 0 and 400
println(randomX);
ellipse(randomX, 250, 100, 100);
}

```

If you want to turn the results into an int (whole number) you need to convert the float to an int. To do this put the float value inside an int() argument - here's an example.

```float randomX;
int num;

void setup() {
size(400, 400);
}

void draw() {
randomX = random(5, 10);

num = int(randomX);
println(num);
}
```
Notice that the number is between 5 and 9 - this is because converting to an int rounds DOWN the float. So a float that is 9.9999 will be 9 when converted to an int.

Keyboard and Mouse Click
We've already used the mouse to get locations, but now we can get the clicks and keyboard input as well.

```color RanColor;

void setup() {
size(300, 300);
RanColor = color(200, 10, 189);
}

void draw() {
background (RanColor);
}

void mousePressed(){
RanColor = color(random(255), random(255), random(255));
}

void keyPressed(){
if (key == 'w'){
RanColor = color(255, 255, 255);
}
}
```

Using Booleans
A boolean is a variable that has only two states, true or false. Unless you declare a boolean to be true, the default will be false.

```color RanColor;
boolean goCrazy;

void setup() {
size(300, 300);
RanColor = color(200, 10, 189);
}

void draw() {
background (RanColor);
if (goCrazy == true) {
RanColor = color(random(255), random(255), random(255));
}
}

void mousePressed() {
goCrazy = true;
}

void mouseReleased() {
goCrazy = false;
}
```

```
float counter;
void setup() {
size(400, 400);
}
void draw() {
counter += random(3);
if (counter > 50) {
println("joe is good");
}
}
```
This works, but what if I only want it to print ONCE, not over an over like a maniac. That where a boolean could come in handy.
Initially, we set the flag to false, then check two conditions, whether counter is greater than 50 AND whether the flag is false. If both conditions are met we print our message and set the flag to true, so it only happens once.
```float counter;
boolean counterFlag;
void setup() {
size(400, 400);
}
void draw() {
counter += random(3);
if ( counter > 50 && counterFlag == false) {
println("joe is good");
counterFlag = true;
}
}
```

Color variable
There is a special varaible just for color.
```color pinkcolor = color(255, 50, 100);
void setup() {
size(400, 400);
}
void draw() {
background(255);
fill(pinkcolor);
ellipse(200, 250, 100, 100);
}
```

you can extract just the red green or blue colors from the color variable with red(), green() and blue().

```color pinkcolor = color(255, 50, 100);
void setup() {
size(400, 400);
}
void draw() {
background(255);
fill(pinkcolor);
ellipse(200, 250, 100, 100);
int r = red(pinkcolor);
println(r);
}
```

mousePress() vs mousePress
If you look in the API, you'll notice that there is a variable called mousePressed() AND a variable called mousePressed. Here's the difference.
You can check mousepress during the draw, like you would a boolean (see below). It will be either true or false. If you create a separate function with void mousePressed(), like the example above, the entire code in this section will be executed when you press the button. In programming terms this is called an interrupt because the program is always listening for the mouse and will stop whatever its doing when the mouse is clicked to preform this code.
Upsot - we mostly use mousePressed() as a function, because it only happens ONCE when the mouse is pressed, and this is generally what we want when pressing the button, however, if you want something to happen continually when the mouse is pressed using mousePressed is a valid option.

```color RanColor;

void setup() {
size(300, 300);
RanColor = color(200, 10, 189);
}

void draw() {
background (RanColor);
if(mousePressed == true){
RanColor = color(random(255), random(255), random(255));
}
}
```

In Class alter your painting from last week so that it animates. Use iterating integers and floats, booleans, and if statements and random to turn your paining into an animation.

For Loops
For Statements have three parameters: where a variable starts, where it ends, and how much it iterates by. The program will loop through each iteration of the variable in the for loop before it continues on with the rest of the program.
```void setup() {
size(600, 600);
smooth();
}

void draw() {
for (int i = 0; i < 30; i ++) {
ellipse(i*20, 20, 20, 20);
}
}

```
Given the example code, can you create the image below? When do I use a for loop and when do I use an if Statement?
If you are asking a question, use an if statment.
• Is this ellipse bigger that another ellispe?
• Is the counter variable greater than 300?
• Is the color of the square the same color as the triangle?
If you need a whole bunch of something, use a for loop.
• I need to draw a grid of lines
• I need to make 100 random colored circles
If you need a whole bunch of something, but you have a question about those things, use an if statment INSIDE a for loop.
For example: I want to draw a thousand circles at random locations. But I also want to the circles on the right side of the screen red and green on the left. In this case I have a question (what side is it on) about a whole bunch of things.
```
void setup() {
size(400, 400);
noStroke();
}
void draw() {
background(200);
for (int i = 0; i < 1000; i ++) {
float xloc = random(width);
if (xloc > width/2) {
fill(255, 0, 0);
} else {
fill(0, 0, 255);
}
ellipse(xloc, random(height), 10, 10);
}
}

```

terms and concepts you should become comfortable with

• int
• float
• boolean
• global variable
• local variable
• color variable
• if statments
• && and ||
• random
• for loop

Lab Week 2

• Play Light bot - get to and attempt level 10.
• Make the trippiest interactive "screen saver art" you can. Use all the techniques we have learned so far in the first two days. This animation should be big so use size(displayWidth, displayHeight); as your size - this will make it the size of the monitor you are working on.
• Read and write a short response to this article by Jaron Lanier

Are you lost? Try looking at the first four tutorials on this page.