pixel-playground
Un taller de 3 horas donde no se aprende netpbm. Se aprende ciencias de la computación, y netpbm es el bisturí porque su kernel de convolución se escribe como texto legible, no como un blob binario aparte. Una imagen es un array de números y una promesa sobre su forma. Todo filtro es una matriz chica que se desliza sobre esos números. Todo glitch es la promesa incumplida.
mano.pbm: 15 bytes escritos con printf, sin ningún programa de dibujo, ampliados 64 veces sin suavizar para que se vean los cuatro píxeles. Es la imagen más simple que existe y ya alcanza para romper una intuición: en este formato, el 1 es negro.El taller anterior de esta serie rompía video para entender un decodificador. Este va más despacio: una imagen fija no se mueve, no tiene tiempo, no tiene fotogramas P que dependan de nada. Es la unidad más chica en la que todavía se puede ver, con los ojos, qué le hace un algoritmo a un número.
Y sin embargo una imagen fija ya contiene casi todo lo que hace falta para entender visión por computadora: representación de datos, cabeceras como contratos, y una operación —la convolución— que aparece sin cambios, con otro nombre, en cada red neuronal que reconoce una cara o maneja un auto solo.
El pago final está al fondo del taller, en el módulo 7, pero conviene decirlo ahora para que cada ejercicio se sienta como un paso hacia ahí: la matriz de 3×3 que vas a escribir a mano en el módulo 2 es la primera capa de una red convolucional. No es una analogía educativa. Es la misma operación, con el mismo nombre, del mismo tamaño que usan muchas capas reales.
Antes de arrancar, cada persona necesita esto resuelto. No gastes tiempo del taller instalando cosas.
# Debian / Ubuntu
sudo apt install netpbm ffmpeg
# macOS
brew install netpbm ffmpegEsta máquina tiene netpbm 11.5.2 (paquete Debian, compilado 2024-03-31), con 291 programas en /usr/bin, y ffmpeg 6.1.1. Todos los comandos de este taller están probados con esas versiones exactas.
El widget interactivo del módulo 2 no necesita servidor: la imagen fuente ya está incrustada como data URI en fuente-data.js, así que index.html funciona abriéndolo directo con doble clic. Esto no es un detalle menor — es la respuesta a un problema real de seguridad del navegador que el módulo 2 explica.
Esta sección es material de referencia, no se recorre en vivo. Netpbm es en realidad unos 291 programas chicos, cada uno hace una sola cosa, y se combinan con pipes. Acá va agrupado por función para que después del taller sepas dónde volver a buscar.
anytopnm: detecta el formato de entrada y lo lleva a PNM sin que tengas que decirle cuál espnmtopng / pngtopnm, pnmtojpeg / jpegtopnm, giftopnm / ppmtogif: ida y vuelta con los formatos de uso corrientepnmtopam / pamtopnm: PAM generaliza PBM/PGM/PPM en un solo contenedor con cabecera extendidapamscale / pnmscale: reescalar, con o sin interpolaciónpamcut: recortar un rectángulo por coordenadaspnmflip, pnmrotate: espejar y rotarpnmcat, pamstack: pegar imágenes en fila, columna o profundidadpnmdepth: cambiar cuántos bits por canalppmtopgm / pgmtoppm: entre color y escala de grisespnmtorgb3 / rgb3toppm: separar y recombinar canalespamditherbw, pnmquant: los dos programas de este tallerpamfile: magic number, dimensiones, maxval — la primera pregunta que hacés sobre cualquier archivo de este tallerpgmhist, ppmhist: histograma de valores por canalpnmpsnr: diferencia numérica entre dos imágenes, la misma métrica que el taller hermano usa para videopgmnoise: ruido puro, la contraparte sin estructura del ejemplo de compresión del taller hermanopnmindex: hoja de contacto con miniaturas de muchas imágenes en una solaprintf alcanza.pamarith: suma, resta, diferencia y otras operaciones aritméticas entre dos imágenes, píxel a píxelpnmcat: también sirve para apilar capas, no solo para concatenar| igual que cualquier tubería de UnixNueve módulos, 3 horas, terminal y un navegador. Cada módulo tiene la misma estructura: un concepto de ciencias de la computación, algo que hacés con las manos, y el momento en que las dos cosas encajan.
Módulo 0
15 min
Concepto Representación mínima de datos, un formato de texto legible
printf 'P1\n2 2\n1 0\n0 1\n' > mano.pbm
pamfile mano.pbmPBM plain, 2 by 2mano.pbm pesa 15 bytes y es una imagen válida. pamfile la reconoce sin que le digas nada más. Convertila a algo que un navegador entienda:
pnmtopng mano.pbm > mano.png69 bytes de PNG, cuatro píxeles. Ahora la trampa, la que todo el mundo pisa la primera vez:
El momento En P1, el 1 significa negro. Es lo opuesto de lo que asume cualquiera que venga de pensar en "1 = encendido = blanco". El formato no tiene ninguna obligación de coincidir con tu intuición; solo tiene que ser consistente con su propia especificación. Grabate esto ahora, porque el módulo 1 va a hacer la misma pregunta con la cabecera entera.
Dos formatos más de la misma familia, para tener el vocabulario completo antes de seguir:
printf 'P2\n4 2\n255\n0 85 170 255\n255 170 85 0\n' > gris.pgm
pamfile gris.pgm
printf 'P3\n2 2\n255\n255 0 0 0 255 0\n0 0 255 255 255 0\n' > color.ppm
pamfile color.ppmgris.pgm: PGM plain, 4 by 2 maxval 255
color.ppm: PPM plain, 2 by 2 maxval 255P1 (bitmap, un bit), P2 (grises, un valor por píxel) y P3 (color, tres valores por píxel) son la misma idea con más números por celda. Nada de esto necesitó una cámara, un escáner ni un programa de dibujo.
Módulo 1
20 min
Concepto Parsing, framing, contratos binarios
La imagen fuente del resto del taller no la escribimos a mano: la genera ffmpeg, porque necesitamos gradientes reales, no barras planas.
ffmpeg -f lavfi -i "mandelbrot=s=256x256:r=1" -frames:v 1 -pix_fmt gray fuente.pgm
Mirá los primeros bytes del archivo, no como imagen sino como bytes:
head -c 15 fuente.pgm | xxd5035 0a32 3536 2032 3536 0a32 3535 0aConvertido a ASCII eso dice P5\n256 256\n255\n: magic number, ancho y alto, maxval. Las dimensiones están escritas en texto legible dentro de un archivo binario. No necesitás ningún parser para leerlas — head alcanza.
fuente.pgm pesa 65.551 bytes: 15 de cabecera más 65.536 de datos. Y 256×256 = 65.536 exacto, ni un byte de más. La versión en color de la misma fuente pesa 196.623 bytes = 15 + 196.608, y 256×256×3 = 196.608. Cuadra siempre, porque la cabecera es una promesa sobre cuántos bytes vienen después, y nada en el formato la verifica más allá de que el archivo alcance a tener esa cantidad.
Un dato para que quede grabado: mano.pbm del módulo 0 pesa 15 bytes. La cabecera de una imagen de 65 KB también pesa 15 bytes. El tamaño de la cabecera no tiene ninguna relación con el tamaño de la imagen — es una promesa de longitud fija sobre un cuerpo de longitud variable.
El momento No existe "el archivo de imagen" como una cosa monolítica. Existen bytes y un acuerdo de texto plano sobre cómo interpretarlos. Ese acuerdo se puede leer, y —como vas a ver en el módulo 6— se puede mentir.
Módulo 2
35 min — el módulo central
Concepto Convolución, campo receptivo, kernel como programa
pnmconvol aplica una matriz chica —el kernel— sobre cada píxel, multiplicando cada vecino por un peso y sumando. Las filas se separan con ;, los valores con ,. Ejecutalo sin argumentos:
pnmconvolpnmconvol: You must specify either -matrix or -matrixfile at least one argument which names an old-style PGM convolution matrix file.Esa frase, "old-style PGM convolution matrix file", no es un accidente de traducción: es un artefacto histórico real. El kernel se guardaba antes como una imagen en sí misma — una PGM chica donde cada píxel era un peso. El kernel es una imagen y la imagen es un kernel. La operación de este módulo entera cabe en esa frase.
La invocación real:
pnmconvol -matrix=0.0625,0.125,0.0625;0.125,0.25,0.125;0.0625,0.125,0.0625 fuente.pgm > salida.pgmEsos números que acabás de escribir a mano son los mismos que usa la evidencia de esta página: la tabla siguiente sale de leer los bytes crudos de cada .pgm con numpy (2.4.4) y calcular media, desvío estándar y diferencia contra el original sobre la imagen completa.
| Kernel | Suma | Media | Desvío | difRMS |
|---|---|---|---|---|
| original | — | 146,7 | 41,1 | 0,00 |
| identidad | 1 | 146,7 | 41,1 | 0,00 |
| gauss | 1 | 146,7 | 39,8 | 7,47 |
| realce | 1 | 146,4 | 50,5 | 22,05 |
| relieve | 1 | 147,4 | 55,0 | 39,02 |
| bordes | 0 | 8,0 | 32,5 | 147,07 |
| saturado | 9 | 253,7 | 10,6 | 115,32 |
Leé esa tabla con cuidado, porque adentro están tres lecciones:
Una nota al margen sobre lo que hace pnmconvol por adentro: si le das un kernel de puros unos (una caja), no hace 9 multiplicaciones por píxel. Detecta la forma y lo optimiza:
pnmconvol: Convolution is a simple mean horizontally and verticallyEl widget de abajo hace exactamente la misma convolución que pnmconvol, en JavaScript, sobre la misma imagen fuente (incrustada en fuente-data.js para que funcione sin servidor). Las estadísticas del widget se calculan sobre el interior de 254×254 píxeles (64.516 en total), descartando el borde de 1 píxel, para que sean directamente comparables entre el canvas y la terminal sin que la política de borde de cada implementación meta ruido. Por eso no van a coincidir dígito por dígito con la tabla de arriba, que mide la imagen completa: son dos mediciones distintas, hechas a propósito así.
Esta comparación se hizo dos veces, en serio, con el mismo kernel gauss: en el navegador vía canvas.getImageData sobre el interior, y en la terminal con pnmconvol sobre la misma región. Los dos dieron media 146,3759 y desvío 39,9821. Delta: 0,0000 en las dos estadísticas. El slider del navegador y el comando de la terminal son la misma operación.
Módulo 3
20 min
Concepto Ganancia DC, invariantes de un filtro
-matrix no normaliza nada por vos. El kernel "saturado" de la tabla anterior es una caja de unos, suma 9, y por eso la salida es 9 veces más brillante y satura contra el techo: la media salta de 146,7 a 253,7.
-normalize existe exactamente para esto: divide la salida por la suma de los pesos. Se puede hacer a mano o dejar que lo haga el programa, y da lo mismo — verificado:
# A mano: los pesos ya vienen divididos por 16
pnmconvol -matrix=0.0625,0.125,0.0625;0.125,0.25,0.125;0.0625,0.125,0.0625 fuente.pgm > a.pgm
# Con -normalize: los mismos pesos, sin dividir, y el programa divide por vos
pnmconvol -matrix=1,2,1;2,4,2;1,2,1 -normalize fuente.pgm > b.pgma.pgm y b.pgm son idénticos, byte a byte. -normalize no es una aproximación de la división manual: es la misma operación.
La excepción es a propósito y está en la misma tabla: el kernel "bordes" suma 0, y su media colapsa a 8,0. No es un bug — un detector de bordes mide cambio, no nivel, así que se supone que destruye la media de una imagen sin bordes. Sumar 1 es la regla para filtros que preservan brillo; sumar 0 es la firma de los que miden diferencia.
El momento La suma de los pesos de un kernel no es un detalle aritmético: es una declaración de intención. Suma 1 dice "voy a describir la misma imagen, más suave o más dura". Suma 0 dice "no me importa el nivel, me importa el cambio". Cualquier otra suma, la mayoría de las veces, es un error — y -normalize es la red de seguridad, verificada idéntica a hacerlo a mano.
Módulo 4
20 min
Concepto Cuantización extrema, difusión de error, profundidad de bits
Misma imagen, misma profundidad — un bit por píxel, blanco o negro, nada más— con dos algoritmos de tramado distintos:
pamditherbw -atkinson fuente.pgm > d-atkinson.pbm
pamditherbw -hilbert fuente.pgm > d-hilbert.pbm
-randomseed=1.
Mismo bit por píxel, mismo total de píxeles, y sin embargo Hilbert pesa 1,28× más que Atkinson una vez comprimido. El patrón que a simple vista parece más prolijo y más parejo es, para un compresor, más difícil de predecir. Es la tesis del taller hermano —comprimir es apostar a que los datos son predecibles— reapareciendo en el caso más extremo de profundidad de bits que existe: uno.
También están disponibles y verificados -fs, -floyd y -threshold, cada uno con su propia firma de ruido.
El momento "Un bit por píxel" no describe cuánta información tiene una imagen — solo describe cuántos estados tiene cada casillero. Cuánto pesa de verdad depende de qué tan predecible es el patrón que llena esos casilleros, no de la profundidad. El módulo que sigue lleva esta misma idea al color completo.
Módulo 5
20 min
Concepto Entropía vs. representación, cuantización de paleta
pnmquant 2 color.ppm > q2.ppm
pnmquant 16 color.ppm > q16.ppm| Colores | PPM crudo | PNG |
|---|---|---|
| 2 | 196.623 | 2.335 |
| 16 | 196.623 | 6.913 |
| sin cuantizar | 196.623 | 65.037 |
El PPM crudo pesa exactamente lo mismo en las tres filas. Cuantizar a 2 colores no le saca un solo byte al archivo sin comprimir — el formato PPM reserva el mismo espacio fijo por píxel sin importar cuántos colores distintos usás en realidad. El PNG, en cambio, varía 27,9× entre los extremos.
El momento Tirar información no se traduce en menos bytes por sí solo. Se traduce en menos bytes recién cuando algo —un codificador de entropía, como el que usa PNG— aprovecha esa información faltante para escribir menos. Información y tamaño de archivo son dos cosas distintas que solo coinciden si hay un compresor de por medio.
Módulo 6
20 min
Concepto Bounds checking, validación de invariantes, framing
El módulo 1 mostró que la cabecera declara el ancho en texto plano. Ahora le vamos a mentir. No tocamos un solo byte de datos: solo cambiamos qué ancho dice la cabecera que tiene la imagen. 255 y 256 miden lo mismo en ASCII —tres caracteres— así que el archivo no cambia de tamaño ni un byte al mentir.
./scripts/shear.sh fuente.png 255 shear.png| Ancho declarado | Diferencia | Resultado |
|---|---|---|
| 255 | 768 bytes de sobra | se genera, corrida diagonal |
| 250 | 4.608 bytes de sobra | se genera, corrida más fuerte |
| 128 | 98.304 bytes de sobra | se genera, corrida extrema |
| 257 | 768 bytes de falta | falla, exit 1 |
Declarar 257 es la otra dirección: le estás prometiendo al lector 768 bytes que no existen, y el lector se queda sin datos a mitad de la última fila:
pnmtopng: Unexpected EOF reading row of PPM image.La cabecera después de mentir, verificada con xxd -l 16: 5036 0a32 3535 2032 3536 0a32 3535 0a = P6\n255 256\n255\n. ./scripts/shear.sh hace este truco por vos y a propósito deja un -crudo.ppm al lado de la salida, para que puedas inspeccionar esa cabecera con xxd en lugar de confiar en lo que dice esta página.
El momento La asimetría es la lección. Pedir menos ancho del que hay degrada en silencio: la imagen se genera, se ve mal, y nada te avisa. Pedir más ancho del que hay falla fuerte e inmediato: exit 1, un mensaje claro. Si hiciste el taller de ffmpeg de esta serie, ya viste un decodificador de video alucinar en vez de fallar cuando le faltaba un fotograma clave. Acá la misma clase de mentira falla ruidosamente en una dirección y en silencio en la otra, y la diferencia completa es si el programa hace bounds checking antes de leer o confía ciegamente en la cabecera.
Módulo 7
15 min
Concepto La convolución como primitiva de visión por computadora
Volvamos a la matriz de 3×3 del módulo 2. Multiplicaste cada vecino de un píxel por un peso, sumaste, y repetiste para cada píxel de la imagen. Esa operación —una ventana chica que se desliza, multiplica y suma— tiene un nombre en aprendizaje automático: es una capa convolucional. No una versión simplificada para enseñar, ni una analogía. La misma operación, con el mismo nombre, del mismo tamaño 3×3 que usan de verdad muchas capas de redes reales.
La diferencia entre lo que hiciste a mano y una red neuronal moderna no está en la operación: está en que una red aprende los pesos de la matriz en vez de que los escribas vos, y en que apila cientos de estas capas, cada una mirando lo que produjo la anterior. Vos escribiste una, a mano, con números que entendías uno por uno. Eso es más de lo que la mayoría de la gente que usa estas redes todos los días puede decir.
Para seguir por este camino sin construir nada nuevo ahora: esta máquina tiene incluso una GPU virtual corriendo por software (ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver)). La razón por la que el aprendizaje profundo corre en GPUs es exactamente lo que acabás de escribir: una función chica —el kernel— evaluada una vez por cada píxel, en paralelo. Un fragment shader es eso. Un kernel, un millón de invocaciones.
El momento No aprendiste una metáfora de la visión por computadora. Calculaste a mano, con papel mental y una calculadora de bolsillo si hizo falta, la operación exacta sobre la que está construida.
Módulo 8
5 min
Concepto Cierre y evaluación
Cada persona exporta el resultado que más le gustó del módulo 2 o 3:
pnmtopng miresultado.pgm > miresultado.pngY antes de mostrarlo dice una sola frase: qué suma tiene su kernel y qué le hizo eso a la media. Esa frase es toda la evaluación del taller. Si puede decirla, entendió ganancia DC, convolución y la diferencia entre información y tamaño de archivo. Si no puede, el resultado queda igual de lindo — pero volvemos 10 minutos al módulo 3.
El momento El que aparece cuando alguien mira la matriz de otro y dice, sin que se lo pidan, "ah, por eso te quedó tan brillante, te olvidaste de normalizar". Ahí dejaron de ver un filtro y empezaron a ver una ecuación.
Ordenado por dificultad. El primero es el que más enseña.
Volvé al widget del módulo 2. Escribí una matriz que no esté en los presets, copiá el comando que te genera, y corré ese pnmconvol real sobre fuente.pgm. Compará a ojo la salida del navegador contra la de la terminal. Es el mismo ejercicio que ya hicimos con el gauss, pero con un kernel que inventaste vos.
potrace convierte un bitmap en curvas vectoriales — el camino inverso al de todo este taller, que trabajó siempre en la grilla de píxeles. Tramá una de tus imágenes a un bit con pamditherbw del módulo 4 y pasala por potrace: es el gancho hacia la próxima parada de esta serie.
Un fragment shader en WebGL corre una función chica una vez por cada píxel de salida, en paralelo, en la GPU (real o virtual: esta máquina la corre en SwiftShader/ANGLE por software). Escribir el kernel del módulo 2 como shader es escribir la misma matriz una segunda vez, en un lenguaje pensado para correr un millón de invocaciones a la vez en vez de una por una. No lo construimos en este taller — es la puerta de entrada directa al motivo por el que el aprendizaje profundo necesita GPU.
El gauss del módulo 2 —0.0625,0.125,0.0625;0.125,0.25,0.125;0.0625,0.125,0.0625— es exactamente el producto externo de [1,2,1] con sigo mismo, dividido por 16. Eso significa que se puede aplicar como dos pasadas de un kernel 1×3, una horizontal y otra vertical, en vez de una sola pasada 3×3. Por píxel, eso son 3+3=6 multiplicaciones en vez de 9: no es un detalle de implementación, es la razón por la que casi ningún desenfoque gaussiano de producción se calcula como matriz cuadrada.
Estas son las traducciones que usamos, con el término original al lado para que puedan googlear.
P5 es el magic number de PGM binario.