​

​

let Blur;

let fontSize = 30;

​

function preload() {

  Blur = loadFont('BlurL.otf');

}

​

function setup() {

  createCanvas(600, 600);

  textFont(Blur);

  angleMode(DEGREES)

​

}

​

​

function draw() {

​

  //background color control

  background(random(0, 255), random(0, 255), random(0, 255), 20);

  //background(210, 210, 210)

  textSize(fontSize);

​

​

  // time variables

  // let fc = frameCount;

  let m = minute();

  let s = second();

  let r = 10;

  let ms = millis()

  let height = 550;

  let width = 550

  //title

  text('Pandemic Clock', 110, 30);

​

  //clock face  

  push()

  fill(220, 220, 220)

  ellipse(300, 300, 500, 500, 0);

  pop()

  push()

  fill(0);

  ellipse(300, 300, 10, 10, 0);

  pop()

​

  if (mouseX <= width && mouseX > 30 && mouseY <= height && mouseY > 30) {

    // clock numbers

    push();

    textAlign(CENTER);

    translate(300, 300);

​

    //for rotation control of clockface when mouse is in range of face

    rotate(ms);

    text('12', 0, -210);

    text('1', 110, -180);

    text('2', 190, -100);

    text('3', 220, 0);

    text('4', 200, 110);

    text('5', 120, 200);

    text('6', 0, 230);

    text('7', -120, 200);

    text('8', -200, 110);

    text('9', -220, 0);

    text('10', -190, -100);

    text('11', -110, -180);

    pop();

  } else {

    push();

    textAlign(CENTER);

    translate(300, 300);

​

    //for rotation control of clockface when mouse is not inside

    rotate(s);

    text('12', 0, -210);

    text('1', 110, -180);

    text('2', 190, -100);

    text('3', 220, 0);

    text('4', 200, 110);

    text('5', 120, 200);

    text('6', 0, 230);

    text('7', -120, 200);

    text('8', -200, 110);

    text('9', -220, 0);

    text('10', -190, -100);

    text('11', -110, -180);

    pop();

  }

​

​

  //min hand

  push()

  fill(0);

  beginShape()

  vertex(310, 110);

  vertex(300, 300);

  vertex(290, 110);

  vertex(300, 80);

  endShape(CLOSE);

  pop()

​

  //hour hand

  push();

  fill(0);

  translate(705, 405);

  rotate(150)

  beginShape()

  vertex(320, 170);

  vertex(300, 300);

  vertex(280, 170);

  vertex(300, 140);

  endShape(CLOSE);

  pop();

​

​

  //second hand

  push()

  strokeWeight(2)

  line(130, 160, 300, 300)

  pop()

​

​

  //months 

  textAlign(CENTER);

  translate(300, 300);

​

​

​

  // when mouse is in the canvas

  if (mouseX <= width && mouseX > 30 && mouseY <= height && mouseY > 30) {

    //mouseX

    //chaotic months text and coordinates 

    textSize(220)

    push()

    rotate(ms / mouseX + 2);

    blendMode(SOFT_LIGHT);

    text('Jan', 0, -260);

    text('Feb', 135, -150);

    text('Mar', 210, -40);

    text('Apr', 190, 70);

    text('May', 250, 180);

    text('Jun', 110, 320);

    text('Jul', 10, 360);

    text('Aug', -120, 350);

    text('Sept', -250, 170);

    text('Oct', -260, 10);

    text('Nov', -275, -90);

    text('Dec', -130, -210);

​

    //Add for extra chaos

    // blendMode(MULTIPLY);

    // text('Jan', 10, -220);

    // text('Feb', 135, -110);

    // text('Mar', 240, -13);

    // text('Apr', 250, 40);

    // text('May', 260, 80);

    // text('Jun', 170, 190);

    // text('Jul', 20, 280);

    // text('Aug', -120, 330);

    // text('Sept', -230, 160);

    // text('Oct', -260, 110);

    // text('Nov', -235, -190);

    // text('Dec', -120, -110);

    pop()

​

​

  } else {

​

    // when mouse is outside the canvas = smaller organized months

    push();

    rotate(s);

    textSize(fontSize)

    text('Jan', 0, -260);

    text('Feb', 175, -200);

    text('Mar', 250, -110);

    text('Apr', 270, 0);

    text('May', 250, 120);

    text('Jun', 150, 230);

    text('Jul', 0, 270);

    text('Aug', -160, 220);

    text('Sept', -260, 110);

    text('Oct', -270, 0);

    text('Nov', -245, -110);

    text('Dec', -160, -210);

    pop();

​

  }

​

​

​

​

​

}