Recitation 6

For this recitation, the goal was to create an interactive poster for the end of semester IMA show. My approach towards this was to create a crossword showcasing all the information about the event, and also adding a background that would catch people’s attention. Which is why I used a square background that moves, and is colored red.  Firstly I created a sketch for the crossword. For this I used the text function. However there was a problem, I could now write vertically, so I tried to find ways, but it was hard. Then an LA suggested the following method: textLeading(40);  text(“l\no“, 135, 100 ); this would allow me to write vertically. It only allowed me to do 2 letters at a time, so I had to repeat it many times. Then I started to draw an eye on graphing paper. Then I moved it digitally with the Bezier vertex formula, and a circle formula. I made it interactive by creating 2 variables for the eye that took into the X, and Y axis, which made the pupils follow the mouse. Then I made a translate function, so that I could have an eye on the left side as well. Below, the code, and video can be found for this first part. 

 

Physical sketch: 

 

Video: 

 

 

Code: 
 

 

PFont myFont;
float eyex;
float eyey;




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

  noStroke();

  String[] fontList = PFont.list();
  printArray(fontList);
  myFont = createFont("Broadway", 32);
  textFont(myFont);
}

void draw() {
  background(255);
  stroke(0);
  fill(255);

  //eye right
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);

  //eye left
  push();
  fill(255);
  translate(-500, 200);
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);
  pop();

  fill(0);
  textSize(50);
  text( " IMA Fall 22 EnD-Of-Semester Show", 0, 60);

  //floor 8
  textLeading(40);
  text("l\no", 135, 100 );
  textLeading(40);
  text("o\nr", 135, 180 );
  textLeading(40);
  text("8\n", 135, 280 );




  //december 16th
  textLeading(40);
  text("e\nc", 400, 100);
  textLeading(40);
  text("e\nm", 400, 180);
  textLeading(40);
  text("b\ne", 400, 270);
  textLeading(40);
  text("r\n", 400, 350);
  textLeading(50);
  text("1\n6", 400, 420);
  textLeading(50);
  text("t\nh", 400, 520);

  //time 6 to 8pm
  text("ime: 6pm to 8pm", 425, 520);



  fill(0);
  textSize(60);


  println(mouseX, mouseY);
}

 

 

For the second part, I created the background by creating a function that would draw a bunch of rectangles across the screen. After, I used 2 “for” functions to draw them in to canvas, and added a random function for the stroke value, which gives the optical illusion that the rectangles are moving. Video and code can be found below.

 

 

Video:

 

Code:

 

float eSize = 50;

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

void draw() {
  fill(255);
  noStroke();



  for (int x1 = 0; x1 < width; x1 = x1 + 80) {
    for (int y1 = 0; y1 < height; y1 = y1 + 60) {
      Rectangle(x1, y1, random(1, 10));
    }
  }
}

void Rectangle( int x, int y, float sw) {
  fill(#E82A2A);
  stroke(0);
  strokeWeight(sw);
  rect(x,y , 50, 50);

 
}

After having both elements done, and verifying that they satisfied the requirements,  I created a new sketch in processing and united both of them together taking the different layers into account. After merging, I realized that one of the eyes turned red, and both of their stroke values where going off randomly. In my opinion this made them look better, so I left them as if. The videos and code can be found below. 

 

video:

 

Code: 

 

PFont myFont;
float eyex;
float eyey;
float eSize = 50;



void setup() {
  size(1024, 768);
  background(255);
  noStroke();

  String[] fontList = PFont.list();
  printArray(fontList);
  myFont = createFont("Broadway", 32);
  textFont(myFont);
}

void draw() {
background(0);

  
   for (int x1 = 0; x1 < width; x1 = x1 + 60) {
    for (int y1 = 0; y1 < height; y1 = y1 + 60) {
      Rectangle(x1, y1, random(1, 10));
    }
  }

 //eye right
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);

  //eye left
  push();
  fill(255);
  translate(-500, 200);
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);
  pop();

fill(255);
  textSize(50);
  text( " IMA Fall 22 EnD-Of-Semester Show", 0, 60);
  
  //floor 8
   textLeading(40);
  text("l\no",135 ,100 );
  textLeading(40);
  text("o\nr",135 ,180 );
  textLeading(40);
  text("8\n",135 ,280 );
  
  
  
  
  //december 16th
  textLeading(40);
  text("e\nc", 400, 100);
  textLeading(40);
  text("e\nm", 400, 180);
  textLeading(40);
  text("b\ne", 400, 270);
  textLeading(40);
  text("r\n", 400, 350);
  textLeading(50);
  text("1\n6", 400, 420);
  textLeading(50);
  text("t\nh", 400, 520);

//time 6 to 8pm
  text("ime: 6pm to 8pm", 425, 520);



  fill(0);
  textSize(60);


  println(mouseX, mouseY);
}

void Rectangle( int x, int y, float sw) {
  fill(#E82A2A);
  stroke(0);
  strokeWeight(sw);
  rect(x,y , 50, 50);

 
}