HIERBA Y RÍOS · PRUEBAS GENERATIVAS

Exploración técnica de un fondo generativo para web. Cada prueba ataca el problema desde una estética y stack distintos. Todas son responsive, con audio procedural (Web Audio API, sin samples) y un seed regenerable.

click una tarjeta · cada prueba abre en pantalla completa · botón nuevo seed regenera
PRUEBA 01
Canvas 2D pixel iso

Tiles isométricos Sims-style con sombras, 4 variantes de árbol (broadleaf, pino, cerezo, tocón), agua animada.

vanilla JSpixel art isoagua + grillos
PRUEBA 02
Pixi.js + GLSL shaders

Escena top-down dibujada enteramente en un fragment shader. Viento, flujo de agua y sparkles animados.

Pixi.js · GLSLanimadoviento + birds
PRUEBA 03
Three.js 3D realista

Terreno con heightmap, briznas de hierba instanciadas que se mecen, agua con shader, árboles low-poly.

Three.js3D ortho isorío + birds
PRUEBA 04
p5.js acuarela

Painterly watercolor: pinceladas, manchas aguadas, ríos con bordes bleed. Composición rebuild con washes claros.

p5.jsacuareladrone + agua
PRUEBA 05
SVG vectorial

Marching squares para contornos de río, patrones SVG, filtros de turbulencia. 100% vectorial, escalable.

SVG nativovectorialviento + birds
PRUEBA 06
rough.js mapa de parque

Líneas sketchy, fills hachured, decoración icónica. Estética mapa-de-parque ilustrado.

rough.jshand-drawnpark birds
PRUEBA 07
Y2K tropical paradise ★

Versión completa: palmeras, caustics, marquee chrome, badges "Click Here", contador. Maximalismo webcore.

canvas + CSSwebcoresynth + dolphins
PRUEBA 07B
Y2K paradise (limpio)

Solo el fondo: islas + palmeras + agua con caustics. Sin marquee, badges, ni contador. Más usable como fondo real.

canvasparadisesynth pad
PRUEBA 08
Three.js iso + shaders animados

Híbrido 02+03: perspectiva iso 3D con todo el terreno animado en GLSL. Agua fluyendo, dappled light, briznas con sway.

Three.js · GLSLiso animadoviento + agua
PRUEBA 09
rough.js bosque denso

Sin río — estanque pequeño y selva. Coníferas, broadleaf, setas, troncos caídos. Más denso y silvestre que la 06.

rough.jsbosqueowl + wind
PRUEBA 10
rough.js nocturno

Paleta noche: luna que ilumina el río, linternas con halo, luciérnagas animadas. Coros de grillos y croar de ranas.

rough.js · canvasnochecrickets + frogs
PRUEBA 11
Forest hex-tile

Inspirado en la app Forest: hexágonos flotantes con clusters de árboles. Multi-bioma (grass, forest, blossom, autumn, snow, water, flower).

Three.jshex tilesforest pad
PRUEBA 12
Three.js cerezos en flor

Variante estacional de 03: cerezos rosados, pétalos cayendo (particles), agua púrpura, koto-like pluck.

Three.jsprimaverapad + koto
PRUEBA 13
Aldea romana dispersa imperium

Variante de 01 con casitas pixel art estilo Imperium dispersas entre la vegetación: muros beige, tejados terracota a dos aguas.

vanilla JSpixel isogrillos
PRUEBA 14
Foro monumental imperium

Variante de 01 con tres edificios monumentales centrales: templo con columnata, foro/basílica con arcos, anfiteatro oval.

vanilla JSpixel isogrillos
PRUEBA 15
Ciudad amurallada imperium

Variante de 01 con muralla rectangular, dos puertas con torres, insulae en grid alrededor del foro central con fuente.

vanilla JSpixel isogrillos
PRUEBA 16
Edificios fractales (shader) imperium

Variante de 02: el shader detecta zonas "ciudad" y dibuja manzanas con calles, tejados terracota cenitales, patios mármol e impluvios.

Pixi.js · GLSLproceduralviento
PRUEBA 17
Mosaico romano imperium

Variante de 02 reinterpretada como mosaico de teselas: foro estilizado central, dos villas laterales, marco con greca/meandro dorado.

Pixi.js · GLSLmosaicoviento
PRUEBA 18
Shader + sprites imperium

Variante de 02 híbrida: el shader pinta el terreno, sprites pixel art de casitas e insulae se posicionan reusando el mismo noise.

Pixi.js · GLSLhíbridoviento
PRUEBA 19
Aldea low-poly 3D imperium

Variante de 03 con casitas low-poly instanciadas: cajas beige con tejado prismático terracota, dispersas en zonas planas.

Three.jslow-polyrío + birds
PRUEBA 20
Urbe romana en grid imperium

Variante de 03 con terreno aplanado en una zona central: insulae en grid, cardo y decumanus marcados, templo monumental en el foro.

Three.jscity builderrío + birds
PRUEBA 21
Monumentos romanos imperium

Variante de 03 monumental: tres edificios grandes en zonas planas — templo con columnata, anfiteatro oval con anillos, arco triunfal con cuadriga dorada.

Three.jsmonumentalrío + birds
PRUEBA 22
Producción vida

La 03 pulida para uso real: pétalos cayendo, pájaros cruzando el cielo, mariposas revoloteando, bladeCount adaptativo para móvil.

Three.jsdetalles vivosrío + birds
PRUEBA 23
Otoño estacional

Variante otoñal de 03: hojas naranjas/rojas/doradas, hierba seca, copas de árbol en mix de tonos cálidos, hojas cayendo.

Three.jsotoñorío + birds
PRUEBA 24
Invierno estacional

Variante invernal de 03: nieve cubriendo el terreno, briznas escarchadas, pinos blancos, agua oscura semi-helada, copos de nieve cayendo.

Three.jsinviernorío + birds
PRUEBA 25
Noche estacional

Variante nocturna de 03: luna con halo iluminando el río, paleta azul oscura, luciérnagas amarillas parpadeando y orbitando sobre la hierba.

Three.jsnocherío + birds
PRUEBA 26
Ruina romana elegante imperium

Variante de 03 con UN solo templo en ruinas integrado en el paisaje: podio, columnas (algunas enteras, otras rotas o caídas), medio frontón derruido, sillares esparcidos.

Three.jsruinarío + birds
PRUEBA 27
Héroe ★ producción

El "boss final": ciclo día/noche automático (amanecer · mediodía · atardecer · noche con luna y luciérnagas), ruina romana opcional, configurable por URL params (?seed, ?ruina=off, ?hour=18, ?speed=120).

Three.jsciclo 24hrío + birds