minRandom = [];

hrRandom = [];

lengthSec = [];

lengthMin = [];

lengthHr = [];

let c1, c2;

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

​

  //setting arrays

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

    lengthSec.push(0);

    lengthMin.push(0);

  }

​

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

    lengthHr.push(0);

  }

  c1 = color(0);

  c2 = color(50, 5, 90);

}

​

function draw() {

  background(0);

  //  for(let y=0; y<height; y++){

  //   n = map(y,0,height,0,1);

  //   let newc = lerpColor(c1,c2,n);

  //   stroke(newc);

  //   line(0,y,width, y);

  // }

​

  stroke(35, 35, 35, 90);

  // strokeWeight(2)

​

  //resetting arrays

  if (second() == 0) {

    secRandom = [];

    lengthSec = [];

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

      lengthSec.push(0);

    }

  }

  if (minute() == 0) {

    minRandom = [];

  }

  if (hour() == 0) {

    hrRandom = [];

    lengthHr = [];

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

      lengthHr.push(0);

    }

  }

​

  //drawing the hour planes

  for (let r = 0; r < hour(); r++) {

    if (hrRandom.length <= r) {

      hrRandom.push(random(100, 400)); //draws at random y

    }

    //alternating colours

    if (r % 2 == 0) {

      fill("#EACE1A");

    } else {

      // stroke("#D5C728");

      fill("#929292");

    }

    hrs(r);

  }

  for (let q = 0; q < minute(); q++) {

    if (minRandom.length <= q) {

      minRandom.push(random(0, 300)); //draws at random x

    }

    if (q % 2 == 0) {

      // stroke("#666666");

      fill("#FEE744");

    } else {

      // stroke("#E8E35D");

      fill("#666666");

    }

    mins(q);

  }

  for (let p = 0; p < second(); p++) {

    if (secRandom.length <= p) {

      secRandom.push(random(0, 600));

    }

    if (p % 2 == 0) {

      // stroke("#383838");

      fill("#F2F2AE");

    } else {

      // stroke("#F2F2AE");

      fill("#383838");

    }

    sec(p);

  }

}

​

function sec(p) {

  push();

  noStroke();

  fill(30, 30, 30, 90);

  translate(600, secRandom[p]);

  rotate(-30);

  beginShape();

  vertex(0, 0 + 10);

  if (lengthSec[p] < 400) {

    lengthSec[p] = lengthSec[p] + 2;

  } //for the length to change

  vertex(-lengthSec[p], 0 + 10);

  vertex(-lengthSec[p] + 70 / sqrt(3), 70 + 10);

  vertex(0, 70 + 10);

  endShape();

  pop();

​

  push();

  translate(600, secRandom[p]);

  rotate(-30);

  beginShape();

  vertex(0, 0);

  if (lengthSec[p] < 400) {

    lengthSec[p] = lengthSec[p] + 2;

  } //for the length to change

  vertex(-lengthSec[p] + 5, 0);

  vertex(-lengthSec[p] + 5 + 70 / sqrt(3), 70);

  vertex(0, 70);

  endShape();

  pop();

}

​

function mins(q) {

  push();

  fill(30, 30, 30, 90);

  noStroke();

  translate(minRandom[q], 0);

  beginShape();

  vertex(0 - 10, 0);

  if (lengthMin[q] < 325) {

    lengthMin[q] = lengthMin[q] + 2;

  }

  vertex(0 - 10, lengthMin[q] + 15);

  vertex(120 - 10, lengthMin[q] + 15 - 120 / sqrt(3));

  vertex(120 - 10, 0);

  endShape();

  pop();

​

  push();

  translate(minRandom[q], 0);

  beginShape();

  vertex(0, 0);

  if (lengthMin[q] < 325) {

    lengthMin[q] = lengthMin[q] + 2;

  }

  vertex(0, lengthMin[q]);

  vertex(120, lengthMin[q] - 120 / sqrt(3));

  vertex(120, 0);

  endShape();

  pop();

}

​

function hrs(r) {

  push();

  fill(30, 30, 30, 90);

  noStroke();

  translate(0, hrRandom[r]);

  rotate(30);

  beginShape();

  vertex(0, 0 + 10);

  if (lengthHr[r] < 300) {

    lengthHr[r] = lengthHr[r] + 2;

  }

  vertex(lengthHr[r] + 5, 0 + 10);

  vertex(lengthHr[r] + 5 - 180 / sqrt(3), 180 + 10);

  vertex(0, 180 + 10);

  endShape();

  pop();

​

  push();

  translate(0, hrRandom[r]);

  rotate(30);

  beginShape();

  vertex(0, 0);

  if (lengthHr[r] < 300) {

    lengthHr[r] = lengthHr[r] + 2;

  }

  vertex(lengthHr[r], 0);

  vertex(lengthHr[r] - 180 / sqrt(3), 180);

  vertex(0, 180);

  endShape();

  pop();

}

​

function mousePressed() {}

​