GENERATIVE SYSTEMS, INTERACTION DESIGN
Glass Gardens: Interactive Experience
Glass Gardens is an interactive visual experience inspired by stained glass and large greenhouse windows. The project explores how analog source material and digital generative systems can work together to create a customizable, living window that shifts over time. Designed as a scalable flexible system vs. a fixed composition, the experience can be mapped onto and adjusted for different window shapes and sizes.
Click to see the full process deck, or view highlights below.
VIEW PROCESS DECK
Project Type:
Visual/Interaction Design
Role:
Visual Designer, Creative Technologist
Tools:
TouchDesigner, Adobe Illustrator
Timeline:
3 weeks
01
My Main Goal
Design an interactive experience, combining analog film photography processes, digital generative systems, and real-time reactive motion.
The Concept: Inspired by traditional stained glass windows (structure, refraction, texture, etc.), the project moves away from treating glass as a static surface toward a customizable, interactive, and scalable visual system.
Format: Designed as a flexible system adaptable to different window shapes and sizes. Prototype visuals were developed in a 1:1 (square) format and presented as an immersive, full-screen experience.
02
My Approach
The Analog Origins: The process began in the darkroom, not the computer. I created a series of photograms using transparent negatives and opaque objects to build a library of high-contrast textures.
Digitization: These prints were scanned and imported into TouchDesigner, and standardized into a unified square format.
Pane Layout: Designed a layout where the black negative space of the photograms acts as the "lead" holding the glass together.
03
The Interaction
The experience pairs scanned photograms and film photography with generative textures, a modular grid, and real-time user input and choices from the viewer to form a custom stained glass window.
Constantly Calming Motion: Without any user input, the glass texture flows slowly across the surface while the generative texture system use multiple photograms and noise to create a continuously shifting texture.
Color Reveal: Hovering over a pane reveals the clear, scanned film photos of the conservatory, allowing the viewer to "look through" the art and see the physical space that inspired it through colors inspired from traditional stained glass windows.
04
Results & Takeaways
The final experience blends analog source material with digital processing and code, resulting in a dynamic, immersive system that can scale from a single window to larger spaces.
The Final Build: Photograms provide the base imagery, and the generative system creates the glass texture and movement. The glass texture motion is flowy and ambient, inviting without being distracting to draw people.
Analog + Digital: Using real photograms provided a texture that pure algorithms can't replicate, and replicating displacement digitally was the bridge that allowed me to "animate" a physical piece of paper.
GENERATIVE SYSTEMS, INTERACTION DESIGN
Glass Gardens: Interactive Window Experience
Glass Gardens is an interactive visual experience inspired by stained glass and large greenhouse windows. The project explores how analog source material and digital generative systems can work together to create a customizable, living window that shifts over time. Designed as a scalable flexible system vs. a fixed composition, the experience can be mapped onto and adjusted for different window shapes and sizes.
Click to see the full process deck, or view highlights below.
VIEW PROCESS DECK
Project Type:
Visual/Interaction Design
Role:
Visual Designer, Creative Technologist
Tools:
TouchDesigner, Adobe Illustrator
Timeline:
3 weeks
01
My Goal
Design an interactive experience, combining analog film photography processes, digital generative systems, and real-time reactive motion.
The Concept: Inspired by traditional stained glass windows (structure, refraction, texture, etc.), the project moves away from treating glass as a static surface toward a customizable, interactive, and scalable visual system.
Format: Designed as a flexible system adaptable to different window shapes and sizes. Prototype visuals were developed in a 1:1 (square) format and presented as an immersive, full-screen experience.
02
The Process
The Analog Origins: The process began in the darkroom, not the computer. I created a series of photograms using transparent negatives and opaque objects to build a library of high-contrast textures.
Digitization: These prints were scanned and imported into TouchDesigner, and standardized into a unified square format.
Pane Layout: Designed a layout where the black negative space of the photograms acts as the "lead" holding the glass together.
03
The Interaction
The experience pairs scanned photograms and film photography with generative textures, a modular grid, and real-time user input and choices from the viewer to form a custom stained glass window. The video above shows the first test run of the system's prototype.
Constantly Calming Motion: Without any user input, the glass texture flows slowly across the surface while the generative texture system use multiple photograms and noise to create a continuously shifting texture.
Color Reveal: Hovering over a pane reveals the clear, scanned film photos of the conservatory, allowing the viewer to "look through" the art and see the physical space that inspired it through colors inspired from traditional stained glass windows.
04
Results & Takeaways
The final experience blends analog source material with digital processing and code, resulting in a dynamic, immersive system that can scale from a single window to larger spaces.
The Final Build: Photograms provide the base imagery, and the generative system creates the glass texture and movement. The glass texture motion is flowy and ambient, inviting without being distracting to draw people.
Analog + Digital: Using real photograms provided a texture that pure algorithms can't replicate, and replicating displacement digitally was the bridge that allowed me to "animate" a physical piece of paper.