Recitation 6: Processing Animation

This week, the recitation’s focus was on creating animation on processing in which it should be incorporated to the text and interactive with the keyboard or mouse. From this prompt, I created an animation that was based on random circle designs that could be incorporated via the coded keys of up, down, left, right, and an “eraser” with the mouse. 

From this I think it was very interesting to incorporate both the mouse and keyboard into an interactive processing code. The code itself allowed for it. Moreover, I think that the colors itself allowed for interesting compositions where the random colors could be edited to create more harmonic pieces. I, however, like adding neutral colors to the red and blue dots I could input. I think that the frameRate function was particularly interesting in this piece as it allowed for me to control the rate at which ellipses were added where the standard frame rate was too high, but my edited frameRate was perfect.

I will now input videos of using this and the code. 

 

 

float y=10;
float x=10;
float z=255;
void setup() {
  size (1000, 1000);
  background(125);
  noStroke();
  frameRate(8);
}
void draw () {
  frameRate(8);
  for (int i=0; i<25; i++) {
    println(i);
    if (keyPressed && key==CODED) {
      if (keyCode==DOWN) {
        fill (y, y*0.3, y*0.1);
        y++;
        ellipse (random(0, 1000), random(0, 1000), random (25, 50), random(25, 50));
      }
    }
    if (keyPressed && key==CODED) {
      if (keyCode==UP) {
        fill (x*0.1, x*0.3, x);
        x++;
        ellipse (random(0, 1000), random(0, 1000), random (25, 50), random(25, 50));
      }
    }
    if (keyPressed && key==CODED) {
      if (keyCode==LEFT) {
        fill (x, x, x);
        x++;
        ellipse (random(0, 1000), random(0, 1000), random (25, 50), random(25, 50));
      }
    }
    if (keyPressed && key==CODED) {
      if (keyCode==RIGHT) {
        fill (z, z, z);
        z--;
        ellipse (random(0, 1000), random(0, 1000), random (25, 50), random(25, 50));
      }
    }
    if (mousePressed ==true) {
      fill (125);
      frameRate(60);
      circle (mouseX, mouseY, 75);
    }
  }
}

As for the circle homework, I made it so that I could move it with the up, down, left, and right. 

I will include the code and video of the processing below. 

 

int x = 50;
//x refers to radius
int s = 2;
// increments for shrinking and expanding
int w = 0;
//int for width
int h = 0;
//int for height
void setup() {
  size(600, 600);
  background(360);
  colorMode(HSB);
}
void draw() {
  background(255);
  stroke(x-50, 360, 360);
  strokeWeight(15);
  circle(w+width/2, h+height/2, x);
  if (x > 200 || x < 50) {
    s = -s;
  }
  x = x + s;
  if (keyPressed&&key==CODED) {
    if (keyCode == UP) {
      h--;
    } 
    if (keyCode == DOWN) {
      h++;
    }
    if (keyCode == LEFT) {
      w--;
    }
    if (keyCode == RIGHT) {
      w++;
    }
  }
}