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 …

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!

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.

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.

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.

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

• 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

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.

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

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] (GitHub)
• Harfbuzz[Google] - (GitHub)

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 😄

Referências

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

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.

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:

1. Um dígito só pode ser somado com outro dígito que estiver no mesmo índice.
2. 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.
3. 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 

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.

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.

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.

Referências

• 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

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:

Escrevendo isso de outro modo fica assim:

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:

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:

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.

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:

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.

Referências

• Álgebra booliana (Wikipédia)
• Boolean Algebra (Wikipédia)
• Tabela-verdade (Wikipédia)
• Exploring How Computers Work (YouTube)
• Making logic gates from transistors (YouTube)
• HOW TRANSISTORS RUN CODE? (YouTube)