A modernized, high-performance refactor of the classic generative art project Peonía. This version translates the original global p5.js math into a structured React + TypeScript architecture, introducing modern interaction patterns and immersive media.
Peonía Modernized is a digital garden experience. It evolves the original generative flower logic into a scalable web application. Using p5.js in "Instance Mode", the project encapsulates complex 3D math and pixel manipulation within a reactive state management system, ensuring silky-smooth performance and type-safe development.
- 🖼️ Image Injection: Upload your own photos to see them processed by the generative engine with a robust center-crop "Cover" algorithm.
- 🎧 Immersive Audio: Integrated atmospheric audio loop (
music.mp3) with a user-triggered start sequence to comply with modern browser policies. - 🎨 Minimalist UX:
- Desktop: Low-opacity, text-only controls positioned in the top-left for a clean aesthetic.
- Mobile: Accessible slide-in hamburger menu for smaller screens.
- ⚡ Performance First: Optimized with
p.pixelDensity(1)andwillReadFrequentlycanvas contexts to maintain steady 60 FPS even during heavy pixel sorting. - 🔘 Adaptive Rendering: Toggle between
ASCII,DOTS, andPIXELrender modes on the fly.
- Clone the repository.
- Install dependencies:
npm install
- Launch development server:
npm run dev
This project is a tribute to the original creative work by jesusemans. The core generative math and aesthetic inspiration are derived from the original Peonía sketch.
Peonía Modernized es una experiencia de jardín digital. Evoluciona la lógica original de las flores generativas hacia una aplicación web escalable. Utilizando p5.js en "Modo de Instancia", el proyecto encapsula matemáticas 3D complejas y manipulación de píxeles dentro de un sistema de gestión de estado reactivo, garantizando un rendimiento fluido y un desarrollo seguro de tipos.
- 🖼️ Inyección de Imágenes: Sube tus propias fotos para verlas procesadas por el motor generativo con un robusto algoritmo de "Cover" (recorte centrado).
- 🎧 Audio Inmersivo: Bucle de audio atmosférico integrado (
music.mp3) con una secuencia de inicio activada por el usuario para cumplir con las políticas de los navegadores modernos. - 🎨 UX Minimalista:
- Escritorio: Controles de texto con baja opacidad situados en la esquina superior izquierda para una estética limpia.
- Móvil: Menú desplegable lateral (hamburger) accesible para pantallas pequeñas.
- ⚡ Rendimiento Optimizado: Optimizado con
p.pixelDensity(1)y contextos de canvaswillReadFrequentlypara mantener 60 FPS estables incluso durante el procesamiento intenso. - 🔘 Renderizado Adaptativo: Alterna entre los modos de renderizado
ASCII,DOTS(Puntos) vePIXEL(Píxeles) en tiempo real.
- Clona el repositorio.
- Instala las dependencias:
npm install
- Lanza el servidor de desarrollo:
npm run dev
Este proyecto es un tributo al trabajo creativo original de jesusemans. Las matemáticas generativas centrales y la inspiración estética se derivan del boceto original de Peonía.