Water

Apr 2019
HTMLCSSJavaScript

A small attempt at water simulation using waves that propagate over a 2D grid.

Click around on the water to add a drop.

For the keyboard controls to work you may need to click the water first to focus on the embedded app.

Algorithm / Mechanics

I just made it equivalent to a bunch oscillating particles with a fixed position in the plane, but free to move orthogonal (z-dimension). Each particle exert an attractive force on adjacent particles that applies over the z-dimension and is proportional to distance.

There are probably better ways to do this which I could read about but that would ruin some of the challenge.

Technology

Built with raw JavaScript using my own UI library canvasLib.