Art + Code 

​

This sketch is both a drawing inspired by the prints of Swiss artist Sophie Taueber-Arp, and also a functioning clock! 

​

The placement of the drawing are determined by the hour, minute, and seconds of the computer's clock. 

​

To see how it might function during different times of day, you can change the settings on your computer's clock!

*/

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

​

function draw() {

  background(252, 250, 242);

  let y_hour = hour() * 22;

  let x_min = minute() * 8;

  let x_sec = second() * 8;

  let y_sec = x_sec * 10;

  noStroke();

  // triangles 

  // triangle(x1, y1, x2, y2, x2, y3);

  fill(18, 72, 99);

  triangle(width*.25, hour() * 22, width*.50, hour() * 22, width*.75, height)

  fill(255,0,0);

  triangle(width/2, hour() * 22, second() * 8, 0, width*.67, hour() * 22);

  // circles/ellipses

  fill(255,0,0);

  ellipse(height*.67, hour() * 22, 60, 60);

  fill(255, 221, 0);

  ellipse(minute() * 8, height*.33, 60, 60);

  fill(57, 163, 0);

  ellipse(width*.8, second() * 12, 60, 60);

  let y_hour_half = y_hour * 13;

  let y_sec_half = y_sec * 5;

  let x_min_half = x_min * 4;

  stroke(0,0,0);

  strokeWeight(4);

  line(width, hour() * 22 + 50, 0, second() * 24);

  line(80, y_sec_half, width, windowHeight - y_sec_half);

  line(minute() * 4, 0, windowWidth - x_min, 720)

​

}