INTERACTON LAB 007 RECITATION 6: PROCESSING ANIMATON

Processing Animation

As seen in the video above, when the mouse is dragged from the top left corner of the screen to the bottom right, it reveals repeating rectangles that have varying rainbow colors. During this recitation I learned the importance of using for() loops to repeat certain objects, using int.

In creating this, the most interesting functions were the for() loop, and the random(). The for() loop was what made the rectangles repeat. I set the value within to continue running over and over again, creating multiple rectangles. Using the random() function, I was able to set parameters that caused the color of the rectangles to be constantly cycling through every hue. 

The code for this project was as such:

void setup() {
size(600, 600);

}

int n = 60;
void draw() {
 noStroke();
   for(int i=0; i<100; i++) {
     fill(random(255),random(255),random(255));
     rect(0,i*height/n, width, (i+1) * height/n);
     rect(i*height/n, 0, width, (i+1) * height/n);
     fill(0);
     rect(mouseX,0, width, 700);
     rect(0, mouseY, 700, (i+1) * height/n);
}
}

Homework

For the homework, I created a hollow circle that increases and decreases in size repeatedly in addition to cycling through different colors. Also, the circle will change position corresponding with the press of the arrow keys, but will not leave the borders of the screen.

The code for this utilized several if() loops, most notably the three that control the change in color of the circle. From this, I learned the importance of setting up a void() statement other than void setup() and void draw(). In this case, void keyPressed().

float d=100;
float speed=4;
float x=300;
float y=300;
int a=0;
int b=50;
int c=100;



void setup() {
  size (600,600);
  background(255);
  colorMode(HSB, 255);
  noFill();
  strokeWeight(10);
  
}


void keyPressed() {
  if(keyCode==UP && y >= 50) {
    y -=5;
 
} 

else if (keyCode==DOWN && y<= height-50) {
    y +=5;
  
} 

else if (keyCode==LEFT && x>= 50) {
    x -=5;
  
} 

else if (keyCode==RIGHT && x<= width-50) {
    x +=5;
}

}
void draw() {
  background(0);
  stroke(a,b,c);
  circle(x,y,d);
  d=d+speed;

  if (d>300 || d<100) {
    speed=-speed;
  }
  a++;
  b++;
  c++;
  if (a==255) {
    a=0;
  }
  if (b==255) {
    b=50;
  }
  if (c==255) {
    c=100; 
  }
}