Experimental Clock: THOR TIME!

Description

I have a friend who has a very adorable dog named Thor(pronounced Ddoreu). When I talk to my friend, she often says, "Oh, I'm walking Thor", "I have to feed him" and more. I got this impression that my friend's time is scheduled to Thor. So I decided to make a clock just for her, that is Thor himself.

Link to Code

Design Process

I first go a picture of Thor from my friend(thankfully she allowed be to post it here as well), and drew sketches. From my memory, she talked about walking, feeding, and playing with Thor. But I added sleeping too, because she often kept silent when Thor was asleep.

I thought the second sketch was nice, so I started off with that design. But as I coded the things in, I realized that I won't have time to draw everything I wanted, so I switched the design a bit. But of course, the changed design was also very challenging for me due to the following reasons,

1. 1. Font needs to be added
2. 2. Find a way to duplicate things
3. 3. Make the objects to appear in order
4. 4. Merge the images

For problem 1, I found out that we could upload font files to p5js, so it was easily solved. Problem 2 was kind of difficult, but I found about about the for property and used it to duplicate the stars. Now, for the objects to appear in order, I used if, else, if-else. I divided the minute into 4, making every objects to show up for 15 seconds. I struggled with ranging the time though, instead of using 15<=s && s<30, I used 15<=s<30 and wondered why the code wasn't working for hours.

The real problem was problem 4. I searched on Google to find solutions(I couldn't ask for help to others because it was too late), but it seemed like no one knew the solution to that. So, I decided to fake merge the shapes. I had two identical set of code. One on the bottom I added only strokes, and the other I added only fill. This method allowed be to make the shapes as if they were a single shape.

After that, I just added motion to small elements so that people can notice the sketch is actually functioning when the object is shown for 15 seconds.

Reflection

This was tougher than I thought it would be. The ears and even the sparkle was difficult to code. But through this project, I was able to really understand how to decode the example codes I found and made it into something I could use without searching for it next time. Also, it was nice to see my friend get so happy about the project I did :)

Credits

Star Example Star | p5.js from p5.js reference website