ICM | Week 2 **Updated
Assignment for Week 2
I call this Apple-Watch Doomsday Counter.
How I Made It
Quick recap:
The original sketch was based on this icon created by a couple illustrators based in Ukraine.
Very cute, but was quite challenging because of I had to be very exact with the organic lines.
What I did in week 1:
Previous post on how I did it.
Initially, I made this for the assignment.
In summary, I broke the animation into 3 parts:
1) Rotating planet & orbit
The planet surface rotates using translate() & rotate() function, while its outline and orbit are "animated" via increasing the angle of the arc() over time. The speed and direction of the rotation could be changed using mouseX value.
rotSpeed=map(mouseX, 0, width, -20, 20);
rotAngle+=rotSpeed;
var planetSize=200; noFill(); arc(width/2, height/2, planetSize, planetSize, radians(rotAngle),radians(rotAngle+350));
//planet outline rotates clockwise
push(); stroke(180); arc(width/2, height/2, planetSize+70, planetSize+70, radians(-rotAngle),radians(-rotAngle+300)); pop();
//planet orbit rotates counter-clockwise
This portion of code is the translation & rotating function for the planet's surface. The rotation is not controlled by mouse and will move regardless.
translate(width/2,height/2); rotate(radians(rotAngle2)); rotAngle2+=5; //!!surface rotates regardless mouse's position
2) Sine wave
I randomly changed the curvature of the line using a randomly generated value added to the bezier() control points.
bezX=random(-5,5); //!!smoothen or roughen curve with random values
bezier(100, 270, 108, 270, 112+bezX, 280, 120+bezX, 280);
3) Random shapes controlled by mouseY
mouseY coordinate is mapped into a line that generates 0 or 1, and the digits determine the shape type (rectangle or circle).
I was not very satisfied, so I decided to add on to the assignment.
I started with changing the background() function to have an alpha value, so that the shapes will leave a "trail" as they move.
background(0, 80);
I took out some bezier lines to make the sketch cleaner, and added more orbit lines in various length and rotation speed.
stroke(255,255,0); arc(width/2, height/2, planetSize+70, planetSize+70, radians(-rotAngle), radians(-rotAngle+300)); stroke(255); arc(width/2, height/2, planetSize+100, planetSize+100, radians(rotAngle), radians(rotAngle+270)); stroke(255,30,115); arc(width/2, height/2, planetSize+130, planetSize+130, radians(-rotAngle), radians(-rotAngle+180)); stroke(100); arc(width/2, height/2, planetSize+160, planetSize+160, radians(rotAngle+30), radians(rotAngle+100)); arc(width/2, height/2, planetSize+250, planetSize+250, radians(-rotAngle+30), radians(-rotAngle+100));
At this point, I realised that the animation was kind of poetic. The white circle looked like the sun and the sine wave, the sea. With the lines rotating around the planet, it kinda looked like the canvas was a time lapse of starry sky.
And also, it looked a lot like Apple Watch.
For the last part, which was to create something that changes every time the program runs, I took inspiration from the watch: numerical counter.
/***RANDOM NUMBER***/ push(); fill(80); noStroke(); textSize(200); textStyle(BOLD); text(int(num), width/2, 270); pop(); ///////////////////// rotSpeed=map(mouseX,0,width,-20,20); //!!rotation speed depends on mouseX num=num+rotSpeed; //!!make the number increase / decrease according to mouseX
Note here that mouse X affects both rotation speed of the planet, orbit and the counter. I like how it seemed like moving the mouse affected the "speed" or star revolution and the counter (hence "Doomsday Counter").
Once again, the final sketch.
Source code can be found here!
