How Computers Work: The 1s And 0s

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 {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} and {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} .

This is the story of how that works.

Before we talk about the 1s and 0s, let's look at a light switch. It has two positions: {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} and {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} . Clicking or tapping the switch flips it back and forth between the two positions.

Try it and see.

A switch that isn't connected to anything isn't a lot of use. Let's connect ours to a light. Now clicking the switch toggles the light on and off too.

Of course, our switch doesn't have to control a light. It could control a fan, a garbage disposal, or an air conditioner. Anything that needs to be turned off and on.

Instead of turning something off and on, we could also use the switch to toggle back and forth between two things. For example, we could have the switch control an "Open/Closed" sign for a shop.

Toggling this switch ON shows the "Open" sign. Toggling it OFF changes the sign to "Closed".

Instead of a sign that says "Open" or "Closed", let's attach a sign with a number on it. When the switch is OFF, the number will be "0". When the switch is On, the number will be "1".

We'll be making a bunch of imaginary computers as illustrations. Each one will have two parts:

Now, let's make a computer that does something. This one has a single {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in its Memory. Since this is an Imaginary Computer, we could click the switch to toggle the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} directly in the Memory even though it's "inside" the computer. But, let's set it up more like a real world computer and add a "Toggle Bit" button on the Screen that we'll use to do the toggling.

Give it a shot to test it out.

We can see our {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in the Memory of our Imaginary Computer, but, since it's "inside" the computer, we wouldn't be able to see it in the real world. So, let's show the current number for the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} beside the button on the Screen as well.

Now, when we click the "Toggle Bit" button we see the displayed value on the Screen change as well as the actual {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory:

We can store more than one {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in our computer's Memory.

Let's add another one connected to another button and label the bit/button pairs "A" and "B" so we can keep track of what's connected to what.

Clicking one of the buttons toggles the corresponding {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} without affecting its neighbor.

Apps can combine the values from multiple {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory together to do useful things on the Screen. For example, we can make a "Total" display on the Screen that shows the values of the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory added together.

Click the buttons and you'll see that:

If we wanted to count to three, we could add another bit/button pair like this:

The technique to eliminate both issues is to multiply the value of each {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} by a specific amount before counting it.

Specifically:

Let's add two more bit/button pairs.

We'll make a "D" {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} with a multiplier of "8" and an "E" {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} with a mulitplier of "16".

While we're at it, I'm going to reverse the order of the switches in Memory from: "A, B, C, D, E", to: "E, D, C, B, A". That doesn't have any affect on the way things work. It's just to make things easier to read in later examples by putting the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} with the switch with the highest multiplier first.

Play around and you'll see that with five {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} we can now count from 0 (with all the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} toggled to 0) to 31 (when all the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} are toggled to "1"). And, we can get any number in between by toggling some {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} to "1" and others to "0.

Putting the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} 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:

So far, each button on the Screen has been paired directly with a single {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory. Apps can also use buttons that control multiple {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} at the same time.

For example, here's a counter with five {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory but only two buttons. One that adds to the Screen's Total and one that subtracts from it.

Everything we've done to this point has displayed numbers on the Screen based directly on the value of the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory (i.e. we've either displayed them direclty or added them together with their multipliers to get a Total value).

Since the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in a computer's Memory can only be 1s or 0s we'll have to come up with a new technique to handle letters. We'll do this by creating a "Memory Map Dictionary" which works like this:

Of course, there are more than just U.S. English alphabet letters involved in writing. Punctuation, accent marks, and languagues like Chinese, Japanese, and Korean that use entirely different characters, for example.

For a real-world computer app we'd want to be able to handle them all. Thankfully, a bunch of folks already got together and created a Memory Map Dictionary that includes everything for us. It's called "Unicode Transformation Format (8-bit)" (or, UTF-8 for short). Here's a basic example that uses it.

So far we've been using buttons to update the values of the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory, but you wouldn't want to have to click a bunch of buttons every time you want to type something. Instead, you'd want to use a text box like this one where you can type a letter.

Let's take the step from letters to words. We'll still use {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} in Memory, but things are going to look a little different. Our UTF-8 example above used eight {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} for the letter. We'll continue with that, but set up our Memory so it can hold multiple letters. To make things easier to read, I'm removing the switches and grouping each collection of eight {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} together.

Type a single letter and you'll see the first eight {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} that represent that letter. Type another letter and you'll see the next eight, etc... I recommend starting with a uppercase "A" and an lowercase "z" for the first two letters to make it easy to see the differences in the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} for each letter in Memory.

Grouping {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} into sets of eight is so common in the computer world that a group of that size has its own name: {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %}

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 {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} . 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 {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} that means a computer with 1 megabyte (MB) of memory can work with up to 1,048,576 letters at the same time.

We've used {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} to calculate numbers and to make letters. Now, let's use them to make colors.

We'll start with two colors (Black and Bright Green) and we'll use a single {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} to toggle between them. We'll make the color Black when the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} is "0" and Bright Green when the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} is "1".

To add more colors, we'll add more {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} and create a new Memory Map Dictionary that assigns colors to each number:

Let's replace the two toggle buttons with a slider which makes for a nicer interface for changing between our four colors.

Now, let's use eight {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} (aka one {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} ) for the color. That'll give us Black when all the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} are "0", and 255 varying shades of Green (some of which are so close to black that it's hard to tell they have any color at all, but they do). With that many shades we can make a very smooth color slider.

Our next step is to be able to pick any color we want (not just a shade of green). Before we do that, we need to cover a little bit about how Screens work in the real world. We'd need an entire post to really get into the details but for now we can work with this: