Patrón generativo en p5.js
Realizado en 2025Packaging de jabones con un patrón vivo inspirado en hojas y naturalidad.
01 — Idea y objetivo
Desarrollar un patrón generativo para packaging de jabones artesanales que transmita frescura y naturalidad desde la materia prima.
Solución de diseño: un solo elemento geométrico repetido y mutable (“menos es más”), con variaciones controladas que mantienen coherencia y evitan repetición evidente.
02 — Lenguaje visual
Formas geométricas inspiradas en hojas: cada unidad nace de square() con esquinas redondeadas y una diagonal que actúa como nervadura.
Paleta corta: lavanda empolvado, verde salvia y un crema tierra. Transparencias variables para dar sensación orgánica.
03 — Demo generativa
Variables para cuadrícula, tamaño y color; condicionales para alternar orientación de las hojas; aleatoriedad en transparencia para que cada ejecución sea única.
El patrón mantiene armonía gracias a la retícula fija (8x8) y a la paleta de tres tonos, mientras que la orientación y opacidad se mezclan para evitar repetición evidente.
Pulsa Play para generar nuevas variaciones.
04 — Mockups finales
Aplicación del patrón sobre el jabón y dos derivados (totebag y neceser) obtenidos tras ejecuciones consecutivas del código con variaciones de color y transparencia.
05 — Landing animada
Versión web con las interacciones del boceto: logo con vaivén ondulante (su velocidad cambia aleatoriamente al pulsar cualquier tecla), menú y botón crecen al hover, y la tecla también cicla los mockups (jabón, neceser, bolsa). Un mismo gesto controla cambio de imagen y ritmo del logo.
Gracias por visitarme y explorar este proyecto generativo.