My Interaction Lab 06

RECITATION.

Screen recording of the animated poster done during class. 

Code: 

int size = 3;
int size2 = 5;
void setup() {
  size(1024, 768);
  background(0);
  colorMode(HSB, 100, 50, 9);
  drawTiles();
drawTriangle();
}

void draw() {
  
textSize(150);
fill(#080A24);
text("8",600,585);
 textSize(150);
fill(#080A24);
text("16",515,684);

   for (int y =10; y<height; y=y+50 ) {
    if (frameCount % int(random(1,30)) ==0) {
      for (int x =10; x<640; x=x+10 ) {
        fill(random(100,255), random(80), random(82));
        circle(x, y, 50);
 }
    }
  }
}
void drawTiles() {
  for (int y = 0; y<height; y= y+size) {
    for (int x = 0; x<width; x= x+size) {
      fill(random(100,200), random(70), random(190));
      rect(x, y, size, size);
    }
  }
}
void drawTriangle() {
  for (int y = 0; y<1000; y= y+size2) {
    for (int x = 0; x<800; x= x+size2) {
      fill(random(100,150), random(50), random(150));
      ellipse(x, y, size2, size2);
    }
  }

  
textSize(128);
fill(#080A24);
text("I", 800, 120);
fill(#080A24);
text("M", 800, 240);
fill(#030409);
text("A", 800, 360);
textSize(40);
pushMatrix();
text("Fall 22 ",800,420);
textSize(37);
text("End-Of-Semester Show",664,460);
textSize(80);
text("FLOOR",730,570);
textSize(50);
text("FRIDAY",730,610);
textSize(80);
text("DECEMBER",652,655); 
}  

HOMEWORK. 

I didn’t know what to create so it resulted in a completely bizarre looking animation which also acts like a game. You cannot move the mouse beyond given parameter if you do it will be a complete clash of different shapes so you have to keep the mouse in between. 

Task 1. 

I took the last circle repetition as a base of my homework animation and included two nested loops within it. 

Task 2. 

They already had random colours so I decided to keep it and added another ellipse that had 255 and 0 colours and looked up some cool animation formulas that could make it more interactive. 

Task 3.

I made it so depending on where you keep the mouse it will show the invitation text as well as change its shape and colours into something completely different. In addition, new float variable would calculate the distance between two make it seem like its changing when following the MouseX and MouseY. 

int x = 0;
int size2 = 5;
float max_distance;

void setup(){
  size(1024, 768);
  background(0);
  colorMode(HSB, 100, 50, 9);
  max_distance = dist(0, 0, width, height);

}


void draw(){
  
  if (mouseX>=400 && mouseX<=700 ) {
background(0);
textSize(128);
fill(#52C7FF);
text("I", 450, 120);
fill(#D952FF);
text("M", 450, 240);
fill(#52FFB3);
text("A", 450, 360);
  textSize(40);
  fill(#FBE8E8);
  text("Fall 22 End-Of-Semester Show", 250, 400);
  text("Location: 8th floor", 340, 450);
  text("Day: Friday December 16", 300, 500);
  text("Time: 6pm to 8pm", 340, 550); 
 
  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= height; j += 20) { float size = dist(mouseX, mouseY, i, j); size = size/max_distance * 66; ellipse(i, j, size, size); } } } else if(!(mouseX >=400 && mouseX<=500)){
   for (int y =1; y<height; y=y+30 ) {
    if (frameCount % int(random(20,40)) ==0) {
      for (int x =1; x<width; x=x+30 ) {
        fill(random(100,255), random(80), random(82));
        circle(x, y, 20);
      }
    }
  }

print(mouseX); 
print(" "); 
println(mouseY); 
}
}