Vibeset

Curvas de nivel

Un terreno inventado (ruido fractal que se desplaza muy despacio) dibujado solo con sus líneas de altura: una fina cada cierto desnivel y una más gruesa cada cinco, como en un mapa de senderismo. Bajo el puntero el terreno se alza como una colina y las curvas se cierran a su alrededor. Lo que cuesta acertar es el grosor: una curva es donde la altura vale un múltiplo exacto del desnivel, y para que mida lo mismo en píxeles en las laderas suaves y en las abruptas hay que medir cuánto cambia la altura de un píxel al siguiente, que es lo que normalmente hace fwidth. Aquí no se usa porque en WebGL 1 es una extensión: la altura se calcula tres veces y la pendiente sale de la diferencia. El shader entero, ruido incluido, está escrito aquí. Si no hay WebGL queda un degradado fijo.

Y el original de React Bits: Topography

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Topography, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para el fondo de una portada de datos, de mapas, de viajes o de naturaleza, donde el relieve cuenta algo.

Ojo con

Es el que más código tiene de los que analizamos aquí: 58 KB de fuente. Cárgalo de forma perezosa y solo donde se vea.

Accesibilidad

Respeta el movimiento reducido del sistema y recupera el contexto WebGL si el navegador lo pierde. Es decorativo.