F D E  B I N A R Y

What is happening on screen?

A power source sends pulses of electricity along the wires. They flow into 8 logic gates and out the other side as 8 bits — a single byte. That byte is then translated into a colour, a musical note, and an ASCII character. Each cycle the inputs change, so the byte — and everything derived from it — changes too.

1 · the circuit

• 4 input bits I0 I1 I2 I3 on the left. They are randomised at the start of each cycle. In Manual mode you click them to fix the value.
• 8 gates (mix of AND, OR, XOR, NAND). Each gate is wired to two of the four inputs and emits one bit of the output byte. The top gate emits bit 7 (most-significant), the bottom emits bit 0 (least-significant).
• The 8 output bits stacked together = the byte, a whole number from 0 to 255.

2 · the cycle (≈ 3.4 s)

• Phase 1 — inputs flow: glowing pulses travel from the source to the gates. Bright cyan = a 1; dim grey = a 0.
• Phase 2 — gates evaluate: each gate's box lights up green if its output is 1, stays dim if 0.
• Phase 3 — outputs flow: pulses travel from each gate that produced a 1 to its output LED.
• Phase 4 — reveal: the LEDs latch, the colour swatch updates and the note plays.

3 · byte → colour

The byte (0–255) is treated as a position on the colour wheel. The wheel runs 0°–360°, so we map the byte onto it:

hue = byte ÷ 256 × 360°  →  hsl(hue, 85%, 55%)

• 0 → red (0°)
• 64 → yellow-green (~90°)
• 128 → cyan (~180°)
• 192 → purple (~270°)
• 255 → almost back to red (~358°)

4 · byte → sound

Random byte values would sound dissonant, so we snap the byte to a pentatonic scale — a 5-note pattern (C, D, E, G, A) repeated across three octaves, giving 15 musical notes:

index = floor(byte ÷ 256 × 15)  →  the frequency of that note is played for ~0.5 s on a triangle-wave oscillator (Web Audio API).

So low bytes give low notes (C3 = 130.81 Hz) and high bytes give high notes (A5 = 880 Hz).

5 · byte → ASCII character

Computers store text as numbers, using the ASCII table (American Standard Code for Information Interchange). Each character has a numeric code:

• 0–31 & 127 — control codes, not printable on screen (things like NUL, BEL, TAB, LF, DEL).
• 32 — space
• 48–57 — the digits 0–9
• 65–90 — uppercase A–Z
• 97–122 — lowercase a–z
• 128–255 — beyond standard 7-bit ASCII (extended / Latin-1 territory)

So the same byte that gives a colour and a note also stands for a character. Try Manual mode and aim for byte 65 — you'll see the ASCII card light up with 'A'.

why these choices?

• Pentatonic notes never clash, so random bits sound pleasant.
• HSL hue maps a single number cleanly onto a 1-D rainbow — no awkward splitting of 8 bits into R/G/B.
• ASCII is the historical standard for text — knowing the byte for 'A' is 65 is part of every CS course.

The takeaway: inside a computer everything really is just bits. Pick a mapping, and a number becomes a colour, a sound, or a letter.