alchan-Project 06-abstract clock

abstract clock

function setup() {
    createCanvas(240, 480);
    angleMode(DEGREES);
    noStroke();
}

function draw() {
  var m = month();
  var d = day();
  // map the current hour, minute, & second
  // to an r, g, or b value
  var hr = map(hour(), 0, 23, 0, 255);
  var min = map(minute(), 0, 59, 0, 255);
  var sec = map(second(), 0, 59, 0, 255);
  var clock = {r: min, g: sec, b: hr};

  // assign colors to minute and second
  // (hour is present in both as the blue value)
  var minColor = color(clock.r, 0, clock.b);
  var secColor = color(0, clock.g, clock.b);

  // draw gradient; the top color represents the minute
  // & the bottom represents the second
  // (hour is the blue value)
  for (var c = 0; c <= height; c += 5) {
    var amt = map(c, 0, height, 0, 1);
    var gradient = lerpColor(minColor, secColor, amt);
    fill(gradient);
    rect(0, c, width, 5);
  }

  // draw a number of equally spaced lines dependant on month
  // (the month is how many sections the area is divided into)
  // day of month is represented by the y position of the lines
  for (var i = 0; i <= m; i++) {
    var monthDiv = width / m;
    var dayPos = map(d, 0, 31, 0, height-10);
    fill(255);
    rect(monthDiv + i*monthDiv, dayPos, 1, 10);
  }
}

I played around with a few different ideas in my sketches (I thought about doing something related to lunar phases, a clock that represented time by randomly scattering dots on a grid, and a more representational clock that showed time by the growth of a flower).

I really wanted to create a clock that was abstract enough to almost be without a focal point, and decided to play around with color as a representation of time. I originally just had the r, g, and b values of the background assigned to the hour, minute, and second. This was a little boring for anyone who didn’t watch the clock for a long period of time, so I decided to play around with gradients and also incorporate the day and month

In the final clock, the top color represents the current minute, while the bottom color represents the current second. The hour is the blue value present in both colors. Month is represented by the number of divisions created by the white lines, and the y-position of the lines is roughly equivalent to the day of the month.