​

var prevSec;

var millisRolloverTime;

var coins = [];

//1  (280,170)  

//2 (470,270)

//3 (230,390)

//4  480, 500, 

//5 (500,510)

//6 (220,515)

//7 (220,405)

//8 (585,300)

//9(585,300)

//10 (202,525)

//11 (460,280)

//12 (width/2,139)

​

//--------------------------

function setup() {

  createCanvas(720, 720);

  millisRolloverTime = 0;

  angleMode(DEGREES);

  rectMode(CENTER);

}

​

//--------------------------

function draw() {

​

  var eased;

  var eased2;

  var armLen;

  var elbowY;

  var pawY;

  var elY;

  var pawSize;

  var spot1;

  var spot2;

  var spot1y;

  var spot2y;

​

  noStroke();

  fill('black');

  var H = hour();

  var M = minute();

  var S = second();

  var currTimeString =  (H % 12) + ":" + nf(M, 2) +" "+ ((H > 12) ? "pm" : "am");

​

  // Reckon the current millisecond, 

  // particularly if the second has rolled over.

  // Note that this is more correct than using millis()%1000;

  if (prevSec != S) {

    millisRolloverTime = millis();

  }

  prevSec = S;

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

  var secondsWithFraction = S + (mils / 1000.0);

  var secondsWithNoFraction = S;

  var secondBarWidthChunky = map(secondsWithNoFraction, 0, 60, 0, width);

  var secondBarWidthSmooth = map(secondsWithFraction, 0, 60, 0, width);

​

  //AM

  if (H < 12) {

    background(180, 212, 225);

  }

  //PM

  if (H >= 12) {

    background(34, 59, 81);

  }

​

  /*

  text("Hour: " + H, 10, 40);

  text("Minute: " + M, 10, 55);

  text("Second: " + S, 10, 70);

  text("Millis: " + mils, 10, 85);

*/

  drawCat(S, M, H, secondsWithFraction);

  fill("white");

  textSize(40);

  text(currTimeString, 30, 60);

  //add a new coin every minute

  if (coins.length < M) {

    coins.push(new Coin(random(90, 630), random(620, 670)));

  }

​

  //display the coins

  for (i = 0; i < coins.length; i++) {

    if (M == 0) {

      coins[i].move();

      coins[i].display();

    }

    if (M == i + 1 && S < 2) {

      coins[i].bounce();

    } else {

      coins[i].display();

    }

  }

​

  //reset coins

  if (M == 0 && S > 3) {

    coins = [];

  }

}

​

​

function Coin(x, y) {

  this.x = x;

  //map(M, 0, 59, 100, 620);

  this.y = y;

​

  this.display = function() {

    strokeWeight(4);

    stroke(241, 194, 50);

    fill(255, 217, 102);

    ellipse(this.x, this.y, 90, 40);

  }

  this.move = function() {

    spotsX = [width / 2, 280, 470, 230, 480, 500, 220, 220, 585, 585, 202, 460, width / 2, 280, 470, 230, 480, 500, 220, 220, 585, 585, 202, 460];

    spotsY = [139, 170, 270, 390, 500, 510, 515, 405, 300, 300, 525, 280, 139, 170, 270, 390, 500, 510, 515, 405, 300, 300, 525, 280];

​

    H = hour();

    S = second();

    if (prevSec != S) {

      millisRolloverTime = millis();

    }

    prevSec = S;

    mils = floor(millis() - millisRolloverTime);

    secondsWithFraction = S + (mils / 1000.0);

​

    //find the spot.x, spot.y at inteval

    eased = doubleExponentialSigmoid(secondsWithFraction / 3, 0.7);

    eased = (eased) % 5.0;

    this.x = map(eased, 0, 1, this.x, spotsX[H]);

    this.y = map(eased, 0, 1, this.y, spotsY[H]);

  }

  this.bounce = function() {

    S = second();

    if (prevSec != S) {

      millisRolloverTime = millis();

    }

    prevSec = S;

    mils = floor(millis() - millisRolloverTime);

    secondsWithFraction = S + (mils / 1000.0);

​

    eased2 = bounceOut(secondsWithFraction % S);

    //x = map(eased2, 0, 1, 400, 400);

    newY = map(eased2, 0, 1, 0, this.y);

​

    strokeWeight(4);

    stroke(241, 194, 50);

    fill(255, 217, 102);

    ellipse(this.x, newY, 90, 40);

  }

}

​

​

function drawCat(S, M, H, secondsWithFraction) {

  var totalSec = 3600 * H + 60 * M + S

  //left leg

  fill(255, 246, 240);

  ellipse(240, 500, 120, 170);

  arc(250, 580, 100, 100, 130, 50, CHORD);

​

  //6am 6pm spot

  if ((totalSec >= 21603 && H <= 12) || ((totalSec >= 64803 && H <= 23)) || (H == 0)) {

    fill(220, 175, 114);

    ellipse(220, 515, 50, 100);

  }

​

  //left arm

  fill(255, 246, 240);

  ellipse(250, 390, 120, 170);

  //body

  ellipse(420, 450, 160, 300);

​

  // 4am 4pm spot

  if ((totalSec >= 57603 && H <= 23) || ((totalSec >= 14403 && H <= 12)) || (H == 0)) {

    fill(220, 175, 114);

  } else {

    fill(255, 246, 240);

  }

  ellipse(480, 500, 120, 170);

​

  // 5am 5pm spot

  if ((totalSec >= 18003 && H <= 12) || ((totalSec >= 61203 && H <= 23)) || (H == 0)) {

    fill(91, 59, 27);

    ellipse(500, 510, 70, 90);

  }

​

  fill(255, 246, 240);

  arc(470, 580, 100, 100, 130, 50, CHORD);

​

  //ears

  push();

  rotate(70);

  fill(91, 59, 27);

  ellipse(310, -215, 280, 150);

  fill(183, 20, 20);

  ellipse(310, -215, 230, 110);

  pop();

​

  push();

  rotate(290);

  fill(255, 246, 240);

  ellipse(-70, 465, 290, 150);

  fill(183, 20, 20);

  ellipse(-70, 465, 240, 110);

  pop();

​

​

  //collar

  fill(56, 125, 99);

  ellipse(width / 2, 340, 230, 240);

  fill(183, 20, 20);

  ellipse(width / 2, 305, 230, 140);

  fill(255, 217, 102);

  ellipse(width / 2, 370, 60, 60);

​

  // 3am 3pm arm spot

  if ((totalSec >= 10803 && H <= 12) || ((totalSec >= 54003 && H <= 23)) || (H == 0)) {

    fill(220, 175, 114);

  } else {

    fill(255, 246, 240);

  }

  push();

  rotate(240);

  ellipse(-450, 10, 100, 60);

  pop();

​

​

  //7am 7pm arm spot

  if ((totalSec >= 25203 && H <= 12) || ((totalSec >= 68403 && H <= 23)) || (H == 0)) {

    fill(91, 59, 27);

  } else {

    fill(255, 246, 240);

  }

  push();

  rotate(240);

  ellipse(-460, -10, 60, 50);

  pop();

​

  //head

  fill(255, 246, 240);

  arc(width / 2, 250, 270, 270, 180, 0);

  ellipse(width / 2, 250, 285, 190);

​

  //face

  noFill();

  strokeWeight(10);

  stroke(65, 41, 16);

  strokeCap(ROUND);

  arc(308, 257, 90, 80, 230, 300);

  arc(412, 257, 90, 80, 240, 310);

​

  stroke(234, 153, 153);

  line(width / 2, 260, width / 2, 275);

​

  arc(345, 250, 60, 70, 70, 115);

  arc(375, 250, 60, 70, 65, 110);

  fill(234, 153, 153);

​

  noStroke();

  arc(width / 2, 250, 30, 25, 350, 190, CHORD);

  //2am 2pm spot

  if ((totalSec >= 7203 && H <= 12) || ((totalSec >= 50403 && H <= 23)) || (H == 0)) {

    push();

    fill(220, 175, 114);

    rotate(105);

    ellipse(130, -529, 90, 50);

    pop();

  }

​

  //11am 11pm spot

  if ((totalSec >= 39603 && H <= 12) || (totalSec >= 82803) || H == 0) {

    push();

    fill(91, 59, 27);

    rotate(105);

    ellipse(150, -515, 60, 40);

    pop();

  }

​

  //12am 12pm spot

  if ((totalSec >= 43203 && H < 13) || (totalSec >= 3 && H < 1)) {

    fill(220, 175, 114);

    ellipse(width / 2, 139, 115, 50);

  }

  //10am 10pm spot

  if ((totalSec >= 36003 && H <= 12) || ((totalSec >= 79203 && H <= 23)) || (H == 0)) {

    fill(91, 59, 27);

    ellipse(205, 525, 45, 60);

  }

​

  //1 am pm spot

  push();

  fill(91, 59, 27);

  rotate(140);

  ellipse(-112, -312, 147, 50);

  pop();

​

  //big coin

  push();

  rotate(45);

  fill(255, 217, 102);

  ellipse(615, 120, 250, 200);

  pop();

​

  //left hand

  fill(255, 246, 240);

  ellipse(280, 450, 110, 110);

​

  //right moving SECOND arm

  fill(255, 246, 240);

​

  if (S % 2 == 1) {

    eased = doubleExponentialSigmoid(secondsWithFraction % S, 0.7);

    eased = (eased) % 1.0;

    armLen = map(eased, 0, 1, 140, 120);

    rect(545, 280, 80, armLen);

​

    elbowY = map(eased, 0, 1, 90, 80);

    rect(510, 350, 70, elbowY);

​

    elY = map(eased, 0, 1, 350, 345);

    ellipse(540, elY, 90, 90);

​

    //8am 8pm spot 

    if ((totalSec >= 28803 && H <= 12) || ((totalSec >= 72003 && H <= 23)) || (H == 0)) {

      spot1 = map(eased, 0, 1, 80, 60);

      spot1y = map(eased, 0, 1, 320, 300);

      fill(220, 175, 114);

      arc(585, spot1y, 70, spot1, 90, 270);

    }

    //9am 9pm spot

    if ((totalSec >= 32403 && H <= 12) || ((totalSec >= 75603 && H <= 23)) || (H == 0)) {

      spot2 = map(eased, 0, 1, 50, 30);

      spot2y = map(eased, 0, 1, 330, 310);

      fill(91, 59, 27);

      arc(585, spot2y, 50, spot2, 90, 270);

    }

​

    fill(255, 246, 240);

    pawSize = map(eased, 0, 1, 105, 115);

    pawY = map(eased, 0, 1, 190, 230);

    ellipse(545, pawY, pawSize, pawSize);

  }

  if (S % 2 == 0) {

    if (S == 0) {

      eased = doubleExponentialSigmoid(secondsWithFraction, 0.7);

      eased = (eased) % 1.0;

      armLen = map(eased, 0, 1, 120, 140);

      rect(545, 280, 80, armLen);

​

      elbowY = map(eased, 0, 1, 80, 90);

      rect(510, 350, 70, elbowY);

​

      elY = map(eased, 0, 1, 345, 350);

      ellipse(540, elY, 90, 90);

​

      //8am 8pm spot 

      if ((totalSec >= 28803 && H <= 12) || ((totalSec >= 72003 && H <= 23)) || (H == 0)) {

        spot1 = map(eased, 0, 1, 60, 80);

        spot1y = map(eased, 0, 1, 300, 320);

        fill(220, 175, 114);

        arc(585, spot1y, 70, spot1, 90, 270);

      }

​

      //9am 9pm spot

      if ((totalSec >= 32403 && H <= 12) || ((totalSec >= 75603 && H <= 23)) || (H == 0)) {

        spot2 = map(eased, 0, 1, 30, 50);

        spot2y = map(eased, 0, 1, 310, 330);

​

        fill(91, 59, 27);

        arc(585, spot2y, 50, spot2, 90, 270);

      }

​

      fill(255, 246, 240);

      pawSize = map(eased, 0, 1, 115, 105);

      pawY = map(eased, 0, 1, 230, 190);

      ellipse(545, pawY, pawSize, pawSize);

​

​

    } else {

      eased = doubleExponentialSigmoid(secondsWithFraction % S, 0.7);

      eased = (eased) % 1.0;

      armLen = map(eased, 0, 1, 120, 140);

      rect(545, 280, 80, armLen);

​

​

      elbowY = map(eased, 0, 1, 80, 90);

      rect(510, 350, 70, elbowY);

​

      elY = map(eased, 0, 1, 345, 350);

      ellipse(540, elY, 90, 90);

​

      //8am 8pm spot 

      if ((totalSec >= 28803 && H <= 12) || ((totalSec >= 72003 && H <= 23)) || (H == 0)) {

        spot1 = map(eased, 0, 1, 60, 80);

        spot1y = map(eased, 0, 1, 300, 320);

        fill(220, 175, 114);

        arc(585, spot1y, 70, spot1, 90, 270);

      }

​

      //9am 9pm spot

      if ((totalSec >= 32403 && H <= 12) || ((totalSec >= 75603 && H <= 23)) || (H == 0)) {

        spot2 = map(eased, 0, 1, 30, 50);

        spot2y = map(eased, 0, 1, 310, 330);

        fill(91, 59, 27);

        arc(585, spot2y, 50, spot2, 90, 270);

      }

​

      fill(255, 246, 240);

      pawSize = map(eased, 0, 1, 115, 105);

      pawY = map(eased, 0, 1, 230, 190);

      ellipse(545, pawY, pawSize, pawSize);

    }

  }

}

​

​

function keyPressed() {

  var fs = fullscreen();

  fullscreen(!fs);

}

///////////////////// easing functions

​

​

// penner's four-part bounce algorithm

function bounceOut(_x) {

  if (_x < 4 / 11.0) {

    return ((121 * _x * _x) / 16.0);

  } else if (_x < 8 / 11.0) {

    return ((363 / 40.0 * _x * _x) - (99 / 10.0 * _x) + 17 / 5.0);

  } else if (_x < 9 / 10.0) {

    return ((4356 / 361.0 * _x * _x) - (35442 / 1805.0 * _x) + 16061 / 1805.0);

  } else {

    return ((54 / 5.0 * _x * _x) - (513 / 25.0 * _x) + 268 / 25.0);

  }

}

​

function doubleExponentialSigmoid(_x, _a) {

  if (!_a) _a = 0.75; // default

​

  var min_param_a = 0.0 + Number.EPSILON;

  var max_param_a = 1.0 - Number.EPSILON;

  _a = constrain(_a, min_param_a, max_param_a);

  _a = 1 - _a;

​

  var _y = 0;

  if (_x <= 0.5) {

    _y = (pow(2.0 * _x, 1.0 / _a)) / 2.0;

  } else {

    _y = 1.0 - (pow(2.0 * (1.0 - _x), 1.0 / _a)) / 2.0;

  }

  return (_y);

}