stripes();

  timeWord();

  motion();

  clockNum();

}

​

function clockNum() {

  number(0);

  number(30);

  number(60);

  number(90);

  number(120);

  number(150);

  number(180);

  number(210);

  number(240);

  number(270);

  number(300);

  number(330);

}

​

function motion() {

  runningDots(255, 255, 255, 150, 50, 1000, 5);

  runningDots(10, 255, 200, 100, 100, 1000, 10);

  runningDots(100, 50, 255, 100, 150, 1000, 10);

  runningDots(255, 10, 150, 100, 200, 1000, 10);

}

​

function timeWord() {

  timeIndicater('S', 0.388);

  timeIndicater('M', 0.288);

  timeIndicater('H', 0.188);

}

​

function stripes() {

  clockIndicater(0.8, 255 - col * 10, 10, 150, 255, secondAngle);

  clockIndicater(0.6, 100 - col * 10, 50, 255, 255, minuteAngle);

  clockIndicater(0.4, 10 - col * 10, 255, 200, 255, hourAngle);

}

​

function taipeiStripes() {

  taipeiClockIndicater(0.8, 255 - col * 10, 10, 150, 255, taipeiSecondAngle);

  taipeiClockIndicater(0.6, 100 - col * 10, 50, 255, 255, taipeiMinuteAngle);

  taipeiClockIndicater(0.4, 10 - col * 10, 255, 200, 255, taipeiHourAngle);

}

​

function taipeiClockIndicater(radius, strr, strg, strb, stra, angle) {

  push();

  if (mouseIsPressed) {

    if (d < 45) {

      c.x += random(-0.5, 0.5);

      c.y += random(-0.5, 0.5);

      strr -= 50;

      strg -= 50;

      strb -= 50;

      stra -= 250;

      stroke(strr, strg, strb, stra);

    }

  }

  translate(c.x, c.y);

  rotate(-90);

  noFill();

  stroke(strr, strg, strb, stra);

  strokeWeight(50);

  taipeiSecondAngle = map(time.sc, 0, 60, 0, 360);

  taipeiMinuteAngle = map(time.mn, 0, 60, 0, 360);

  taipeiHourAngle = map((time.hr + 13) % 12, 0, 12, 0, 360);

  arc(0, 0, width * radius, height * radius, 0, angle);

  pop();

}

​

function clockIndicater(radius, strr, strg, strb, stra, angle) {

  push();

  if (mouseIsPressed) {

    if (d < 45) {

      c.x += random(-0.5, 0.5);

      c.y += random(-0.5, 0.5);

      strr -= 50;

      strg -= 50;

      strb -= 50;

      stra -= 250;

      stroke(strr, strg, strb, stra);

    }

  }

  translate(c.x, c.y);

  rotate(-90);

  noFill();

  stroke(strr, strg, strb, stra);

  strokeWeight(50);

  secondAngle = map(time.sc, 0, 60, 0, 360);

  minuteAngle = map(time.mn, 0, 60, 0, 360);

  hourAngle = map(time.hr % 12, 0, 12, 0, 360);

  arc(0, 0, width * radius, height * radius, 0, angle);

  pop();

}

​

function timeIndicater(word, r) {

  push();

  translate(c.x, c.y);

  fill(255);

  textSize(20);

  textAlign(RIGHT);

  text(word, -width * 0.07, -height * r);

  pop();

}

​

function runningDots(dotr, dotg, dotb, dota, innerR, t, r) {

  push();

  translate(c.x, c.y);

  fill(dotr, dotg, dotb, dota);

  let innerAngle = map(millis(), 0, t, 0, 360);

  noStroke();

  ellipse(innerR * cos(innerAngle), innerR * sin(innerAngle), r);

  pop();

}

​

function NYTimeCenter() {

  d = dist(mouseX, mouseY, c.x, c.y);

  if (d < 45 / 2)

    fill(20, 20, 200, 255);

  else fill(20, 20, 200);

  noStroke();

  ellipse(c.x, c.y, 45);

  textSize(44);

  textStyle(ITALIC);

  textAlign(CENTER);

  fill(255);

  if (time.hr < 12) {

    text("A", c.x, c.y * 1.07);

  } else {

    text("P", c.x, c.y * 1.07);

  }

}

​

function taipeiTimeCenter() {

  d = dist(mouseX, mouseY, c.x, c.y);

  if (d < 45 / 2)

    fill(20, 20, 200, 255);

  else fill(20, 20, 200);

  noStroke();

  ellipse(c.x, c.y, 45);

  textSize(44);

  textStyle(ITALIC);

  textAlign(CENTER);

  fill(255);

  if (time.hr + 13 < 12) {

    text("A", c.x, c.y * 1.07);

  } else {

    text("P", c.x, c.y * 1.07);

  }

}

​

function number(dotAngle) {

  push();

  translate(c.x, c.y);

  rotate(-90);

  noStroke();

  fill(255, 50);

  ellipse(width * 0.47 * cos(dotAngle), height * 0.47 * sin(dotAngle), 5);

  pop();

}

​

function taipeiTime() {

  taipeiStripes();

  timeWord();

  motion();

  clockNum();

}