let cy;

let time = 0;

var ease = new p5.Ease();

var minCircleDiameter;

var prevSec;

var millisRolloverTime;

​

var purple;

var blue1;

var transBlue;

var hourColor;

var minColor; 

​

//bug fixes - fix period and abrupt color change and make it ease in better

/*

  clock does not align propoerly - probably an issue with usage of millis and var time

  make bounce line up better

  Color change - make color shift when minute over look less shit

*/

//fix - colors look like the blue fucker from monsters inc :/

​

function setup() {

  createCanvas(800, 600);

  cx = width/2;

  cy = height/2;

  beginTime = millis();

  print(beginTime);

  //colors

  ///* Extended Array */

// [{"name":"Gray Web","hex":"848586","rgb":[132,133,134],"cmyk":[1,1,0,47],"hsb":[210,1,53],"hsl":[210,1,52],"lab":[55,0,-1]},

  //{"name":"Dark Sienna","hex":"280003","rgb":[40,0,3],"cmyk":[0,100,93,84],"hsb":[356,100,16],"hsl":[356,100,8],"lab":[4,19,5]},{"name":"Orange Web","hex":"fca311","rgb":[252,163,17],"cmyk":[0,35,93,1],"hsb":[37,93,99],"hsl":[37,98,53],"lab":[74,24,76]},{"name":"Ghost White","hex":"fbfcff","rgb":[251,252,255],"cmyk":[2,1,0,0],"hsb":[225,2,100],"hsl":[225,100,99],"lab":[99,0,-2]},{"name":"Medium Aquamarine","hex":"69dc9e","rgb":[105,220,158],"cmyk":[52,0,28,14],"hsb":[148,52,86],"hsl":[148,62,64],"lab":[80,-47,21]}]

  a = ["#848586","#280003","#fca311","#fbfcff","#69dc9e"]

​

  purple = color(132,133,134, 180)

  blue1 = color(140,0,3, 180)

  transBlue = color(252,163,17, 180)

  hourColor = color(105,220,158, 180)

  minColor = color(251,252,255, 180)

 // purple =  color(255, 0, 191, 150);

  // blue1 = color(102, 102, 255, 180);

  // transBlue = color(102, 102, 255, 180);

  // hourColor = color(51, 214, 255, 220);

  // minColor = color(51, 51, 204, 180);

}

​

​

function draw() {

  //time

  var hours = hour();

  var mins = minute();

  var secs = second();

  if (prevSec != secs) {

    millisRolloverTime = millis();

  }

  prevSec = secs;

  var mils = floor(millis() - millisRolloverTime);

  background(0);

  stroke(255);

  noFill();

 // drawSpiral();//debug tool

  drawHourCircles(hours, mins, secs, mils);

  drawMinuteCircles(hours, mins, secs, mils);

  time = 0.001*millis() + beginTime;

  fill('white');

  // text(hours, 50, 50);

  // text(mins, 70, 50);

  // text(secs, 90, 50);

//   // text(mils, 110, 50);

//   text(time, 50, 100);

//   // text(mils*0.1, 50, 120);

//   text(millis(), 50, 90);

​

}

​

//=====================================================

function drawSpiral(){

  beginShape();

  for (let t = 0; t < 100; t++) {

    let m = map(t, 0, 150, 0, 30);

    x = m*15*cos(m) + cx;

    y = m*15*sin(m) + cy + 20;

    vertex(x, y);

  }

  endShape();

}

​

function drawHourCircles(hours, mins, secs, mils){

  noStroke();

  spacing = 100/26;

​

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

    let m = map(i*spacing, 0, 150, 0, 30);

    //finsih one pulse after a minute

    period = 2*PI/(60)

    //change radius in which spiral pulses

    breathe = 0.5*(sin(period*time)+1) //set breathe period to 2 seconds

    x = breathe*m*15*sin(m - PI/64*time) + cx ;

    y = breathe*m*15*cos(m - PI/81*time) + cy + 20;

    //set current circle to curr hour

    if(hours <= i - 2){ fill(hourColor);}

      else{fill(purple);}

    diameter = spacing*(i+3);

    circle(x, y, diameter);

    fill(minColor);

    circle(x,y, diameter/60*mins);

  }

}

​

function drawMinuteCircles(hours, mins, secs, mils){

  noStroke();

  minuteDiameter = 100/26*25/60*mins;

  spacing = 100/32;;

  for (let i = 2; i < 2 + 32; i++){

    let m = map(i*spacing, 0, 150, 0, 30);

    period = 2*PI/(60)

    breathe = 0.5*(sin(period*time)+1) //set breathe period to 2 

    b = sin(period*time) + 1

    breathe2 = b*0.5*(sin(period*time)+1) //set breathe period to 2 seconds

    x = breathe/2*m*15*sin(m + PI/35*time) + cx ;

    y = breathe/2*m*15*cos(m + PI/42*time) + cy + 20;

    //set current circle to curr hour

    s = (int)(secs/2)

    paleGreen = color(255, 230, 255, 120);

​

    if(s == i - 2){ fill(paleGreen)}

      else{fill(transBlue)}

    diameter = minuteDiameter/32 * (i+3);

​

    circle(x, y, diameter);

    fill(minColor);

    circle(x,y, diameter/60*secs);

  }

}

​

​

function func1(x){

  return x/12;

}