Recitation 6: Animated Poster

Recitation:

 

Code:

void setup() {
  size(1024, 768);
  background(255);
  fill(102);
  strokeWeight(10);
}

void draw() {
  if (frameCount % 50 == 0) {
   fill(random(255), random(255), random(255));
  }
  rect(20, 20, 1004, 740, 20, 748, 1004, 748);
  fill(50);
  text("IMA",400,400);
  
  
  
  for (int y = 0; y < height; y = y+40) {
    for (int x = 0; x < width; x= x+40) {
      if (frameCount % 50 == 0) {
        fill(random(255), random(255), random(255));
        strokeWeight(10);
        textSize(120);
        text("IMA", random(1000), random(755));
      }
      }
    }
  }

 

In this recitation period, I learned how to create animations in processing. It was quite difficult to learn this art but it turned out as a great experience in the end.

Task #1: Add a Fixed Pattern

void setup() {
  size(1024, 768);
  background(255);
  fill(102);
  strokeWeight(10);
}
void draw() {
  int r = int(random(0, 255));
  int g = int(random(0, 255));
  int b = int(random(0, 255));
  if (frameCount % 50 == 0) {
    background(r, g, b);

    for (int y = 0; y < height; y = y+40) {
      for (int x = 0; x < width; x= x+40) {
        fill(random(255));
        rect(x, y, 20, 20);
      }
    }

    fill(random(255), random(255), random(255));
    circle(random(1000), random(700), random(700));
    circle(random(1000), random(700), random(700));
    circle(random(1000), random(700), random(700));

    fill(random(255), random(255), random(255));
    rect(random(750), random(750), random(750), random(750), random(750), random(750), random(750), random(750));
    rect(random(750), random(750), random(750), random(750), random(750), random(750), random(750), random(750));
    rect(random(750), random(750), random(750), random(750), random(750), random(750), random(750), random(750));

    fill(random(255), random(255), random(255));
    triangle(random(200), random(150), random(200), random(150), random(200), random(150));
    triangle(random(1000), random(750), random(1000), random(750), random(1000), random(750));
    triangle(random(201, 500), random(150, 300), random(201, 500), random(150, 300), random(201, 500), random(150, 300));
    triangle(random(501, 700), random(301, 501), random(501, 700), random(301, 501), random(501, 700), random(301, 501));
    triangle(random(701, 1000), random(501, 751), random(701, 1000), random(501, 751), random(701, 1000), random(501, 751));
  }
}
void mousePressed() {
  fill(random(255), random(100), random(100));
  strokeWeight(10);
  textSize(120);
  text("IMA", random(1000), random(755));
}

With the help of Youtube videos, I was able to understand how to create patterns on processing.

Task #3: Make it interactive

 

Code:

void setup() {
  size(1024, 768);
  background(255);
  fill(102);
  strokeWeight(10);
}
void draw() {
  int r = int(random(0, 255));
  int g = int(random(0, 255));
  int b = int(random(0, 255));
  if (frameCount % 50 == 0) {
    background(r, g, b);
    
    fill(random(255), random(255), random(255));
    circle(random(1000),random(700),random(700));
    circle(random(1000),random(700),random(700));
    circle(random(1000),random(700),random(700));
    
    fill(random(255), random(255), random(255));
    rect(random(750),random(750),random(750),random(750),random(750),random(750),random(750),random(750));
    rect(random(750),random(750),random(750),random(750),random(750),random(750),random(750),random(750));
    rect(random(750),random(750),random(750),random(750),random(750),random(750),random(750),random(750));
    
    fill(random(255), random(255), random(255));
    triangle(random(200), random(150), random(200), random(150), random(200), random(150));
    triangle(random(1000), random(750), random(1000), random(750), random(1000), random(750));
    triangle(random(201, 500), random(150, 300), random(201, 500), random(150, 300), random(201, 500), random(150, 300));
    triangle(random(501, 700), random(301, 501), random(501, 700), random(301, 501), random(501, 700), random(301, 501));
    triangle(random(701, 1000), random(501, 751), random(701, 1000), random(501, 751), random(701, 1000), random(501, 751));
  }
}
void mousePressed() {
      fill(random(255),random(100),random(100));
      strokeWeight(10);
      textSize(120);
      text("IMA", random(1000), random(755));
}

I was able to learn how to use the void mousePressed() in this code, and it turned out to be extremely useful.