IMA Show Poster
float i = 1024;
float speed = 0;
color randomColor;
PFont f;
void setup() {
size(1024, 768);
randomColor = color(random(255), random(255), random(255), 250);
}
void draw() {
background(255);
circle();
f = loadFont("Stencil-100.vlw");
textFont(f, 100);
textSize(80);
fill(255);
text("IMA", width/2-70, height/2+28);
textSize(30);
fill(randomColor);
text("8th floor", 860, 690);
text( "Friday December 16", 700, 720);
text("6pm to 8pm", 840, 750);
}
void circle() {
background(255);
for (i = 1024; i>=-30; i=i-10) {
if (mousePressed) {
i=i-speed;
speed = speed + 0.1;
fill(randomColor);
noStroke();
ellipse(width/2, height/2, i, i);
} else {
rectMode(CENTER);
rect(width/2, height/2, i+30, i);
pushMatrix();
translate(width/2, height/2);
rotate(PI/4);
rect(0, 0, i+30, i);
popMatrix();
pushMatrix();
translate(width/2, height/2);
rotate(PI/8);
rect(0, 0, i+30, i);
popMatrix();
pushMatrix();
translate(width/2, height/2);
rotate(3*PI/8);
rect(0, 0, i+30, i);
popMatrix();
fill(i/3.5);
noStroke();
ellipse(width/2, height/2, i, i);
i=i-speed;
speed = speed + 0.05;
}
}
}
void mousePressed() {
randomColor = color(random(255), random(255), random(255), 100);
}
For me, the most difficult and interesting part of the poster is the design of the shape that seems to be shrinking, sucking people into the dark center. At first, I used the parameter “i” to draw a series of circles with radiuses in descending order. I also adapted “i” to fill the circles, letting them present the gradual variation from white to black. But only circle was not enough for the poster, so I added rectangles to complicate the shape. Based on the drawn circles, I add a rectangle, and respectively rotated it 45, 90, and 135 degress, to form a shape of a star anise. To add some animations, I make the “i” constantly decrease with an acceleration to get the shrinking effect. For the animation part, I used a for loop to change the shape to circle and color it by pressing the mouse. I was struggling with how to enable some elements to change randomly. Professor Gottfried instructed me to give the circles random color every time the mouse is pressed. But I’m still a bit confused about the coding part I highlighted in blue, that now that we have “void mousePressed() { randomColor = color(random(255), random(255), random(255), 100); } ” at the bottom of the code, can we remove “randomColor = color(random(255), random(255), random(255), 250);” in setup? I tried and it worked the same.