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;
}
}
This Pen doesn't use any external CSS resources.