Si has navegado por este blog habrás notado que cada artículo tiene una imagen cuadrada diferente. Un patrón de cubos que parece un código QR pero no lo es. Colores que cambian de un post a otro. Y en el centro, siempre el mismo kanji: 忍.
Esas imágenes no fueron diseñadas manualmente. Fueron generadas por el contenido mismo de cada artículo.
Cómo funciona
Cuando publico un artículo el sistema toma dos datos: el título y la cantidad de caracteres del contenido. Con el título genera un hash criptográfico, una cadena única e irrepetible de caracteres. Ese hash se convierte en un mapa que decide qué cubos de una grilla de 32 por 32 se llenan y cuáles quedan vacíos. Es el mismo principio que usa un código QR real pero sin codificar ningún dato legible. Solo el ADN del texto convertido en forma visual.
La cantidad de caracteres determina el color accent de cada imagen:
Los artículos cortos son dorados. Los de longitud media pasan por azul frío y púrpura. Los más largos son terracota. Y si algún día escribo algo realmente extenso, será verde menta.
El resultado es que cada artículo tiene una huella visual única. Si cambio una sola palabra del título el patrón cambia completamente. Si el artículo crece o se reduce de categoría el color muta. La imagen está viva mientras el texto lo esté.
El kanji del centro
En el centro de cada imagen hay un espacio en blanco con el kanji 忍. Se lee shinobi en japonés. Significa perseverar en silencio, resistir con paciencia, moverse sin ser visto. Es el origen del nombre de este blog y el ancla visual que conecta todas las imágenes entre sí sin importar cuán diferentes sean sus patrones.
Por qué no usar imágenes normales
Podría haber usado fotografías de stock o imágenes generadas con Midjourney para cada post. Pero este blog habla sobre la intersección entre diseño y tecnología. Quería que hasta las imágenes reflejaran esa filosofía. Que no fueran decoración sino datos convertidos en forma. Que cada una contara algo sobre el artículo que representa sin necesidad de leerlo.
También hay una razón práctica. Este sistema es completamente automático. Cuando publico un artículo nuevo las imágenes para los tres idiomas se generan solas. No tengo que buscar fotos, no tengo que abrir Photoshop, no tengo que pensar en qué imagen poner. El contenido se ilustra a sí mismo.
Detalles técnicos
El sistema funciona con PHP y la librería GD. Sin APIs externas, sin JavaScript, sin proceso de build. Cuando se publica un artículo, la imagen se genera sola en milisegundos. Paso 1: Extraer el ADN Cada imagen parte de dos datos: el título del post y la cantidad de caracteres del contenido.$charCount = mb_strlen(strip_tags($content), 'UTF-8');
$titleHash = md5($title . $postId);
$contentHash = sha1($content . $postId);
$colors = [
[200, 170, 100], // dorado (menos de 3000 caracteres)
[100, 170, 200], // azul frío (3000-5000)
[170, 100, 200], // púrpura (5000-7000)
[200, 120, 100], // terracota (7000-9000)
[100, 200, 150], // verde menta (9000+)
];
$colorIndex = min(4, intdiv($charCount, 2000));
$accent = $colors[$colorIndex];
$fullHash = $titleHash . $contentHash . md5($charCount . $postId);
$expandedHash = '';
for ($i = 0; $i < 20; $i++) {
$expandedHash .= md5($fullHash . $i);
}
for ($row = 0; $row < 32; $row++) {
for ($col = 0; $col < 32; $col++) {
$hashChar = $expandedHash[$hashIndex % strlen($expandedHash)];
$hashVal = hexdec($hashChar); // 0-15
$hashIndex++;
if ($hashVal >= 10) {
// Cubo oscuro (valores A-F)
$brightness = 20 + ($hashVal - 10) * 8;
// Rellenar con casi negro
} elseif ($hashVal >= 7) {
// Cubo con color accent (valores 7-9)
// Rellenar con el color determinado por la extensión
} elseif ($hashVal >= 5) {
// Cubo gris claro (valores 5-6)
}
// Valores 0-4: vacío (blanco)
}
}
$centerStart = (32 / 2) - 3;
$centerEnd = (32 / 2) + 3;
for ($row = $centerStart; $row < $centerEnd; $row++) {
for ($col = $centerStart; $col < $centerEnd; $col++) {
imagefilledrectangle($img, $x1, $y1, $x2, $y2, $whiteBg);
}
}
$filepath = "uploads/social/post-{$postId}-{$langCode}.png";
imagepng($img, $filepath, 7);