Cada imagen que ves en este blog fue generada por código. No por Midjourney. No por DALL-E. No por un diseñador moviendo píxeles en Photoshop. Cada post tiene una imagen única que nace del contenido mismo, como una huella digital visual que cambia cuando el contenido cambia y permanece idéntica cuando el contenido permanece igual.

Lo construí con PHP y la librería GD. Sin frameworks de generative art. Sin librerías externas. Solo matemáticas, colores y decisiones de diseño traducidas a código.

Por qué construí esto en vez de usar imágenes de IA

La respuesta honesta es que quería algo que fuera mío de verdad. Las imágenes de Midjourney son impresionantes pero son genéricas por naturaleza. Cualquiera con el mismo prompt genera algo similar. Quería que la identidad visual de mi blog fuera tan única como el contenido que publico.

También quería consistencia determinística. Si alguien comparte mi artículo y otra persona lo abre un mes después, la imagen tiene que ser exactamente la misma. Con IA generativa eso no es posible. Con un algoritmo determinístico sí.

Y había una razón práctica. Las imágenes generadas por código pesan menos que las fotos, se escalan sin pixelarse y no tienen problemas de derechos de autor porque literalmente no representan nada que exista en el mundo real.

El algoritmo: del hash del contenido a la imagen

El sistema funciona así. Toma el título del post y genera un hash MD5. Ese hash es una cadena de 32 caracteres hexadecimales que es única para cada título. Luego mapea grupos de esos caracteres a colores, construye una cuadrícula de celdas coloreadas, la expande simétricamente para crear un patrón equilibrado y la renderiza como PNG.

El mismo título siempre produce el mismo hash. El mismo hash siempre produce los mismos colores. Los mismos colores siempre producen la misma imagen. Determinismo puro.

Mapeo de colores: convirtiendo caracteres hex en una paleta cohesiva

Esta fue la parte más difícil desde el punto de vista de diseño. Los primeros intentos producían paletas que parecían ruido visual. Colores aleatorios sin relación entre sí, contrastes brutales que dolían a la vista.

La solución fue restringir el espacio de color. En vez de mapear cada carácter a cualquier color posible, definí rangos de tonos que se mantuvieran dentro de familias armónicas. Un carácter determina el matiz base, otro ajusta la saturación, otro la luminosidad. El resultado son paletas que se sienten intencionadas porque están matemáticamente restringidas a combinaciones que funcionan.

Le di feedback a Claude desde mi perspectiva de diseñador. El contraste es muy bajo entre celdas adyacentes. El centro necesita más peso visual. La paleta necesita sentirse cohesiva no como ruido aleatorio. Claude ajustó el algoritmo basándose en mi feedback visual y después de varias iteraciones los resultados empezaron a sentirse como diseño y no como accidente.

Generación de cuadrícula y simetría

La cuadrícula empieza pequeña. Un grid de 5x5 celdas donde cada celda toma su color del hash. Pero un grid de 5x5 se ve demasiado simple así que el sistema lo expande. Toma la mitad izquierda y la espeja a la derecha creando simetría horizontal. Eso inmediatamente transforma algo aleatorio en algo que parece diseñado.

La simetría es el truco que hace que todo funcione. El cerebro humano busca patrones y la simetría es el patrón más básico que reconocemos. Sin ella las imágenes se veían como errores de rendering. Con ella se ven como íconos abstractos.

Después el sistema limpia el centro de la imagen dejando un espacio que le da respiración al patrón. Sin ese espacio todo se sentía apretado y agresivo.

Renderizado con PHP GD

PHP GD no es una herramienta sofisticada para generative art. Es básica. Creas una imagen, pintas rectángulos, guardas como PNG. Pero esa simplicidad fue una ventaja. No tuve que aprender una librería compleja. Solo tuve que pensar en píxeles, colores y coordenadas.

El render final toma la cuadrícula expandida y pinta cada celda como un rectángulo con su color asignado. Le agrega anti-aliasing en los bordes para suavizar la imagen y la guarda como PNG en una carpeta del servidor. Todo el proceso toma milisegundos.

Cada vez que se crea un post o se actualiza su título el sistema regenera la imagen automáticamente. El admin panel no tiene un botón para esto. Simplemente pasa.

Cómo adaptar este sistema para tus propios proyectos

El concepto es más simple de lo que parece. Necesitas tres cosas: una entrada determinística como un título o un ID, una función de hash que convierta esa entrada en números y un renderer que convierta esos números en algo visual.

No tienes que usar PHP. Puedes hacer lo mismo con JavaScript en el navegador usando Canvas, con Python usando Pillow, o incluso generar SVGs directamente que serían más livianos y escalables.

Lo importante no es la tecnología. Es la idea de que el contenido define su propia identidad visual. Que no necesitas un diseñador para cada imagen ni una IA que invente algo genérico. Puedes construir un sistema que hace que cada pieza de contenido se represente a sí misma.

Eso es diseño generativo con código. Y cualquiera que sepa pensar en sistemas puede construirlo.