dnoh-sectionD-project6-abstractclock

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project-06

var r = 40;
var g = 40;
var b = 80;

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

function draw() {
  var h = hour();
  var m = minute();
  var s = second();
  //Variable maps hours to triangle width and colors
  var Hx = map(h,0,24,0,400);
  var HcolorRG = map(h,0,24,0,40);
  var HcolorB = map(h,0,24,0,80);
  //Variable maps seconds to strokeWeight and ellipseSize
  var Sstroke = map(s,0,60,0,10);
  var Ssize = map(s,0,60,0,400);
  //Variable maps minutes to degrees
  var Mend = map(m,0,60,0,360);
  angleMode(DEGREES);

  background(20,20,50);

  //hour triangle - gets fatter as hour passes and fades into background
  fill(60-HcolorRG,60-HcolorRG,130-HcolorB);
  noStroke();
  triangle(200,0,Hx,400,400-Hx,400);
  //minute arc - timer within second circle that ticks to show minutes.
  fill(255);
  arc(200,200,Ssize,Ssize,Mend-90,270);
  //second circle - the circle gets bigger every second as well as the stroke
  noFill();
  strokeWeight(Sstroke);
  stroke(255);
  ellipse(200,200,Ssize,Ssize);
}

I wanted to create an abstract clock using simple shapes. I thought the hour should change very subtly, as hours pass by slowly, so I made the triangle in the background slowly fade into the background as well as get wider. It was also a part of my design that the minute and second “hands” were integrated within each other because of how quick each is relative to hours. The minutes are shown simply as a timer. However, the circle slowly fills up the page every second, practically screaming when it approaches the end of a minute.