How Computers Work: The 1s And 0s

This is still a draft

Introduction

Computers are amazing. From the simpliest Notes app on your phone to the incredible systems used to put robot helicopters on Mars, they power our world. And, most amazingly, they do everything with nothing more than a bunch of 1s and 0s.

This is the story of how that works.

Where It All Starts

a light switch in the off position

By the way, a formal name for that flipping back and forth is "toggle" (e.g. if we toggle the switch when it's in the OFF position it gets turned ON. Toggling it while it's ON turns it OFF). We'll be using that word a lot in this post.

a light switch in the off position with a light bulb above it that's not illuminated
a light switch in the off position with a closed sign above it
a light switch in the off position with a number zero above it

We'll be using this exact setup for the rest of this post. The 0s and 1s will become little bits of data that we combine with each other to do useful things. So, lets call each switch and its number a "bit".

And, believe it or not, that's all we need to make a computer.

Imaginary Computers

  • a Screen area which shows what we'd see in the real world

  • a Memory area that represents the inside of the computer that we wouldn't normally be able to see. We'll be using it to store bits

Computers don't have brains. The way they "remember" things is by toggling microscopic bits inside themselves that they can check later when they need to look up information. That's the reason we're calling the area "Memory". The rest of this post is dedicated to explaining how that works.

To get started, here's a computer with a button on the Screen that doesn't do anything and without any bits in the Memory. There's nothing useful about it other than showing us what our illustrations are going to look like.



A

B

Counting With Bits

  • If both bits are toggled to "0", the Total is "0"

  • If we toggle either "A" or "B" to "1" and leave the other bit at "0", the Total becomes "1"

  • If we toggle both "A" and "B" to "1", we get a Total of "2"

0
0
Total    

A

B

0
0
0
Total    

A

B

C

We can now get a Total value of "3" if we toggle all the bits to "1".

We could use this approach to run our comptuers, but there are two things about it that aren't great:

There turns out to be a better way.

  • The "A" bit gets multiplied by 1

  • The "B" bit gets multiplied by 2

  • The "C" bit gets multiplied by 4

Try toggling these bits one at a time and watching the Total. Then, do two at a time, then all three.





Total            

A

B

C

The first number beside each button is still the value of the bit itself and matches what's above the corresponding switch in the Memory (i.e. either 0 or 1).

The next number is the multiplier value (e.g. 1, 2, or 4).

The final number at the end of the line for each button is what gets used to calculate the Total. It's either "0" if the bit is toggled to "0", or it matches the value of the multipler (e.g. 1, 2, or 4) if the bit is toggled to "1".

Using the multipliers does two things:

(I encourage you to play around with the Screen toggle buttons to get a Total of 0, 1, 2, 3, 4, 5, 6, and 7 and to see there's only one way to produce each value)







Total            

E

D

C

B

A

We can also start to see the pattern for how the multipliers work. Every time we add a new bit we double the value of the multiplier from its predecesor.

So, we start with:

  • "A" with a multiplier of 1x

  • "B" with a multiplier of 2x

  • "C" with a multiplier of 4x

  • "D" with a multiplier of 8x

  • "E" with a multiplier of 16x

If we added three more bits, they'd be:

  • "F" with multiplier of 32x

  • "G" with multiplier of 64x

  • "H" with multiplier of 128x

Binary Numbers

Putting the bits into an order with the highest multiplier first has an interesting effect. We can now read all the bits together and treat them like their own number. And, those numbers always correspond exactly to specific Total values.

For example:

  • Total: 0 = Memory: 00000

  • Total: 1 = Memory: 00001

  • Total: 2 = Memory: 00010

  • Total: 3 = Memory: 00011

We can make this even clearer by remove all the zeros from the start of each memory number. Here's a full list of the thiry-two possible values we can produce with the five bits in our prior example.

Total Memory w/ 0s Memory w/o 0s
0 00000 0
1 00001 1
2 00010 10
TODO: TKTKTK TKTKTK

The Rules Of Computer Bits

We now have the complete set of rules for how computers work with bits:

They may not seem like much, but we'll see in the rest of this post how those four rules are the foundation of everything computers do.

Letter And Number Examples

A:
B:
C:
D:
E:

Total      


E

D

C

B

A

Something to notice here is that clicking "Subtract" when the Total is "0" or clicking "Add" when the Total is 31 doesn't do anything. That's because our Memory can only deal with 32 values. It's 0 when all the bits are toggled to "0", and it maxes out at 31 when all the bits are toggled to "1".

We'd need more bits in Memory to use more numbers. And, we'd have to come up with a way to deal with negative numbers. (We'll see an approach we can use for that later when we talk about letters.)

For example, we can make a Memory Map Dictionary of letters in the U.S. English alphabet that looks like this:

  • A = 1

  • B = 2

  • C = 3

  • etc...

  • X = 24

  • Y = 25

  • Z = 26

The computer can look up entries in the Memory Map Dictionary using either the letter or the number. So, it can look up the letter "B" to see that its number is "2". Or, it can go the other way and look up the number "25" to see that its corresponding letter is "Y".

With this Memory Map Dictionary the computer can store number values in bits and translate them into the letter to display on the Screen.

A:
B:
C:
D:
E:

Total      
Letter      


E

D

C

B

A

(Note: five bits gives us the ability to count from 0 to 31. Since there are only 26 letters in the U.S. alphabet, I set the entries in our Memory Map Dictionary for values 27-31 to say "no letter ###".)










Total              
Character          


H

G

F

E

D

C

B

A

(Hint: The UTF-8 standard includes lots of characters that don't show up under various circumstances. So, you'll see "[invisible]" a lot. The U.S. English "A" is located at "01000001" which you can get to by toggling bits "G" and "A" to 1 and then going from there)

A:
B:
C:
D:
E:
F:
G:
H:

Total        


H

G

F

E

D

C

B

A

It's important to point out that the difference here is completely on the Screen side of things. We're interacting with a text box instead of a bunch of buttons, but the bit values the computer uses in Memory are exactly the same as when we set them individually in the prior examples.

If you type a lowercase "a" in the box you'll see "01100001" in the Memory. If you go to the prior example and toggle bits "G", "F, and "A" to "1" you'll see the same thing in Memory and the lowercase "a" listed as the Character on the Screen.


(Note: UTF-8 values can be more than eight bits. If you only type U.S. English letters, numbers and spaces you'll only see eight bit entries and everything will line up. However, if you type a character like "≈" you'll see longer strings of bits. We could have set up the examples so everything used a higher number of bits to keep things lined up. In real-world programs you'd absolutely want to do that, but limiting to eight bits for these examples makes them easier to read.)

Introducing Bytes

Grouping bits into sets of eight is so common in the computer world that a group of that size has its own name: byte

Pronounced "bite", it's what's being referred to in words like "Megabyte", "Gigabyte", and "Terabyte".

Depending on how the term is being used, a Metabyte is either 1,000,000 or 1,048,576 bytes. You can read about the different definitions on the Megabyte Wikipedia page. But, at it's most basic, if we limit our letters to eight bits that means a computer with 1 megabyte (MB) of memory can work with up to 1,048,576 letters at the same time.

Color Examples



  • 0 = Black

  • 1 = Darker Green

  • 2 = Middle Green

  • 3 = Bright Green





Total            

B

A

A:
B:
-
Total      



0 3

B

A

A:
B:
C:
D:
E:
F:
G:
H:

Total        



0 255

H

G

F

E

D

C

B

A
  • Standard screens are made from of thousands of little dots called Pixels

  • Each Pixel is built with three tiny lights in them. The first one is Red, the second is Green, and the third is Blue

  • Each of the Red, Green, and Blue lights can be turned up and down on a dimmer individually. The effect is the same thing we did with the Green slider in the previous example. When the dimmer is all the way down no color comes out of the light (i.e. it's Black).

    As the dimmer moves up, the color starts getting brighter until it's all the way up. At that point, it's pure Red, Green, or Blue

Here's an example sliders for each of the individual colors

Red Bits:

Total Bits:




H

G

F

E

D

C

B

A
Green Bits:

Total Bits:




H

G

F

E

D

C

B

A
Blue Bits:

Total Bits:




H

G

F

E

D

C

B

A

Footnotes

  • (id:negative)
    Negative Numbers

    TODO: Write up how negative numbers work