Ciudad QR es un experimento de creative coding: metes un enlace y, en vez de un cuadrado en blanco y negro, obtienes una ciudad 3D que gira sobre sí misma y que —vista desde arriba— sigue siendo un código que tu teléfono escanea de verdad. No empezó como un proyecto, sino como una pregunta tonta que no me quitaba de la cabeza: ¿cómo funciona exactamente un QR?
Todo empezó con una pregunta tonta
El creative coding es eso: dejar que la curiosidad mande y usar el código como material, no como medio para un fin «útil». Yo escaneo QRs todos los días —un menú, un billete, una wifi— sin pensar ni un segundo en qué son. Hasta que un día me paré a mirarlos: ¿por qué ese patrón concreto de cuadraditos? ¿Qué hay ahí dentro? ¿Por qué unos son más densos que otros?
Tirar de ese hilo me llevó mucho más atrás de lo que esperaba. Para entender un QR, primero tuve que entender de dónde viene la idea de convertir información en marcas que una máquina sabe leer. Y esa idea es vieja. Muy vieja.
Antes del QR estuvo el Morse
Me gusta el Morse. Tiene algo honesto: es el mínimo absoluto de codificación. Solo dos símbolos —el punto y la raya— y un puñado de reglas de tiempo (una raya dura como tres puntos, la separación entre letras como tres, entre palabras como siete). Con eso basta para mandar cualquier texto por un cable, una linterna o un golpe en una pared.
Lo genial es que el Morse ya resuelve el problema de fondo de todos los códigos que vinieron después: cómo traducir un alfabeto a una secuencia de marcas que no dependa del idioma ni de la vista, solo de saber leer dos estados —hay señal / no hay señal—.
Cuando lo dibujas entero, el Morse ya parece un primo lejano de un código de barras: una tira de marcas anchas y estrechas. La diferencia es que el Morse se lee en el tiempo (una tras otra) y el código de barras en el espacio (todas a la vez). Ese salto —de leer en el tiempo a leer de un vistazo— es exactamente lo que pasó a mediados del siglo XX.
Del punto y la raya al código de barras
La leyenda cuenta que uno de los inventores del código de barras, Norman Woodland, estaba pensando precisamente en el Morse cuando se le ocurrió la solución: si estiras los puntos y las rayas hacia abajo, hacia arriba, convirtiéndolos en líneas verticales de distinto grosor, obtienes algo que una máquina puede leer de un solo barrido óptico. El punto y la raya dejan de leerse en el tiempo y pasan a leerse en el espacio.
Me pareció tan bonito que quise verlo. Un mensaje en Morse que, literalmente, se estira en vertical hasta volverse un código de barras. Y como al final de esta historia está el QR, dejé que el código de barras diera un paso más y cristalizara en uno:
Un QR es solo texto disfrazado de imagen
El código de barras clásico es unidimensional: solo usa el eje horizontal, así que guarda poca información (un número corto). El QR —Quick Response, inventado en Japón en 1994 para trazar piezas de automóviles— da el salto a dos dimensiones: usa el alto y el ancho a la vez, con sus tres cuadrados de las esquinas para orientarse y su corrección de errores para sobrevivir a un arañazo.
Pero por debajo es la misma idea del Morse, solo que mucho más densa: un QR es una forma de traducir un campo alfanumérico —un texto, un enlace— a algo gráfico que un software sabe interpretar. Cada módulo (cada cuadradito) es un bit: oscuro o claro, uno o cero. El patrón que ves no es decorativo; es tu enlace, escrito en un idioma de cuadrados.
Entender eso —que un QR es un enlace hecho geometría— fue el clic. Porque justo por esa época andaba aprendiendo sobre otra cosa completamente distinta.
Del metaverso a una ciudad
Estaba leyendo sobre el metaverso, y una frase se me quedó dando vueltas: que el metaverso, en el fondo, no son más que direcciones. Sitios a los que vas. Y si cada web es una dirección, y cada dirección es un lugar al que entras… cada web es, en cierto modo, un pequeño mundo. Una ciudad.
Se me cruzaron las dos ideas: si un QR ya es la representación geométrica de un enlace, y un enlace ya es una especie de ciudad… ¿por qué no hacerlo literal? Coger la cuadrícula del QR y extruir cada módulo oscuro hacia arriba, cada uno con una altura distinta, hasta que el plano en blanco y negro se convierta en un skyline. Los cuadrados dejan de ser bits y pasan a ser edificios. El enlace se vuelve una ciudad.
Lo mejor es que no hay que elegir entre «bonito» y «funcional»: si la miras desde arriba, con una cámara sin perspectiva, los tejados vuelven a formar el patrón plano del QR original. Sigue escaneando. La ciudad es el código.
Cómo se le da vida
Un montón de cajas grises extruidas no es una ciudad; es una hoja de cálculo en 3D. Lo que la hace sentir viva es todo lo que le pasa por encima, y casi nada de eso está «dibujado» a mano: es procedural, generado por código a partir del propio enlace.
- Texturas procedurales: los tejados, las ventanas encendidas en los laterales de los edificios, el suelo con sus aceras, carreteras, césped y agua. No son imágenes; son reglas que un shader evalúa píxel a píxel.
- Elementos que dan vida: autos miniatura que recorren las calles, algún árbol, gente diminuta. Detalles que le dan escala y movimiento sin robar protagonismo al código.
- Shaders y luz: la luz del sol o de la luna, las sombras que proyectan los edificios, y un bloom opcional que hace brillar las ventanas encendidas como una ciudad de noche.
Y como todo se deriva del enlace de forma determinista, el mismo enlace da siempre exactamente la misma ciudad. Tu dirección tiene su skyline, y solo el suyo.
La ciudad, en vivo
Aquí está la pieza funcionando, con la ciudad que genera el enlace de esta misma web. Cambia el estilo (día, atardecer, noche), enciende o apaga la vida, los shaders o el bloom, o tócala para que gire hasta ponerse en vista cenital: ahí es un QR que puedes escanear con el teléfono. (Esto es solo el visualizador; para meter tu propio enlace y generar tu ciudad, entra al proyecto.)
La ciudad 3D de leonelkrea.com, en vivo. Cambia el estilo, la vida o los shaders, o tócala para girarla hasta el código escaneable. Aquí sin el generador: para meter tu propio enlace, ve al proyecto.
Anatomía de la ciudad
Ya que tienes la ciudad delante, vale la pena desmenuzarla. Si un QR es una ciudad, sus partes cobran sentido de golpe: no todo son datos, buena parte es estructura —señales fijas que ayudan al escáner a orientarse antes de leer nada—. Pasa el ratón (o toca) por cada zona:
Patrones de posición. Las tres plazas mayores. Son lo primero que busca el escáner: le dicen dónde está la ciudad y cómo está girada, desde cualquier ángulo.
¿Quieres entender los QR a fondo?
Si te quedas con ganas de más, hay un explorable interactivo buenísimo que desmenuza cada bit de un QR: How the heck do QR codes work?, de PerThirtySix. Muy recomendable para ver cómo se codifican los datos, el enmascarado y la corrección de errores paso a paso.
La ciudad puede perder edificios
Hay algo que hace casi mágicos a los QR: aguantan el maltrato. Puedes tapar una esquina, arrugarlos o ponerles un logo encima, y se siguen leyendo. No es suerte: cada QR guarda información redundante mediante un sistema de corrección de errores (Reed-Solomon). Traducido a la ciudad: puedes derribar unos cuantos edificios y el enlace sigue estando ahí.
Cada QR lleva corrección de errores (Reed-Solomon): guarda copias redundantes de la información. El nivel que usa la Ciudad aguanta hasta ~15% de módulos perdidos y sigue leyéndose. Por eso puedes tirar edificios (o poner un logo encima) y la ciudad se sigue escaneando.
De una pregunta tonta sobre unos cuadraditos a una ciudad que es, a la vez, un enlace, una escultura y un código escaneable. Eso es, para mí, el creative coding: seguir la curiosidad hasta que el código te devuelve algo que no esperabas.
