Creative Coding · Session c17
Binary & Bits
How a computer counts with just two digits.
Inside every computer, every photo, song, message and game is stored using only two symbols: 0 and 1. Think of a light switch: off is 0, on is 1. One switch is called a bit. It is a tiny amount, but line up eight of them and you can make 256 different patterns. Eight bits together are called a byte.
You already use bytes. In c02 each colour channel, red, green and blue, went from 0 to 255. That is exactly one byte per channel.
Picture it: eight switches, each worth double the one on its right
128
64
32
16
8
4
2
1
27
26
25
24
23
22
21
20
0
1
0
0
0
0
0
1
0×128 + 1×64 + 0×32 + 0×16 + 0×8 + 0×4 + 0×2 + 1×1 = 64 + 1 = 65
Only the switches that are
on count. Add up the place values of the on switches and you get the number. In our decimal system each place is worth 10 times the next one (1, 10, 100). In binary each place is worth 2 times the next one. These place values are the powers of 2: 2
0 = 1, 2
1 = 2, 2
2 = 4, and so on up to 2
7 = 128.
Live sketch: one byte, three meanings
Tap the switches to turn them on and off. The same eight bits are shown as a number, as the red amount of a colour (the left swatch), and as a letter (the right side, for codes 32 to 126). The sketch starts on 01000001, which we just worked out is 65.
let bits = [0, 1, 0, 0, 0, 0, 0, 1];
function setup() {
createCanvas(420, 290);
textAlign(CENTER, CENTER);
}
function draw() {
background(255);
let value = 0;
for (let i = 0; i < 8; i++) {
let x = 5 + i * 52;
let place = pow(2, 7 - i);
if (bits[i] === 1) value += place;
fill(bits[i] === 1 ? '#06b6d4' : '#e5e7eb');
rect(x, 34, 46, 50, 8);
fill(20);
text(place, x + 23, 18);
text(bits[i], x + 23, 59);
}
text('value = ' + value, 210, 110);
fill(value, 0, 0);
rect(5, 140, 200, 120, 10);
if (value >= 32 && value <= 126) {
fill(20);
textSize(64);
text(String.fromCharCode(value), 315, 200);
textSize(12);
}
}
function mousePressed() {
for (let i = 0; i < 8; i++) {
let x = 5 + i * 52;
if (mouseX > x && mouseX < x + 46 && mouseY > 34 && mouseY < 84) {
bits[i] = 1 - bits[i];
}
}
}
Why this matters
- Counting: n bits can make 2n different patterns. One bit: 2. Three bits: 2 × 2 × 2 = 8 (0 to 7). Eight bits: 28 = 256 patterns, which are the numbers 0 to 255 (starting at 0 is why the top is 255, not 256).
- Colour: one pixel stores three bytes, one each for red, green and blue. That is 24 bits, so a pixel can be one of 256 × 256 × 256 = 16,777,216 colours. A photo is just millions of pixels, each three numbers.
- Text: a computer cannot store the letter A, only a number. So there is an agreed table of codes: A is 65, B is 66, and so on. Lowercase letters have their own codes: a is 97. The sketch shows the letter for whatever code your switches make.
So the same eight switches can mean a number, a shade of red, or a letter. Bits have no meaning on their own; the program decides how to read them.
Quick check: what number is 00101101?
The on switches are 32, 8, 4 and 1.
Answer: 32 + 8 + 4 + 1 = 45. Bonus: how many patterns can 3 bits make? 2 × 2 × 2 = 8, the numbers 0 to 7.
Crack the case
Case: the left-hand switch is worth only 1
A friend rewrote the place-value line. Now turning on just the leftmost switch shows
value = 1 instead of 128, and the rightmost shows 128.
let place = pow(2, i);
Which line from the sketch is this a broken copy of, and what should it say?
Reveal
The original is pow(2, 7 - i). With i going 0, 1, 2 ... 7 from left to right, plain pow(2, i) gives 1, 2, 4 ... 128, so the switches are worth the right amounts but in the wrong order. The leftmost switch must be the biggest, 27, so the exponent has to count down: 7 - i.
Challenges
- Predict, then test: work out on paper what
01100110 is as a number and as a letter. (Hint: place values 64, 32, 4, 2. Letters start at a = 97.) Then set the switches and check yourself.
- Explore: set the switches to
01000001 (A). Now turn on only the 32 switch as well. What letter appears, and what happened to the number? Try it on B (01000010). What does the 32 switch do to a capital letter?
- Create a message: spell your name. Capital M is 77 and lowercase i is 105 and a is 97. Write each as eight bits on paper, set them on the switches one at a time, and check the letter appears. You are writing in the computer's own language.
- Debug: in your own copy of the sketch, change
pow(2, 7 - i) to pow(2, i) and see the case above for yourself. Then fix it again. What is the biggest number you can make with eight switches, and which pattern is it?
- Modify, with colours: bright yellow in RGB is (255, 255, 0). Write each of those three bytes in binary on paper. Then change the swatch line to
fill(value, value, 0); and set the switches to your answer. Does it match the yellow you expect?
Next session → c18: Sorting & Searching
You now know how data lives in a computer as numbers. Next we ask what the computer can do with a whole list of them: put them in order, and find one fast. You will count the steps different methods need and discover how halving, a trick a bit like binary, makes searching hugely quicker.