PixelLab

Um laboratório educacional simples para alunos entenderem como uma imagem digital nasce de pixels.

O que é

PixelLab é uma página web (HTML + CSS + JS, sem dependências) onde o aluno pode:

• Escolher a resolução da matriz (8×8, 16×16, 32×32, 64×64 ou personalizada).
• Pintar pixel a pixel com lápis, preencher áreas com balde, apagar com borracha ou copiar cor com conta-gotas.
• Escolher cores na paleta rápida ou usar o seletor livre (qualquer cor HEX).
• Ver, em tempo real, a cor selecionada em formato HEX, RGB decimal e binário (para discutir representação de cor).
• Mostrar/ocultar grade e coordenadas (x, y) do pixel.
• Desfazer/refazer alterações.
• Exportar PNG (tamanho real da matriz) ou ampliado (16× para colar em slides/PPT).

Como usar em sala

1. Abra a página publicada no GitHub Pages.
2. Sugira desafios — desenhar a inicial do nome em 8×8, recriar um emoji em 16×16, criar um personagem em 32×32, fazer um degradê com 4 tons.
3. Discuta com a turma:
   • O que muda quando aumentamos a resolução?
   • Quantos pixels tem uma foto de celular? E uma tela Full HD?
   • Por que cada cor é representada por 3 números (R, G, B)?
   • Por que um pixel ocupa 3 bytes (24 bits) na memória?

Atalhos do teclado

Tecla	Ação
P	Lápis
B	Balde
E	Borracha
I	Conta-gotas
Ctrl+Z	Desfazer
Ctrl+Y	Refazer

Rodando localmente

Basta abrir index.html no navegador — não precisa de servidor.

Licença

Uso livre para fins educacionais.