Where Water Flows
Interactive Web Experience Exploring the Water Cycle

Water is everywhere in our lives: in the rain that hits a window, the bubbles rising in a glass, ponds and waterfalls. Water can be turned into any shape and color. I want to use this project to portray where water exists and it's cycle. Through an interactive website, users scroll and click to experience the natural flow of water. The project is inspired by Emily Dickinson’s poem Summer Shower and opens with the first two stanza:

A drop fell on the apple tree,

Another on the roof;

A half a dozen kissed the eaves,

And made the gables laugh.

A few went out to help the brook,

That went to help the sea.

Myself conjectured, Were they pearls,

What necklaces could be!

Built with p5.js and JavaScript. Illustration in Procreate. The project is intended to use physics simulation from

Daniel Shiffman's The Nature of Code: Simulating Natural Systems with JavaScript. Sound & Github are in progress.

View on Youtube

Visual Design
minimalistic and hand-drawn art in Procreate

Vibecoding

The project references physics simulation from Daniel Shiffman's The Nature of Code: Simulating Natural Systems with JavaScript and coded with assistance from Claude.ai. The project runs with VsCode Live Server.

Missing piece: Worley noice ice cube inner crystal structure
Because of code difficulties, it was a challenge to render the Worley noise at full screen size. Here is a p5.js sketch that's meant to represent a scene that takes the user into to inner structures of an ice cube when it's clicked on.

Sound

Sound sourced from freesound.org. This beaded curtain p5.js sketch is the inspiration for this project.
Click on the canvas anywhere to enable sound
Link to this p5.js sketch