starry – timepiece

Project link :

My project was inspired by the shadows of the tree outside my dorm; I’ve always been interested artistically in how light and shadow change colors depending on the time of day. I thought the clock prompt was appropriate for exploring this concept given the history of timekeeping; I wanted to explore how people in medieval eras thought about time before the move towards accurate and precise timekeeping, how their activities were not divided into rigid blocks of time but more guided by the sun’s position. I didn’t want to include a numerical representation of time, and instead wanted the viewer to be able to interpret the time based off the color of the light and shadow, which are all distinct depending on the time of day. The project’s visuals are mainly created using lerpColor and various blend modes, and the leaves and shadows are created using Perlin noise. The colors lerp through various time periods of the day (morning, afternoon, sunset etc.).

The final project was my third attempt at the piece; my first two attempts were with the WebGL mode and the default 3D primitives, and my second was with Three.js. I ended up switching into 2D because I thought 3D visuals would have less artistic control over the light and shadow. I liked how certain times of day came out in the final result (the evening period from 4PM – 6PM, and the afternoon from 12 – 4PM), and overall I’m happy with the result, but I think some of the colors could be tweaked to be more accurate. I struggled a lot with getting the colors right as well as the visual style of the leaves; I’m still not very happy with how they look. In addition, I didn’t really know what to do with the shadows because they remain the same even though they should change depending on the rotation of the sun, but it was too difficult to calculate that. My main struggle was being unable to determine what was wrong visually with the piece; most of the time I only had a vague sense that something looked bad but was unable to pinpoint what it was exactly.

Video (sped up time)


Sketch on OpenProcessing Sketch on p5.js

Note: You have to press play once yourself on OpenProcessing for some reason. On p5.js it autoplays right on startup.

My clock tells the time of day by playing a song on SoundCloud with that title. I achieved this with a really simple code that pulls a SoundCloud embed code from a 2D array where the first index is the hour and the second index is the minute. So basically, I have 12 arrays each with 60 values. I wasn’t sure what to expect when making this clock, but it reminds me a lot of the lofi music lives on YouTube that help people study. Though the songs never make it past one minute before switching over to a new one unlike the lives that play full songs, I think the feature is a really interesting way to experience the passage of time while working or chilling! Some of the songs have lyrics that match their title, like “It’s 12:43 right now and I can’t sleep” or something like that, which is also a cool way to hear what time it is. I mentioned that timekeeping devices that engage my sense of hearing are my favorite (cuckoo clocks!), and I’m really happy with this exploration of that!

I originally planned on using Spotify, but the Spotify embed didn’t really serve my needs properly. It looked ugly, made the user sign in before listening, only played a 30 second snippet of the song, and wouldn’t even autoplay! It was a nightmare. After some troubleshooting and research, I found that SoundCloud worked a lot better and had the features I had envisioned!

Since I’m so busy this month, I tried to keep this as simple as possible, which totally worked! It took me just about 15 minutes to come up with the structure and make it work. The only flaw with my brilliant plan… I severely underestimated how long it would take to hand pick over 700 songs! There are also a lot of bad songs out there… like, straight up BAD… that I had to sift through! But, I picked songs that I found good and interesting (even if they weren’t my taste). From Russian rap, to Spanish screamo, to just straight up NOISE sometimes, I got to explore really cool genres and pick a good variety for my clock.

With that comes my big disclaimer… a lot of these songs are explicit, so beware. There’s lots of vulgar rap music and songs in languages that I can’t speak so I don’t really know what they’re saying. It feels really irresponsible to make something with pieces of other people’s work that I can’t fully listen to with my time crunch, so if you listen to my clock and hear something that’s not okay, please let me know so I can replace it ASAP!

On the other hand, I did get to pick some songs that were really meaningful, like a tribute to the artist’s friend who passed or a beautiful song about the impact of police brutality. There are funny songs, calming songs, scary (SCREAMING) songs, and I really love that the most about it!

Dr. Mario – Timepiece

This is my project time keeper:

This is a base defence game called Time Keeper, your goal is to fend off asteroids hurling towards your planet that has a one minute orbit, with a self defence moon with an orbit of one second. The asteroids are also spawned on a one second timer. There is also a reminder at the top of the play space that changes every 15 minutes telling you what you could be doing instead of playing the game.

I think the biggest issue with my piece was that I was revolving too much around making a game and not enough on getting it to be an actual time piece. There isn’t much to show people that it’s time based and I tried to change that in the most recent changes but I still feel like I messed up on that part and I will keep it in mind for future projects that the theme comes first and my ego comes second.




The concept of this time piece is a galaxy clock.  The rays of dots expanding from the center of the sun indicate to the viewer the hour of the day, and there are 12 indicator dots of the hours for easier viewing and understanding. Moving on the the minutes, a planet revolves around the hour sun and the distance from the top to the planet is the number of minutes that has past. The minute planet has a moon that represents the number of seconds that has past. The planet and the moon has an orbit that indicates the time and lets the viewer grasp the orientation of the starting point to tell the time.

I wanted this to be sort of mechanical in nature, as if the clock was built in real life and conformed to the effects of gravity, so I put supporting lines in-between the planetary objects. However, I think that this concept is not clear because the graphics are vector like and not similar to things we view in real life. I was also planning on having a door open to reveal the sun, but decided to take it out since it seemed out of place, which could help in describing the concept more to the viewer.

Link to project in OpenProcessing