Recitation 6: Animated Poster

At the beginning of this poster, I made three dots, two moving from the left to the right of the screen and one moving from the right to the left. There was also a square moving on the screen, which would flash on the screen. Finally, I wrote the time and place of the IMA show on a white background. What bothers me about this poster is that if the dots move at normal speed, the square will be too fast to be controlled. So now the dot is moving very slowly in order to make the square move normally.

int x=0;
int y=808;
float z=0;
float o=0;
float p=40;
float q=60;

void setup(){
  size(1024,768);
}

void draw(){
  background(144,212,255);
   C1(x);
     frameRate(200);
   x++;
   if (x==width+40){
     x=-40;
   }
   
   C2(y);
     frameRate(200);
   y=y-1;
   if (y==width-808){
     y=808;
   }
   
    C3(x);
      frameRate(200);
   //x++;
   if (x==width+40){
     x=-40;
   }
   
   R1(z,o,p,q);
   frameRate(20);
   z=z+10;
   o=o+10;
   p=p+20;
   q=q+20;
}

void C1(int a){
  //鹅黄色
  fill(254,237,146);
  noStroke();
  ellipse (a,200,80,80);
}

void C2(int b){
   fill(254,237,146);
   noStroke();
   ellipse (b,400,80,80);
}

void C3(int a){
  //鹅黄色
  fill(254,237,146);
  noStroke();
  ellipse (a,600,80,80);
}

void R1(float c,float d,float e,float f){
  int r=int(random(255));
  int g=int(random(255));
  int b=int(random(255));
  fill(r,g,b);
  noStroke();
  rect(c,d,e,f);
  
    noStroke();
  fill(255);
  rect(206, 335, 800, 300);
  fill(0);
  textSize(50);
  text("IMA Fall 22 Show!", 240, 420);
  fill(0);
  textSize(25);
  text("Friday, December 16 | 6pm to 8pm", 240, 480);
  text("Location: 8th Floor", 240, 540);
  fill(190);
   circle(225, 380, 20);
   circle(225, 580, 20);
  
  
}

Homework

I really didn’t think the poster I made in class looked good, so I studied the homework outside of class. I drew a figure consisting of three circles, generated 100 of them, and followed the generated positions. I learned the use of “push” and “pop” in the previous lesson, and I used them. I also used keyPressed function to control them according to the instruction. When the “o” is pressed, the whole pattern will be laid out in a different way.

At first, the color choice was a bit weird, but then I edited it a bit. I defined three RGB variables and used the map function to map random numbers ranging from 0 to 255 into a specific range, resulting in visually harmonious colors.

First version:

Final version:

float r, g, b;
void setup() {
  size(1024, 768);
  background(255);
  for(int x= 0; x<10; x++){
  for(int y=0; y<10; y++) {
      r = map(random(255), 0, 255, 200 ,255);
      g = map(random(255), 0, 255, 180 ,240);
      b = map(random(255), 0, 255, 175 ,235);
 
   push();
   translate( random(0, width),random(0, height));
   //translate(y * 100,0);
   noStroke();
  fill(r,g,b);
  ellipse(60, 40, 60, 60);
  fill(253,255,156);
  ellipse(50,54, 52, 52);
  fill(r,g,b);
  ellipse(50, 55, 20, 20);
  fill(r,g,b);
  pop();
    }  
  }
}

void changePos(){
  background(255);
  for(int x= 0; x<10; x++){
    for(int y=0; y<10; y++) {
       r = map(random(255), 0, 255, 200 ,255);
      g = map(random(255), 0, 255, 180 ,240);
      b = map(random(255), 0, 255, 175 ,235);
 
 
   push();
   translate( random(0, width),random(0, height));
   //translate(y * 100,0);
   noStroke();
  fill(r,g,b);
  ellipse(60, 40, 60, 60);
  fill(253,255,156);
  ellipse(50,54, 52, 52);
  fill(r,g,b);
  ellipse(50, 55, 20, 20);
  fill(r,g,b);
  pop();
    }  
  }

}

void changeColor(){
  

}
void keyPressed() {
  if (key == 'o') {
    changePos();
  }
 
}

void draw(){

}

Leave a Reply

Your email address will not be published. Required fields are marked *