AbstractClock-Project-06-mdambruc

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-06
var buffer = 10;
var ybuffer = 20;
function setup() {
    createCanvas(610, 350);
}

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    var d = day();
    var m = month();
    background(84, 162, 178);
    secondboxes();
    minuteboxes();
    hourboxes();
    dayboxes();
    monthbox();
    }

function secondboxes(){
  var sx = 10;
  var diam = 10;
  var sy = 50;
  var spacing = 10;
  var count = 62;//seconds in a minute
  var s = second();
  text(s, buffer, sy + ybuffer);
  text("seconds", buffer + ybuffer, sy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(sx, sy, diam, diam);
  sx = sx + spacing;
  if (i == s){
    fill(0);//current second
  } else{
    fill(255);
  }
}
}
function minuteboxes(){
  var mx = 10;
  var diam = 10;
  var my = 100;
  var spacing = 10;
  var count = 62;//minutes in an hour
  var m = minute();
  text(m, buffer, my + ybuffer);
  text("minutes", buffer + ybuffer, my + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(mx, my, diam, diam);
  mx = mx + spacing;
  if (i == m){
    fill(0);//current minute
  } else{
    fill(255);//
  }
}
}

function hourboxes(){
  var hx = 10;
  var diam = 10;
  var hy = 150;
  var spacing = 10;
  var count = 26;//24 hours in a day
  var h = hour();
  text(h, buffer, hy + ybuffer);
  text("hours", hx + ybuffer, hy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(hx, hy, diam, diam);
  hx = hx + spacing;
  if (i == h){
    fill(0);//current hour
  } else{
    fill(255);//
  }
}
}

function dayboxes(){
  var dx = 10;
  var diam = 10;
  var dy = 200;
  var spacing = 10;
  var count = 33;//31 days in october
  var d = day();
  text(d, buffer, dy + ybuffer);
  text("days", dx + ybuffer, dy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(dx, dy, diam, diam);
  dx = dx + spacing;
  if (i == d){
    fill(0);//current day
  } else{
    fill(255);//
  }
}
}

function monthbox(){
  var mx = 10;
  var diam = 10;
  var my = 250;
  var spacing = 10;
  var count = 14;//12 months in a year
  var m = month();
  text(m, buffer, my + ybuffer);
  text("months", mx + ybuffer, my + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(mx, my, diam, diam);
  mx = mx + spacing;
  if (i == m){
    fill(0);//current month
  } else{
    fill(255);//
  }
}
}

For this Abstract Clock project, I wanted to create a full year calendar. Taking inspiration from the previous calendar assignment I created a calendar that tracks the seconds, minutes, hours, days and months in a year. I enjoy this clock because I believe it is a clock designed for a visual person; showing dates with symbols rather than numbers. My process involved a lot of trial and error with various ideas and finding myself struggling with more complex ideas. I found this project interesting since it made me question the original concept of clocks in general. I enjoyed the idea of making a full year calendar since all of the information is in front of you in a visually pleasing way. Although a bit stressful watching the seconds go by, I improved with using loops and learned a lot from this project.