Experiment
Photography
Sound Design
Creative Coding
Interactive Design
Adobe Illustrator
Davinci Resolve
P5.JS
Rooted in the familiar patterns of Vietnamese ventilation bricks—a quiet yet omnipresent feature of local architecture—“Wondering” captures the passive act of curiosity: the stillness of peeking through patterned barriers, glimpsing fragments of neighbors’ lives.
In contrast, “Wandering” embodies movement. It traces a vibrant, meandering path through the spaces I inhabit—reflecting the active, sensory experience of drifting through my neighborhood, where the everyday becomes quietly poetic.
Inspired by the patterned ventilation tiles in Vietnamese homes, “Wondering” explores the feeling of looking through small windows into neighborhood life. These geometric bricks act as quiet frames, hinting at unseen stories behind walls.
FIRST ITERATION
This generative artwork produces randomized tile-based patterns, aligning with the principles of generative art—visuals created through autonomous systems and code. In its first version, viewers could interact by refreshing the page, entering fullscreen mode, or downloading the image.
- test desired layout
-
experiment with generative canvas
- simple refresh interaction to get new pattern
- only background noise
SECOND ITERATION
Wanting to go beyond passive viewing, I introduced sound interaction: hovering over specific tiles now triggers ambient audio. To achieve this, I rewrote the system using JavaScript Classes, allowing each image tile to store its position and respond to mouse events. Despite technical challenges, I implemented a responsive structure with subtle visual and sound feedback, making the interaction feel more organic and immersive.
- add sound interaction and effect by hovering over each tile
- change cursor design
Inspired by my personal connection to the neighborhood I live in, “Wandering” captures the quiet joy of exploring narrow alleys and noticing people, buildings, flowers, and the small, familiar details of everyday life.
FIRST ITERATION
The first version featured a single image drifting across the frame, starting from a random position. As it moved from left to right of the screen, the sound panned accordingly, creating a subtle sense of motion and presence.
-
test desired layout
-
experiement with generative canvas
-
simple refresh interaction to get new pattern
- background noise pans with the images’ paths
SECOND ITERATION
As the piece evolved, I wanted to allow users to reset the experience with a simple click—without refreshing the page. To achieve this seamless loop of discovery, I combined different mouse functions in p5.js to build an intuitive, responsive interaction.
-
users can actively interact to create unique patterns
-
add an introduction to suggest how to interact