<html>
<head>
<script type='text/javascript' src="https://blinken.org/client.js"></script>
<script type='text/javascript' src="binaryClock.js"></script>
</head>
<body></body>
</html>
console.clear();
window.onload = () => {
(new Blinken({
title: "Binary Clock",
author: "Samuel Gonzalez (samgonza)",
})).run((lights) => {
// converts hex rgba color value to light string color
var Color = (hexColor) => {
return {r: ((hexColor>>24)&0xFF)/255.,
g: ((hexColor>>16)&0xFF)/255.,
b: ((hexColor>>8) &0xFF)/255.,
a: ( hexColor &0xFF)/255.}
}
// function for clearing the light string
var Clear = (color = Color(0)) => {
for(var i = 0; i < lights.length; ++i) {
lights[i].rgb(color.r, color.g, color.b);
}
}
// function for printing an integer to the light string
var Print = (color, pos, n, width) => {
while(n && pos < lights.length) {
if(pos >= 0) {
let bitColor = n&1 ? color : Color(0);
let light = lights[pos];
light.rgb(bitColor.r, bitColor.g, bitColor.b);
light.a = bitColor.a;
}
n>>= 1;
++pos;
}
return pos;
}
// Return our update function
return () => {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1; //Note: getMonth returns month starting at index 0
var day = date.getDate() + 1; //Note: getDate returns day of month string at index 0
var hours = date.getHours();
var minuets = date.getMinutes();
var seconds = date.getSeconds();
var ms = date.getMilliseconds();
var pos = 0;
var separator = 0b11111111;
Clear();
Print(Color(0xf0ca0fff), pos, ms);
pos = Print(Color(0xffffffff), pos+10, separator);
Print(Color(0x000effff), pos, seconds);
pos = Print(Color(0xffffffff), pos+6, separator);
Print(Color(0xff8800ff), pos, minuets);
pos = Print(Color(0xffffffff), pos+6, separator);
Print(Color(0x5fff00ff), pos, hours);
pos = Print(Color(0xffffffff), pos+5, separator);
Print(Color(0xe907f8ff), pos, day);
pos = Print(Color(0xffffffff), pos+5, separator);
Print(Color(0x00ff7dff), pos, month);
pos = Print(Color(0xffffffff), pos+4, separator);
Print(Color(0xed1512ff), pos, year);
pos = Print(Color(0xffffffff), pos+12, separator);
// console.log(String(year) + " | "+ String(month) + " | "+ String(day) + " | "+ String(hours) + " | "+ String(minuets) + " | "+ String(seconds) + " | "+ String(ms));
// Wait 255 ms until we get called again.
// Note: 255 is 1 off from a power of 2 so we can see the ms increasing instead of just flickering
return 255;
};
});
};
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |