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).

• ### Part 6 - What we can create!

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

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