Project-06-Abstract Clock

For the clock I wanted to create something that had a gradient, and where the time could not always be seen at every second, to get people to focus a bit more on the changing condition. Eventually I settled on a clock which had a gradient of boxes which changed every two seconds, and slowly revealed the time in the middle of the smallest box, with circles. I also liked the idea of using the same shape for both the minutes and hours, with only the size to differentiate the two.

sketchDownload
var theta = [];
var side = [];
var c = [];
var s;
var h;
var mx = [];
var my = [];


function setup() {
    createCanvas(480, 480);
    background(220);

    h = hour();

    for (let i = 0; i <= 29; i++) {
      theta[i] += 2;
      c[i] = ((8.5*i));
      if (i == 0) {
        side[i] = 480
      } else if (i > 0) {
        side[i] = (side[i-1])-((side[i-1])/40);
      }
    }

    for (let i = 0; i < 60; i++) {
      if (i %6 == 0) {
        mx[i] = -5;
      } else {
        mx[i] = mx[i-1]+20;
      }
      if (i < 6) {
        my[i] = -90;
      } else {
        my[i] = my[i-6]+20;
      }
    }
}

function draw() {
  s = floor((second())/2);
  translate(240,240);
  rectMode(CENTER);

  for (let i = 0; i <= s; i++) {
    noStroke();
    rotate(radians(theta[i]));
    fill(c[i]);
    rect(0,0,side[i],side[i]);
  }

  if (h > 12) {
    h = h-12;
  }

  if (h < 7) {
    for (let i = 1; i <= h; i ++) {
      fill(0);
      circle(-80,-122+(i*35),30);
    }
  } else {
    for (let i = 1; i <= 6; i ++) {
      circle(-80,-122+(i*35),30);
    }
    for (let i = 1; i <= h-6; i++) {
      circle(-45,-122+(i*35),30);
    }
  }

  for (let i = 0; i < minute(); i++) {
    circle(mx[i],my[i],17);
  }
}

Leave a Reply