Dot Clock - OpenProcessing

mySketch
xxxxxxxxxx
 
//60212 CLOCK SKETCH
​
var h, m, s;
​
function setup() {
  createCanvas(500,500);
}
​
function draw() {
  background(0);
  
  h = hour();
  m = minute();
  s = second();
  
  ellipseMode(CENTER);
  
  //white circle bg for hours
  stroke(90);
  noFill();
  strokeWeight(15)
  ellipse(width/2,height/2, 380)
  
  
  //grey circle bg for seconds
  fill(30);
  noStroke();
  ellipse(width/2,height/2, 200,200)
  
  if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY < 300) {
    displayTime();
  }
  
  push();
    translate(width/2, height/2);
    angleMode(DEGREES)
    rotate(-90)
    dotSize = 3;
    noStroke();
    ///////////////////////////////////
    var hRad = 190;
    // var hColor = map(h,0,23,50,255);
    var hColor = color(0)
    // var hColor = color(226, 9, 63)
    var hDotSize = 5;
    fill(hColor);
    for (var i = 0; i <= 360; i+= 360/h) {
      if (h == 0) {
        h = 12
      } else {
        ellipse(cos(i) * hRad, sin(i) * hRad,hDotSize,hDotSize);
      }
      
    }
    ///////////////////////////////////
    var mRad = 130;
    var mColor = map(m,0,59,50,255);
    // var mColor = color(53, 87, 255)
    fill(mColor);
    for (var i = 0; i <= 360; i+= 360/m) {
      if (m > 0) {
        ellipse(cos(i) * mRad, sin(i) * mRad,dotSize,dotSize);
      }
    }
    ///////////////////////////////////
    var sRad= 90;
    var sColor = map(s,0,59,50,255);
    // var sColor = color(255, 86, 128)
    fill(sColor)
    for (var i = 0; i <= 360; i+= 360/s) {
      if (s > 0) {
        ellipse(cos(i) * sRad, sin(i) * sRad,dotSize,dotSize);
      }
    }
    ///////////////////////////////////
  pop();
}
​
function displayTime() {
  noStroke();
  fill(255);
  textAlign(CENTER);
  textSize(15);
  // xTime = 60
  // yTime = 40
  xTime = width/2;
  yTime = height/2;
  
  if (h==0) {
    h = 12
  }
  
  //display zero in front of single digit second
  if (s < 10 && m >= 10) {
    text(h + " : " + m + " : 0" + s, xTime, yTime);
  }
  //display zero in front of single digit minute
  else if (s >= 10 && m < 10) {
    text(h + " : 0" + m + " : " + s, xTime, yTime);
  }
  //display zeroes in front of single digit seconds and minutes
  else if (s < 10 && m < 10) {
    text(h + " : 0" +m + " : 0" + s, xTime, yTime);
  }
  //keep seconds and minutes as is when two digits
  else {
    text(h + " : " + m + " : " + s, xTime, yTime);
  }
}
​
function Dot(x,y, r) {
  this.dotX = x
  this.dotY = y
  this.dotR = r
  
  this.display = function() {
    noStroke();
    fill(0);
    ellipse(this.dotX, this.dotY, this.dotR, this.dotR);
  }
  
  this.move = function() {
    var rand = random(1);  
    if (rand < 0.25) {
      this.dotX++;
    } else if (rand < 0.5) {
      this.dotX--;
    } else if (rand < 0.75) {
      this.dotY++;
    } else {
      this.dotY--;
    }    
    
    this.dotX = constrain(this.dotX,0,width-1);
    this.dotY = constrain(this.dotY,0,height-1);
  }
}