This note provides an interactive, visual simulation of 2D Shallow Water Ripples using the finite difference method. The simulation allows you to create splashes by clicking and dragging, draw islands/rocks that reflect waves, and observe beautiful interference patterns as ripples propagate and interact.

The simulation uses the 2D damped wave equation (shallow water approximation) on a 200×200 grid, which is rendered at 600×600 pixels for a retro pixelated aesthetic. The water surface height is updated using neighbor-averaging: each cell's height is calculated as the average of its four neighbors minus the previous height, creating realistic circular ripples that propagate outward from disturbances.

You can interact with the simulation in two modes: Splash Water mode (left click/drag) creates ripples by adding height to the water surface, and Draw Island mode allows you to place rocks/islands that act as reflective boundaries. When ripples hit islands, they reflect backward, creating complex interference patterns. The simulation uses pixel-based rendering with pseudo-3D shading based on the water surface gradient, making the water appear wet and realistic with light reflecting off wave crests.

The simulation includes a damping parameter that controls how far ripples travel before fading out, a Rain Mode that automatically drops random splashes to create continuous interference patterns, and controls to reset the water or clear everything including islands. The shading effect calculates the gradient (slope) of the water surface at each point - rising waves appear brighter (catching light) while falling waves appear darker (in shadow), creating the illusion of depth and wetness.

NOTE : The simulation uses the finite difference method with explicit time stepping. The update rule averages the four neighbors and subtracts the previous height, which is equivalent to a 2D wave equation. Damping is applied to simulate viscosity and prevent energy accumulation. The grid is rendered with pixel-perfect scaling (3×) for a retro aesthetic, and the pseudo-3D shading based on surface gradient is crucial for making the water look realistic rather than flat.

Math behind the Simulation

The 2D damped wave equation (shallow water approximation) describes how water height propagates:

∂²h/∂t² = c² · (∂²h/∂x² + ∂²h/∂y²) - γ · ∂h/∂t

where h(x,y,t) is the water height at position (x,y) and time t, c is the wave speed, and γ is the damping coefficient. The simulation uses the finite difference method to discretize this equation on a 200×200 grid with spacing dx = dy.

The explicit finite difference scheme updates each interior point using neighbor averaging:

h_i,jⁿ⁺¹ = (h_i-1,jⁿ + h_i+1,jⁿ + h_i,j-1ⁿ + h_i,j+1ⁿ) / 2 - h_i,j^n-1

After updating, damping is applied: h_i,jⁿ⁺¹ = h_i,jⁿ⁺¹ · damping. Islands are represented as fixed-height cells (h = 0) that do not update and act as reflective boundaries. The shading effect uses the gradient ∇h = (∂h/∂x, ∂h/∂y) to simulate light reflection, with positive slopes (rising waves) appearing brighter and negative slopes (falling waves) appearing darker.

 

Usage Example

Follow these steps to explore 2D water ripples and wave interference:

1. Initial State: When you first load the simulation, the water is calm (all heights are zero). Click the "Play" button to start the simulation. The water will remain still until you create a disturbance.
2. Create Your First Splash: Make sure "Splash Water" mode is selected. Click and drag on the canvas to create a splash. You'll see circular ripples propagate outward from where you clicked. Notice how the ripples expand in perfect circles and how the pseudo-3D shading makes the wave crests appear bright (catching light) and troughs appear dark (in shadow).
3. Observe Wave Propagation: Watch how the ripples travel across the water. Notice that:
   • Ripples expand in circular patterns from the splash point
   • As ripples travel, they gradually fade due to energy loss (damping)
   • The shading effect creates the illusion of depth and wetness
   • When ripples hit the edges, they reflect back
4. Draw Islands and Observe Reflections: Switch to "Draw Island" mode and draw some rocks or islands on the canvas. Then switch back to "Splash Water" mode and create a splash near an island. Watch how the ripples hit the island and reflect backward, creating interference patterns. You'll see constructive interference (where waves add together) and destructive interference (where waves cancel out).
5. Experiment with Energy Retention: Adjust the "Energy Retention" slider. Higher values (0.98-0.99) make ripples travel farther and last longer, while lower values (0.90-0.92) cause ripples to fade quickly. Try creating splashes with different retention values to see how it affects wave propagation distance.
6. Try Rain Mode: Enable "Rain Mode" to watch automatic interference patterns. The simulation will randomly drop small splashes across the water. Observe how ripples from different drops interact with each other and with islands, creating complex, constantly evolving interference patterns. This is particularly beautiful when combined with islands, as you can watch continuous reflections and interference.
7. Create Complex Scenarios: Draw multiple islands in different patterns, then create splashes at various locations. Watch how ripples from different sources interfere with each other. Try creating splashes on opposite sides of an island to see how the reflected waves interact. Experiment with the timing of splashes to create specific interference patterns.
8. Reset and Experiment: Use "Reset Water" to clear ripples while keeping islands, or "Clear All" to start completely fresh. Try different island layouts and observe how they affect wave reflections. Create splashes at different distances from islands to see how reflection patterns change.

Tip: The key visual effect to appreciate is the pseudo-3D shading based on surface gradient. Rising waves appear bright (simulating light reflection) while falling waves appear dark (simulating shadow). This shading effect, combined with the circular wave propagation and reflections, creates the realistic appearance of water ripples. Pay attention to how ripples reflect off islands - this demonstrates wave reflection and interference, fundamental concepts in wave physics.

Parameters

Followings are short descriptions on each parameters

• Interaction Mode: Selects how mouse interaction affects the simulation. Two modes are available:
  • Splash Water: Clicking and dragging adds height to the water surface, creating ripples. The splash has a radius of about 3 grid cells, with intensity decreasing from the center. This is the default mode for creating disturbances.
  • Draw Island: Clicking and dragging places rocks/islands (gray-brown pixels) that act as reflective boundaries. Islands have a radius of about 2 grid cells. When ripples hit islands, they reflect backward, creating interference patterns. Islands remain fixed and do not move with the water.
  You can switch between modes at any time, even during simulation.
• Energy Retention: Controls how much energy ripples retain each step, which determines how quickly they fade out. Higher values (closer to 0.99) mean more energy is retained, so ripples travel farther and last longer before fading. Lower values (closer to 0.90) mean more energy is lost each step, causing ripples to fade quickly. This simulates energy loss due to water viscosity and friction. Default is 0.98. Adjusting energy retention during simulation immediately affects how far new ripples will travel.
• Splash Power: Controls the intensity (strength) of splashes created by mouse clicks or rain drops. Higher values (up to 1.0) create stronger, more energetic ripples that travel farther and create larger disturbances. Lower values (down to 0.1) create gentler, smaller ripples. This parameter affects both manual splashes and rain drops (rain drops use 50% of the splash power). Default is 0.3. You can adjust this in real-time to create different types of disturbances.
• Rain Mode: When enabled, the simulation automatically drops small random splashes every few frames. This creates continuous interference patterns as ripples from different drops interact with each other and with islands. Rain drops are small (radius 2) and use 50% of the current Splash Power setting, appearing randomly across the water surface, excluding island areas. This is useful for observing complex wave interference patterns without manual interaction.
• Grid Resolution: The simulation uses a 200×200 grid for computation, which is rendered at 600×600 pixels (3× scaling) for a retro pixelated aesthetic. Each grid cell represents a small area of water, and the height at each cell is updated based on its four neighbors. The pixel-perfect scaling makes individual pixels visible, giving the simulation a classic retro look while maintaining smooth wave propagation.
• Visualization: The water is rendered with pseudo-3D shading based on the surface gradient (slope). The base color is deep blue, and the shading effect calculates the gradient at each point: rising waves (positive slope) appear brighter (simulating light reflection), while falling waves (negative slope) appear darker (simulating shadow). This creates the illusion of depth and makes the water look wet and realistic. Islands are rendered as gray-brown pixels.

Buttons and Controls

Followings are short descriptions on each control

• Play/Pause: Starts or pauses the water ripple simulation. When paused, you can still interact with the water (create splashes or draw islands), but the water will not update until you resume. The button text changes to "Pause" during simulation, allowing you to pause and resume at any time. You can create splashes and draw islands even while the simulation is running.
• Reset Water: Clears all water ripples (sets all height values to zero) but keeps any islands you have drawn. This is useful when you want to start fresh with new splashes while keeping your island layout. The simulation continues running after reset.
• Clear All: Clears everything - both water ripples and islands. This completely resets the simulation to an empty state. You can then draw new islands and create new splashes from scratch.

Interaction and Visualization

• Mouse Interaction: Click and drag on the canvas to interact with the water. The behavior depends on the selected Interaction Mode:
  • Splash Water Mode: Clicking and dragging adds height to the water surface at the mouse position, creating circular ripples that propagate outward. The splash intensity decreases with distance from the center, creating a natural-looking disturbance.
  • Draw Island Mode: Clicking and dragging places rocks/islands (gray-brown pixels) that act as fixed reflective boundaries. Islands block water movement and reflect incoming ripples, creating complex interference patterns. You can draw islands of any shape by dragging.
  Interaction works whether the simulation is playing or paused.
• Canvas Visualization: The water is rendered using direct pixel manipulation for performance. The 200×200 simulation grid is scaled up 3× to 600×600 pixels, creating a retro pixelated aesthetic. Each pixel's color is calculated based on the water height and surface gradient at that location. The base color is deep blue, with shading applied based on the slope (gradient) of the water surface to create a pseudo-3D effect.
• Pseudo-3D Shading: The key visual feature is the shading effect based on surface gradient. At each point, the gradient (slope) of the water surface is calculated from neighboring cells. Rising waves (positive slope) appear brighter, simulating light reflection off the wave crests. Falling waves (negative slope) appear darker, simulating shadows in the wave troughs. This creates the illusion of depth and makes the water look wet and realistic, rather than just flat blue pixels.
• Wave Propagation: The water height propagates according to the 2D damped wave equation using neighbor averaging. Each cell's height is updated as the average of its four neighbors (north, south, east, west) minus the previous height, creating circular ripples that expand outward. Damping is applied to simulate viscosity, causing ripples to gradually fade out. The simulation updates in real-time using requestAnimationFrame for smooth animation.
• Island Reflections: When ripples hit islands, they reflect backward, creating interference patterns. This is because islands are treated as fixed boundaries (height = 0) that do not update. The neighbor-averaging update naturally creates reflections at these boundaries. You can observe constructive interference (where waves add together) and destructive interference (where waves cancel out) as ripples from different sources interact.
• Rain Mode: When enabled, the simulation automatically drops small random splashes across the water surface. This creates continuous interference patterns as ripples from different drops interact with each other and reflect off islands. The rain drops are small (radius 2) and appear randomly, creating a mesmerizing effect of constantly evolving wave patterns. This is particularly beautiful when combined with islands, as you can watch ripples reflect and interfere continuously.