Category: Project-06-Abstract-Clock

dots clock

function setup() {
    createCanvas(480, 100);
    stroke(17, 21, 28);
}

function draw() {
    // background colour
    var H = hour();
    if (H >= 7 & H <= 19) {
        background(228, 246, 248); // day background
        stroke(228, 246, 248);
    }
    else {
        background(17, 21, 28); // night background
        stroke(17, 21, 28);
    }
    // hour circles
    var d1 = width / 24; // diameter (L)
    for (var i = 0; i < 24; i++) { // 24 hours
        var hx = i * d1 + d1 / 2; // x position
        if (H >= 7 & H <= 19) { // day circle colour
            // top edge
            if (H - 1 == i) {
                fill(98, 194, 204);
                ellipse(hx, height - d1 / 2, d1, d1);
            }
            // bottom edge
            else {
                fill(98, 194, 204);
                ellipse(hx, d1 / 2, d1, d1);
            }
        }
        else { // night circle colour
            if (H - 1 == i) {
                fill(48, 72, 120);
                ellipse(hx, height - d1 / 2, d1, d1);
            }
            // bottom edge
            else {
                fill(48, 72, 120);
                ellipse(hx, d1 / 2, d1, d1);
            }
        }
    }
    // minute circles
    var M = minute();
    var d2 = width / 60; // diameter (M)
    for (var j = 0; j < 60; j++) { // 60 minutes
        var mx = j * d2 + d2 / 2;
        if (H >= 7 & H <= 19) { // day circle colour
            if (M - 1 == j) {
                fill(241, 112, 34);
                ellipse(mx, height - d2 / 2, d2, d2);
            }
            else {
                fill(241, 112, 34);
                ellipse(mx, d1 + d2 / 2, d2, d2);
            }
        }
        else { // night circle colour
            if (M - 1 == j) {
                fill(120, 144, 168);
                ellipse(mx, height - d2 / 2, d2, d2);
            }
            else {
                fill(120, 144, 168);
                ellipse(mx, d1 + d2 / 2, d2, d2);
            }
        }
    }
    // second circles
    var S = second();
    var d3 = width / 60 - 2; // diameter (S)
    var space = 2; // spacing between ellipse centres
    for (var k = 0; k < 60; k++) { // 60 seconds
        var sx = k * d3 + space * k + d3 / 2 + 1;
        if (H >= 7 & H <= 19) { // day circle colour
            if (S - 1 == k) {
                fill(253, 184, 19);
                ellipse(sx, height - d3 / 2, d3, d3);
            }
            else {
                fill(253, 184, 19);
                ellipse(sx, d1 + d2 + d3 / 2, d3, d3);
            }
        }
        else { // night circle colour
            if (S - 1 == k) {
                fill(240, 168, 24);
                ellipse(sx, height - d3 / 2, d3, d3);
            }
            else {
                fill(240, 168, 24);
                ellipse(sx, d1 + d2 + d3 / 2, d3, d3);
            }
        }
    }
}

I tried to make a clock that uses the colour and position of graphic elements to indicate the time of day. Three rows of circles that represent the hour, minute, and second appear at the top to their correct quantity (24, 60, 60). For the current time, the corresponding circle appears at the bottom edge of the canvas.

I also wanted the colour scheme of the clock to change with the time of day. I coordinated colours for a day and night setting that change at 7 a.m. and 7 p.m with that range using the daytime colour scheme. I looked up the sunrise and sunset times in Pittsburgh to make sure.

jenny’s sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 06

//sphere beats with the second
//torus' grow with the minute & hour

var sphereR = 29;
var smallTR = 30;
var largeTR = 100;
var sThick = 8;
var lThick = 25;
var buffer = 50;
var sphereToggle = 1;


function setup(){
  createCanvas(480, 480, WEBGL);
}


function draw(){
  background(250);
  normalMaterial();
  var M = minute();
  var H = hour();

  //inner sphere as seconds 
  //pulsed with a framerate calculation below
  for (var i=0; i<2; i++){
      //if statements isolate if the sphere is growing/shrinking
      if (sphereR < 30) {
          sphereToggle = 1; 
      }
      if (sphereR > 32.5) {
          sphereToggle = -1;   
      }
          // pulse per beat = 5/60
          // aka sphereR units traveled/60 frames
      sphereR = sphereR + i*(5/60)*sphereToggle; 
      sphere(sphereR);       
   }
  
  //middle torus radius as the minutes
  smallTR = 35 + buffer/3 + M;
  push();
  rotateZ((frameCount * 0.01)/2);
  rotateX((frameCount * 0.01)/2);
  rotateY((frameCount * 0.01)/2);
  torus(smallTR, sThick);
  pop();

  //outer torus radius as the hour
  largeTR = smallTR + sThick + buffer + H;
  push();
  rotateZ((frameCount * 0.02)/5);
  rotateX((frameCount * 0.005)/2);
  rotateY((frameCount * 0.005)/2);
  torus(largeTR, lThick);
  pop();

}

Exciting! I wanted to use this project as an excuse to just get familiar with basic WebGL and 3D primitives. (My main references to learn these are the in the links at the end.) Outside of the 3D elements— this clock is relatively straightforward— the inner sphere pulses ( in, out, and back in) per second in a simple for-loop, calculated by the distance it needs to pulse over the framerate (60). The inner torus radius is growing based on the minutes of the hour, while the outer torus radius is growing based on the hour of the day. Since the change is so slow, you can see the comparison of the smallest and largest times of the day below— midnight and 11:59 pm.

The rotations of each torus are essentially just coded with numbers to provide diverse volumes and angles in a given moment (basically, I just proportioned thicknesses and speeds by eye).

Resources:
The Coding Train — Light and Material Tutorial
P5 3D Geometry example reference
Getting started on WebGL

I was also super inspired by Syed Reza’s work. I hope I can produce something with similar confidence and complexity soon!

Sketches: