a=document.getElementById("c");i=720;j=300;a.width=i;a.height=j;k=a.getContext("2d");k.b=k.beginPath;k.s=k.stroke;k.f=k.fill;function l(q){function e(o){for(o=parseInt(o).toString(2);o.length<4;)o="0"+o;return o}function p(o){o+="";return o.length==1?"0"+o:o}d=new Date;g=p(d.getHours());h=p(d.getMinutes());d=p(d.getSeconds());return(e(g[0])+e(g[1])+e(h[0])+e(h[1])+e(d[0])+e(d[1]))[q]=="1"} function m(q,e,p,o){b=10;e=q+e;p=b+p;k.q=k.quadraticCurveTo;k.l=k.lineTo;k.b();k.moveTo(q,b);k.l(e-10,b);k.q(e,b,e,b+10);k.l(e,p-10);k.q(e,p,e-10,p);k.l(q,p);k.l(q,b);k.s();k.fillStyle=o;k.f()} function n(){k.clearRect(0,0,i,j);m(10,i-20,j-20,"#fafafa");m(445,265,280,"#4682B4");k.fillStyle="#fff";k.t=k.fillText;k.font="22px arial";k.t("Uber Binary Clock",490,80);k.t("js1k",490,105);f={0:1,1:1,8:1,16:1};b=64;for(c=0;b<=384;b+=64)for(var q=61;q<=244;q+=61,c++)if(!f[c]){var e=b,p=q,o=c,r=l(c);k.b();k.strokeStyle="#325FA2";k.arc(e,p,28,0,Math.PI*2,true);k.s();k.fillStyle="rgb(20,80,"+o+"0)";r&&k.f()}setTimeout(n,0)}n();
var o=document.getElementById('c'),
WIDTH=720,
HEIGHT=300;
o.width=WIDTH;
o.height=HEIGHT;
var ctx=o.getContext('2d');
function binViewUnit(x,y,X,Y,a,f){
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#325FA2';
ctx.arc(x,y,X,Y,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = 'rgb(20,90,'+a+'0)';
if (f) ctx.fill();
}
function isTime(a) {
var toBinAndPad = function(d) {
d = parseInt(d,10).toString(2);
while (d.length < 4)
d = "0" + d;
return d;
}
, padT = function(t) {
t=t.toString();
return (t.length==1) ? "0"+t : t;
}
, D = new Date()
, hr = padT(D.getHours())
, mn = padT(D.getMinutes())
, se = padT(D.getSeconds())
, tot = toBinAndPad(hr[0]) + toBinAndPad(hr[1])
+ toBinAndPad(mn[0]) + toBinAndPad(mn[1])
+ toBinAndPad(se[0]) + toBinAndPad(se[1]);
return (tot[a]=="1");
}
function drawBackground() {
drawRectangle(10, 10, WIDTH-20, HEIGHT-20, "#222", "#fafafa");
drawRectangle(445, 10, 265, 280, "#333", "#4682B4");
ctx.fillStyle = "#fff";
ctx.font = "22px arial";
ctx.fillText("Uber Binary Clock", 490, 80);
ctx.fillText("js1k", 490, 105);
}
function drawRectangle(x, y, X, Y, scolor, bgcolor) {
var xX = x+X
, yY = y+Y
, lT = function(ctx,a,b) {ctx.lineTo(a,b)}
, qC = function(ctx,a,b,c,d) {ctx.quadraticCurveTo(a,b,c,d)};
ctx.beginPath();
ctx.moveTo(x, y);
lT(ctx, xX-10, y);
qC(ctx, xX, y, xX, y+10);
lT(ctx, xX, yY-10);
qC(ctx, xX, yY, xX-10, yY);
lT(ctx, x, yY);
lT(ctx, x, y);
ctx.stroke();
ctx.fillStyle = bgcolor;
ctx.fill()
}
function drawClock() {
var map = {0:1, 1:1, 8:1, 16:1}
, x = 64
, y = 61;
for (var i=x,a=0;i<=x*6;i+=x){
for (var j=y;j<=y*4;j+=y,a++){
if (!map[a]) {
binViewUnit(i,j,28,0,a,isTime(a));
}
}
}
}
function loop() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
drawBackground();
drawClock();
setTimeout(loop,00);
}
loop();
