Experimentos
Siete juguetes y un título que se desarma. Los hice para ver hasta dónde llega el navegador: sin videos ni capturas, todo corre aquí mismo.
Fluido
Arrastra para remover la tinta.
La velocidad y la tinta viven en texturas de 16 bits dentro de la tarjeta gráfica. En cada cuadro, unos sombreadores transportan el líquido, calculan la presión en 22 pasadas y le quitan lo que lo comprimiría: son las ecuaciones de Navier–Stokes, y por eso salen remolinos de verdad.
- WebGL2
- GLSL
- Texturas de 16 bits
Mascotas en 3D
Te siguen con la mirada. Tócalas y saltan.
No hay modelos ni triángulos: cada píxel lanza un rayo y avanza según una fórmula que dice a qué distancia está la superficie más cercana. De ahí salen las formas, las sombras suaves y el contorno, que aparece donde el rayo pasa rozando una figura.
- WebGL2
- Raymarching
- Funciones de distancia
Enjambre
Cientos de miles de partículas. Pídeles una forma.
Cada partícula se mueve en un sombreador de cómputo de WebGPU: sigue un campo de ruido sin fuentes ni sumideros, o el punto de la figura que le tocó. La estela se acumula en una textura de 16 bits. Si tu navegador no tiene WebGPU, corre una versión más chica en la CPU, y lo dice.
- WebGPU
- WGSL
- Sombreador de cómputo
Arenero
Dibuja con arena, agua, plantas, fuego y lava.
Un autómata celular: cada grano mira a sus vecinos y decide. La arena cae y se hunde en el agua, la planta crece si la riegas, el fuego la quema, la lava con agua se vuelve piedra y el vapor termina lloviendo. Son decenas de miles de celdas en un arreglo de bytes, 60 veces por segundo.
- Canvas 2D
- Autómata celular
- Arreglos tipados
La banda
Cuatro mascotas, dieciséis pasos. Arma un ritmo y compártelo.
No hay grabaciones: el bombo, la caja, el platillo y el bajo se sintetizan con osciladores y ruido filtrado. Las notas se programan con el reloj del audio un instante antes de sonar, así el tempo no depende de lo ocupado que esté el navegador. El ritmo entero cabe en el enlace.
- Web Audio API
- Síntesis de sonido
- Estado en la URL
Tela
Agárrala, dale viento o córtala.
Una grilla de puntos unidos por hilos. Cada punto recuerda dónde estaba en el cuadro anterior (integración de Verlet) y los hilos corrigen su largo varias veces por cuadro. Si un hilo se estira demasiado, se corta.
- Canvas 2D
- Integración de Verlet
- Pointer Events
Póster
Un póster distinto para cada número. Llévate el tuyo.
Cada número es la semilla de un generador de azar: con el mismo número sale siempre el mismo póster, en cualquier computador. Se dibuja como SVG, así que lo puedes descargar como vector o como imagen.
- SVG
- Azar con semilla
- Descarga de archivos
¿Se te ocurre
otro?
Si tienes una idea rara para el navegador, escríbeme. Y si viniste por el trabajo serio, está en los proyectos.