DEV Community: Jefferson Oliveira

Introducing circ, a small language for digital circuits

Jefferson Oliveira — Wed, 13 May 2026 12:01:10 +0000

Hey Y'all,

I've been writing a blog series on the fundamentals of computing, logic gates, binary, memory, that sort of thing, and every post had circuit diagrams in it. For a long time these were static SVGs I drew by hand, then a TypeScript renderer I kept hacking on, but neither could simulate anything. The drawings were just drawings.

Trying to fix this problem, I wrote a language called circ that lets you describe digital circuits and compiles them to WebAssembly modules that run in the browser. Right now it lives scattered across the series, every interactive circuit you see in those posts is a .circ file.

It's a small language. There are only six primitives (input, output, and, not, wire, led), and the familiar gates you'd expect to be built in (or, nand, xor, nor, xnor) are themselves written in .circ and live inside the compiler as embedded files. The standard library is just more of the language, which makes me very happy.

The compiler is written in Zig and uses langlang for the PEG parser. At build time the simulation runtime is compiled to wasm32-freestanding and embedded into the CLI, and when you compile a circuit the resolved topology gets serialized into a custom WASM section and spliced onto that prebuilt blob. Each compiled circuit ends up as a single self-contained .wasm file, no toolchain required to run it. From the same .circ file you can also get an ASCII schematic via --preview and a truth table via --truth-table in Markdown, CSV, or JSON.

I just published a letter introducing the language: link to blog. The language has a site with the full reference at circ-lang.org, and the source is on GitHub: link to repo.

I'd love any feedback you have, especially on the surface syntax. I've been the only user for a while now, and I'm sure there are sharp edges I've stopped being able to see.

Thanks for reading 😊

Pleasure to meet you, circ!

Jefferson Oliveira — Tue, 12 May 2026 10:28:04 +0000

Hey y’all! If you’ve been following the fundamentals of computing series here, you’ve noticed those little widgets. You can click them, toggle the switches, watch the LEDs light up, peek at the circuit topology. Today I want to tell you what’s actually running in them, because I made it.

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:

a	b	sum	cout
0	0	0	0
1	0	1	0
0	1	1	0
1	1	0	1

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

Prazer, circ!

Jefferson Oliveira — Tue, 12 May 2026 10:27:04 +0000

Olá pessoal, tudo bom? Se vocês têm acompanhado a série de fundamentos da computação aqui, com certeza notaram aqueles circuitinhos. Dá pra clicar neles, mexer nos interruptores, ver os LEDs acendendo, espiar a topologia do circuito. Hoje eu quero contar o que de verdade está rodando neles, porque fui eu que fiz.

Ele se chama circ. É uma linguagem pra descrever circuitos digitais, e um compilador que transforma essa descrição em algo que o seu navegador consegue rodar. Antes de mais nada, quero deixar claro: isso não é uma linguagem séria de sistemas (ainda), e eu acredito que é ótima pra esse blog mas não está pronta pra produção. Por enquanto ela existe pelo único motivo de fazer os circuitos daqui funcionarem de verdade, em vez de serem desenhos estáticos ou simuladores feitos na mão.

Aprendendo a ler

Eu acho que a melhor forma de apresentar uma linguagem é deixar você olhar pra ela. Aqui está um meio-somador (half-adder) escrito em .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)

É o arquivo inteiro. Você declara as suas entradas, instancia as portas e dá um nome pra elas, conecta as portas de cada uma aos sinais que as alimentam, e declara quais sinais saem pelas saídas. Não parece um pouco com uma receita? Pegue duas entradas. Combine a e b com um XOR, chame de s. Combine as mesmas duas com um AND, chame de c. Mande s.out pra saída sum, e c.out pra carry. É isso.

As primitivas são propositalmente minúsculas: input, output, and, not, wire, led. Seis coisas. Todo o resto é construído a partir delas.

E aqui vai um detalhe do qual eu me orgulho um pouco: as portas or, nand, nor, xor, xnor também são escritas em .circ. A “biblioteca padrão” inteira do compilador são cinco arquivos que se parecem exatamente com o de cima. Quando você escreve xor s(a=a, b=b), o compilador silenciosamente puxa um arquivo de cinco linhas que define XOR em termos de AND, OR e NAND. A linguagem é pequena o suficiente pra ser a sua própria biblioteca padrão, e isso pra mim é fascinante.

Senta que lá vem história

circ não começou como uma linguagem. Começou como eu querendo desenhar circuitos.

Eu vinha escrevendo essa série há um tempo, e todo circuito de todo post era um SVG estático que eu tinha desenhado na mão ou arrancado de um renderizador em TypeScript que eu não parava de remendar. Os desenhos funcionavam, mas eram só desenhos. Você não podia mexer numa chave e ver o LED mudar. Você não podia perguntar “o que esse circuito faz, exatamente?” e receber uma resposta. Eram ilustrações de computadores, não computadores.

Mais ou menos na mesma época eu comprei o The Elements of Computing Systems, e esse livro explodiu minha cabeça e me levou direto pro Nand to Tetris. Nele, você constrói tudo a partir de uma única porta NAND, numa linguagenzinha chamada HDL, e cada componente que você escreve realmente roda. A combinação de “descreva um circuito em poucas linhas” e “agora aperte play e veja funcionar” é como deveria ser quando você está aprendendo sobre circuitos. Então eu quis isso, pra esse blog, pra você. Os widgets dos posts que você já leu são o resultado.

O nome é a parte mais sem graça da história: circ é abreviação de circuit (não sou poeta, desculpa.)

As cerejas do bolo

Assim que o compilador começou a funcionar, duas coisas saíram dele que eu não esperava amar tanto quanto amo.

A primeira é que o circ consegue se desenhar. Entrega um circuito pra ele e ele produz um esquema em ASCII, completo com cantos arredondados, pontos de fan-out, e fios que desviam educadamente das portas que estão no caminho. Aqui está o meio-somador de antes, renderizado pelo próprio compilador:

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

A segunda é que o circ consegue se tabular. Entrega o mesmo arquivo pra ele e peça --truth-table, e você recebe:

a	b	sum	cout
0	0	0	0
1	0	1	0
0	1	1	0
1	1	0	1

Essa é a beleza da coisa: usando só 5 linhas você tem a descrição do circuito, uma imagem dele mesmo, e a prova de que ele faz o que diz que faz. Cada widget interativo de cada post dessa série tem sido o circ fazendo isso silenciosamente no fundo, três vezes seguidas. Uma vez pra renderizar o esquema que você vê, uma vez pra rodar a simulação quando você mexe numa chave, e uma vez pra provar que as portas se comportam do jeito que eu disse que iam se comportar.

Até a próxima

Isso é só a superfície. Tem um parser, um resolvedor, um validador com códigos de erro estáveis, um pequeno runtime em WebAssembly que o compilador injeta dentro de cada artefato pra que tudo rode no seu navegador sem precisar de toolchain nenhum na sua máquina. Mas essas são histórias pra outros dias.

Se quiser se aprofundar, a linguagem tem um site só pra ela em circ-lang.org, com a referência completa e mais exemplos do que coube aqui.

Por enquanto, da próxima vez que você clicar num widget em um desses posts, você vai saber o que está vendo. É o circ. Prazer em te conhecer.

Agradecimentos especiais

Antes de nos despedirmos, eu quero dar um agradecimento especial pro @clarete. Ele é o cérebro por trás do langlang, o gerador de parsers que dá vida pra essa linguagem. Ele vem martelando meus ouvidos sobre o langlang há anos, e eu não poderia estar mais orgulhoso do que ele construiu.

Referências

circ-compiler no GitHub
circ-lang.org, a referência da linguagem e exemplos
Zig
langlang, o gerador de parser PEG que constrói a gramática do .circ
From Nand to Tetris

A Evolução da Escrita Digital - Do ASCII às Maravilhas do UTF-8

Jefferson Oliveira — Thu, 07 Aug 2025 13:29:04 +0000

Já imaginou como computadores transformam letras, números e emojis em zeros e uns que eles possam entender? Assim como nós, humanos, atribuímos significados às letras do alfabeto, o computador faz o mesmo. Vamos explorar aqui dois dos padrões mais populares de codificação de texto.

ASCII

Desenvolvido na década de 1960, o ASCII (American Standard Code for Information Interchange) tem uma premissa bem simples: usando apenas 7 bits, consegue-se representar 127 números, deixando reservados os primeiros 32 números da sequência para comandos importantes de escrita. O restante é preenchido com letras, números e alguns caracteres de pontuação.

As pessoas envolvidas no desenvolvimento do padrão fizeram de tal forma que a sequência do alfabeto pudesse ajudar na decodificação.

Por exemplo, o caractere do número “0” é o número 48 , que, representado em 7 bits, fica 011 0000. Assim como:

1 → 011 0001

2 → 011 0010

3 → 011 0011

Se notarem, os últimos 4 bits estão em sequência. Logo, para descobrir em ASCII qual o inteiro, é só subtrair 011 0000 (decimal: 48).

Da mesma forma, as letras do alfabeto: “A” é 65 → 100 0001 e o “a” é 97 → 110 0001. Com isso, era possível codificar todas as letras do alfabeto inglês 🇬🇧.

Interactive Observable notebook widget — view it on the blog.

… enquanto isso no resto do mundo …

Cena da série animada South Park

Como já era de imaginar, com o avanço da tecnologia e da capacidade dos computadores, cada país utilizou essa capacidade extra para codificar seus próprios caracteres. O Japão, por exemplo, nem o ASCII usou. Outros codificadores, como o Shift JIS, utilizavam múltiplos bytes, e com tudo isso gerou-se uma gigantesca incompatibilidade.

Curiosidade: No Japão, existe a palavra mojibake (文字化け), que significa “caractere distorcido”. Isso acontecia devido aos problemas de codificação entre todos os alfabetos japoneses e também o latino.

Porém, mesmo com toda essa incompatibilidade durante os anos 1980 e 1990, quais eram as chances de uma empresa de Londres ter que mandar documentos constantemente para o Japão? Naquela época, a solução era simples: imprima e envie por fax!

Cena da série animada Os Simpsons

Então chegou a internet, e o que era ruim ficou ainda pior… Agora temos que lidar com documentos sendo enviados pela internet constantemente, e com o tempo foi formado o:

Unicode Consortium

E como em um evento que pode se chamar de milagre do bom senso, durante as últimas décadas, foi formado um padrão com 154.998 caracteres, que cobre toda e qualquer língua que você possa imaginar: árabe, japonês, cirílico, chinês, coreano e até hieróglifos egípcios.

O que eles fizeram de forma simplificada foi pegar centenas de milhares de números e atribuí-los a centenas de milhares de caracteres, ou seja, o número 35307 representará o caractere japonês 觫, o número 963 representará σ e assim por diante.

UTF-8

Perfeito, agora nós temos centenas de milhares de números para representar todo e qualquer caractere, mas como vamos fazer isso com binário?

Para representar um número nessas proporções, vamos precisar de pelo menos 32 bits para representar qualquer número dessa magnitude, o que agora trouxe problemas para o alfabeto inglês, porque o Unicode é compatível com ASCII, ou seja, “A” ainda é 65 e “a” ainda é 97. Mas quando olhamos para o binário de 32 bits desses números, agora usamos 4x mais espaço para representar os mesmos caracteres.


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a

Contando acima, há 25 zeros seguidos que estarão presentes em todo texto que utilizar caracteres latinos, e esse é só o primeiro dos nossos problemas. O segundo é que alguns sistemas antigos interpretam uma sequência de 8 zeros [NULL] como fim de caractere, o famoso \0 do C.

Então entra o UTF-8. A primeira coisa é: se a letra tiver numeração abaixo de 127, então você representa exatamente igual ao ASCII.

Logo, o primeiro problema está resolvido: “A” ainda é 65 e cabe em 8 bits. 01000001.

E para números maiores que 127? Para isso você vai quebrar seu binário em 2 bytes.

1	2
`110xxxxx`	`10xxxxxx`

No byte 1, você tem o cabeçalho 110, que significa que esse caractere foi quebrado em 2 bytes. No byte 2, você começa com o cabeçalho de continuidade 10. Todos os outros bits restantes você vai preencher com o número que você quer representar.

Para calcular, é só remover os cabeçalhos, unir todos os bits e o número resultante é o caractere Unicode. Você pode fazer isso até 4096. Passou disso? Sem problemas! Usando o cabeçalho 1110 + 2 bytes, você tem 16 bits.

1	2	3
`1110xxxx`	`10xxxxxx`	`10xxxxxx`

Quer ir além? Tudo bem! O padrão suporta até o cabeçalho 1111110x + 6 bytes de continuidade.

Codificando UTF-8

Interactive Observable notebook widget — view it on the blog.

É incrível como esse padrão consegue entregar:

É compatível com os sistemas anteriores;
Não gasta espaço;
E em nenhum momento na vida haverá 8 zeros seguidos em nenhuma parte de qualquer byte.

Além disso, outra razão que o fez se tornar o padrão mundial hoje em dia é que, para se mover entre caracteres, se você não sabe onde está, é só procurar o próximo cabeçalho, não precisa de índice.

Já fazem alguns anos que o UTF-8 virou o padrão em toda comunicação pela internet, e o fato de hoje a pessoa japonesa média não precisar se preocupar com mojibake mais é por causa desse método genial de codificar texto.

Referencias

The Evolution of Digital Writing - From ASCII to the Wonders of UTF-8

Jefferson Oliveira — Thu, 07 Aug 2025 12:29:04 +0000

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 …

Scene from South Park series

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!

Scene from The Simpsons Series

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.


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a

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.

1	2
`110xxxxx`	`10xxxxxx`

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.

1	2	3
`1110xxxx`	`10xxxxxx`	`10xxxxxx`

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

A Tela é o Quadro - Desenhando fontes com matemática

Jefferson Oliveira — Thu, 31 Jul 2025 13:29:04 +0000

No sábado, 26 de julho de 2025, apresentei uma palestra sobre renderização de fontes no Google I/O Extended Natal. Devido à correria do dia a dia, não consegui mostrar muitos exemplos práticos interativos. Este artigo serve justamente para isso: vamos explorar um pouco sobre como o texto que você está lendo é formado na sua tela.

Para começar, falaremos sobre Bitmaps. Esta é a forma mais ingênua de desenhar fontes, pois um bitmap nada mais é do que uma imagem pronta. Abaixo, por exemplo, temos uma letra que ocupa um espaço de 6 pixels de altura por 6 pixels de largura.

No momento, você consegue visualizar facilmente porque o tamanho dos pixels está em 10 pixels. No entanto, se você alterar o tamanho para 1 pixel, verá que não é possível ler o que está na tela."

Interactive p5 widget — view it on the blog.

Como mostrado, o maior problema das fontes de bitmap é que elas não são escaláveis. Ou seja, para que possamos mudar o tamanho das fontes, teríamos que:

Criar uma nova fonte com cada uma das letras desenhadas no novo tamanho.
Rasterizar a fonte em uma outra escala.

Vamos ver o que acontece na segunda opção.

Essa é uma função simples de escala. Ela recebe como parâmetros os dados da letra que você quer desenhar e a escala na qual deseja aumentar.

Ela funciona simplesmente duplicando os pixels existentes tanto no eixo X quanto no Y.

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,
  };
};

O problema desse tipo de escala é que as fontes acabam obtendo um aspecto de bloco, o que traz a sensação de uma imagem com baixa resolução.

Outra forma é aplicando uma escala utilizando interpolação linear. Essa técnica consiste em tirar uma média de todos os pontos originais ao redor, em vez de simplesmente copiar o bloco inteiro, repetindo cegamente o que há no pixel. No entanto, isso agora resulta em um aspecto de imagem borrada, e essa característica se acentua quanto maior a diferença entre o tamanho original e o tamanho final.

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;
}

Com isso temos os exemplos a baixo,

Interactive p5 widget — view it on the blog.

Como utilizar uma só fonte para vários tamanhos?

Na matemática, existem equações que desenham um gráfico na tela. Os exemplos mais comuns são:

Função quadrática

Interactive Observable notebook widget — view it on the blog.

Função inversa multiplicativa

Interactive Observable notebook widget — view it on the blog.

Manipulando a curva

Para mover nossas equações, podemos somar um valor qualquer após o resultado da exponenciação e, assim, movemos nossa equação no eixo Y.

Interactive Observable notebook widget — view it on the blog.

Para mover nossa equação na horizontal, adicionamos esse valor antes de elevá-lo ao quadrado.

Interactive Observable notebook widget — view it on the blog.

Então, já temos uma maneira de representar nossas curvas utilizando equações matemáticas.

Mas antes de desenharmos, vamos aprender sobre mais uma coisa.

Curvas de Bézier

Ela é uma curva polinomial expressa como a interpolação linear entre alguns pontos representativos, chamados de pontos de controle.

No exemplo abaixo, temos 3 pontos: P0, P1 e P2, onde P0 e P2 são os pontos representativos e P1 é o ponto de controle, você pode mover os exemplos abaixo e ver o resultado.

Interactive p5 widget — view it on the blog.

Desenhando uma letra com vetores

Interactive p5 widget — view it on the blog.

Com o conceito de Bézier, fica até intuitivo como podemos desenhar uma letra usando matemática: basta organizar pontos em sequência e misturar linhas retas com curvas de Bézier, fazendo com que o P2 de uma termine exatamente onde começa o P0 da outra.

Aliás, uma reta também pode ser feita com Bézier; basta alinhar todos os pontos. Dessa forma, fica ainda mais claro como a interpolação atua na curva de Bézier.

Interactive p5 widget — view it on the blog.

Com isso, já podemos agora pensar em como transformar isso em um bitmap. Para fazer isso, precisamos primeiramente rasterizar essa fonte, começando por traduzir as curvas de Bézier em linhas compatíveis com a resolução da tela. Isso acontece porque a tela do computador é uma matriz de pixels; logo, precisamos transformar curvas em pixels legíveis ao olho humano.

Interactive p5 widget — view it on the blog.

Feito isso, a última coisa que se precisa é preencher a letra. Essa parte pode ser feita por um processo chamado scanline, que consiste em lançar um raio e contar quantas vezes esse raio vai tocar uma das paredes da letra. Se o número de toques for par, o pixel está representado fora da letra; se for ímpar, ele está dentro.

2 Interseções com a letra

2 e 3 Interseções com a letra

2, 3 e 4 Interseções com a letra

Perceba que, no exemplo da letra ‘O’, há uma falha na renderização. Ela está aí de propósito: o processo de renderizar fontes é complicado e cheio de edge cases que só aumentam quanto mais aprofundamos no assunto.

O que quero demonstrar com essa falha é que, além de contar quantas vezes sua linha corta a letra, deve-se também estar ciente se a linha está cortando ela mesma novamente.

Interactive p5 widget — view it on the blog.

Bem, e com isso, concluímos esta etapa do processo de renderização das fontes. Daqui a uns dias, vou publicar outros dois artigos sobre o tema para complementar o assunto da palestra. Eles serão sobre Unicode e Text Shaping.

Muito obrigado, e até a próxima! 😊

Jimmy Fallon escorregando e dando tchau

Referencias

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](https://github.com/Chlumsky/msdfgen)
Harfbuzz[Google] - (GitHub) <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js">

The Screen is the Canvas - Drawing Fonts with Mathematics

Jefferson Oliveira — Thu, 31 Jul 2025 12:29:04 +0000

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.

2 intersections with the letter

2 and 3 intersections with the letter

2, 3, and 4 intersections with the letter

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! 😊

Jimmy Fallon sliding and waiving bye

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](https://github.com/Chlumsky/msdfgen)
Harfbuzz[Google] - (GitHub) <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js">

Lembra de mim?

Jefferson Oliveira — Sun, 19 Jan 2025 11:27:04 +0000

Olá todo mundo, este é o terceiro artigo na série sobre computadores, e também o último com esse cabeçalho aqui, pois daqui para a frente é recomendado que você já tenha lido os dois artigos anteriores:

Portas lógicas.

Prazer, Binário..

Nos artigos anteriores, nós vimos como portas lógicas podem ser usadas para fazer comparações e também calcular operações aritméticas, porém ainda não vimos como o computador pode guardar uma informação ao longo do tempo.

Outra coisa que também iremos fazer aqui é categorizar cada tipo de chip: os que foram mostrados anteriormente são _ combinacionais _, o que significa que eles não precisam de nada além de sinais nas suas entradas para poder computar um resultado, mas existem também os _ sequenciais _. A diferença entre eles é que o sequencial depende não só dos sinais das entradas, mas também do valor anteriormente processado.

Um jeito muito prático de usar portas lógicas para guardar informações é usando um chip chamado de _ flip-flop _, que está representado abaixo. Ele contém 2 entradas: a de cima set e a de baixo reset (você pode clicar no circuito abaixo para interagir com eles).

Interactive circ widget — view it on the blog.

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

Se parar para analisar, é bem simples: seguindo a trilha do set, verá que há duas portas lógicas no caminho, uma OR e uma AND. Uma das entradas da porta OR está ligada com o resultado da AND lá no fim do chip. Essa combinação faz com que, quando temos 0 e é nos dado um valor 1 , a porta OR vai resultar em 1 , e a AND também.

Porém, quando removemos o sinal do set, o valor que foi anteriormente colocado é persistido porque agora o OR está mantendo o estado que mantém o AND também no estado anterior. Problema resolvido, certo? Não! Perceba que nosso circuito agora está travado, pois não há como sair desse estado a não ser que o AND passe a ter um outro valor, e é para isso que serve a porta reset: ela está ligada a um NOT, ou seja, enquanto ela estiver desligada (0), o seu resultado vai ser 1 (ligado), e vice-versa.

Uma evolução que podemos fazer no _ flip-flop _ é transformá-lo em um _ Registrador _. No registrador, podemos escolher se é ou não a hora de ler o nosso sinal e guardá-lo, e subsequentemente reescrevê-lo, e tudo isso ao nosso bel-prazer. Existem muitas formas de atingir esse chip, então vou usar a implementação demonstrada pelo Sebastian Lague.

Nela, a gente só precisa adicionar mais 3 portas lógicas e pronto!

Interactive circ widget — view it on the blog.

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

Se a gente destrinchar um pouco, o que acontece é o seguinte: a entrada superior, que agora chamaremos de data, só será salva no _ flip-flop _ quando a entrada inferior, que também mudou o nome, agora se chama enabled. Ou seja, em vez de usar duas entradas, uma para salvar e outra para apagar, essa combinação de ANDs e NOT escolhe qual operação será feita.

Se data = 1 e enabled = 1, então é a mesma coisa que ligar a entrada set do _ flip-flop _.
Se data = 0 e enabled = 1, então é a mesma coisa que ligar a entrada reset do _ flip-flop _. Perceba que o enabled precisa sempre estar ativado para que possa salvar o sinal que foi colocado em data.

Uma outra coisa que podemos fazer é pegar inspiração no artigo anterior, que no final a gente aprende que, se juntarmos vários Adders, nós podemos fazer contas com múltiplos dígitos. Na memória é do mesmo jeito: juntando vários registradores, você pode fornecer uma entrada para cada data e compartilhar o sinal do enabled, e assim você pode salvar os valores de um número binário inteiro.

Por enquanto, a gente se despede por aqui, até a próxima 😄

Xauzinho!

Referências

Remember me?

Jefferson Oliveira — Sun, 19 Jan 2025 10:27:04 +0000

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 😄

Bye bye!

References

Prazer, Binário.

Jefferson Oliveira — Sat, 14 Dec 2024 11:27:04 +0000

Olá pessoas dessa internet, para quem está chegando aqui agora, este é o segundo artigo de uma série que estou fazendo para falar sobre os fundamentos da computação, recomendo ler o primeiro sobre portas lógicas. E para quem já leu o primeiro artigo, dá um pulinho lá porque eu fiz uma revisão no artigo, recomendo bastante dar uma olhada 😊

Vamos nos aprofundar um pouco mais e explorar alguns conceitos de matemática e também da história humana.

A matemática veio da necessidade de contar e medir da raça humana – quantos animais a Maria cuida, quantos dias até o próximo solstício… Com o tempo e a expansão humana, povos antigos criaram vários sistemas de numeração para o seu dia a dia. Jogos como Grand Theft Auto V, Call of Duty: Black Ops III, Dragon Quest XI são exemplos de uso do sistema numeral que os romanos usavam, e o I Ching, um antigo texto chinês, tem raízes em representações binárias.

Porém, não somente as antigas civilizações usavam outros sistemas numéricos. As horas de um dia são divididas entre 12 horas do período da manhã e 12 horas do período da tarde, ou uma dúzia de ovos. Na língua francesa ainda existem resquícios de um sistema com base vigesimal (20), por exemplo, o número 80 se diz quatre-vingts (quatro vintes), e um dos mais recentes é o Braille, que também tem raízes em representações binárias.

Nos dias atuais, utilizamos a representação decimal, e o motivo é bem simples: a média de dedos em mãos humanas são incríveis 10 dedos, sendo assim fica mais fácil contar usando somente as mãos.

☝️ + ☝️ = ✌️

Essa representação em base 10 é posicional, ou seja, a posição em que os dígitos são “desenhados” muda a quantidade que se está representando. 70 representa dez vezes mais que 07, daí vem o ditado popular “zero à esquerda”. Na escola, aprendemos as casas decimais – unidades, dezenas, centenas… Elas servem para representar qual é a posição desse dígito.

Dezena	Unidade
7	0
0	7

E em cima dessa ordem existe uma fórmula matemática que converte um número de qualquer base para decimal. Para facilitar:

Dígito : Símbolo que representa uma quantidade única. Ex.: 1, 2, 3, 4, 5, 6, 7, 8, 9, 0
Número : Dígitos organizados em ordem de _ posição . _Ex.: 10, 144, 999, 42, 37, 0x8A6C, 0b101010
Base : Quantidade máxima de dígitos que pode ser representada. Ex.: binário (0b) 2, decimal 10, hexadecimal (0x)
Índice : A magnitude do dígito na posição. _Ex.: 10, o 1 em 10 tem Índice 1 e o 0 tem Índice 0 (é meio contraintuitivo, mas faz sentido). Em outras palavras, o índice é a posição da direita para a esquerda, começando em 0.

A fórmula é bem simples: (d)ígito × (b)ase^(i)ndice. No exemplo que estamos fazendo, esta é a fórmula para converter 70 em decimal… para 70 em decimal. 7 × 10¹ + 0 × 10⁰ = 70

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

Quando falamos de números dessa forma, fica mais fácil representar o binário, que nada mais é que a quantidade que pode ser representada pela fórmula _ d × 2ⁱ _.

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

E essa forma de representar quantidades também pode ser manipulada com operações matemáticas. A adição 25 + 17 é resolvida de modo parecido com isso.

1
2 5
1 7
--- +
4 2

No exemplo acima, temos alguns elementos que precisam ser destacados:

Um dígito só pode ser somado com outro dígito que estiver no mesmo índice.
Quando a soma não puder ser representada com apenas um dígito, o menor índice é mantido como resultado, e o resto é enviado para o próximo índice.
O resultado de uma soma será sempre a soma dos _ dígitos _ do _ índice _ + o _ resto _ que veio do _ dígito _ no _ índice _ anterior.

Com esses mesmos passos, podemos aplicar a soma em qualquer 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

Cálculo de 25 + 17 em bases Binária, Decimal e Hexadecimal

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

Agora que já nos conhecemos, como podemos fazer para o computador nos conhecer também?

Brincando de tradução

Lembrando do artigo anterior, vamos isolar a soma de dois dígitos em tabelas. A primeira, vamos olhar para o resultado apenas. Temos esta tabela que se assemelha muito com a tabela da porta OR, exceto por essa pequena mudança no final.

| Resultado |
| ? | 0 | 1 |
| 0 | 0 | 1 |
| 1 | 1 | 0 |

| OR |
| ∨ | 0 | 1 |
| 0 | 0 | 1 |
| 1 | 1 | 1 |

Para isso, podemos combinar o resultado das portas que já vimos anteriormente em um só circuito chamado “OU Exclusivo” ou “XOR”.

Interactive circ widget — view it on the blog.

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

Agora, vamos olhar também para a tabela do resto da nossa soma e se percebe que é uma cópia exata da porta AND.

| Resto |
| ? | 0 | 1 |
| 0 | 0 | 0 |
| 1 | 0 | 1 |

| AND |
| ∧ | 0 | 1 |
| 0 | 0 | 0 |
| 1 | 0 | 1 |

E assim como o Capitão Planeta, “Pela união dos seus poderes”, nós vamos conseguir fazer a operação de soma de dois dígitos em binário, e esse componente é chamado de “Somador” ou “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 ├○──────────────────────●                                          
╰──────╯

Com essa combinação de portas lógicas, um computador já consegue fazer as incríveis somas de: 0 + 0, 1 + 0, 0 + 1, 1 + 1, mas, além disso, ele consegue também dizer quanto que houve de resto da soma. E quando combinados vários ADDERs, a gente consegue fazer uma soma de números mais complexos como o 42, mas essa nós vamos ver no próximo artigo.

Por hoje é só isso, pessoal.

Isso é tudo pessoal!

Referências

Pleasure to meet you, Binary.

Jefferson Oliveira — Sat, 14 Dec 2024 10:27:04 +0000

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.

Tens	Units
7	0
0	7

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:

A digit can only be added to another digit that is in the same index.
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.
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

Calculation of 25 + 17 in Binary, Decimal and Hexadecimal bases

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.

| Result |
| ? | 0 | 1 |
| 0 | 0 | 1 |
| 1 | 1 | 0 |

| OR |
| ∨ | 0 | 1 |
| 0 | 0 | 1 |
| 1 | 1 | 1 |

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.

| Remainder |
| ? | 0 | 1 |
| 0 | 0 | 0 |
| 1 | 0 | 1 |

| AND |
| ∧ | 0 | 1 |
| 0 | 0 | 0 |
| 1 | 0 | 1 |

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

Portas lógicas

Jefferson Oliveira — Thu, 07 Nov 2024 11:27:04 +0000

Revisado [11/12/2024]

Oi pessoal, então tive que fazer umas mudanças aqui no post pra adicionar alguns widgets interativos, e aproveitei para dar um pouco mais de contexto ao conteúdo.

Olá, este é o primeiro artigo de uma série sobre os fundamentos da computação. A ideia é demonstrar de forma simples e prática como este dispositivo transforma zeros e uns em praticamente qualquer coisa, o funcionamento das CPUs e outros assuntos interessantes. Então, para começar, o primeiro conceito que temos que aprender é o de portas lógicas: elas são a base de toda a computação, com elas podemos fazer certas operações que recebem como entrada um ou mais valores e terão outro valor como resultado.

Mas o que são esses valores? O número 42? O nome da minha mãe? Esses “valores” são energia, mais especificamente a presença e ausência dela. Como foi falado na introdução, computadores funcionam utilizando dígitos binários, ou seja, essas máquinas só entendem 0 e 1 ou “Tem energia” e “Não tem energia”. No entanto, não iremos chamar esses zeros e uns de energia, para o computador eles são sinais.

Quando sinais são combinados e/ou comparados, nós chamamos de operação lógica, por exemplo.

“[Sons de harpa de inicio de história]”

Um dia você contrata uma empresa de elétrica para instalar dois interruptores em um corredor da sua casa, mas, por um erro de desenho, a instalação acaba ficando da seguinte forma: o fio passa pelo primeiro interruptor (vamos chamar de interruptor A), vai direto para o segundo interruptor (B para os íntimos) e, em seguida, sai para a lâmpada.

Reparou que a lâmpada só acende se os dois interruptores estiverem ligados ao mesmo tempo? Se qualquer um deles for desligado, a luz apaga na hora! Pois é, essa atrocidade da elétrica residencial pode ser explicada, na matemática, a partir de um de seus ramos chamado de álgebra booleana, e nela podemos demonstrar isso com uma tabela:

∧	0	1
0	0	0
1	0	1

Escrevendo isso de outro modo fica assim:

∧	A desligado	A ligado
B desligado	Luz apagada	Luz apagada
B ligado	Luz apagada	Luz acesa

Se você percebeu bem, agora temos um jeito de representar o que queremos que aconteça com dois interruptores e uma lâmpada, e esse exemplo mostrado acima é a primeira porta lógica que estamos conhecendo, o AND ou Conjunção, e essa tabela, demonstrada acima de formas diferentes, se chama Tabela-Verdade.

Ok, mas e a luz da minha casa? Como que vai ficar? Eu preciso que a luz acenda quando o A OU B estiverem ligados. Como que faz isso?

A resposta está na própria pergunta! 😉 Vamos precisar de uma outra porta lógica, a OR ou Disjunção, e para entender como ela funciona, vamos usar uma tabela-verdade que se encaixe nessas condições:

?	0	1
0	0	1
1	1	1

Mas antes de falar da OR, vamos dar uma olhada na porta NOT (ou Negação). Ela é bem simples, mas vai ser importante mais pra frente.

Interactive circ widget — view it on the blog.

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

E se escrevermos ela numa tabela verdade teremos isso aqui:

¬	0	1
	1	0

Então, vamos fazer uma pausa e revisar o que a gente já sabe. Primeiro, as operações e como representá-las numa tabela. Para simplificar, vamos transformar essas operações em símbolos. Toda vez que nos referirmos ao AND, este será o símbolo:

Interactive circ widget — view it on the blog.

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

e o NOT:

Interactive circ widget — view it on the blog.

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

Com essas duas operações lógicas (AND e NOT), já podemos combinar seus resultados e criar uma terceira porta lógica: a NAND (ou Not AND).

Ela pode ser representada assim:

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 ├○─╯                           
╰───╯

A tabela-verdade dela é idêntica à do AND, porém com os resultados invertidos.

¬∧	0	1
0	1	1
1	1	0

Seguindo essa mesma lógica de combinar portas, podemos usar uma porta NAND e inverter a entrada de cada interruptor com um NOT. Assim, teremos o seguinte:

Interactive circ widget — view it on the blog.

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

Analisando o diagrama acima, vemos que, quando os dois interruptores estiverem desligados, ambos os sinais serão invertidos pelo NOT, e o NAND vai resultar em ¬∧(1, 1) = 0. Ou seja, com ambos desligados, a lâmpada apaga. Mas o que acontece quando temos ¬∧(1, 0) ou ¬∧(0, 1)? Para descobrir, vamos analisar a tabela-verdade:

∨	0	1
0	0	1
1	1	1

Eu acho que vi um gatinho!

Mas espera um pouco, eu tenho a impressão de que eu já vi essa tabela antes? Sim! Essa é a porta lógica OR que estávamos procurando. Uma viagem e tanto, não é? Agora que já sabemos como consertar a fiação da lâmpada, podemos dar uma paradinha aqui. Este é apenas o primeiro artigo de uma série sobre computadores. Mais para frente, vamos abordar outras portas lógicas e outros conceitos da computação.


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a


0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	1		A
0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	1		a