Lecture 09-09b: Clocks

Sources for this Lecture

Representing time is an endless fount of innovative inquiry, and a perennial assignment in the media arts. I received the assignment from my teacher, John Maeda, and I now pass it on to you.

In this lecture, we’ll consider alternative representations of time, in history and in the arts. This lecture includes materials from:


Clocks as Performance: Live and Unplugged

Here’s Standard Time, a 24-hour performance by Mark Formanek, in which a clock is rebuilt every minute:

Here’s Sweeper Clock by Maarten Bas, a movie featuring two men with brooms, recorded from above. They continually push lines of debris to form (moving) clock hands.


Pre-Modernity

Joshua Foer has done such an excellent job, it is best just to link to his A Minor History of Time Without Clocks. Here’s a PDF backup. Let’s pay special attention to the following:

  • 1600’s Cannon Dial
  • 1633 Kircher’s sunflower clock, set by the heliotropism of a flower
  • 1728 Sawai Jai Singh’s 90-foot tall sundial, accurate to 2 seconds
  • 1733 Moon dial, read by the shadow of the moon
  • 1751 Linnaeus’s flower clock, read from the opening of flowers
  • 1929 “aktograph”, or bean leaf movement clock

More Thoughts on Clocks

It’s worth remembering that the convention that we use 12 (or 24) hour time is totally arbitrary — an artifact of ancient Egyptian astronomy. Other systems have been used and proposed. For example, until quite recently, a six-hour day was used in Thailand. During the French Revolution, when the metric system was invented, people seriously proposed decimal time. Here’s a decimal clock from the late 1700s:

clock-french-republic


Crowdsourced Clocks

The Human Clock is a clock made from crowdsourced photographs. The Photo’Clock by Mono-1 is similar.

1231

Another, All the Minutes is a clock comprised of tweets about the current time.

tweet

The World Clock Project by Harvest:

screen-shot-2016-09-09-at-1-29-50-am

A well-known ‘crowdsourced’ clock (in a different sense) is Christian Marclay’s Clock, a 24-hour film made up of about seven thousand clips, each of which either says or displays the (actual) time of day, or which makes a cogent reference to time:


I have a sneaking hunch these clips won’t have a very long lifespan on that video hosting site. Here’s a still image:

marclay


Software Clocks

Let’s start with something simple. The Colour Clock displays the current time as a hexadecimal color. Hours = red, minutes = green, seconds = blue. There you go; glad that’s over with. In case you were wondering, more than several people have thought of this idea. Low hanging fruit.

Now let’s go back in history. Here are John Maeda’s 12 O’Clocks from 1996. If the real apps (OS9) don’t work any longer, here’s a video (jump to 4’00”):

Live OS9 demo instructions for Golan: 

Here’s an interactive clock (Java applet) I created for John Maeda’s assignment in 1999.
bandedclock

bandedclock.js

// Banded Clock by Golan Levin
// Design By Numbers version, March 1999
// Processing version, February 2007
// p5.js version, September 2015

//================================================
var prevX = 0;
var prevY = 0;
var clickX = 0;
var clickY = 0;

var NCOLORS = 256;
var colorArray = [];
var S, M, H;
var Scolors = [];
var Mcolors = [];
var Hcolors = [];
var ys0, ys1;
var ym0, ym1;
var yh0, yh1;

var Soffset = 0;
var Hoffset = 0;
var Moffset = 0;
var Svel = 0;
var Hvel = 0;
var Mvel = 0;
var damp = 0.94;

var mil, sec, minut, hou;
var milError = 0;
var canvasWidth;
var canvasHeight;

//================================================
function setup() {

  createCanvas(600, 200);
  canvasWidth = width;
  canvasHeight = height;

  for (var i = 0; i < NCOLORS; i++) {
    colorArray[i] = color(i, i, i);
  }

  ys0 = 0;
  ys1 = canvasHeight / 3;
  ym0 = ys1 + 1;
  ym1 = canvasHeight * 2 / 3;
  yh0 = ym1 + 1;
  yh1 = canvasHeight;
}

function draw() {
  updateClock();
  drawClock();
}

//--------------------------------------------------------------------------
function updateClock() {

  findMillisError();

  mil = (millis() - milError) % 1000;
  sec = second();
  minut = minute();
  hou = hour();

  S = (sec * 1000.0 + mil) / 1000.0;
  M = (minut * 60.0 + S) / 60.0;
  H = (hou * 60.0 + M) / 60.0;
  
  Svel += 0.001*(noise(millis()/3500.0)-0.5);
  Mvel += 0.001*(noise(millis()/4700.0)-0.5);
  Hvel += 0.001*(noise(millis()/6100.0)-0.5);

  Soffset += Svel;
  Moffset += Mvel;
  Hoffset += Hvel;

  Svel *= damp;
  Mvel *= damp;
  Hvel *= damp;

  var p;
  var ps, pm, ph;
  for (var i = 0; i < canvasWidth; i++) {
    p = i / canvasWidth;
    ps = p * S + Soffset;
    pm = p * M + Moffset;
    ph = p * H + Hoffset;
    Scolors[i] = wave(GMOD(ps, 1.0));
    Mcolors[i] = wave(GMOD(pm, 1.0));
    Hcolors[i] = wave(GMOD(ph, 1.0));
  }
}

//--------------------------------------------------------------------------
function drawClock() {
  for (var x = 0; x < canvasWidth; x++) {
    stroke(colorArray[Scolors[x]]);
    line(x, ys0, x, ys1);
    stroke(colorArray[Mcolors[x]]);
    line(x, ym0, x, ym1);
    stroke(colorArray[Hcolors[x]]);
    line(x, yh0, x, yh1);
  }
}

function drawClock() {
  for (var x = 0; x < canvasWidth; x++) {
    stroke(colorArray[Scolors[x]]);
    line(x, ys0, x, ys1);
    stroke(colorArray[Mcolors[x]]);
    line(x, ym0, x, ym1);
    stroke(colorArray[Hcolors[x]]);
    line(x, yh0, x, yh1);
  }
}

//--------------------------------------------------------------------------
// Utilities

function findMillisError() {
  var sec2 = second();
  if (sec2 > sec) {
    milError = millis() % 1000;
  }
}

//------------------
function GMOD(A, B) {
  return (A - (floor(A / B) * B));
}

//------------------
function wave(a) {
  // inexpensive ramp function, 
  // but not as nice as true sine wave (below)
  var val = 0;
  var cscale = 2.0 * 255.0;
  if (a < 0.5) {
    val = round(a * cscale);
  } else {
    val = round((1.0 - a) * cscale);
  }
  return val;
}

//------------------
function sinWave(a) {
  // expensive trigonometric function, but nicer looking
  var sina = (1.0 + sin(TWO_PI * a)) * 255.0 / 2.0;
  var val = round(sina);
  return val;
}

//--------------------------------------------------------------------------
// Interaction methods

function mousePressed() {
  prevX = mouseX;
  prevY = mouseY;
  clickX = mouseX;
  clickY = mouseY;
}

function mouseDragged() {
  // Allow bands to be shifted around, for "fun"
  var accel = (prevX - mouseX) * 0.004;
  if ((clickY >= ys0) & (clickY < ys1)) {
    Svel += accel;
  } else if ((clickY >= ym0) & (clickY < ym1)) {
    Mvel += accel;
  } else if ((clickY >= yh0) & (clickY < yh1)) {
    Hvel += accel;
  }
  prevX = mouseX;
  prevY = mouseY;
}

There have been many interesting software clocks since then. Yugo Nakamura’s Industrious Clock (2001) is a classic:

Here is the elegant video-slitscan-based Last Clock, (2002) by Jussi Angesleva & Ross Cooper:


lastclock2-620x527

Here is CRASHCLOCK by tha:

Here is Horloge Tactile by Swiss student, Eric Morzier (2005):

Quasimondo’s Clockr no longer seems to be operational, but it used the OneDigit photopool at Flickr…. you can imagine it. Color Clock by Aer Studio can no longer be found online, either.

Another elegant software clock is Dot Clock, by Vendian, which uses one dot to represent every second in the day:

dotclock

Here’s the simple but effective Polar Clock (live version) by Gabriel Mak:
polarclock

Color and circles, man. Here’s Colhour, by Harald Martin Ström:

screen-shot-2016-09-09-at-1-42-53-am

A simple rectangular prism clock, hms, by Andreas Gysin:

Here’s a cryptic QR Code Clock.

screen-shot-2016-09-09-at-1-50-11-am

In Pong Clock, a modified game of Pong by Sander Mulder and Leonardo Lima, two computer-controlled NPC’s constantly score the time.

My student Greg Vassallo made this in 2005 (show Processing applet)
vassallo

vassallo

CMU Design student Lee Byron made this, Center Clock (Java applet) in my class in 2006. He recently ported it from Java to p5.js, so it once again works on the web.
centerclock

The awesome Sonicode Clock by Saqoosha (2008):

And many more lovely generative JavaScript clocks by Vincent Toupe (Procyonic).


Clever New Mechanics

A sundial watch isn’t a crazy idea. Here’s a new version from the creative people at P9:

Many of you probably know DropClock:

Ink Calendar by Oscar Diaz uses capillary action to display the time:
screen-shot-2016-09-09-at-2-00-02-am

The Clock Clock, by the Stockholm-based designers, HumansSince1982:

These humans aren’t messing around. Here’s their “A Million Times” clock:

Art Lebedev’s Segmentus Clock:

Here is A Study Of Time by rAndom International (2011):

Hans Andersson’s Time Twister (LEGO Mindstorms Digital Clock):

Dave Esty’s This Time Around:

Qlocktwo by Biegert & Funk selectively illuminates parts of a text image:

2

In this clock designed by Giha Woo and Shingoeun, a single spiraling arm indicates the time in different countries around the world, simultaneously.
dzn_the-bend-hand-1-1

Taiwanese designer Yen-Wen Tseng has designed a clock, “Hand in Hand“, where the hands are linked by two more pivoting arms:
dzn_hand-in-hand-clock-yen-wen-tseng-2

Color O’Clock by Duncan Shotton is attractive, though one wonders why it needs the hands at all:
colouroclock_carousel2c

Dutch product designer Sander Mulder has designed a wall clock, Continue Time, with a single, articulated arm that can display hours, minutes and seconds all at once. (Yes, that’s the same Sander Mulder who designed the Pong Clock.) The lightning-shaped mechanical arm continually changes shape over a 12 hour period (jump to 1’00”):

In some situations, it may not be necessary for a clock to “work” mechanically in order for it to “operate” powerfully. Below are clocks which are frozen at 8:15am, the moment when the Hiroshima bomb detonated, when Kengo Nikawa’s pocketwatch stopped forever.
hiroshima-clocks-620x300

In another situation, a clock may simply be working so slowly that it never appears to be working in our lifetime. The Clock of the Long Now, designed to last 10,000 years, ticks once per year and chimes once per century. As such, it fosters long-term thinking and remains an important symbol of hope for the future.