Gen-Art Gallery

A rapid-prototyped web application that transforms static generative art into a "living" gallery, running interactive p5.js sketches live in the browser within a fluid, animated React interface.

🚀 The Challenge

Generative art is defined by its living process, yet it's almost exclusively shared as static images or videos. This approach captures a single moment but discards the art's interactive, dynamic soul.

I was frustrated that this potential was being lost. The challenge was to create a gallery that wasn't just a display of art, but a runtime for it. The goal: build a "living" gallery that would run p5.js sketches live in the browser, allowing users to interact with the art as the artist intended.

🛠️ The Solution & Technical Implementation

The project was executed as a two-week rapid-prototyping sprint, focusing on architectural viability and user experience.

• Core Technical Challenge: The <Sketch> Component The primary hurdle was bridging the gap between React's declarative lifecycle and p5.js's imperative, stateful canvas. A naive implementation would cause memory leaks and conflicts with React's DOM rendering.

  • Solution: I engineered a custom <Sketch> component that acts as a safe wrapper.

  • It uses React's useEffect hook to handle the p5.js instance lifecycle:

    • Setup: On component mount, it creates a new p5 instance.

    • Cleanup: It returns a cleanup function in useEffect that calls p5.remove() to safely destroy the instance when the component unmounts, preventing critical memory leaks.

  • It uses useRef to attach the p5.js canvas to a specific DOM node, giving React control over where the sketch lives without interfering with how it runs.

• Fluid UX: The Animated Layout A boring grid would betray the "living" concept. I used Framer Motion to create a fluid, animated layout that felt as dynamic as the art itself.

  • When a user clicks a piece, the AnimateSharedLayout feature smoothly expands the item.

  • The other gallery items fluidly re-flow around the active sketch. This eliminated jarring page loads and kept the user in a seamless, interactive state.

• Scalable Architecture & Rapid Iteration The goal was speed. The entire architecture was built around the <Sketch> component. This robust, reusable component meant that adding a new "feature" (an art sketch) was as simple as writing a new p5.js file and passing it as a prop.

📈 The Outcome & Impact

The project was a resounding personal success, proving the component-based architecture was an incredibly fast and stable way to prototype and showcase creative code.

• Metric: Shipped 10+ unique, interactive art sketches to the gallery in under 14 days.

• Result: Went from a blank repository to a fully functional, animated, and populated "living" gallery.

• Key Learning: This project was a deep dive into bridging two different programming paradigms. It solidified my ability to manage imperative libraries within a declarative React environment and proved the power of component-first design for rapid development.