Banded Clock (1999)

// 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;

}

​