It’s called circ. It’s a small language for describing digital circuits, and a compiler that turns the description into something your browser can run. First of all I want you to understand this isn’t a serious systems language (yet), and I believe it’s great for this blog but not ready for production. For now it exists for the sole purpose of having the circuits here actually work, instead of being static drawings or handcrafted simulators.

How it reads

I think the best way to introduce a language is to let you look at it. Here’s a half-adder written in .circ:

input a, b

xor s(a=a, b=b)
and c(a=a, b=b)

output sum(in=s.out)
output carry(in=c.out)

That’s the whole file. You declare your inputs, you instantiate gates and give them names, you wire each gate’s ports to the signals that drive them, and you declare which signals leave through the outputs. Doesn’t it read a little like a recipe? Take two inputs. Combine a and b with an XOR, call it s. Combine the same two with an AND, call it c. Send s.out to the sum output, c.out to the carry. That’s it.

The primitives are deliberately tiny: input, output, and, not, wire, led. Six things. Everything else is built from those.

And here’s a detail I’m a little smug about: the built-in gates or, nand, nor, xor, xnor are themselves written in .circ. The compiler’s entire “standard library” is five tiny files that look exactly like the one above. When you write xor s(a=a, b=b), the compiler quietly pulls in a five-line file that defines XOR in terms of AND, OR, and NAND. The language is small enough to be its own standard library, and that makes me unreasonably happy.

Where it came from

circ didn’t start as a language. It started as me wanting to draw circuits.

I’d been writing this series for a while, and every circuit in every post was a static SVG I’d hand-drawn or coaxed out of a TypeScript renderer I kept patching. The drawings worked, but they were just drawings. You couldn’t toggle a switch and watch the LED change. You couldn’t ask “what does this circuit do, exactly?” and get an answer. They were illustrations of computers, not computers.

Around the same time I bought The Elements of Computing Systems, and this book hexed me (pun intended) with the curse of curiosity, which led me right into Nand to Tetris. In it, you build everything from a single NAND gate, in a tiny language called HDL, and every component you write actually runs. The combination of “describe a circuit in a few lines” and “now press play and watch it work” is how circuits should feel when you’re learning about them. So I wanted that, for this blog, for you. The widgets in the posts you’ve already read are the result.

The name is the most boring part of the story: circ is short for circuit (I am not a poet, sorry.)

The two things I love most

Once the compiler started working, two things fell out of it that I didn’t expect to love as much as I do.

The first is that circ can draw itself. Hand it a circuit and it’ll produce an ASCII schematic, complete with rounded corners, fan-out dots, and wires that detour politely around gates that sit in their way. Here’s the half-adder from earlier, rendered by the compiler itself:

╭───╮     ╭───╮         ╭───────╮
│ a ├○─●─▶┤   │ ╭──────▶┤ carry │
╰───╯  │  │AND├○╯       ╰───────╯
      ╭┼─▶┤   │
      ││  ╰───╯
      ││
╭───╮ ││  ╭───────╮     ╭─────╮
│ b ├○●╰─▶┤       │ ╭──▶┤ sum │
╰───╯ │   │[xor:s]├○╯   ╰─────╯
      ╰──▶┤       │
          ╰───────╯

The second is that circ can tabulate itself. Hand it the same file and ask for --truth-table, and you get:

That’s the beauty of it: using only 5 lines you have a circuit description, a picture of itself, and proof that it does what it claims. Every interactive widget in every post of this series has been circ doing this quietly in the background, three times over. Once to render the schematic you see, once to run the simulation when you toggle a switch, once to prove the gates behave the way I said they would.

Until we meet again

That’s just the surface of it. There’s a parser, a resolver, a validator with stable error codes, a tiny WebAssembly runtime that the compiler embeds inside every artifact so the whole thing runs in your browser without needing any toolchain on your machine. But those are stories for other days.

If you want to dig deeper, the language has a home of its own at circ-lang.org, with the full reference and more examples than I could fit here.

For now, the next time you click on a widget in one of these posts, you’ll know what you’re looking at. It’s circ. Pleasure to meet you.

Special thanks

Before we say goodbye, I want to give a special shoutout to @clarete. He is the brain behind langlang, the parser generator that powers this language. He has been hammering my ears about langlang for years and I couldn’t be more proud of what he has done.

References

• circ-compiler on GitHub
• circ-lang.org, the language reference and examples
• Zig
• langlang, the PEG parser generator that builds the .circ grammar
• From Nand to Tetris

Hey Y’all! This is a translation of my blog post originally written in Portuguese.

Have you ever wondered how computers transform letters, numbers, and emojis into zeros and ones that they can understand? Just like us humans assign meanings to letters of the alphabet, the computer does the same. Let’s explore here two of the most popular text encoding standards.

ASCII

Developed in the 1960s, ASCII (American Standard Code for Information Interchange) has a very simple premise: using only 7 bits, you can represent 127 numbers, reserving the first 32 numbers in the sequence for important writing commands. The rest is filled with letters, numbers, and some punctuation marks.

The people involved in developing the standard did it in such a way that the alphabet sequence could help with decoding.

For example, the character for the number “0” is 48, which, represented in 7 bits, becomes 011 0000. Just like:

1 → 011 0001

2 → 011 0010

3 → 011 0011

If you notice, the last 4 bits are in sequence. So, to find out what the integer is in ASCII, you just subtract 011 0000 (decimal: 48).

In the same way, the letters of the alphabet: “A” is 65 → 100 0001 and “a” is 97 → 110 0001. With this, it was possible to encode all the letters of the English alphabet 🇬🇧.

Interactive Observable notebook widget — view it on the blog.

… meanwhile in the rest of the world …

As you might imagine, with the advancement of technology and computer capacity, each country used this extra capacity to encode their own characters. Japan, for example, didn’t even use ASCII. Other encoders, like Shift JIS, used multiple bytes, and with all this, a gigantic incompatibility was generated.

Fun fact: In Japan, there’s the word mojibake (文字化け), which means “distorted character”. This happened due to encoding problems between all Japanese alphabets and also the Latin one.

However, even with all this incompatibility during the 1980s and 1990s, what were the chances of a London company having to constantly send documents to Japan? At that time, the solution was simple: print and send by fax!

Then the internet came, and what was bad got even worse… Now we have to deal with documents being constantly sent over the internet, and over time the following was formed:

Unicode Consortium

And as in an event that could be called a miracle of common sense, over the last few decades, a standard was formed with 154,998 characters, covering every language you can imagine: Arabic, Japanese, Cyrillic, Chinese, Korean, and even Egyptian hieroglyphs.

What they did in a simplified way was take hundreds of thousands of numbers and assign them to hundreds of thousands of characters, that is, the number 35307 will represent the Japanese character 觫, the number 963 will represent σ, and so on.

UTF-8

Perfect, now we have hundreds of thousands of numbers to represent every possible character, but how are we going to do this with binary?

To represent a number in these proportions, we’ll need at least 32 bits to represent any number of that magnitude, which now brought problems for the English alphabet, because Unicode is compatible with ASCII, meaning “A” is still 65 and “a” is still 97. But when we look at the 32-bit binary of these numbers, we now use 4x more space to represent the same characters.

Counting above, there are 25 consecutive zeros that will be present in every text that uses Latin characters, and that’s just the first of our problems. The second is that some old systems interpret a sequence of 8 zeros [NULL] as the end of a character, the famous \0 in C.

So UTF-8 comes in. The first thing is: if the letter has a number below 127, then you represent it exactly the same as ASCII.

So the first problem is solved: “A” is still 65 and fits in 8 bits. 01000001.

And for numbers greater than 127? For that, you’ll break your binary into 2 bytes.

In byte 1, you have the header 110, which means this character was broken into 2 bytes. In byte 2, you start with the continuation header 10. All other remaining bits you’ll fill with the number you want to represent.

To calculate, just remove the headers, join all the bits, and the resulting number is the Unicode character. You can do this up to 4096. Beyond that? No problem! Using the header 1110 + 2 bytes, you have 16 bits.

Want to go further? That’s fine! The standard supports up to the header 1111110x + 6 continuation bytes.

Encoding UTF-8

Interactive Observable notebook widget — view it on the blog.

It’s amazing how this standard manages to deliver:

• It’s compatible with previous systems;

• It doesn’t waste space;

• And at no point in life will there be 8 consecutive zeros in any part of any byte.

Additionally, another reason that made it become the world standard today is that, to move between characters, if you don’t know where you are, you just look for the next header, you don’t need an index.

It’s been several years since UTF-8 became the standard in all internet communication, and the fact that today the average Japanese person doesn’t need to worry about mojibake anymore is because of this brilliant method of encoding text.

References

• Characters, Symbols and the Unicode Miracle - Computerphile (YouTube)
• UTF-8, a transformation format of ISO 10646 - ietf.org
• The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) - Joel Spolsky

Hey Y’all! This is a translation of my blog post originally written in Portuguese.

On Saturday, July 26, 2025, I presented a lecture on font rendering at Google I/O Extended Natal. Due to the rush of daily life, I couldn’t show many interactive practical examples. This article serves exactly that purpose: let’s explore a bit about how the text you’re reading is formed on your screen.

To start, we’ll talk about Bitmaps. This is the most naive way to draw fonts, as a bitmap is nothing more than a ready-made image. Below, for example, we have a letter that occupies a space of 6 pixels in height by 6 pixels in width.

At the moment, you can easily visualize it because the pixel size is set to 10 pixels. However, if you change the size to 1 pixel, you’ll see that it’s not possible to read what’s on the screen.

Interactive p5 widget — view it on the blog.

As shown, the biggest problem with bitmap fonts is that they are not scalable. That is, to change the font size, we would have to:

• Create a new font with each letter drawn in the new size.

• Rasterize the font at another scale.

Let’s see what happens in the second option.

This is a simple scaling function. It receives as parameters the data of the letter you want to draw and the scale at which you want to increase it.

It works simply by duplicating existing pixels on both the X and Y axes.

function scaleGlyph (glyph, scale) {
  const newWidth = Math.ceil(glyph.width * scale);
  const newHeight = Math.ceil(glyph.height * scale);
  const newPixels = Array.from({ length: newHeight }, () =>
    Array(newWidth).fill(0)
  );

  for (let y = 0; y < glyph.height; y++) {
    for (let x = 0; x < glyph.width; x++) {
      const value = glyph.pixels[y][x];
      const newX = Math.floor(x * scale);
      const newY = Math.floor(y * scale);
      for (let dy = 0; dy < scale; dy++) {
        for (let dx = 0; dx < scale; dx++) {
          if (newY + dy < newHeight && newX + dx < newWidth) {
            newPixels[newY + dy][newX + dx] = value;
          }
        }
      }
    }
  }
  return {
    width: newWidth,
    height: newHeight,
    pixels: newPixels,
  };
};

The problem with this type of scaling is that fonts end up getting a blocky appearance, which brings the feeling of a low-resolution image.

Another way is by applying scaling using linear interpolation. This technique consists of taking an average of all the original points around, instead of simply copying the entire block, blindly repeating what’s in the pixel. However, this now results in a blurred image appearance, and this characteristic becomes more pronounced the greater the difference between the original size and the final size.

function lerp(x0, v0, x1, v1, x) {
  if (x0 === x1) {
    return v0;
  }
  return v0 + (v1 - v0) * ((x - x0) / (x1 - x0));
}

function bilinearInterpolate(Q11, Q21, Q12, Q22, x, y) {
  if (
    Q11.x !== Q12.x ||
    Q21.x !== Q22.x ||
    Q11.y !== Q21.y ||
    Q12.y !== Q22.y
  ) {
    console.error(
      "Error: The provided points do not form a proper rectangle for bilinear interpolation."
    );
  }

  const x1 = Q11.x;
  const x2 = Q21.x;
  const y1 = Q11.y;
  const y2 = Q12.y;

  const R1 = lerp(x1, Q11.value, x2, Q21.value, x);
  const R2 = lerp(x1, Q12.value, x2, Q22.value, x);
  const P = lerp(y1, R1, y2, R2, y);

  return P;
}

With this we have the examples below:

Interactive p5 widget — view it on the blog.

How to use one font for multiple sizes?

In mathematics, there are equations that draw a graph on the screen. The most common examples are:

Quadratic function

Interactive Observable notebook widget — view it on the blog.

Multiplicative inverse function

Interactive Observable notebook widget — view it on the blog.

Manipulating the curve

To move our equations, we can add any value after the result of the exponentiation, and thus we move our equation on the Y axis.

Interactive Observable notebook widget — view it on the blog.

To move our equation horizontally, we add that value before squaring it.

Interactive Observable notebook widget — view it on the blog.

So, we already have a way to represent our curves using mathematical equations.

But before we draw, let’s learn about one more thing.

Bézier curves

It’s a polynomial curve expressed as the linear interpolation between some representative points, called control points.

In the example below, we have 3 points: P0, P1 and P2, where P0 and P2 are the representative points and P1 is the control point, you can move the examples below and see the result.

Interactive p5 widget — view it on the blog.

Drawing a letter with vectors

Interactive p5 widget — view it on the blog.

With the Bézier concept, it becomes quite intuitive how we can draw a letter using mathematics: just organize points in sequence and mix straight lines with Bézier curves, making the P2 of one end exactly where the P0 of the other begins.

By the way, a straight line can also be made with Bézier; just align all the points. This way, it becomes even clearer how interpolation acts on the Bézier curve.

Interactive p5 widget — view it on the blog.

With this, we can now think about how to transform this into a bitmap. To do this, we first need to rasterize this font, starting by translating the Bézier curves into lines compatible with the screen resolution. This happens because the computer screen is a matrix of pixels; therefore, we need to transform curves into pixels readable to the human eye.

Interactive p5 widget — view it on the blog.

Once this is done, the last thing needed is to fill the letter. This part can be done by a process called scanline, which consists of launching a ray and counting how many times that ray will touch one of the walls of the letter. If the number of touches is even, the pixel is represented outside the letter; if it’s odd, it’s inside.

Notice that in the example of the letter ‘O’, there’s a rendering flaw. It’s there on purpose: the process of rendering fonts is complicated and full of edge cases that only increase the more we delve into the subject.

What I want to demonstrate with this flaw is that, besides counting how many times your line cuts the letter, you should also be aware if the line is cutting itself again.

Interactive p5 widget — view it on the blog.

Well, and with this, we conclude this stage of the font rendering process. In a few days, I’ll publish two more articles on the topic to complement the lecture subject. They will be about Unicode and Text Shaping.

Thank you very much, and see you next time! 😊

References

• A Brief look at Text Rendering - VoxelRifts (YouTube)
• Coding Adventure: Rendering Text -Sebastian Lague (YouTube)
• The Math Behind Font Rasterization | How it Works - GamesWithGame (YouTube)
• Text Rendering Hates You - Aria Desires
• Multi-channel signed distance field generator - Viktor Chlumský[Valve] (GitHub)
• Harfbuzz[Google] - (GitHub)

Hey Y’all! This is a translation of my blog post originally written in Portuguese.

Hello everyone, this is the third article in the series about computers, and also the last one with this header here, because from here on it’s recommended that you have already read the two previous articles:

• Logic gates.
• Pleasure to meet you, Binary..

In the previous articles, we saw how logic gates can be used to make comparisons and also calculate arithmetic operations, but we haven’t yet seen how the computer can store information over time.

Another thing we’ll do here is categorize each type of chip: the ones shown previously are combinational, which means they don’t need anything beyond signals at their inputs to be able to compute a result, but there are also sequential ones. The difference between them is that sequential depends not only on the input signals, but also on the previously processed value.

A very practical way to use logic gates to store information is using a chip called flip-flop, which is represented below. It contains 2 inputs: the top one set and the bottom one reset (you can click on the circuit below to interact with them).

Interactive circ widget — view it on the blog.

╭───────╮     ╭───╮           ╭───╮     ╭───╮
│ reset ├○───▶┤NOT├○╮     ╭──▶┤   │ ╭──▶┤LED│
╰───────╯     ╰───╯ │     │   │AND├○●   ╰───╯
                    ╰─────┼──▶┤   │ │        
                          │   ╰───╯ │        
            ╭─────────────┼─────────╯        
╭─────╮     │ ╭─────────╮ │                  
│ set ├○╮   ╰▶┤         │ │                  
╰─────╯ │     │[or:_or_]├○╯                  
        ╰────▶┤         │                    
              ╰─────────╯                    

If you stop to analyze, it’s quite simple: following the set trail, you’ll see there are two logic gates in the path, an OR and an AND. One of the OR gate inputs is connected to the result of the AND at the end of the chip. This combination makes it so that when we have 0 and are given a value 1, the OR gate will result in 1, and the AND will also.

However, when we remove the signal from set, the value that was previously placed is persisted because now the OR is maintaining the state that keeps the AND also in the previous state. Problem solved, right? No! Notice that our circuit is now locked, as there’s no way to get out of this state unless the AND gets another value, and that’s what the reset gate is for: it’s connected to a NOT, meaning while it’s off (0), its result will be 1 (on), and vice versa.

An evolution we can make to the flip-flop is to transform it into a Register. In the register, we can choose whether it’s time or not to read our signal and store it, and subsequently rewrite it, all at our leisure. There are many ways to achieve this chip, so I’ll use the implementation demonstrated by Sebastian Lague.

In it, we just need to add 3 more logic gates and that’s it!

Interactive circ widget — view it on the blog.

╭──────╮        ╭───╮     ╭───╮     ╭───╮     ╭───╮     ╭───╮     ╭───╮     ╭───╮     ╭───╮
│ data ├○──●───▶┤   │  ╭─▶┤NOT├○┬──▶┤NOT├○───▶┤   │ ╭──▶┤NOT├○╮ ╭▶┤   │ ╭──▶┤NOT├○●──▶┤LED│
╰──────╯   │    │AND├○─╯  ╰───╯ │   ╰───╯     │AND├○╯   ╰───╯ │ │ │AND├○╯   ╰───╯ │   ╰───╯
           │╭──▶┤   │           │           ╭▶┤   │           ╰─┼▶┤   │           │        
           ││   ╰───╯           │           │ ╰───╯             │ ╰───╯           │        
           ││                   ├───────────┼───────────────────╯                 │        
╭─────────╮││   ╭───╮     ╭───╮ │           │                                     │        
│ enabled ├○┼──▶┤NOT├○───▶┤   │ │           ╰─────────────────────────────────────╯        
╰─────────╯ │   ╰───╯     │AND├○╯                                                          
            ╰────────────▶┤   │                                                            
                          ╰───╯                                                            

If we break it down a bit, what happens is the following: the upper input, which we’ll now call data, will only be saved in the flip-flop when the lower input, which also changed names, now called enabled. So instead of using two inputs, one to save and another to erase, this combination of ANDs and NOT chooses which operation will be performed.

• If data = 1 and enabled = 1, then it’s the same as turning on the set input of the flip-flop.
• If data = 0 and enabled = 1, then it’s the same as turning on the reset input of the flip-flop. Notice that enabled always needs to be activated so that it can save the signal that was placed in data.

Another thing we can do is take inspiration from the previous article, where at the end we learned that if we combine several Adders, we can do calculations with multiple digits. In memory it’s the same way: combining several registers, you can provide an input for each data and share the enabled signal, and thus you can save the values of an entire binary number.

For now, we say goodbye here, see you next time 😄

References

• How Do Computers Remember? (YouTube)
• SR latch (YouTube)
• D latch
• HOW TRANSISTORS RUN CODE? (YouTube)
• From Nand to Tetris

Hey Y’all! This is a translation of my blog post originally written in Portuguese.

Hello people of this internet, for those who are arriving here now, this is the second article of a series I’m doing to talk about the fundamentals of computing, I recommend reading the first one about logic gates. And for those who have already read the first article, take a quick look there because I did a revision of the article, I highly recommend taking a look 😊

Let’s dive a bit deeper and explore some concepts of mathematics and also human history.

Mathematics came from the human race’s need to count and measure – how many animals Maria takes care of, how many days until the next solstice… Over time and human expansion, ancient peoples created various numbering systems for their daily lives. Games like Grand Theft Auto V, Call of Duty: Black Ops III, Dragon Quest XI are examples of using the numeral system that the Romans used, and the I Ching, an ancient Chinese text, has roots in binary representations.

However, not only ancient civilizations used other numerical systems. The hours of a day are divided between 12 hours of the morning period and 12 hours of the afternoon period, or a dozen eggs. In the French language, there are still remnants of a vigesimal-based system (20), for example, the number 80 is said as quatre-vingts (four twenties), and one of the most recent is Braille, which also has roots in binary representations.

Nowadays, we use decimal representation, and the reason is quite simple: the average number of fingers on human hands is an incredible 10 fingers, so it’s easier to count using only hands.

☝️ + ☝️ = ✌️

This base 10 representation is positional, meaning the position in which the digits are “drawn” changes the quantity being represented. 70 represents ten times more than 07, hence the popular saying “zero to the left”. In school, we learn about decimal places – units, tens, hundreds… They serve to represent what the position of that digit is.

And on top of this order, there’s a mathematical formula that converts a number from any base to decimal. To make it easier:

• Digit: Symbol that represents a unique quantity. Ex.: 1, 2, 3, 4, 5, 6, 7, 8, 9, 0
• Number: Digits organized in order of position. Ex.: 10, 144, 999, 42, 37, 0x8A6C, 0b101010
• Base: Maximum quantity of digits that can be represented. Ex.: binary (0b) 2, decimal 10, hexadecimal (0x)
• Index: The magnitude of the digit in the position. _Ex.: 10, the 1 in 10 has Index 1 and the 0 has Index 0 (it’s a bit counterintuitive, but it makes sense). In other words, the index is the position from right to left, starting at 0.

The formula is quite simple: (d)igit × (b)ase^(i)ndex. In the example we’re doing, this is the formula to convert 70 to decimal… to 70 in decimal. 7 × 10¹ + 0 × 10⁰ = 70

Interactive binary counter widget (base 10, 3 digits) — view it on the blog.

When we talk about numbers this way, it becomes easier to represent binary, which is nothing more than the quantity that can be represented by the formula d × 2ⁱ.

Interactive binary counter widget (base 2, 6 digits) — view it on the blog.

And this way of representing quantities can also be manipulated with mathematical operations. The addition 25 + 17 is solved in a way similar to this.

1
2 5
1 7
--- +
4 2

In the example above, we have some elements that need to be highlighted:

1. A digit can only be added to another digit that is in the same index.
2. When the sum cannot be represented with just one digit, the smallest index is kept as the result, and the remainder is sent to the next index.
3. The result of a sum will always be the sum of the digits of the index + the remainder that came from the digit in the previous index.

With these same steps, we can apply addition in any base.

    1 1 1       |  1      |  
1 0 0 0 1 1     |  2 5    |  1 9
0 0 0 1 1 1     |  1 7    |  1 1
------------ +  |  --- +  |  --- +
1 0 1 0 1 0     |  4 2    |  2 A 

Interactive binary counter widget (base 2, 6 digits) — view it on the blog.

Now that we already know each other, how can we make the computer know us too?

Playing with translation

Remembering the previous article, let’s isolate the addition of two digits in tables. First, let’s look at just the result. We have this table that very much resembles the OR gate table, except for this small change at the end.

For this, we can combine the results of the gates we saw earlier into a single circuit called “Exclusive OR” or “XOR”.

Interactive circ widget — view it on the blog.

╭───╮     ╭─────────────╮     ╭───╮     ╭───╮
│ a ├○●●─▶┤             │╭───▶┤   │ ╭──▶┤LED│
╰───╯ ││  │[nand:_nand_]├○╮   │AND├○╯   ╰───╯
      │●─▶┤             ││╰──▶┤   │          
      ││  ╰─────────────╯│    ╰───╯          
      ││                 │                   
╭───╮ ││  ╭─────────╮    │                   
│ b ├○●╰─▶┤         │    │                   
╰───╯ │   │[or:_or_]├○───╯                   
      ╰──▶┤         │                        
          ╰─────────╯                        

Now, let’s also look at the remainder table of our addition and you’ll notice that it’s an exact copy of the AND gate.

And just like Captain Planet, “By the union of their powers”, we will be able to perform the operation of adding two digits in binary, and this component is called “Adder”.

Interactive circ widget — view it on the blog.

╭───╮        ╭───╮               ╭───╮               ╭─────────╮     ╭───╮
│ a ├○●●────▶┤   │           ╭──▶┤   │ ╭────────────▶┤         │ ╭──▶┤LED│
╰───╯ ││     │AND├○╮         │   │AND├○╯             │[or:_or_]├○╯   ╰───╯
      │●────▶┤   │ │         │ ╭▶┤   │             ╭▶┤         │          
      ││     ╰───╯ │         │ │ ╰───╯             │ ╰─────────╯          
      ││           ╰─────────┼─┼───────────────────╯                      
╭───╮ ││     ╭─────────────╮ │ │ ╭─────────────╮                     ╭───╮
│ b ├○●╰────▶┤             │ ●─┼▶┤             │ ╭──────────────────▶┤LED│
╰───╯ │      │[xor:_xor_1_]├○● │ │[xor:_xor_2_]├○╯                   ╰───╯
      ╰─────▶┤             │   ●▶┤             │                          
             ╰─────────────╯   │ ╰─────────────╯                          
                               │                                          
╭──────╮                       │                                          
│ c_in ├○──────────────────────●                                          
╰──────╯                                                                  

With this combination of logic gates, a computer can already perform the incredible additions of: 0 + 0, 1 + 0, 0 + 1, 1 + 1, but beyond that, it can also say how much remainder there was from the addition. And when several ADDERs are combined, we can perform addition of more complex numbers like 42, but that we’ll see in the next article.

That’s all for today, folks.

References

• A brief history of numerical systems (Youtube)
• Numeral system (Wikipédia)
• Sistema de numeração (Wikipédia)
• Exploring How Computers Work (YouTube)
• Making logic gates from transistors (YouTube)
• HOW TRANSISTORS RUN CODE? (YouTube)
• From Nand to Tetris

Hey Y’all! This is a translation of my blog post originally written in Portuguese.

Revised [11/12/2024]

Hi folks, so I had to make some changes here in the post to add some interactive widgets, and I took the opportunity to give a bit more context to the content.

Hello, this is the first article in a series about the fundamentals of computing. The idea is to demonstrate in a simple and practical way how this device transforms zeros and ones into practically anything, the functioning of CPUs and other interesting subjects. So, to start, the first concept we have to learn is that of logic gates: they are the foundation of all computing, with them we can do certain operations that receive as input one or more values and will have another value as a result.

But what are these values? The number 42? My mother’s name? These “values” are energy, more specifically the presence and absence of it. As mentioned in the introduction, computers work using binary digits, meaning these machines only understand 0 and 1 or “Has energy” and “No energy”. However, we won’t call these zeros and ones energy, for the computer they are signals.

When signals are combined and/or compared, we call it a logical operation, for example.

“[Harp sounds of story beginning]”

One day you hire an electrical company to install two switches in a hallway of your house, but due to a design error, the installation ends up like this: the wire passes through the first switch (let’s call it switch A), goes straight to the second switch (B for intimates) and then exits to the lamp.

Did you notice that the lamp only lights up if both switches are on at the same time? If either one is turned off, the light goes out immediately! Well, this residential electrical atrocity can be explained, in mathematics, from one of its branches called boolean algebra, and in it we can demonstrate this with a table:

Writing this another way looks like this:

If you noticed well, now we have a way to represent what we want to happen with two switches and a lamp, and this example shown above is the first logic gate we’re getting to know, the AND or Conjunction, and this table, demonstrated above in different forms, is called a Truth Table.

Ok, but what about my house light? How is it going to be? I need the light to turn on when A OR B is on. How do you do that?

The answer is in the question itself! 😉 We’ll need another logic gate, the OR or Disjunction, and to understand how it works, let’s use a truth table that fits these conditions:

But before talking about OR, let’s take a look at the NOT gate (or Negation). It’s quite simple, but it will be important later on.

Interactive circ widget — view it on the blog.

╭───╮     ╭───╮     ╭───╮
│ a ├○───▶┤NOT├○───▶┤LED│
╰───╯     ╰───╯     ╰───╯

And if we write it in a truth table we’ll have this here:

So, let’s take a break and review what we already know. First, the operations and how to represent them in a table. To simplify, let’s transform these operations into symbols. Every time we refer to AND, this will be the symbol:

Interactive circ widget — view it on the blog.

╭───╮     ╭───╮     ╭───╮
│ a ├○───▶┤   │ ╭──▶┤LED│
╰───╯     │AND├○╯   ╰───╯
       ╭─▶┤   │          
       │  ╰───╯          
       │                 
╭───╮  │                 
│ b ├○─╯                 
╰───╯                    

and the NOT:

Interactive circ widget — view it on the blog.

╭───╮     ╭───╮     ╭───╮
│ a ├○───▶┤NOT├○───▶┤LED│
╰───╯     ╰───╯     ╰───╯

With these two logical operations (AND and NOT), we can already combine their results and create a third logic gate: the NAND (or Not AND).

It can be represented like this:

Interactive circ widget — view it on the blog.

╭───╮     ╭─────────────╮     ╭───╮
│ a ├○───▶┤             │ ╭──▶┤LED│
╰───╯     │[nand:_nand_]├○╯   ╰───╯
       ╭─▶┤             │          
       │  ╰─────────────╯          
       │                           
╭───╮  │                           
│ b ├○─╯                           
╰───╯                              

Interactive circ widget — view it on the blog.

╭───╮     ╭───╮     ╭───╮     ╭───╮
│ a ├○───▶┤   │ ╭──▶┤NOT├○───▶┤LED│
╰───╯     │AND├○╯   ╰───╯     ╰───╯
       ╭─▶┤   │                    
       │  ╰───╯                    
       │                           
╭───╮  │                           
│ b ├○─╯                           
╰───╯                              

Its truth table is identical to AND’s, but with the results inverted.

Following this same logic of combining gates, we can use a NAND gate and invert each switch input with a NOT. Thus, we’ll have the following:

Interactive circ widget — view it on the blog.

╭───╮     ╭───╮     ╭─────────────╮     ╭───╮
│ a ├○───▶┤NOT├○───▶┤             │ ╭──▶┤LED│
╰───╯     ╰───╯     │[nand:_nand_]├○╯   ╰───╯
                 ╭─▶┤             │          
                 │  ╰─────────────╯          
                 │                           
╭───╮     ╭───╮  │                           
│ b ├○───▶┤NOT├○─╯                           
╰───╯     ╰───╯                              

Analyzing the diagram above, we see that when both switches are off, both signals will be inverted by the NOT, and the NAND will result in ¬∧(1, 1) = 0. So with both off, the lamp turns off. But what happens when we have ¬∧(1, 0) or ¬∧(0, 1)? To find out, let’s analyze the truth table:

But wait a minute, I have the impression that I’ve seen this table before? Yes! This is the OR logic gate we were looking for. Quite a journey, isn’t it? Now that we know how to fix the lamp wiring, we can take a break here. This is just the first article in a series about computers. Later on, we’ll address other logic gates and other computing concepts.

References

• Boolean algebra (Wikipedia)
• Boolean Algebra (Wikipedia)
• Truth table (Wikipedia)
• Exploring How Computers Work (YouTube)
• Making logic gates from transistors (YouTube)
• HOW TRANSISTORS RUN CODE? (YouTube)