15-104 / Intro to Computing for Creative Practice 
/ Fall 2017 / Roger Dannenberg
See my abstract clock in real time here!

Doodle // I started doodling to brainstorm ideas for abstracting the visuals of a clock and representing time.

I started off by doodling whatever came to mind. I doodled a cat, and then I added drool, and then I got the idea to have it drooling while looking at fish. At first I thought I’d have the cat’s drool drop by the second, the tail move by the minute, and a pile of fish grow with each passing hour. I did decide to match the drool to seconds and the tail to minutes, but I made a glowing moon sink down the sky for the passing hours.
I had fun trying to make this abstract clock cute and whimsical, but it took me a long time to understand what I needed to code and how to execute it. I looked to Roger's example code for inspiration when I was deciding what to make move and when. I popped a few screenshots of my project into Illustrator to help plot some points for triangles- like the ears and mouth. This was also my first time using curveVertex, and I also played with transparency. I feel like my code could have made use of for loops, but I wasn’t sure where to insert them. In the end, I was finally able to make it cute enough for my tastes.
(Also, when the cat’s drool gets close enough to the fish’s eye, it looks as though the fish is crying. This was intentional.)

Illustrator screenshot // I popped a screenshot of my code into Illustrator. I played with the cat's position and the colors of the scene. I decided I didn't want the cat's body to look like bread...

Illustrator screenshot // Softened the ears and turned the body around. More color tweaks. Drawing the shapes in Illustrator made it easier to draw certain components with code, using plot points.

Final screenshot // I added a hill to the background, as well as some final color tweaks.

You may also like

Back to Top