Project Direction
This piece begins with a longing for land, the pull toward a place that isn't just geography but memory. At its center is a field of wind-blown grass, color and thickness and length shifting over time as though the field itself were breathing, alive with the same restlessness as memory. Hidden inside that movement is the outline of a specific New York City neighborhood, its streets and blocks quietly shaping how the grass grows. Nature and city, memory and place, drawn from the same root.
The lines that move through the grass aren't just wind, they're memory made visible, motion carrying the trace of a place that's been lived in, walked through, held onto. When a viewer's hand enters the frame, a filter finds the fingers and traces those same lines across the skin, city becoming skin, skin becoming map. It's a quiet cue: the viewer isn't only watching the landscape, they're being written into it. To look at the grass is to become part of what it remembers: human, nature, and the wider universe folded into the same vivid, moving line.
01 . CONTEXT
System Story
Grass, memory, and a city block folded into one growing
02 . METHOD
Prototype Probe
How noise, map data, and hand-tracking are built into one system.
03 . REFLECTION
Human Response
hands enters the frame, and the map is traced across the skin.
Human Response
The interactive filter in action: a hand enters the frame, and the same lines that move through the grass are traced across the fingers.
Prototype Probe
How to Achieve
Dynamic wind-blown grass:
Use Perlin noise to drive natural, non-repeating motion. Let color, thickness, and length evolve continuously rather than looping, so the field reads as alive rather than animated.
Map integration:
Convert the chosen NYC area into geographic data (street lines, block shapes) and use it to steer how grass is distributed and grown — density and direction following the map rather than sitting on top of it.
Hand tracking and interaction:
Use a hand-tracking library to detect when a hand enters frame, then project the map lines onto the fingers in real time, tying the interaction to touch rather than passive viewing.
Animation and rendering:
Update each blade's state every frame inside draw(), rendering position, color, and length together so the field reads as one continuous motion rather than isolated objects.
Interaction handling:
Listen for hand presence and movement, and let the grass's visual behavior respond with subtle shifts in color or motion, so the piece feels responsive rather than scripted.
# First Sketch
A first pass in p5.js: 200 generative lines, each seeded from a random point. Every frame, each line extends slightly along an angle drawn from Perlin noise: a small, simple rule that produces something that reads as wind. It's the seed the rest of the piece grows from.
Creative Technology · Live p5 Sketch
Interactive Systems Lab
Back to Portfolio Gallery