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); }