Particle Clock

let seconds;

let minutes;

let hours;

​

function setup() {

  createCanvas(550, 550);

  ellipseMode(RADIUS);

  background(0);

}

​

function draw() {

  if (frameCount % 3 == 0) {

    noStroke();

    fill(0, 20);

    rect(0, 0, width, height);

  }

  getTime();

  drawTimeAsText();

  translate(width / 2, height / 2);

  drawSeconds();

  drawMinutes();

  drawHours();

}

​

function getTime() {

  seconds = second();

  minutes = minute();

  hours = hour();

}

​

function drawSeconds() {

  for (let i = 0; i < seconds; i++) {

    let circle = 180 + 50 * sin(millis() * i * 0.00005);

    let r = map(circle, 150, 250, 3, 2);

    noStroke();

    fill(54, 65, 220, seconds);

    ellipse(circle * cos(i), circle * sin(i), r, r);

    stroke(54, 65, 220, seconds * 2);

    strokeWeight(0.3);

    line(circle * cos(i), circle * sin(i), circle * cos(i - 1), circle * sin(i - 1));

  }

}

​

function drawMinutes() {

  for (let i = 0; i < minutes; i++) {

    let circle = 150 + 40 * sin(millis() * i * 0.00003);

    let r = map(circle, 150, 250, 4, 3);

    noStroke();

    fill(60, 150, circle * 2, minutes);

    ellipse(circle * cos(i), circle * sin(i), r, r);

    stroke(60, 150, circle * 2, minutes * 2);

    strokeWeight(0.4);

    line(circle * cos(i), circle * sin(i), circle * cos(i - 1), circle * sin(i - 1));

  }

}

​

function drawHours() {

  for (let i = 0; i < hours; i++) {

    let circle = 100 + 30 * sin(millis() * i * 0.00002);

    let r = map(circle, 150, 250, 5, 4);

    noStroke();

    fill(80, 226, circle * 3, hours);

    ellipse(circle * cos(i), circle * sin(i), r, r);

    stroke(80, 226, circle * 3, hours * 2);

    strokeWeight(0.5);

    line(circle * cos(i), circle * sin(i), circle * cos(i - 1), circle * sin(i - 1));

  }

}

​

function drawTimeAsText() {

  fill(255, 30);

  textSize(28);

  textStyle(BOLD);

  textFont('Georgia');

  text(nf(hours, 2) + ": " + nf(minutes, 2) + ": " + nf(seconds, 2), 210, 275);

}