IMA recitation6: Animating an interactive poster

The post in recitation6 required us to make a fixed pattern that covers the whole screen. I got inspiration from the animation in the recitation instructions.

The circle in it goes from center to the border. To create my own post, I decided to make to circle goes back from border to the center, so that it appears more like a  ripple.

void setup(){
  size(1024,768);
}
float i;
void draw(){
  background(255);
  //for(int m=0; m<width;m=m+
  noFill();
  for (int j=-10; j< 10; j = j+1) {
    stroke(i,153,67);
    ellipse(width/2,height/2,i + j *30 ,i+j*30);
  }
  i=i+5;
  if (i>500 && i<width || i<-400){
    textSize(100);
    fill(55,47,250);
    text("IMA",width/2-70,height/2+30);
  }else if (i>=width){
    i=-i-150;
  }
}

 

As the circle moves, its color also changes according to the range. The text appears when the center is blank, so that the whole picture seems more filled. I encountered a problem when I want to generate multiple circles, then Professor suggested me using a for loop with a new variable ‘j’, which not only counts the time, but also change the radius.

To make it more interactive, I added a function to it that the color changes when the mouse is clicked. Besides, clicking different places will display different colors.

color circleCol;

void setup(){
  size(1024,768);
  circleCol = color(255, 0, 0);
}
float i;
float mouse=50;
void draw(){
  background(255);
  //for(int m=0; m<width;m=m+
  noFill();
  for (int j=-10; j< 10; j = j+1) {
    stroke(circleCol);
    ellipse(width/2,height/2,i + j *30 ,i+j*30);
  }
  i=i+5;
  if (i>500 && i<width || i<-400){
    textSize(100);
    fill(55,47,250);
    text("IMA",width/2-70,height/2+30);
  }else if (i>=width){
    i=-i-150;
  }
}
void mouseClicked(){
  colorMode(HSB);
  circleCol = color(mouseX % 360, 255, 255);
  //mouse=mouse+20;
}

The mouseclicked function appears to be useful and interesting. It records the x coordinate of the mouse when it is clicked, so that the color can be changed. Through this function, I can do things more than just changing colors, for example, I have the thought of making a ripple in the place where mouse is clicked.