Recitation 6: Animating an Interactive Poster

I decided to use what I have learned in class to do this project and I got the idea of using red, yellow, and blue because of project B for Bauhaus Poster.  At first, I didn’t choose a light color background and I found it is a little bit insipid so I added different backgrounds for the letters and change the background to black. I found the trail of the bouncing balls left on the background and I solved this problem by changing the place of the background()   

 

Here is the code.

 

int x;
int y;
int p;
int q;
int a;
int b;


int speedX = 4;
int speedY = 4;
int speedP = 3;
int speedQ = 3;
int speedA = 5;
int speedB = 5;


PFont myFont;
void setup(){
  
  size(1024, 768);
  x = int (random (0, width));
  y = int (random (0, height));
  p = int (random (0, width));
  q = int (random (0, height));
  a = int (random (0, width));
  b = int (random (0, height));
  
  
  println(x);
  println(y);
  println(p);
  println(q);
  println(a);
  println(b);
 
 
  
}

void draw(){
  
 background(0,0,0);

 fill(255,0,0);
 rect(100,150, 200,100);
 
 fill(255,200,15);
 rect(50,350,630,60);
 
 fill(15,150,255);
 rect(90,450,170,60);
 
 fill(255,0,0);
 rect(130,550, 270,60);
 
 fill(255,200,15);
 rect(170,650,240,60);
  
  drawface();
  x = x+speedX;
  y = y+speedY;
  p = p+speedP;
  q = q+speedQ;
  a = a+speedA;
  b = b+speedB;
  
  if(x> width || x<0){
    speedX = - speedX;
  }
  if(y> height ||y<0){
    speedY = - speedY;
  }
  if(p> width || p<0){
    speedP = - speedP;
  }
  if(q> height ||q<0){
    speedQ = - speedQ;
  }
  if(a> width || a<0){
    speedA = - speedA;
  }
  if(b> height ||b<0){
    speedB = - speedB;
  }


  
}

void drawface() {
  
  
circle(x,y,200);
  fill(15,150,255);
  noStroke();
  strokeWeight(5);
  ellipse(x,y,200,200);
  
  
  fill(255, 255, 255);
  noStroke();
  circle(x-50, y, 10);
  circle(x+50, y, 10);
  circle(x, y, 20);
   
  
  circle(p,q,200);
  fill(255,0,0);
  noStroke();
  strokeWeight(5);
  ellipse(p,q,200,200);
  
  fill(255, 255, 255);
  noStroke();
  circle(p-50, q, 10);
  circle(p+50, q, 10);
  circle(p, q, 20);
  
  circle(a,b,200);
  fill(255,200,15);
  noStroke();
  strokeWeight(5);
  ellipse(a,b,200,200);
  
  fill(255,255,255);
  noStroke();
  circle(a-50, b, 10);
  circle(a+50, b, 10);
  circle(a, b, 20);
  myFont = createFont("Georgia",32);
  textFont(myFont);
  
  textSize(42);
  fill(255);
  text("Spring 22 End-Of-Semester Show",50,400);
  fill(255);
  text("8th floor",90,500);
  fill(255);
  text("Friday May 13",130,600);
  fill(255);
  text("6pm to 8pm",170,700);
  
  textSize(150);
  fill(255);
  text("IMA",100,200); 
   
}

Homework:  Make it Interactive

I want to make the project more interesting and I thought of scraping wax painting. I turned all the letters to black and let the mouse control three dots to move. At first, I remain the face of the previous project but I found it is too messy so I decided to delete it. 

(scraping wax painting)

Here is the code.

 

int x;
int y;
int p;
int q;
int a;
int b;

int r= 0;

int speedX = 4;
int speedY = 4;
int speedP = 3;
int speedQ = 3;
int speedA = 5;
int speedB = 5;


PFont myFont;
void setup(){
  background(0,0,0);
  size(1024, 768);
  x = int (random (0, width));
  y = int (random (0, height));
  p = int (random (0, width));
  q = int (random (0, height));
  a = int (random (0, width));
  b = int (random (0, height));
  
  
  println(x);
  println(y);
  println(p);
  println(q);
  println(a);
  println(b);
}

void draw(){
  drawface(mouseX,mouseY,1);
  drawface(mouseX,mouseY,1);
  drawface(mouseX,mouseY,1);
  if (keyPressed == true){
    r= r+1;
  }else{
    r=0;
  }
  
  x = x+speedX;
  y = y+speedY;
  p = p+speedP;
  q = q+speedQ;
  a = a+speedA;
  b = b+speedB;  
}

void drawface(float i, float j, float size) {
  fill(15,150,255);
  noStroke();
  strokeWeight(5);
  ellipse(i+28,j+28,30,30);
  fill(255,0,0);
  noStroke();
  strokeWeight(5);
  ellipse(i,j,30,30);
  fill(255,200,15);
  noStroke();
  strokeWeight(5);
  ellipse(i+28,j-28,30,30);
  

  myFont = createFont("Georgia",32);
  textFont(myFont);
  
  textSize(42);
  fill(0);
  text("Spring 22 End-Of-Semester Show",50,400);
  fill(0);
  text("8th floor",90,500);
  fill(0);
  text("Friday May 13",130,600);
  fill(0);
  text("6pm to 8pm",170,700);
  
  textSize(150);
  fill(0);
  text("IMA",100,200); 
   
}