Recitation 6: Processing Animation (October 29, 2019) by Jackson McQueeney

My first animation was a face that bounced around the canvas. Upon clicking the mouse, the face would change to a random color and assume a random speed and direction. 

Code for the above animation:

float x = 0;
float y = 0;
float Xspeed = 5;
float Yspeed = 5;

float red = 255;
float green = 255;
float blue = 255;

void setup(){
size(600, 600);
background(0);
}

void draw(){
  noStroke();
  fill(0, 0, 0, 100);
  rect(0,0, width, height);
  noStroke();
  fill(red, green, blue);
  ellipse(x, y, 150, 150);
    if(x > width || x < 0){
      Xspeed = -Xspeed;
    }
    if(y > height || y < 0){
    Yspeed = -Yspeed;
    }
  x = x+Xspeed;
  y = y+Yspeed;
  fill (0);
  ellipse (x-20, y-5, 10, 10);
  ellipse (x+20, y-5, 10, 10);
  rect (x-10, y+5, 20, 5);
  noStroke();
}

void mousePressed(){
    red = random(255);
    green = random(255);
    blue = random(255);
    Xspeed = random(20);
    Yspeed = random (20);
}

The next part of this recitation was to create a circle that periodically shrinks and grows, that smoothly transitioned between colors, and moved according to arrow key input:

(Using arrow keys during the screen recording caused the recording window to move around rather than the circle, but the arrow keys work without the screen recording)

The code for the above animation:

float chud= 100;
float chudspeed = 5;
float xloc = 300;
float yloc = 300;

float c;

void setup() {
  size(600, 600);
  smooth();
  colorMode(HSB);
}
 
void draw() {
  background(255);
  
  noStroke();
  if (c >= 255) c=0;
  else c++;
  fill(c, 255, 255);
  ellipse(xloc, yloc, chud, chud);
  noStroke();
  fill(255);
  ellipse(xloc, yloc, chud-75, chud-75);
  chud = chud + chudspeed;
  chud = chud + chudspeed;
  
  if (chud > 600){
   chudspeed = -chudspeed;
  }
  if (chud < 75){
   chudspeed = -chudspeed;
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      yloc = yloc - 5;
    } 
    else if (keyCode == DOWN) {
      yloc = yloc + 5;
    } 
    else if (keyCode == LEFT) {
      xloc = xloc - 5;
    } 
    else if (keyCode == RIGHT) {
      xloc = xloc + 5;
    } 
  } 
}

During this recitation, I learned how to make an object continually function according to its constantly updated locations. I also learned how to change an object’s color based on user input, and how to use keyCode in general. Some of the most interesting functions I used were colorMode and keyCode.