Featured Posts

ICM | Week 2 **Updated

September 15, 2017

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



var planetSize=200;
arc(width/2, height/2, planetSize, planetSize, radians(rotAngle),radians(rotAngle+350));

//planet outline rotates clockwise

arc(width/2, height/2, planetSize+70, planetSize+70, radians(-rotAngle),radians(-rotAngle+300));

//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.


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.


arc(width/2, height/2, planetSize+70, planetSize+70, radians(-rotAngle), radians(-rotAngle+300));
arc(width/2, height/2, planetSize+100, planetSize+100, radians(rotAngle), radians(rotAngle+270));
arc(width/2, height/2, planetSize+130, planetSize+130, radians(-rotAngle), radians(-rotAngle+180));
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.


      text(int(num), width/2, 270);
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!

Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

Please reload

Recent Posts
Please reload

Search By Tags

Hafiyyandi | Creative Technologist

New York, New York | hafiyyandi@gmail.com