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:

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.
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;
}


Using Booleans as Flags
We can use booleans to change the flow of our code. If you come back from class and there's a sock on the door of your room, that means you can't come in for a while. Once the sock is gone you're free to enter. The sock is a boolean, it is either on the door, or not on the door, and it controls the flow of what happens. So far the things we are using to change a boolean like mousePressed() and keyPressed() are special events that the computer senses once. So we don't have to worry about the computer regestering every time the button is pressed, because some handy script handles that for us.
But let's say we have an int called counter that is going up by 1 and we want the script to print out "joe is good" when it gets over 20.


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.
If you need a whole bunch of something, use a for loop. 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


Lab Week 2


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