Time
link: https://editor.p5js.org/kat_j_park/sketches/0pwROv0MO
For the “Time” assignment, I wanted to try coding this conceptual clock I found on Behance: https://www.behance.net/gallery/6061535/Archimedes-clock
It consists of three circles. The largest circle houses the hour and minute “hands” or in this case, smaller circles. The middle circle represents the hour “hand” and the smallest circle the minutes “hand.” The middle circle rotates around the large circle 1x every 12 hours, and the smallest circle rotates around the middle circle 1x every hour. I thought this was a really interesting way to show the circular/spiraling nature of time. If you look at the step by step image from the Behance site, you can see it forms an interesting spiraling image that also sort of looks like a wormhole you can travel through.
Time is such a strange concept to me, so I had a little bit of trouble thinking this one through and making something that really communicates my thoughts about time, but this image really resonated with me. There’s something about the way that on a surface level, it just looks like three rotating circles, but when you look “into” it, it's a spiraling forward movement that really touched me. There’s kind of a bounce-y up and down movement and a forward movement, and time within time as well.
I also thought that having three similar shapes doing similar things lent itself well to the material from class, and I wanted to figure out more about circles and rotation in general. This is probably my least successful execution of code, because it was honestly really difficult. A few problems I ran into:
I needed the circle to rotate around an independent point that was not its center. I solved this by using ellipseMode (CORNER).
I’m not sure that the circles are the precise sizes that they need to be in order to actually tell time. This might be a level of math that is beyond me. I did do a little bit of math for the speed of the rotation, but I think that the size of the circle is really key to make this clock work. Is there a strong logical/mathematical way to make this kind of clock?
I would have liked to add a tick mark to the inner circles that always pointed to their respective outside rings to show the hours and the minutes.
I imagined that my code would have used functions and classes, which I still think is possible because I see a lot of repeating lines of code, but the push() and pop() are really throwing me off and I can’t seem to organize them.
I also don’t think aesthetically that it is my best work, haha. I wonder if there is a way to make it look more interesting. I was playing around with the idea of having a mouse hover function in the middle circle but not in the little circle show the hour value on the side, and then a mouse hove in the little circle show both hour and minute value. This could be an interesting interaction that demonstrates that it is indeed a clock, and not just rotating circles. Clocks also only go from 12-12 so I think it would be nice if after every full rotation, the color scheme switches from a day to a night, or maybe even something very gradual to show AM and PM?
I think in all of my creative coding HW assignments, there has been 1 or 2 (or a few) things that I was unsure how to tackle, so for my final project, I might redo all of them to get closer to a finished level.