Trama · Lab · Generadores visuales

Cómo se construyó Trama

Un generador de patrones repetibles. La diferencia con cualquier ruido bonito es que aquí la baldosa tiene que **cerrar**: el campo se construye solo con senos y cosenos de frecuencia entera, de modo que el valor en el borde derecho es idéntico al del izquierdo por construcción, sin espejar ni desvanecer nada. La distorsión que dobla el patrón usa a su vez otro campo periódico, así que la composición sigue cerrando; y la familia de terrazo, que dibuja formas sueltas, pinta cada una nueve veces en una malla de 3×3 para que lo que sale por un lado entre por el opuesto. El fondo de la página es la propia baldosa repetida, y el conmutador «Ver juntas» dibuja la retícula encima: si el patrón está bien hecho, la línea no revela ningún corte. Cinco familias, cinco paletas, semilla, frecuencia, capas, distorsión, contraste y tamaño de baldosa, más descarga del PNG listo para usar como background-image.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

Qué demuestra

• Repetición garantizada por construcción: todas las contribuciones son sin/cos de 2π·k con k entero, así que f(x+1, y) = f(x, y) exactamente
• La distorsión del dominio también es periódica, de modo que doblar el patrón no rompe la continuidad de los bordes
• Familia de terrazo con envoltura explícita: cada forma se dibuja nueve veces en una malla de 3×3 para que cruce los bordes
• Conmutador «Ver juntas» que superpone la retícula de baldosas para comprobar a ojo que no hay corte
• Cinco familias con carácter propio: moaré por interferencia de dos rejillas, ondas, celosía por valor absoluto con gamma, vidrio por doblado senoidal y terrazo
• Paletas resueltas con una tabla de 256 colores interpolada una sola vez, en lugar de interpolar por píxel
• Contraste aplicado con tanh, que comprime sin recortar los extremos y evita las manchas planas
• El fondo de la página es la propia baldosa repetida vía background-image, con el tamaño de repetición ajustable de 90 a 620 px
• Modo animado que desplaza la fase con requestAnimationFrame bajando la resolución interna a 128 px para mantener el ritmo
• Tres tarjetas de familia con su propia miniatura ya repetida, que cargan sus parámetros en el generador al pulsarlas
• Descarga de la baldosa en PNG lista para usar como background-image con repeat
• Cero dependencias