Recitation shape:
- code:
void setup() {
size(1024, 768);
}
void draw() {
println(mouseX, mouseY);
background(#9D0B0B);
fill(#DEA52B);
circle(59, 214, 40);
circle(240, 214, 40);
fill(#FCF0D6);
ellipse(150, 200, 160, 180); //face
fill(0);
arc(150, 185, 180, 180, PI, PI+PI, CHORD); //bangs
fill(255); // eyeframe
arc(150, 260, 170, 170, radians(220), radians(320), OPEN);
arc(150, 150, 170, 170, radians(40), radians(140), OPEN);
fill(5); // eyeball
float eyeballX = map(mouseX, 1, 1024, 100, 300);
float eyeballY = map(mouseY, 1, 768, 120, 300);
ellipse(eyeballX, eyeballY, 30, 55);
}
Actually, my idea had changed after recitation, so I made another thing for my poster.
My Poster:
- code：
float a = random(0.5, 1);
float b = random(0.5, 1);
float c = random(1, 1.5);
float d = random(1, 2);
int increase1 = 1;
int increase2 = 1;
int increase3 = 1;
int increase4 = 1;
void setup() {
size(1024, 768);
}
void draw() {
println(mouseX, mouseY);
for (int i = 1; i < 500; i = i +1 ) {
stroke (19+i/2, 31+i/2, 131+i/2);
line (1, i, 1024, i);
}
for (int l = 1; l < 125; l =l + 1) {
stroke(209-l/4.5, 221-2.2*l, 255-2.1*l);
line (1, 380+l, 1024, 380+l);
}
for (int p = 1; p < 508; p = p + 1) {
stroke(180+p, 20+p, 10+p);
line (1, 500+p, 1024, 500+p);
}
for (int u = 1; u < 508; u = u + 1) {
stroke(255+u/20, 155+u/2, 145-u);
line (1, 630+u, 1024, 630+u);
}
fill(0, 50);
noStroke();
rect(0, 0, width, height);
for (int starX = 1; starX < 1024; starX += 50) {
for (int starY = 1; starY < 351; starY +=50) {
noStroke();
float bright = map(sin(( starX+ starY +frameCount) / 10.0), -1, 1, 0, 255);
fill(255, bright);
circle( starX, starY, 5);//stars and fading
}
}
cloud(a, b, c, d); // clouds
fill(0);
triangle(50, 768, 160, 768, 105, 220);
noFill();
stroke(0);
strokeWeight(10);
arc(240, 220, 270, 270, radians(180), 2*PI, OPEN);
arc(280, 220, 190, 190, 0, PI, OPEN);
arc(230, 220, 90, 90, PI, 2*PI, OPEN);//streetlamp body
int lampX = (int) map(mouseX, 1, 1024, 155, 395);
int lampY = (int) map(mouseY, 1, 768, 345, 380);
if (mouseX<500) {
line(275, 225, lampX, lampY-(700-mouseX)/25);
fill(0);
circle(lampX, 50+lampY-(700-mouseX)/25, 100);
} else {
line(275, 225, lampX, lampY-mouseX/25);
fill(0);
circle(lampX, 54+lampY-mouseX/25, 100);
}
if (mousePressed) {
if (mouseX<500) {
fill(#FFFDE0, 100);
noStroke();
triangle(lampX, lampY-(700-mouseX)/25, lampX-250+mouseX/10, 768, lampX+250+mouseX/3, 768);
fill(#FFF04B);
stroke(0);
strokeWeight(10);
circle(lampX, 50+lampY-(700-mouseX)/25, 100);
fill(#FFF8A7);
noStroke();
circle(lampX, 50+lampY-(700-mouseX)/25, 70);
fill(#FFFDE0);
noStroke();
circle(lampX, 50+lampY-(700-mouseX)/25, 40);// 3 Brightness in lamp
} else {
fill(255);
textSize(30);
text("Event: IMA Fall 22 End-Of-Semester Show", 350, 550);
text("Location: 8th floor", 480, 600);
text("Day: Friday December 16", 450, 650);
text("Time: 6pm to 8pm", 490, 700);
fill(#FFFDE0, 100);
noStroke();
triangle(lampX, lampY-mouseX/25, lampX-250+mouseX/8, 768, lampX+200+ mouseX, 768);
fill(#FFF04B);
stroke(0);
strokeWeight(10);
circle(lampX, 54+lampY-mouseX/25, 100);
fill(#FFF8A7);
noStroke();
circle(lampX, 54+lampY-mouseX/25, 70);
fill(#FFFDE0);
noStroke();
circle(lampX, 54+lampY-mouseX/25, 40);
}
}
}
void cloud(float a, float b, float c, float d) {
float speedX1 = increase1 * a;
float speedX2 = increase2 * b;
float speedX3 = increase3 * c;
float speedX4 = increase4 * d;
increase1 += 1;
increase2 += 1;
increase3 += 1;
increase4 += 1;
if (-200 + speedX1 > width) {
increase1 = 1;
}
if (-200 + speedX2 > width) {
increase2 = 1;
}
if (-200 + speedX3 > width) {
increase3 = 1;
}
if (-200 + speedX4 > width) {
increase4 = 1;
}
noStroke();
fill(67, 52, 137, 225);
ellipse(-10+speedX1, 35, 120, 80);
ellipse(-55 + speedX1, 35, 200, 60);
ellipse(20+ speedX1, 35, 140, 80);
ellipse(60 + speedX1, 45, 190, 40);
ellipse(420 + speedX2, 135, 80, 60);
ellipse(460 + speedX2, 135, 70, 90);
ellipse(500 + speedX2, 135, 80, 100);
ellipse(550 + speedX2, 155, 120, 60);
ellipse(-150 + speedX2, 230, 80, 100);
ellipse(-180+ speedX2, 255, 200, 50);
ellipse(-110 + speedX2, 240, 80, 75);
ellipse(-70+ speedX2, 250, 100, 40);
ellipse(-210 + speedX3, 210, 80, 100);
ellipse(-240+ speedX3, 235, 200, 50);
ellipse(-170 + speedX3, 220, 80, 75);
ellipse(-130+ speedX3, 230, 100, 40);
fill(151, 70, 111, 230);//pink cloud
ellipse(-70+speedX1, 450, 100, 80);
ellipse(-115 + speedX1, 450, 80, 60);
ellipse(-40+ speedX1, 450, 120, 60);
ellipse(0 + speedX1, 365, 200, 40);
ellipse(-70+speedX1, 355, 100, 80);
ellipse(-115 + speedX1, 375, 80, 60);
ellipse(-40+ speedX1, 375, 120, 60);
ellipse(0 + speedX1, 385, 200, 40);
ellipse(-180 + speedX2, 700, 80, 60);
ellipse(-140 + speedX2, 700, 70, 90);
ellipse(-100 + speedX2, 700, 80, 100);
ellipse(-50 + speedX2, 720, 120, 60);//clouds
}
My thought:
I think during this process, the most interesting and challenging part is using the sin() function to make the stars fading and appearing smoothly. Additionally, I have to control the speed by the devision, and with 2 variables, I could make the stars like a wave, which is really beautiful.
And the map function combined with mouseX, mouseY is also really interesting. I have to make the streetlamp move in a restricted area according to the movement of my mouse, so I think it is genius to use map function.
And also, I planned to make the text only appears when the light falls it, so I tried to use blendMode, however, it was not working. And I could not find out the solution, so I decided to stick to my original plan.