Author: nahyunk1@andrew.cmu.edu

sketch

var numObjects = 6; // number of rect/ellipses that will rotate in a circle.
var centerX; //the center x position of the rotating obj.
var centerY; // the center y pos of rotating obj.
var angle = 0; // starting angle of rotation
var distance = 50;
var redd = 255;
var greenn = 255;
var bluee = 255;
var spacing = 10; // spacing for moving rect in the background
var x = 0; // x pos of the rect
var y = 0; // y pos of the rect

function setup() {
  createCanvas(300, 600);
centerX = width / 2; // vars for rotating circles
centerY = height / 2; // vars for rotating circles
noStroke();
ellipseMode(CENTER); // rotating circles
}


function draw() {
  background(0);
  //for current time
  var Hr = hour();
  var Min = minute();
  var Sec = second();
  //mapping the time frame
  var mH = map(Hr, 0,23, 0, height);
  var mM = map(Min, 0,59, 0, height);
  var mS = map(Sec, 0,59, 0, height);
  var rectHeight =  width / 3; //constant for x distance

  noFill(); //the current hour rocket.
  stroke("red");
  rect(0.5*rectHeight, mH, 100, 95);
  stroke(0,0,255);
  rect(0.25*rectHeight, mH, 60, 55);
  rect(1.125*rectHeight, mH, 60, 55);
  stroke("orange");
  triangle(0.5*rectHeight,95+mH, 0.5*rectHeight+100, 95+mH, 0.5*rectHeight+50, 150+mH);
  stroke("pink");
  ellipse(0.5*rectHeight,mH, 20, 70);
  ellipse(0.5*rectHeight+100, mH, 20, 70);

  stroke("pink"); // minute indicator
  strokeWeight(2);
  rect(1*rectHeight, mM, 50, 50);
  fill("pink");
  text("FLY!", 1.125*rectHeight, mM+30);

  noFill();// solar system indicator of the seconds.
  stroke("cyan");
  ellipse(2.4*rectHeight, mS-200, 30, 30);
  ellipse(2.4*rectHeight, mS-100, 70, 70);
  ellipse(2.4*rectHeight, mS, 100, 100);
  stroke("yellow");
  strokeWeight(2);
  ellipse(2.4*rectHeight, mS, 50, 50);
  stroke(255);
  ellipse(2.4*rectHeight, mS-250, 20, 20);
  ellipse(2.4*rectHeight, mS-300, 10, 10)
  ellipse(2.4*rectHeight, mS-100, 90, 20);
  ellipse(2.4*rectHeight, mS-400, 5, 5)
  ellipse(2.4*rectHeight, mS-500, 2, 2)
  stroke("red");
  ellipse(2.4*rectHeight, mS-200, 40, 40);

  //the rotating clock in the middle.
  var angleObject = 360 / numObjects; //space between each object.
    for (var i = 0; i < numObjects; i++) {
  angle += frameCount*i /20;
  push();
  translate(centerX, centerY); // the obj. rotate around the center.
  rotate(radians(i * angleObject + angle));
  stroke("skyblue"); // the lightblue rectangles rotating around.
  rect(distance-10, mS/6, 15, 15); // rotation indicates the seconds.
  stroke("yellow"); // the dark blue circles rotating around.
  strokeWeight(1);
  ellipse(distance, mM/4, 10, 10); // rotation indicates the minutes.
  stroke(0,255,0); // the green small rects rotating around.
  rect(distance, mH/24, 5, 5); // rotation indicates the hour.
  pop();
  }


}

My abstract clock is based on a space theme. The rocketship indicates the hour, the pink box with the text “FLY!” indicates the minutes, and the linear solar system indicates the seconds as they all descend from the top of the canvas. The rotation that is occurring in the middle of the canvas also indicates the hour, minute, and seconds with the squares and the ellipses. As you can see from the code, the skyblue squares rotation enlarges each time the seconds increase form 0 to 60. Similarly, the rest of the other objects that rotate, enlarge proportionally as the hour and the minutes flow by.