Friday, January 9th, 2014 - 11:00 am - Columbia University: CUMC - Hammer 410

For Dr. Catherine Richards Course

If you’d like download Processing at the beginning and if you are savvy, follow along with Exercise(s) (~9 minutes in).

Thanks: Tom MacWright for creating the Big presentation system; Processing Instructor at 3rd Ward (forgot his name).

Code Exercises

Exercise A Setup

Copy and paste this code into the processing interface.

int ballSize = 150;

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

void draw(){
  		background(235,235,0);
  		ellipse(width/2,height/2,ballSize, ballSize);
	}

It should look like this

exercise a

Exercise A Setup code broken down.

Here we create the ballSize variable and set it to 150.

int ballSize = 150;

Here we are creating out setup to build a 400 by 400 pixel window.

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

Next, we create our draw loop, decide on a background color and position the 2D Primitive ellipse

void draw(){
  		background(235,235,0);
  		ellipse(width/2,height/2,ballSize, ballSize);
	}

Now hit the PLAY button.

You should see this pop-up on screen.

play a

Top

Exercise B Bouncing Ball

int movement = 0;
boolean increase = true;
int ballSize = 150;

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

void draw(){
  		background(235,235,235);
 		ellipse(movement,height/2,ballSize, ballSize);
  		if(increase == true){
		movement++;
  		}
  		else
  		{
		movement--;
 		}
  		if(movement > width - ballSize/2){
	increase = false;
 		 }
  		if(movement < ballSize/2){  
	increase = true;
  		}
  		print(movement);
	}

Here we can make the ball move and interact with its surroundings, such as the extents you set for the window in the Setup.

Top

Exercise C Bouncing Ball with Changing Color and Speeds

Circle circleOne = new Circle(50,0,0,1,5,1,5,10,0,0,0);

void setup(){
  size(600,800);
  noStroke();
  
}

void draw(){
  background(255,255,255);
  circleOne.drawCircle();
}

class Circle{
  int ballSize = 150;
  //bouncing a ball with diff. speeds in the y and x
  // int positions for xy
  int posX = 0;
  int posY = 0;

  boolean increaseX = true;
  boolean increaseY = true;

  boolean increaseRed = true;
  boolean increaseGreen = true;
  boolean increaseBlue = true;

  // speeds
  int speedX = 5;
  int speedY = 20;
  int speedRed = 1;
  int speedBlue = 5;
  int speedGreen = 10;
  
  int red = 0;
  int green = 0;
  int blue = 0;


  Circle(int bs, int x, int y, int sX, int sY, 
    int sR, int sG, int sB, int r, int g, int b){
  
    ballSize = bs; 
    
    posX = x;
    posY = y;
    
    speedX = sX;
    speedY = sY;
    speedRed = sR;
    speedGreen = sG;
    speedBlue = sB;
    
    red = r;
    green = g;
    blue = b;
}

void drawCircle(){
    
  fill(red, green, blue);
  ellipse(posX,posY,ballSize, ballSize);
  println(red +", "+ green +", "+ blue);
 
  //red++;
  if(increaseRed == true){
    red = red + speedRed;
  }
  else
    {red = red - speedRed;
  }
  
  if(red > 255){
    increaseRed = false;
  }
  if(red < 0){
    increaseRed = true;
  }
  
  //green
    if(increaseGreen == true){
    green = green + speedGreen;
  }
  else
    {green = green - speedGreen;
  }
  
  if(green > 255){
    increaseGreen = false;
  }
  if(green < 0){
    increaseGreen = true;
  }
  
    //blye
    if(increaseBlue == true){
    blue = blue + speedBlue;
  }
  else
    {blue = blue - speedBlue;
  }
  
  if(blue > 255){
    increaseBlue = false;
  }
  if(blue < 0){
    increaseBlue = true;
  }
  
  if(increaseX == true){
    posX = posX + speedX;
  }
  else
  {
    posX = posX - speedX;
  }
  
  if(posX > width - ballSize/2){
    increaseX = false;
  }
  if(posX < ballSize/2){  
    increaseX = true;
  }
  
  
  if(increaseY == true){
    posY = posY + speedY;
  }
  else
  {
    posY = posY - speedY;
  }
  
  if(posY > height - ballSize/2){
    increaseY = false;
  }
  if(posY < ballSize/2){  
    increaseY = true;
  }
  
  
    //print(movement);
    
     
}
}

Top

Exercise D Crazy Ball Orbits

float positionX = 400.0;
float positionY = 200; //height/2.0;
float a = 0;
float inc = TWO_PI / 100.0;
ArrayList<Orbit> orbits;



//Orbit orbitOne;
//Orbit orbitTwo;

void setup(){
  size(800,400);
  println(positionY);
  orbits = new ArrayList<Orbit>();
  
  
  for(int i = 0; i < 100; i++){
    
     orbits.add(new Orbit(random(50.0, 200.0), random(50.0, 200.0), TWO_PI / random(5.0, 10.0), random(20,50), int(random(0,255)), int(random(0,255)), int(random(0,255))  ));
  }
  noStroke();
}

void draw(){
   background(255,255,255);
   for(int i = 0; i < orbits.size(); i++){
     Orbit orbit = orbits.get(i);
     orbit.drawFigure();
     orbit.modPos();
   }
   
}

class Orbit{
  float magnifierX;
  float magnifierY;
  float inc;
  float size;
  float a;
  int red;
  int green;
  int blue;

  
  Orbit (float mX, float mY, float i, float s, int r, int g, int b){  
  magnifierX = mX;
  magnifierY = mY;
  inc = i;
  size = s;
  red = r;
  green = g;
  blue = b;
}

  void drawFigure(){
    fill(red, green, blue);
    ellipse(positionX + cos(a)*magnifierX, positionY + sin(a)*magnifierY, size, size); 
    //rect(positionX + cos(a)*magnifierX, positionY + sin(a)*magnifierY, 10, 50); 
  
}

  void modPos(){
    a = a + inc;

}
}

Top

Exercise E Mouse Position

float positionX = 400.0;
float positionY = 200; //height/2.0;
float a = 0;
float inc = TWO_PI / 100.0;
ArrayList<Orbit> orbits;
boolean frozen = false;



//Orbit orbitOne;
//Orbit orbitTwo;

void setup(){
  size(800,600);
  println(positionY);
  orbits = new ArrayList<Orbit>();
  
  float mX;
  float mY;
  float s;
  int r;
  int g;
  int b;
  // variables for each of the things we modify in the class
  
  for(int i = 0; i < 400; i++){
    //for loop to decide how many things (400) 
     mX = random(100.0, 400.0);
     mY = random(100.0, 400.0);
     inc = TWO_PI / random(100.0, 200.0);
     s = random(10, 100);
     r = int(random(0, 255));
     g = int(random(0, 255));
     b = int(random(0, 255));
     
     // set the random vairables
     // and add to orbits
     
     orbits.add(new Orbit(mX, mY, inc, s, r, g, b));
  }
  noStroke();
}

void draw(){
   background(0,0,0);
   if(frozen == false){
   positionX = mouseX;
   positionY = mouseY;
   }
   for(int i = 0; i < orbits.size(); i++){
     // for loop handles all our orbits
     Orbit orbit = orbits.get(i);
     orbit.drawFigure();
     orbit.modifyVariables();
   }  
}


void keyPressed(){
 if(frozen == true){
   frozen = false;
 }else{
   frozen = true;
 }
}

class Orbit{
  float magnifierX;
  float magnifierY;
  float inc;
  float size;
  float a;
  float c;
  int red;
  int green;
  int blue;

  
  Orbit (float mX, float mY, float i, float s, int r, int g, int b){  
  magnifierX = mX;
  magnifierY = mY;
  inc = i;
  size = s;
  red = r;
  green = g;
  blue = b;
}

  void drawFigure(){
    
    fill(red + sin(a)*100, green + cos(c)*200, blue + tan(c)*100);
    //ellipse(positionX + cos(a)*magnifierX, positionY + sin(a)*magnifierY,size + tan(a) *20, size + tan(a)*20); 
    rect(positionX + cos(a)*magnifierX, positionY + sin(a)*magnifierY, size + sin(a) *20, size + cos(a)*20);
  
}

  void modifyVariables(){
    a = a + inc;
    c = c + inc*2;

}
}

Top