← back to the clock

Binary Clock 3d — FAQ

A self-contained <binary-clock> Web Component. One script tag, any page.

How do I read the default (BIN) display?

Each time row is one 8-position byte of standard binary — the whole value converted to base‑2, padded to 8 bits. Read right to left: the positions are worth 1, 2, 4, 8, 16, 32, 64, 128. Add up the positions showing 1.

H: 00010110  =  16 + 4 + 2  =  22
M: 00100101  =  32 + 4 + 1  =  37
S: 00001010  =   8 + 2      =  10   → 22:37:10

The date row works the same way with different widths: the year is 11 bits, the month 4 bits, the day 5 bits.

What is BCD?

Binary-coded decimal encodes each decimal digit separately as its own 4-bit group, instead of converting the whole number. 22 becomes 0010 0010 (a “2” and another “2”), never 00010110. Classic hardware binary clocks use BCD because each digit maps to its own column of lamps.

Digit0123456789
BCD0000000100100011010001010110011110001001

What is DEC?

A plain decimal digital readout — ordinary 22:37:10. The BIN button cycles BIN → BCD → DEC → XII; hovering it explains the mode you are looking at.

What is XII?

Roman numerals — XXII:XXXVII:X for 22:37:10 — the same instant in a numeral system with no place value and no zero. Rome never wrote a zero; when a row reaches one (the top of the minute, the top of the hour) it shows N, the medieval nulla. The world-clock rows follow; blocktime stays decimal, because a block height is far beyond MMMCMXCIX. On the dial, XII rings the numerals XII I II III IIII V … with the horological IIII.

How do I switch 12-hour / 24-hour?

The 12H/24H button toggles the hour format in every display mode — 24h binary, 12h binary, BCD, and decimal. It is labeled with the format it switches to. In 12-hour mode the hours row (and each world-clock row) carries a small dim AM/PM mark, so no information is lost in the binary views.

How do I move, tilt, and resize it?

Position, size, tilt, and all modes persist in localStorage and survive reloads.

What do the panel buttons do?

How do I use it in my own project?

Copy binary-clock.js next to your page and add two lines — no build step, no dependencies:

<script src="binary-clock.js"></script>
<binary-clock></binary-clock>

The component renders in shadow DOM (your page styles cannot break it), floats above the page with position: fixed, and loads the VT323 font itself (falling back to monospace offline). Attributes set first-run defaults:

<binary-clock storage-key="desk" display-mode="bcd" hour-mode="12"
              theme="light" x="40" y="40" scale="20" analog
              alarm="07:30" sound="/alarm.mp3" timezones="UTC,Asia/Tokyo"></binary-clock>

Everything is scriptable too:

const clock = document.querySelector('binary-clock');
clock.displayMode = 'bcd';
clock.hourMode = '12';
clock.timer = '5:00';                  // start a countdown
clock.analog = true;                   // the dial
clock.alarmSound = 'tone';             // or 'file' / 'url'; clock.loadAlarmSound(file) picks one
clock.timezones = ['UTC', 'Asia/Tokyo'];
clock.addEventListener('binary-clock-alarm', e => console.log(e.detail));

And themable with CSS custom properties on the element or any ancestor:

binary-clock {
    --binary-clock-color: #00ffff;       /* primary glow color */
    --binary-clock-dim-color: #005050;   /* labels/borders at rest */
    --binary-clock-bg: rgba(0,20,20,.9); /* face background */
    --binary-clock-z: 500;               /* stacking order */
}

See the README in the repository for the full attribute, API, and theming reference.

What is the converter next to the clock?

<binary-converter> — a companion widget in the same terminal face that converts text to binary and back. SWAP flips the direction between TXT→BIN and BIN→TXT and feeds the previous result back in, so a round trip is one click; COPY takes the result (clicking the output selects all of it too); SAVE downloads it as a .txt named by the moment — binary-20260828-002133.txt or text-20260828-002133.txt — holding exactly the result; OPEN loads a .txt into the input (or drop one on the widget) and switches direction by itself when the file is all bits; CLR empties the field. It speaks exactly the dialect the clock displays:

Hello  →  01001000 01100101 01101100 01101100 01101111
01110000 01110010 01101111 01100110  →  prof

Paste an unbroken stream and it chunks it into bytes; paste rows that wrap mid-byte (copied straight out of the opening image) and it rejoins them at byte boundaries and says so under the output; feed it something invalid and it names the offending segment. Encoding is UTF-8 byte-based, so every segment stays exactly 8 bits even for non-ASCII characters; decoding tries UTF-8 first and falls back to one byte per character (Latin-1), so a byte like 11101001 reads as é. The count line reports bytes, bits, and characters for the whole message.

<script src="binary-converter.js"></script>
<binary-converter></binary-converter>

How do I put these on a WordPress page?

Add a Custom HTML block that loads both scripts from the jsDelivr CDN — no plugin, no hosting, no build. One clock plus the converter, rather than a second clock repeating the same time:

<script src="https://cdn.jsdelivr.net/gh/Professor-Codephreak/BinaryClock@main/binary-clock.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Professor-Codephreak/BinaryClock@main/binary-converter.js"></script>
<binary-clock storage-key="rage-codephreak" scale="37" dock="right"></binary-clock>
<binary-converter storage-key="rage-codephreak" scale="16" x="24" y="420"></binary-converter>

dock="right" is landing mode: the clock arrives centred as the page’s opening feature — below an allowance for the heading — then glides into the right margin at a small size once you scroll into the article, so it never covers the text. Scrolling back to the top brings it home, and the moment you drag or resize it yourself, docking switches off for good. Drop dock and scale for a plain, regular-size clock that stays where it is placed.

One clock element is enough — a second instance only repeats the same time at a different size.

Both widgets are position: fixed and float above the post, so the block can sit anywhere in it. Give each page its own storage-key (the clock and converter can share one — they use separate storage namespaces). Keep the tags on their own lines without blank lines between them, so wpautop leaves them alone.

What is the opening image?

A field of 1s and 0s that repeats professor codephreak was here in 8-bit binary, over and over, as one continuous stream wrapped across every row — lit 1s glowing, 0s receding, the same way the clock face reads. Decode the first row with the converter and it spells the phrase. It is rendered by mindX’s artist.agent binary_field skill, deterministically: the same message at the same size always produces the same image.

Lesson 1 — reading the clock

Five minutes, clock only. No other tool needed.

  1. Watch the S: row until the seconds reach a value you can count against a watch — say 00000101.
  2. Read it right to left. The positions are worth 1, 2, 4, 8, 16, 32, 64, 128. Add the positions showing a 1: 1 + 4 = 5.
  3. Do the same for the M: row. Check it against a clock you trust. Do it twice more, until you stop counting positions and start recognising the shape.
  4. Press BIN once. The same 5 seconds now reads 0000 0101.
  5. Press BIN again for DEC and confirm what you worked out.

Concept. One number, more than one binary encoding. In standard binary the place values run across the whole value, so 22 is 00010110 — 16 + 4 + 2. In BCD the place values restart every four bits and each group holds one decimal digit, so 22 is 0010 0010 — a “2” and a “2”. Identical instant, identical hardware, different agreement about what the bits mean. Nothing in the bits themselves tells you which agreement is in force; you have to be told, or you have to know.

Lesson 2 — the horizon of a 32-bit clock

Five minutes, clock only. Requires the BLK panel.

  1. Press BLK and find the U: row — the Unix epoch, the number of seconds since 1 January 1970, written as 32 bits.
  2. Watch the rightmost bit flip every second, the one beside it every two seconds, the next every four. It is an odometer.
  3. Look at the leftmost bit. It is drawn in amber, and it is still 0.
  4. Read the countdown beside the row: the time left before the count needs that bit.
  5. Ask what happens the second after it turns 1.

Concept. A fixed-width representation has a horizon. Thirty-two bits, one of them spent on the sign, leaves 2,147,483,647 seconds — a ceiling reached at 03:14:07 UTC on 19 January 2038. One second later the carry claims the sign bit and a machine reading two's complement sees not a larger number but a negative one: 13 December 1901. Nothing overflows loudly; the count simply becomes a date in the past, and everything that trusted it reasons from there. Switch the clock to DEC and the same instant is an unremarkable ten-digit number — the limit is invisible in base 10 and plain in base 2, which is the argument for owning an instrument that shows you the bits.

Where can I practice reading binary?

Its companion project binarytotext converts text to binary and back in a terminal UI (plus standalone Python CLIs). It speaks the same 8-bit, space-separated dialect this clock displays — so you can decode a row by hand, then paste it in to check yourself:

bin2text 01001000 01100101 01101100 01101100 01101111
Text: Hello

The clock shows you time as bytes; binarytotext shows you everything else as bytes.

Where is the source?

All of it, in one repository: github.com/Professor-Codephreak/BinaryClock — binary-clock.js (the clock), binary-converter.js (the converter widget), and the two pages you are looking at. No build step and no dependencies: the file the repository holds is the file this page runs. Read it, fork it, or drop it into your own project.

Does it call home?

Two network touches only: the VT323 font from Google Fonts (optional — it falls back to monospace), and, only while the BLK panel is open, a public Ethereum JSON-RPC endpoint polled every 12 seconds for the head block (plus, if the page author set a sound URL, that file when the alarm rings). Nothing else leaves the page; all state lives in your browser — localStorage for settings, IndexedDB for an alarm sound you picked. A file you OPEN in the converter is read in the page and never uploaded.

← back to the clock  ·  source on GitHub →  ·  binarytotext →

binaryclock © 2025 Gregory L. Magnusson — BANKON License