Recitation 6: Processing Animation

Random Lines

I learned the function of Radom, and I think this recitation is very interesting. We can do some animations with what we’ve learned, although I didn’t use a lot of stuff this time. I made it on my own how to achieve the effects and animations I wanted.

void setup(){
  background(0);
}

void draw(){
  stroke(random(256),0,0);
  line(50,50,random(100),random(100));
}

I attended the Rainbow Study Sessions hosted by our amazing LAs on Wednesday.

Step 1

Create a Processing sketch with a circle or square at the center of the screen. 

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

void draw(){
  background(255);
  noFill();
  strokeWeight(30);
  ellipse(width/2, height/2, 300, 300);
}

Step 2

Next, modify that Processing sketch so that the circle or square periodically expands and contracts, like the circle in this gif.

float r = 300;
int changeSize = 5;

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

void draw(){
  background(255);
  noFill();
  strokeWeight(30);
  ellipse(width/2, height/2, r, r);
  if (r > width -30 || r < 30){
    changeSize = -changeSize;
  }
  r = r + changeSize;
}

Step 3

Then, modify the Processing sketch so that the outline changes color smoothly, as seen in the gif below. HINT: set the colorMode() to HSB.

float r = 300;
float colorM = 25;
int changeSize = 5; int changeColor = 1;
int x = 300;
int y = 300;
int speed = 20;

void setup() {
  size(600, 600);
  colorMode(HSB);
}

void draw(){
  background(255);
  noFill();
  strokeWeight(20);
  //color
  push();
  colorMode(HSB, 100);
  stroke(colorM, 100, 100);
  ellipse(x, y, r, r);
  if (r > width -30 || r < 30){
    changeSize = -changeSize;
  }
  if (colorM>= 100 || colorM<= 0){
    changeColor = -changeColor;
  }
  r = r + changeSize;
  colorM = colorM + changeColor;
  pop();//end push
  }

Step 4

Finally, modify that Processing sketch so that the circle or square moves around the canvas based on your keyboard’s arrow key input.

float r = 300;
float colorM = 25;
int changeSize = 5;
int changeColor = 1;
int x = 300;
int y = 300;
int speed = 20;

void setup() {
  size(600, 600);
  colorMode(HSB);
}

void draw(){
  background(255);
  noFill();
  strokeWeight(20);
  push();
  colorMode(HSB, 100);
  stroke(colorM, 100, 100);
  ellipse(x, y, r, r);
  if (r > width -30 || r < 30){
    changeSize = -changeSize;
  if (colorM>= 100 || colorM<= 0){
    changeColor = -changeColor;
  }
  r = r + changeSize;
  colorM = colorM + changeColor;
  pop();//end push
  
  }
  
  void keyPressed(){ 
    if (key == CODED){
      if (keyCode == UP) {
        y = y-speed;
      }
      if (keyCode == DOWN){
        y = y+speed;
      }
      if(keyCode == LEFT){
        x = x-speed;
      }
      if(keyCode == RIGHT){
        x = x+speed;
      }
    }
  }