← Tots els articles

Núm. 01

La tinta d’aquest web

La placa de la nostra pàgina d’inici no és un vídeo. Són les matemàtiques del marbrejat: cada gota mou tots els anells que ja hi ha al bany, i dos anells no es creuen mai.

Alex Colls Outumuro

Cofundador i CTO · · 3 min de lectura

Estampa 01, Suminagashi. Gotes i pintes sobre un bany, treta en construir el web.Passa-hi el punter per deixar caure tinta.

A la pàgina d’inici d’aquest web hi ha una placa rodona de tinta marbrejada. Es dibuixa quan es carrega la pàgina, i després és teva: toca per deixar caure tinta, arrossega per pentinar-la. No és un vídeo i no es repeteix en bucle. Segueix, al teu navegador, les matemàtiques d’un bany de marbrejat.

Una gota ho mou tot

En el suminagashi, la manera japonesa de marbrejar, es posa un pinzell sobre aigua quieta i la tinta s’estén en un anell. La gota següent, al mateix lloc, empeny el primer anell cap enfora. L’aigua clara que cau entre dues gotes deixa les bandes pàl·lides.

Les matemàtiques vénen d’un article del 2012, Mathematical Marbling, d’Aubrey Jaffer i els seus col·legues. Una gota de radi r que cau a c mou cada punt p de cada anell que ja hi ha al bany:

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

D’aquesta sola línia en surten dues coses, i gràcies a elles la placa sembla de debò. La tinta conserva la seva àrea, i dos anells no es creuen mai, per moltes gotes que caiguin després.

Dos anells no es creuen mai, per moltes gotes que caiguin després.

Pintes i punxons

Un punxó arrossegat al llarg d’una línia desplaça cada punt z·λ/(d + λ) en aquesta direcció, on d és la distància del punt a la línia. La tinta just sota el punxó fa tot el camí, i l’estirada s’afebleix amb la distància. Una pinta d’ones fa lliscar cada punt segons un sinus de la seva posició a través de la pinta. Aquests són els gestos de la partitura que dibuixa la placa en carregar, i els del teu punter quan arrossegues.

Que els anells no facin trampa

Cada anell és un polígon tancat, dibuixat del més antic al més recent. Quan una gota estira un anell, s’obren forats entre els seus punts, així que s’afegeix un punt allà on un costat supera 9 unitats d’un bany de 1.000, i es fusionen punts on l’anell es comprimeix. Els anells que acaben fora de la placa, o sota un anell que la cobreix sencera, s’obliden. Sense això, el bany només pesaria més amb cada gota.

La partitura fa servir un petit generador aleatori amb llavor, així que la placa surt igual a cada càrrega. Amb el moviment reduït, la placa es treballa fora de la vista i es mostra un cop, acabada. Sense JavaScript, veus uns quants anells quiets.

La gota del teu punter

A la resta del web, un anell fi al voltant del teu punter compta cinc segons, i després cau una gota. Aquesta tinta segueix un altre model. No és un bany sinó un full de paper que es beu la gota: percolació invasiva sobre un camp de soroll, no una simulació de fluids. L’aigua corre al davant al llarg de les fibres, el pigment la segueix menys lluny, i la taca s’esfilagarsa en pèls i s’asseca amb una línia de marea on es va aturar l’aigua.

Les estampes d’aquest blog

Cada article d’aquest blog té una estampa treta del mateix bany. Una partitura curta de gotes i pintes es toca en construir el web, els anells es retallen al full i s’escriuen en SVG, i la pàgina els serveix com a simples dibuixos. Aquesta és un suminagashi: anells, tal com els van deixar les gotes, i un sol traç de través.

Alex