Debugging Art

A journal of ongoing adventures in creative pursuits through computers

← Back to Sketch

Notes on: New Year New Clock

This sketch is a fun take on an analog clock, but first I want to talk about circles. There's a handy function in p5.js and Processing for drawing a circle on the screen:

ellipse(x, y, radius)

But sometimes its fun to play with the math behind creating a circule at a certain point with a given radius. It's not terribly complicated but it does require brushing up on some of your trigonometry.

I ended up creating a function called fuzzyEllipse that draws a sort of Pointillist circle at a given coordinate:

function fuzzyEllipse(x, y, radius, jitter) {
  for (let angle = 0.0; angle < 360; angle++) {
    rad = radians(angle);
      radius * cos(rad) + x + random(jitter),
      radius * sin(rad) + y + random(jitter)

The clock is an analog clock with a millisecond hand, which isn't particularly practical in real-life. Less practical still, after a happy accident where my initial stab at this had the hands running in reverse, I thought it'd be fun to have a complimentary set of hands running backwards while another ran forwards. The differentiate them a little I tried to make the "backwards" hands a little more ghostly in appearance by lowering the opacity and making the circles for these even "fuzzier."

Maybe it's a metaphor for losing time, or at least the time I lost putting this together.