Emily Zhou –– 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.

Idea rough sketch

Jenny Hu — Project 06: Abstract Clock

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.

Clock at 11:59 PM — representing the largest possible radii for the hours and minutes— 23, and 59.
Clock at midnight— representing the smallest possible radii for the two torus. 0 and 0.

 

 

 

 

 

 

 

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:

Sketch drawn in ProCreate.

Min Jun Kim- Project 6 Abstract Clock

sketch

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 6
*/

//this program displays an abstract clock

var x = 0;

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

function draw() {
	background(0);
	var hours = hour();	//denotes hours of day
	var mins = minute(); //denotes minute of day
	var secs = second(); //denotes seconds of day
	
	//sets up such that it's not military time but standard
	if (hours > 12) {
		hours = hours - 12;
	}
	else if (hours == 0) {
		hours = 12;
	}
	

	//draws counter-clockwise rotating rectangles in background
	for (i = 0; i < 481; i+= 48) {
		for (v = 0; v < 480; v += 48) {
		push();
		fill(30);
		rectMode(CENTER);
		translate(i,v);
		rotate(2*PI*secs/60);
		rect(0,0,30,30);
		pop();
		}
		
	}
	
	//makes a cover so the clock is not disturbed
	fill(0);
	rect(width/7,30,width/1.4, height-65);

	
	//hour ring
	fill(200);
	//draws big arc in the back
	arc(width/2,height/2,width/1.3,height/1.3,
		-1/2*PI,2*PI*hours/12-1/2*PI);
	fill(0);
	//second arc gives gap between other types of arcs
	arc(width/2,height/2,width/1.3-100,height/1.3-100,
		-1/2*PI,2*PI*hours/12-1/2*PI);


	//minutes ring
	fill(100);
	//middle arc gives the minutes
	arc(width/2,height/2,width/2,height/2,
		-1/2*PI,2*PI*mins/60-1/2*PI)
	fill(0);
	//second arc gives gap between other types of arcs
	arc(width/2,height/2,width/3,height/3,
		-1/2*PI,2*PI*mins/60-1/2*PI);

	//seconds ring
	fill(50);
	//draws small arc in middle
	arc(width/2,height/2,width/3-10,height/3-10,
		-1/2*PI,2*PI*secs/60-1/2*PI);
	fill(0);
	//second arc allows the arc to get a more distinct shape
	arc(width/2,height/2,width/5,height/5,
		-1/2*PI,2*PI*secs/60-1/2*PI);

	fill(0);
	//covers the track
	ellipse(width/2,height/2,70,70);
}

This project made me dig deep into the concept of time and how time came to be represented over time. In the past we had sun-dials and no moving parts. Over time we developed physical mechanical clocks, and nowadays we use digital numbers mostly. I found it interesting in this project we are going from a more digitized type of time-showing into a more archaic and less optimal way of displaying time. These below are the ideas that I generated when I was brainstorming.

Ideas for abstract clock

I had a lot more ideas but I found were impractical and very difficult to code. Initially I wanted to emulate the light clock from physics with a bouncing ball, but I realized it would be impractical to display how much time has passed. I ended up choosing the designs for an arc-based clock, with different sizes throughout. Calibrating the clock to match the time was rather difficult at first, but once I figured it out the rest was easy. I added some decorations in the background to make the project more exciting. All in all, I think this project was fun because there was so much possibilities.

Judy Li-Project-06-Abstract-Clock

judyli: Abstract Clock Project 06

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-06
*/

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
    createCanvas(300, 300);
    millisRolloverTime = 0;
}

//--------------------------
function draw() {
    background(255,255,255);

    noStroke();
    fill(253, 185,200);
    rect(0, 65, 300, 57.5);
    noStroke();
    fill(252, 163, 183);
    rect(0, 122.5, 300, 60);
    noStroke();
    fill(254, 127, 156);
    rect(0, 182.5, 300, 60);
    noStroke();
    fill(251, 96, 127);
    rect(0, 242.5, 300, 60);
    for (var i = 0; i < width; i = i + 5) {
        stroke(255);
        strokeWeight(1);
        line(i + 5, 0, i + 5, 242.5);
    }
    for (var i = 0; i < width; i = i + 12.5) {
        stroke(255);
        strokeWeight(1);
        line(i + 12.5, 242.5, i + 12.5, height);
    }
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    strokeWeight(1);
    stroke("pink");
    text("M I L L I S : " + mils, 5, 15);
    text("S E C O N D : " + S, 5, 30);
    text("M I N U T E : " + M, 5, 45);
    text("H O U R : "   + H, 5, 60);
    
    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 59, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction, 0, 59, 0, width);
    
    strokeWeight(5);
    stroke(254, 220, 86);
    line(300, 300, hourBarWidth, 250);
    stroke(248, 228, 115);
    line(300, 240, minuteBarWidth, 190);
    stroke(248, 222, 126)
    line(300, 180, secondBarWidthChunky, 130);
    stroke(252, 244, 163)
    line(300, 120, secondBarWidthSmooth, 70);
}

For this project, I think I wanted to start out with a grid system that shows the count of the milliseconds, seconds, minutes, and hours including the real time text of those times. I think that adding a darker tone as the metrics of time increased added a visual value to the graphics. I had fun with this project, but what I would do to make it better, would change the lines to ellipses because I think that it wouldn’t be as skewed as the line when it moves towards the right side.

Clock Sketch