InteractLab

Bits & Bytes — eight little light switches

A byte is just eight light switches in a row. Each switch is worth double the one to its right — 1, 2, 4, 8, 16, 32, 64, 128. Flip the right switches and you can spell any number from 0 to 255. Then watch AND, OR, XOR, and shifts move those switches around, one column at a time.

binary & place valuedecimal → binarybitwise playgroundreal-world uses

Module 1 · Place value

A byte is 8 light switches

💡 Light switches: each of the 8 switches has a value — the rightmost is 1, and every switch to the left is worth double. Drag the slider or tap a switch to flip it, and watch the lit values add up to the number.

42decimal
128
64
32
16
8
4
2
1
7
6
5
4
3
2
1
0

The lit switches add up: 32 + 8 + 2 = 42. Tap any switch to flip that bit.

Module 2 · Conversion

Decimal → binary, by hand

Keep halving: divide by 2 over and over and write down each remainder. Read those remainders from the bottom up and you have the binary number. The trace below runs the real division so it always matches.

step 142 ÷ 2 = 21 remainder0
step 221 ÷ 2 = 10 remainder1
step 310 ÷ 2 = 5 remainder0
step 45 ÷ 2 = 2 remainder1
step 52 ÷ 2 = 1 remainder0
step 61 ÷ 2 = 0 remainder1

↑ read the remainders bottom-to-top

result — 42 in binary

7
6
5
4
3
2
1
0

verify: 32 + 8 + 2 = 42

Module 3 · Operators

The bitwise playground

🎛️ Column by column: line up two bytes and compare them one switch at a time. AND keeps a switch on only if both are on, OR if either is on, XOR only if they disagree. Shifts slide the whole row left or right.

A12
B10
resultkeep only the 1s that appear in BOTH rows above
7
6
5
4
3
2
1
0
12 & 10 =8binary 00001000

keeps a bit only when BOTH A and B have 1 in that position

Module 4 · In the wild

Where you actually meet bitwise code

Even / odd check

Instead of n % 2 == 0, low-level code writes (n & 1) == 0. The last bit of any even number is always 0.

Power-of-two check

n & (n - 1) == 0 — a power of 2 has exactly one 1-bit. Subtracting 1 flips every bit below it, so AND gives 0.

File permission flags

chmod 755 is bitwise flags. Read = 4, Write = 2, Execute = 1. OR them together: 4 | 2 | 1 = 7, full access.

RGB colour masking

Pull red out of 0xFF5733 with (color >> 16) & 0xFF = 255. Every browser and image editor does this.

Multiply / divide by 2, fast

n << 1 is n × 2 and n >> 1 is n ÷ 2. Compilers lean on this internally for speed.

Interview patterns

Single number, counting bits, missing number, subset generation — all lean on XOR or AND. Once you see the pattern they get straightforward.

Where this connects

🔗 Looking forward: hashing, hash-set membership, and bitmasks in dynamic programming all reuse this exact switch-flipping. Once a byte feels like eight switches, those topics stop looking like magic.