Documentation — Recitation 6

Documentation — Recitation 6

By Xiaoyi Cai (Mia)   Date: 4/5/2021

During the recitation, I  got a better understanding of how to make interactive animation in Processing.

Here’s the video of my work:

And here’s the code of my work:

int circlesize = 80;

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

color fillVal = color(0, 0, 250, 90);

void draw() {
  fill(fillVal);
  stroke(random(250), random(255), random(255));
  strokeWeight(2);
  circle(mouseX, mouseY, circlesize);
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      fillVal = color(237, 255, 0, 180);
      circle(mouseX, mouseY, circlesize = 60);
    } else if (keyCode == DOWN) {
      fillVal = 0;
      circle(mouseX, mouseY, circlesize = 40);
    } 
    else if (keyCode == LEFT) {
      fillVal = color(255, 153, 0, 90);
      circle(mouseX, mouseY, circlesize = 20);
    }
    else if (keyCode == RIGHT) {
      fillVal = color(207, 0, 255, 90);
      circle(mouseX, mouseY, circlesize = 10);
    } 
  } else {
    fillVal = color(0, 0, 250, 90);
  }
}

Some interesting and useful functions I used:

1. mouseX/mouseY

Once the mouse moves away from the window, mouseX/mouseY will continue to report its most recent position.

2. keyPressed

The keyPressed() function is called once every time a key is pressed.

3. color

At first, I thought it was a common and simple function that could only show the defined color, but during the recitation, I found it was a much more interesting function than I imagined. I learned how to adjust the opacity of the color. By adding the fourth parameter with a smaller number, the color will be more transparent.

Additional Homework

Here’s the code:

int radius = 10;
int radius_change = 1;

int hue = 0;

int circle_x = 300;
int circle_y = 300;

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

void draw() {
  stroke(hue, 100, 100);
  background(0, 0, 100);
  strokeWeight(15);
  circle(circle_x, circle_y, radius);

  radius += radius_change;

  if (radius == 200) {
    radius_change = -1;
  }

  if (radius < 20) {
    radius_change = 1;
  }

  radius = round(sin(millis() * .001) * 50) + 100;
  hue = hue + 1;
  
  if(hue >= 100){
    hue = 0;
  }
}

void keyPressed(){
  println(keyCode);
  if(keyCode == UP){
    circle_y = circle_y - 40;
  }
}

And here’s the video: