← Todos los artículos

N.º 01

La tinta de este sitio

La placa de nuestra página de inicio no es un vídeo. Son las matemáticas del marmoleado: cada gota mueve todos los anillos que ya están en el baño, y dos anillos nunca se cruzan.

Alex Colls Outumuro

Cofundador y CTO · · 3 min de lectura

Estampa 01, Suminagashi. Gotas y peines sobre un baño, sacada al construir el sitio.Pasa el puntero por encima para dejar caer tinta.

En la página de inicio de este sitio hay una placa redonda de tinta marmoleada. Se dibuja al cargar la página, y luego es tuya: toca para dejar caer tinta, arrastra para peinarla. No es un vídeo ni se repite en bucle. Sigue, en tu navegador, las matemáticas de un baño de marmoleado.

Una gota lo mueve todo

En el suminagashi, la forma japonesa de marmolear, se posa un pincel sobre agua quieta y la tinta se extiende en un anillo. La gota siguiente, en el mismo sitio, empuja el primer anillo hacia fuera. El agua clara que cae entre dos gotas deja las bandas pálidas.

Las matemáticas vienen de un artículo de 2012, Mathematical Marbling, de Aubrey Jaffer y sus colegas. Una gota de radio r que cae en c mueve cada punto p de cada anillo que ya está en el baño:

p′ = c + (p − c) · √(1 + r² / |p − c|²)

De esa sola línea salen dos cosas, y gracias a ellas la placa parece de verdad. La tinta conserva su área, y dos anillos nunca se cruzan, por muchas gotas que caigan después.

Dos anillos nunca se cruzan, por muchas gotas que caigan después.

Peines y punzones

Un punzón arrastrado a lo largo de una línea desplaza cada punto z·λ/(d + λ) en esa dirección, donde d es la distancia del punto a la línea. La tinta justo debajo del punzón recorre todo el camino, y el tirón se debilita con la distancia. Un peine de ondas desliza cada punto según un seno de su posición a lo ancho del peine. Esos son los gestos de la partitura que dibuja la placa al cargar, y los de tu puntero cuando arrastras.

Que los anillos no hagan trampa

Cada anillo es un polígono cerrado, dibujado del más antiguo al más reciente. Cuando una gota estira un anillo, se abren huecos entre sus puntos, así que se añade un punto allí donde un lado supera 9 unidades de un baño de 1.000, y se fusionan puntos donde el anillo se comprime. Los anillos que acaban fuera de la placa, o debajo de un anillo que la cubre entera, se olvidan. Sin eso, el baño solo pesaría más con cada gota.

La partitura usa un pequeño generador aleatorio con semilla, así que la placa sale igual en cada carga. Con el movimiento reducido, la placa se trabaja fuera de la vista y se muestra una vez, terminada. Sin JavaScript, ves unos cuantos anillos quietos.

La gota de tu puntero

En el resto del sitio, un anillo fino alrededor de tu puntero cuenta cinco segundos, y luego cae una gota. Esa tinta sigue otro modelo. No es un baño sino una hoja de papel que se bebe la gota: percolación por invasión sobre un campo de ruido, no una simulación de fluidos. El agua corre por delante a lo largo de las fibras, el pigmento la sigue sin llegar tan lejos, y la mancha se deshilacha en pelos y se seca con una línea de marea donde se paró el agua.

Las estampas de este blog

Cada artículo de este blog tiene una estampa sacada del mismo baño. Una partitura corta de gotas y peines se toca al construir el sitio, los anillos se recortan a la hoja y se escriben en SVG, y la página los sirve como simples dibujos. Esta es un suminagashi: anillos, tal como los dejaron las gotas, y un solo trazo de través.

Alex