clock [github]

My clock was originally inspired by an animated GIF I quite enjoy that shows a series of squares entering and leaving the frame. To begin my process, I did some sketching on ‘grided’ and ‘cubular’ shapes. Then, I began drawing in Sketch to work out more of the visual fidelity. The units in my clock combine both traditional and non-standard ideas. I’m a big fan of AM/PM clocks, which I integrate using blue gradient colours for PM and yellow for AM. But, I also wanted to explore the notion of a non-standard sub-hour time units, to achieve this, the ‘hour squares’ fill in at a rate that’s not quite a second, but far from a minute. As far as the actual building was concerned, the experience was consistently frustrating. A lot of the features and tweaks I expected to be easy to build were actually quite tricky 😉




Calder Clock

For my clock, I wanted to emulate the movement of a mobile. I wanted the elements of this mobile to come from Calder’s animal drawings and wire sculptures, as I have always liked those and wished that he put them on his mobiles. To do this, I made a little application that loaded in an image and stored my mouse clicks. I traced Calder’s images and printed out the necessary coordinates to recreate them. I then brought the coordinates over to my clock program. I played around a lot with how the pieces could move in a way that looks  somewhat natural but also represents time. In the end, there are 12 animals, and the number of animals that appear on the screen represents the current hour. ˇThe animals rotate around in a circle once per minute.

An early attempts at trying to figure out how the animals should move. I felt like this was too messy to be read as a clock
An early attempt at trying to figure out how the animals should move. I felt like this was too messy to be read as a clock
 the program I made that allowed me to trace and store the drawing's coordinates
The program I made that allowed me to trace and store the drawing’s coordinates


Charlie is a cat. Charlie just don’t want to wake up, and he rolls around all day stretching his paws in his dreams. The little mouse Ron hangs out all the time, searching for cheese crumbs in the carpet. He moves so quiet around the edge of the carpet so that he doesn’t wake up Charlie. And slow too, as slow as six degrees per second. He’s so certain Charlie has hidden something that smells good somewhere so he just won’t quit.

The paws with the dark gray fur point to the minute, and the paws with the yellow fur points to the hour. (The directions can be a little bit off from time to time but mostly it shouldn’t be too much.) The mouse goes according to the seconds, and the carpet changes color according to the time of day too, from lighter pinkish in the day and darker bluish in the night.










Trace the shapes in Solidworks



Save as IGS file and open with text editor



Then open with Excel to extract valid point coordinates



Save as CSV file and preload in p5.js code







Finally some wierdness:



Code in Github

Kelc – Zodiac Clock

***Embedding Issues, LINK TO VIDEO***


This project proved to be quite a challenge but I am satisfied with the result. I started off biting a little more than I could chew by looking up a library on github that would calculate the current moon phase– I intended to program a clock that would simply use that calculation and draw the correct moon phase. This proved to be quite challenging (due to my lack of knowledge of important Javascript libraries) and as well I didn’t feel like I was doing much of the work.
I ended up instead creating a clock of zodiac constellations. The current code was simple but somewhat tedious to implement, although some features that are currently left out (which I intend to add) include the rest of the constellations (as coding two took a bit of time and careful measurement) and also a transition from one zodiac to the next. Zodiacs are monthly but I sped up the month variable to seconds to attempt to try out ways of smoothly transforming from one sign to the next, to no avail. I still intend to implement both, so it is a work in progress to say the least.




sketch.js code

image image image image


In this project, I was inspired by the idea of data visualization. I thought it was interesting to have a parametric form of data visualization, and I wanted to make a clock which represented something I found to be a serious issue. That issue is lack of access to water throughout the world. I have a large circle to represent a woman or a mother, and a small circle rises from within the larger circle and floats upwards with each second. The large circle moves sideways, representing hours and minutes. Its representation of minutes is a bit more straightforward, as with each passing minute, it moves one step sideways. It moves between elongated lines which stretch across the canvas to represent areas where there are wells for the mother to access water. The lines are three hours apart (with respect to the mother, as it takes three hours from her to get from one well to the next-when in reality it takes some individuals 3 hours and 42 minutes.) The child circle disappears after it reaches the top of the canvas, and it does so with each 90 seconds that pass to represent the fact that every 90 seconds, a child dies of a water related illness due to lack of access of clean and safe drinking water. Each time a child circle disappears, the red value of the background increases by a certain increment.

arialy – clock


While putting pen to paper, I had a pretty difficult time figuring out specifically what I wanted to make. I had general themes I like, such as having time break things apart, but it took me a while to actually get into p5. My final product generally has a similar vibe as what I was going for, I do enjoy the way the circles slowly fall apart. The larger circles represent hours left in the day and are comprised of particles representing one minute. A small particle breaks away from the larger hour circle as every minute passes. Every time the mouse is pressed the hours in the day that have already passed will re-explode. I think this project can be cleaned up a bit, tweaking the colors and creating more randomized velocities, as well as perhaps changing the minute circles to seconds instead.





I am happy with how my clock turned out. I feel the design was greatly improved by a mistake I made when figuring out the geometry for the minutes. I was originally going to represent minutes by a minute()-pointed star but I ended up using arrow-looking shapes made of multiple triangles. This allowed me to add another color and play around with color schemes, which I also think worked out nicely. I was worried my design would look to simplistic from my original sketches but I think it works because it shouldn’t be over complicated – even though this is complicated in that its hard to read the time for larger numbers , but I didn’t see this as a problem.



I wanted to make a clock based on the movement of planets so I started with the key in the upper right corner. It works similar to a clock face, the sun acts as the center and the planet acts as the hour hand. From there the planet then acts as the center and the moon acts as a minute hand.

Relative to the planet though, I wanted one revolution of the planet around the sun to act as a year. The stars in the sky slowly rotate around the the point in the center of the screen when the compass points North over the course of the 12 hour year to show different parts of the year.  One revolution of the moon around the planet would equate to one month with the appropriate phases of the moon. I also have the sun rise and set every minute.

I wanted the viewer to be able to see both the sunrise and sunset as they happened, so I tried to make a panorama 180 degree view. There is a side scroll when the mouse is near the left or right edge of the window, as well as a compass to let the user know which direction their facing.

I didn’t initially intend for this clock to almost mirror our 12 months/year, ~30 days/month calendar, but that’s just how it ended up. Throughout the process I became painfully aware of the annoyance of leap day and how a calendar year in all units of measurement doesn’t line up exactly.





This is not so much a “clock” as it is a minute timer. It’s also a video, because I wrote it in Processing, not p5.js.

//triangle made of three points and an angle
PVector anchor; 
PVector trianglePt1;
PVector trianglePt2;
float theta;

PImage img1, img2, maskImage;
//float offset = 0;
//float easing = 0.05;

//class of circles called Spot
//declare the class, the array, and the object
Spot[] sp = new Spot[12];

void setup() {

  size(640, 480);
  anchor = new PVector(width/2, height/2);
  theta = 0;

  //construct the object
  for (int i = 0; i < 12; i++) {
    sp[i] = new Spot((i+1)*width/12-(width/12/2), 40, width/12);

  img1 = loadImage("profile_cutout.png");

void draw() {

  background(250, 215, 210, 0);

  image(img1, 170, 288, 300, 300); 
  tint(255, 185);  // Display at half opacity
  fill(30, 125, 175);

  theta += 360/60/frameRate;
  trianglePt1 = calcPointonCircle(radians(theta), 150);
  trianglePt2 = calcPointonCircle(radians(theta+90), 150);
  triangle(anchor.x, anchor.y, trianglePt1.x, trianglePt1.y, trianglePt2.x, trianglePt2.y);

  fill(190, 100, 200);

  for (int i = 0; i < sp.length; i++) {
    ellipse(sp[i].x, sp[i].y, sp[i].diameter, sp[i].diameter);

  for (int  j = 0; j < 12; j++) {
    float thetaCoordinates = radians(j*30);
    int radius = 150;
    float x = radius*cos(thetaCoordinates) + width/2;
    float y = radius*sin(thetaCoordinates) + height/2;
    ellipse(x, y, sp[j].diameter/2.65, sp[j].diameter/2.65);

  /* Below is an effort to get the array of Spots sp[i] to move down the screen. I wanted them to move down 
  one per hour, and map this to time, but I didn't figure it out. 
  valid = True 
   for (int i=0; i<12; i++) {
   if (random() 0.5) {
   then sp[i] [sp[i].y]-1
   if sp[i][sp[i].y]==height {
   valid = false;

//float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

PVector calcPointonCircle(float _theta, float radius) {
  PVector tempPoint = new PVector(anchor.x+radius*cos(_theta), anchor.y+radius*sin(_theta));

  return tempPoint;

class Spot {
  float x, y, diameter;

  Spot(float xpos, float ypos, float dia) {
    x = xpos;
    y = ypos;
    diameter = dia;



Personal preference and style instinctively propelled me in a design, illustrative, streamlined, or nature/environmental-oriented approach to the assignment; the fact that it was an assignment with a timekeeping topic kept my ideas in check by balancing them with functionality and utility. As “abstract” was a key word to the work’s intentions, I geared my ideas towards nature, going through processes as a growing tree (trunk growing by the hour, branches by minute, leaves/flowers by second), and eventually the sky. The sky idea stuck with me, in that since origin has time reflexively been associated with the aerial plane–in regards to stargazing, orbits of planets, rotations of celestial bodies, etcetera. I decided to further this idea as I settled on my approach: with little star specks appear every second, bigger and brighter stars every minute, and constellation fragments per hour of current time; all of these would also be characterized by continuous rotations and dimming/brightening cycles via some calculation of milliseconds. Hence the product of a non-overwhelming, yet abstract starry night interface of my clock, appealing both my environmental and design-based tendencies; while it is reasonably possible to tell the time by counting constellation segments and stars, the effect is still subtle and the utility requires some effort; but in connection with how time and mother nature wait for no one, I want the audience to feel relaxed while viewing the atmospheric vibe of the work–and to sink in to a mere vague notion of time, and to admire the characteristics of this nature-based simulation.
Food for future thought: generation of mist/galaxy patterns/smoke throughout, possible integration of calming instrumental music, other celestial bodies/comets (may sacrifice utility and functionality however), subtle rotation of constellation figures around some origin…


kander – Clock

github link


My first idea, which is probably the one that came closest to actually transpiring, was three cups. Each time a new hour, minute, or second happened, a ball would drop into the cup. When the unit of time rolled over, the balls would drop out.


Although my final result is much simpler than the original idea from which it was drawn, I’m not upset that I wasn’t able to implement all of my original plans.

The gradual chaos built up to the point when the screen contains however many hours balls, 59 minutes balls and 59 seconds balls is, and then its release when the time rolls over and the balls disappear reminds me of the fresh start that each new hour seems to bring. I would like to see my clock somehow implemented mechanically, with a bunch of actual balls being shot out of different compartments. The balls are sized and their alpha value is adjusted according to their “importance” in telling time. I tried to balance the focus the viewer would place on each element of the clock — the seconds were tinier, so they moved much faster than the hours, for example. It would be an interesting modification to reverse the attributes — for example, the seconds are huge and slow moving, while the hours zoom around the canvas — and see if it still reads as a clock.

Some of my other ideas:

My second idea had to do with coloring the background



Another idea was centipede, which gave characteristics to little bugs on the screen according to time


My final idea was a light up grid, where the units of time were represented by different areas, and the areas flashed according to how many hours, minutes, or seconds there were.img_1468


Catlu – Clock


For this project I went through several ideas. First I thought about the human biology and considered clocks that were measured in heartbeats and breaths. Later, I thought about making a clock on the 28 day average menstrual cycle. Slowly, I moved away from this biological theme as I shifted to a more personal view of time. The clock I chose to do in the end was a clock based on emotions I was feeling while brainstorming. These feelings were of a lack of time. Often I feel that there is much to do in the day, but the time gets away from me and just burns away. I end up getting close to nothing done. This cloth represents the feeling of watching your blank day being eaten up before you can make a memorable mark on it, leaving only the nothingness underneath. I hope it is a reminder that time is precious, and a bit of a fright when you check back and see the fire has consumed more than you thought.

Making the clock involved a lot of research. Initially, I had no idea how I would make the fire. After looking around the P5.js website and trying a few methods including particles and shapes, I decided that perlin noise would be the best way to handle it. I watched all of Dan Shiffman’s videos on perlin noise, and also found some useful reference code The clock is on a 24 hour schedule meant to symbolize the passing of the day. Time can be estimated by the amount of un-burned paper left within the white frame, the frame of time.

For some reason my pictures refused to upload in the correct orientation. Please click on them to see them correctly. Thanks!






For this week’s project, I decided to develop a clock in a setting that seems indifferent of time: the void. This idea of a void being a placeholder for time came to be when I realized these seemingly empty/endless places (voids, black-holes, etc.) only seem to be empty and endless because there lacks evidence of anything existing in them. However, just because our understanding of a subject is restricted doesn’t mean it doesn’t exist.

Imagining a void with characteristics completely different from most expectations, I decided to give the void boundaries and make the color of the three different creatures vibrant. The hour creatures are the largest of the three and move very slowly. The minute creatures are middle-sized and move at a calm pace. The second creatures are the smallest and the fastest, as they appear and disappear the most. Additionally, each creature has a number placed on it (representing in number in terms of time). However, these numbers are purposefully placed in hard to read areas of the creature. This ties directly with the previous theme that just because something is not visible (we don’t understand), doesn’t mean it doesn’t exist.

Github Code Link:



img_0005A vine hangs from above. On the vine small branches dance along it. Each branch grows cherry blossoms.

There is one vine per hour (12 hour system), one branch on each vine for each minute, and one blossom on each branch for each second. The branches change position every second, and their colour loosely changes with time.

In the sketch I’ve illustrated the time 4:08:12 – 4 plants, each plant has 8 leaves, each leaf has 12 veins.

My clock is a bit of a literal interpretation that it takes time to grow. As time passes more vines grow, more branches reach out and more blossoms bloom. The motion isn’t as fluid as I would have liked it to be but I definitely learnt a lot about perlin noise and how to integrate time into my code. In retrospect making three nested for loops was probably a poor choice. As I learn more about P5 I might come back to this project and try and get it to feel more like my personal illustration style. As youimg_0006 can see, my sketch and my program look nothing alike, so it would be another goal as my coding skills improve to get my program up to my illustration. A personal goal for this semester is to develop a cohesive and strong personal aesthetic and style.



Cherry Blossom Clock


Update: As of 2020, an updated documentation for this project is now on my website at

How to read: #branches = hours, length of current hour/branch = minutes, #blossom clusters = seconds.

This project was quite fun to do- although the initial idea of using a recursive-style (but not really) generative tree seemed hard, the most time consuming part of this project was the more subtle things, such as how many branches were allowed to come out of a parent branch, the artistic design (strokeWeight, colors, etc), other “rules” regarding positioning and working on animations.

Although it seemed optional, I felt it was quite important to have the ability to re-grow your tree at any point (by clicking), and as an aesthetic design, having the branches “grow” into place quickly to catch up to the current time. I also felt adding the “floating” death animation for the blossoms was a nice touch, something better than just disappearing.

The hardest part of this project was actually debugging. As I added tools to help me develop (such as the ability to speed up time or force a specific time of day), I realized more and more how many issues there were that I couldn’t notice real-time, and figuring out what was wrong was quite an adventure.


screen-shot-2016-09-16-at-12-22-15-am screen-shot-2016-09-16-at-12-22-21-am


Fair warning, this thing is an inefficient and slow mess, especially so if it’s late in the hour.

p5js Source

Initially for this assignment, I was exploring the idea using natural cues to depict time, like the sunrise, and had an idea of a sort of panorama of livestreams from around the world that would rotate as the day passes so the result is a perpetual sunrise. After a while of fiddling with ‘sunrise cam’ APIs I decided that was too finicky and wanted something self-contained.

I still liked the idea of natural indicators or systems, but centered my new direction around growth, decay, and lifetimes. I learned about DLA systems from Bourke and Shiffman, and wanted to create a clock that would grow and evolve over the course of the day, but would produce a different and unpredictable output. Inherently, this type of time-telling is significantly less exact, and gives more of a “half-past two” kind of time-telling vibe.


The initial idea was pretty simple: create a new ‘drunken walk’ particle every second, and then let these pseudo-randomly accumulate over the course of the day, forming an increasingly large and complex tree structure.

However, as often happens, a few things changed along the way. Firstly, my dreams of having one plant grow over the course of a day were crushed by the slowness of JavaScript handling collision detection between any more than about 2000 particles, and at the rate I introduce new particles, there are 3600 generated an hour. So, I decided to have a new ‘tree’ grow every hour, and needed a new way to indicate the accumulation of hours.

As a debugging tool, I added a sphere that would rotate my plant to indicate where the new particles were coming from, and as a sort of happy accident I found an interesting interaction between the particles (rendered the same color as the background to avoid cluttering the clock) and the trail left by the rotating orb that spawned the particles.

This effect, and the program with a background can be seen below:

clock-background-hidden clock-background-revealed

The particles act as very fast moving random erasers, which when done at a small scale, produces a nice smokey / liquid inky looking effect.

I decided to implement this as part of the clock because it was the kind of visual ‘decay’ that complimented the growth of the tree but on a much shorter timeline.

The quantity of orbs then became the indicator of the hour, which I think is the most important that it be explicitly count-able, followed by minutes, which is sort of a visual approximation, followed by seconds, which are only perceived by the effect they have on the other two components.

This clock takes quick a while to ‘ramp up’ and has a good deal of inaccuracy when it’s started not at or near the top of the hour. More specifically, I compensate for the current ‘minute’ by tossing in a bunch of particles when it starts (60 per minute) but the nature of the random walk means that the tree will not entirely catch up to the time it’s supposed to be.

However, this does mean that over the course of the hour, it produces a lot of interesting and unique textures and changes appearance dramatically over the course of the day.

Here’s around 11:03pm, where there are not enough particles to clearly articulate the number of orb emitters:


Any here’s a more dramatic 2:15pm look:


Apologies for the novella, that’s all folks!



Here’s the fullscreen version

After staring at a digital clock for an extended period of time, I began to feel that the clock was dwelled by stick-like creatures who were enslaved to work endlessly in the confined rectangle of the display. And that was my inspiration.

I considered my goals. I want it to be playful and interesting, to be something that people will stare at for time longer than they should have at a clock, yet still utilitarian like a traditional digital clock, with which people can know the time immediately after a single glance. My clock can be placed at an airport or a train station, where both a large and clear clock and something to make waiting less boring is needed.

And then I started building everything from scratch. I wrote physics for the sticks, created a system for managing and animating them, etc.


Afterwards I thought about the future of my project: These stick-like creatures will start to goof off when they assume nobody’s watching them. They will play with each other. And when the user comes back, the creatures will rush back into position.

I wrote my own physics engine for the sticks so that they behave like real sticks. In the future I might refine that engine into a separate project, perhaps called Stick2D, as an alternative to Box2D.

Drewch – Clock


I didn’t really feel like using numbers or abstract representations of numbers, so I needed something cyclical. Since I liked the ocean, I decided to try to learn how to make a basic one out of shapes. Every 8 seconds it heaves up and down, and every millisecond a raindrop is made, and every minute, a cloud passes. I, unfortunately, couldn’t smoothly alter the Perlin Noise map so I couldn’t do the original plan of generating a wave every second. I’m sure there’s a way but I shifted gears instead (my only regret), but overall I achieved my goal of creating a calming, cyclical, generated animation.



Jaqaur – Clock

Click to re-set with a new color!

I had a lot of ideas when I started working on this project, and as usual, I went with none of them. I considered an analog-style clock but with one hand pointing to the minutes whose length would correspond to the hours. I considered some clock that would make the user do work, either by solving a riddle or a math problem, in order to figure out the time, but I wanted to do something a little more interactive and fun to look at. I considered some complicated Rube-Goldberg-esque setups, but those would have been too complicated to make, I think. Some pictures of my initial sketches are below. My final idea is the closest to the second sketch, which was a screen full of all the numbers in a random order, and hands pointing from the mouse to the correct one, but it’s still not much like that.

Anyway, the idea that I actually went with is definitely my favorite. It’s a pile of marbles, each with a number on it. There is a marble for every second, every minute, and every hour, and they are all the same size except for when they are active. If the time is the number displayed on a marble, then that marble will grow to the appropriate size (hours get really big, minutes get kind of big, and seconds don’t grow much). It will shrink back again when it’s no longer needed.

The hardest part was getting the “physics” to work, and it’s still not perfect (most of the code that works was borrowed from other people; see my code’s comments). There was a sort of inverse relationship between the amount of overlap the circles could have (which is not good, and would lead to a bunch getting squished in the corners) and the amount of vibration throughout the pile (which is also not good because it can make marbles hard to read). Ultimately, I leaned towards the “More Vibration” side, and just put a cap on the marbles’ speed so they can’t shake too much.

I also had to add a function that tells the numbers themselves how big they need to be. I decided to make this a function of their marble’s width, and while it works pretty well, it makes the “display” function that much more complicated. Another problem I faced was turning it into 12-hour time. I knew the “hours” function was in terms of 24 time, so I added an “if” statement that would subtract 12 if hours() returned something greater than 12. However, I forgot that, in 24 hour time, midnight is 0:00! I only recently accounted for this, but now it works fine.

I really like how it looks now. The big marbles tend to slowly rise to the top, like they would in real life, but there is always movement. Personally, I can watch it for a really long time! I wouldn’t really change anything about it, except maybe patching up the physics. I think it’s really pretty and very readable. To make it even more interactive, I added a feature where when the user clicks on the Canvas, all of the balls get re-dropped in a new color. The color is always randomly generated, but I added a formula that prevents the color from being too dark or too ugly (in my opinion). Have fun playing with it!

My initial sketches:

I would like to point out that this clock does not always work as intended when run alongside everyone else’s clock; it’s functions are slowed down such that the seconds can’t reach their full size before it is time for them to shrink again. This makes for less marble movement than intended. I highly recommend viewing this post in its own tab for maximum effect!


Note: for the version of code that was submitted before the due date (aka – the embed right below) was not tested for 10, 11, and 12 o clock times. (If I change the code structure significantly in my leisure time – like besides the superficial color values coded in –  I will post new versions in a separate post)

If you notice, the fattest circle drawer draws out the hour digit, the next biggest gives the number by ten minutes, and the thinnest automated one draws out the single minute digits. Move the mouse very slowly and have fun entwining the lines with eachother!


I feel like my first explorations into this effect were more successful.


(you can find more process on that in the other post I made early in the week)

The background() function seems to have changed some of its abilities from last year to this year’s current p5 version (Edit of previous statement, I ran the program with an older p5 version but it was exactly the same. I must have remembered things wrong….pity- I could have sworn it was different)

ex: A background of 3 opacity put in draw() only overlays over the previous frame’s shapes once (or only to a certain extent before it seems it no longer effects previously drawn afterimages) – it seems overlaying multiple layers of opacity 3 does not = overall opacity of 3 * number of layers.


(above shows 3:46 pm – the colors reflect the kind of light and shadow expected at that time. The direction of the light also reflects the position of the sun if east was right and west was to the left. It’s how I know it’s pm as opposed to 3:46 am in the night)

this is the code that I used to convert hershey font data to vectors stored in arrays:


(edit of converthersshey link above – I don’t recall what version I posted for that. I’m pretty sure the final version that I used to generate the info used in the final clock that I posted was made after I started this post…….well, anyway, if anyone tries to run that program and it doesn’t work – here’s the up to date version:


Concept mental map of all possible ideas for the clock: I wanted to establish a breadth of ideas before going in depth anywhere. I was too excited for the project just to explore only one area – which I’ll admit may or may not have been a bad thing given we have deadlines to meet. From the concept map, I really wanted to explore telling time through location and utilizing weather API’s to visualize realtime, location specific data. That combined with an interest in dendritic growth which later evolved into an exploration of recursive fractal trees (thank you Dan Shiffman!) ended up being a fairly…heavy program to figure out. The idea I actually settled on was actually just a tangent off a visual effect I coded up for fun.


The left page was a further exploration of possibilities for the location clock (tell time through the scene – ex: clock shows sunrise in China tells you it’s say…6 pm in Pittsburgh). The fractal/recursive trees would be generated according to certain presets that would allow it to grow within patterns specific to the region (ie – wider angles of branching to achieve the twisted/squat bonsai look as opposed to branches all reach fairly consistently up for tropical trees, etc). If I can finish debugging the start of that code – I will upload.

These were some inspiration pics:

screen-shot-2016-09-14-at-6-11-16-pm screen-shot-2016-09-14-at-6-11-29-pm screen-shot-2016-09-14-at-6-12-02-pm screen-shot-2016-09-14-at-6-12-16-pm screen-shot-2016-09-14-at-6-12-55-pm

The page to the right is for the idea I actually ended up doing – I had spent too much time experimenting and not narrowing down and focussing in one direction that I feared I wouldn’t have time to finish. Since I had the bulk of the visuals for this soft gradient circle clock, I had thought I would be able to finish it in a timely manner and debugging without losing sleep….so I switched over.


victoryReflection: I predicted very very wrong. This soft gradient clock was definitely not quick. Linearly interpolating presented very curious challenges because it was a series of vector points that I generated out of Hershey font data online. I thought some sort of vector path addition would work – but if it does, the solution evaded me. Paul Bourke ad more complex interpolation that I want to explore over the weekend so I can tweak this clock to look be smoother with it’s motion.

The colors of the clock writing spheres reflect the kind of light and shadow that are outside. (see process book for details) In retrospect, it would’ve been much much smarter to fill my color array with the HSB color mode in a for loop than to personally hand pick my colors. Other than that the direction of the light reflects where the sun is in the ‘sky’.

Ex: 6 o clock means the light part of the gradient is on the right (EAST) side of the circle as if a sun was rising and casting light on that side.

Things to improve on:

1.nonlinear interpolation

2. the concept of the piece (conceptually….not that insightful on anything)

3. Visually appealing and fun to interact wit but I should probably throw in some slight noise into the colors for minutes and hours to differentiate it with more than just size.

4. Time management/a more efficient ideating process

5. The code is inefficient in some places – but I couldn’t figure out how to make it cleaner without doing some major overhaul – will definitely see what I can do about it next time.

I’ll probably add things on just for fun over the weekend – feel free to check out this link for anything new:



Cambu and Krawleb for inspiration and reference help! Thank youuuu! (they are awesome ppl to talk to for idea bouncing or a fresh perspective!)

Golan Levin the awesome

Hershey Text:

and who else? Yup. Paul Bourke!


The goal in this project for me was to make a clock that didn’t completely abstract the data so that the time was readable, but that didn’t immediately appear to be a clock. I used the concentric orbiting motion of celestial bodies to inspire how I thought about days, hours, minutes and seconds, each of which is represented by a circle. The intersections of the circles belay information about the hour, minute, second, or millisecond respectively.

In my planning, I had initially run through several ideas. One was a poem-clock in which I would use a rhyming dictionary to find words that rhymed with the time. For example “five thirty six” could be abstracted to “jive dirty kicks.” The user would have to solve a sort of riddle to determine the time. I then contemplated using a more physical, particle-like representation for  units of time reacting in a Rube Goldberg setup. Seconds would be falling circles which would collect into a container, merge together, and then pour into another container containing larger circles representing minutes, etc. I thought that my current representation was a good compromise between legibility and physicality.




This was a slight tangent from our actual assignment – just a special effect; it’s a color gradient in various shapes (the example here is a circle).

Cambu had pinned a really cool visual on pinterest and I had thought it was an incredibly beautiful yet refreshingly simple aesthetic that would be fairly short and quick to code up… I couldn’t resist. (Credit and thanks to cambu for bringing up the concept!!!! Probably wouldn’t have ever crossed my mind to try it otherwise. IT’S SO FUN TO PLAAAAY WITH)
(Much love for Krawleb for introducing, explaining and teaching how the noise function works! I really appreciate the time you take to help others!!!!)

I might add more features after this post – to see the latest verison:

(P.S. the circle rotates in the most up to date version!)