Recitation 6: Animating an Interactive Poster

This is the poster which I design for IMA show. I want it to look like a chat interface so I choose to make the background as countless lines crossing with each other, which looks like screens in real life and has sense of retro style.

This is the pattern I made for homework.

Among all these codes, I think the most interesting one is the one that draw the heart because I first did not know how to draw it on the sketch and I then found the bezierVertex() by searching on the google, which is quite useful. The one I spent time on is making many hearts to fill the screen by using for loops while the heart has so many variables in one heart. I then add different variables to its abscissa and ordinate to make it work.

Here is the code for poster.

int r;
int g;
int b;
int spd = 5;
int x = 50;
int y = 35;
void setup(){
size(768,1024);
}
void draw(){
background(220);
strokeWeight(1);
for (int i1 = 0;i1 < width; i1+=3) {
stroke(109,114,118);
line(i1,0,i1,height);
}
for (int i2 = 0;i2 < height; i2+=3){
stroke(109,114,118); line(0,i2,width,i2); }
textSize(50);
fill(0);
text("IMA fall 22",500,120);
text("End-Of-Semester Show",225,180);
text("December 16, 6pm-8pm",205,240);
stroke(40);
line(710,200,710,250);
heart();
fill(255,0,0);
circle(x,y+40,15);
beginShape();
vertex(x,y);
bezierVertex(x, y-20, x+40, y-10, x, y+25);
vertex(x, y);
bezierVertex(x, y-20, x-40, y-10, x, y+25);
endShape();
stroke(0);
strokeWeight(2);
line(x-10,y,x-6,y+8);
line(x+2,y,x+6,y+8);
line(x-2,y+12,x+6,y+12);
x = x + spd;
if (x>width-10 || x<20 ){
spd=-spd;
}
}
void heart(){
for (int i3 = -30; i3<width; i3+=50){
for (int i4 = 280; i4<height; i4+=50){
noStroke();
float r = random(0,255);
float g = random(0,255);
float b = random(0,255);
fill(r,g,b);
beginShape();
//translate(i3,i4);
vertex(50+i3,15+i4);
bezierVertex(50+i3, -5+i4, 90+i3, 5+i4, 50+i3, 40+i4);
vertex(50+i3, 15+i4);
bezierVertex(50+i3, -5+i4, 10+i3, 5+i4, 50+i3, 40+i4);
endShape();
}
}
}

Here is the codes for pattern.

void setup(){
size(800,600);
}
void draw(){
arrows();
}
void arrows(){
background(255);
for (int i3 = -25; i3<width; i3+=70){
for (int i4 = -50; i4<height; i4+=70){
noStroke();
float r = random(0,255);
float g = 255;
float b = random(0,255);
if (mousePressed == true){
r = 255;
g = random(0,255);
b = random(0,255);
rotate(PI/4);
}
fill(r,g,b);
rect(50+i3,80+i4,40,20);
triangle(110+i3,90+i4,90+i3,70+i4,90+i3,110+i4);
}
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *