body
{
  max-width: 500px;
  margin: auto;
  background: #000;
}
var timecolours = ['#D6D5DB', '#5D5D5D', '#4F297C', ];
var bgColour = '#000000'

var h;
var m;
var s;

var rWidth;
var rHeight;

var drippedS;

function setup() 
{
  createCanvas(400, 400);
  angleMode(DEGREES);
  setupWR();
  
  rWidth = 10;
  rHeight = 10;
  
  setInterval(checkEverySecond, 450);
  drippedS = false;
}

function checkEverySecond()
{    
  //MAKE SECONDS DRIPS
  if(s == 0 && drippedS == false)
  {
    drippedS = true;
    makeDrop(200, 50);
  }
  else if(s == 15 && drippedS == false)
  {
    drippedS = true;
    makeDrop(350, 200);
  }
  else if(s == 30 && drippedS == false)
  {
    drippedS = true;
  makeDrop(200, 350);
  }
  else if(s == 45 && drippedS == false)
  {
    drippedS = true;
  makeDrop(50, 200);
  }
  else
  {
    drippedS = false;
  } 
}

function mousePressed() 
{
  var newColours = [timecolours[1], timecolours[2], timecolours[0]];
  timecolours = newColours;
}

function draw() 
{
  drawWR();
  
  translate(200, 200);
  rotate(-90);
  
  h = hour();
  m = minute();
  s = second();
  
  FixTime();
    
  //HOURS
  var endH = map(h % 12, 0, 12, 0, 360);
  noFill();
  drawLine(timecolours[0], 6, 0, 0, 220, 220, 0, endH)
  drawRect(h % 12, 0, timecolours[0], 1, 110-rWidth/1.75, -rWidth/2, rWidth, rHeight, false);
  rotate(90);
  drawRect(h % 12, 3, timecolours[0], 1, 110-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  drawRect(h % 12, 6, timecolours[0], 1, 110-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  drawRect(h % 12, 9, timecolours[0], 1, 110-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  
  //MINUTES
  var endM = map(m, 0, 60, 0, 360);
  noFill();
  drawLine(timecolours[1], 6, 0, 0, 260, 260, 0, endM)
  drawRect(m, 0, timecolours[1], 1, 130-rWidth/1.75, -rWidth/2, rWidth, rHeight, false);
  rotate(90);
  drawRect(m, 15, timecolours[1], 1, 130-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  drawRect(m, 30, timecolours[1], 1, 130-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  drawRect(m, 45, timecolours[1], 1, 130-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  
  //SECONDS
  var endS = map(s, 0, 60, 0, 360);
  noFill();
  drawLine(timecolours[2], 6, 0, 0, 300, 300, 0, endS) 
  drawRect(s, 0, timecolours[2], 1, 150-rWidth/1.75, -rWidth/2, rWidth, rHeight, false);
  rotate(90);
  drawRect(s, 15, timecolours[2], 1, 150-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  drawRect(s, 30, timecolours[2], 1, 150-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  drawRect(s, 45, timecolours[2], 1, 150-rWidth/1.75, -rWidth/2, rWidth, rHeight, true);
  rotate(90);
  
  //TIME
  printTime(h, m, s, timecolours[0], timecolours[1], timecolours[2], '#FFFFFF');
  
  //PUT THE H M S above the time!!!
  //textSize(10);
  //text("S", 0, 0);
}

function drawLine(_colour, _strokeWeight,
                  _x, _y, _w, _h, _start, _stop)
{
  stroke(_colour); 
  strokeWeight(_strokeWeight);
  arc(_x, _y, _w, _h, _start, _stop);
}

function drawRect(_time, _completeTime, _colour, _strokeWeight,
                  _x, _y, _w, _h, _passable)
{
  stroke(_colour); 
  strokeWeight(_strokeWeight);
  if(_time == 0)
  {
    fill(_colour); 
  }
  else if(_passable == true && _time >= _completeTime)
  {
    fill(_colour);
    
  }
  else
  {  
    fill(bgColour); 
  }
  rect(_x, _y, _w, _h); 
}

function printTime(_h, _m, _s, _hColour, _mColour, _sColour, _dColour)
{
  rotate(90); 
  noStroke();
  textSize(30);
  
  textAlign(CENTER, CENTER);
  fill(_hColour); 
  text(_h, -60, 0);
  fill(_dColour);
  text(":", -30, 0);
  fill(_mColour); 
  text(_m, 0, 0);
  fill(_dColour);
  text(":", 30, 0);
  fill(_sColour); 
  text(_s, 60, 0);
}

function FixTime()
{
  if(h < 10)
  {
    h = '0' + h;
  }
  if(m < 10)
  {
    m = '0' + m;
  }
  if(s < 10)
  {
    s = '0' + s;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js
  2. https://makaya.it/programming_projects/p5/Clock/WaterRipples.js