Wave Simulation

100%

Wave Simulation

✓ Published0🌍 Public

Last edited Oct 9, 2025

Created on Jul 5, 2019

An interactive wave simulation animates a one-dimensional fluid surface using the Canvas 2D API. The animation runs via `requestAnimationFrame`, rendering a filled water silhouette defined by a grid of 150 cells whose heights evolve through neighbor-based velocity updates, dampening, and mass conservation correction. Clicking or dragging the mouse pulls the water surface directly toward the cursor. The underlying physics model uses simple spring-like forces between adjacent cells, with pull strength and dampening factors controlling the motion.

AI-generated description

Interactive simulation of one dimensional fluid waves.

Try clicking & dragging!

The original wave simulation was done in 2012, part of HTML5Examples (source).

I just went through and upgraded the code to be more modern. Fun!

MIT Licensed

Similar vizzes

Loading thumbnail…

1D Wave Simulation

A 1D wave simulation visualizes the propagation of a disturbance across a row of connected cells, rendered as an animated line on an HTML5 Canvas. The simulation initializes a single pulse and then models wave motion by having each cell’s velocity influenced by its neighbors, with dampening and mass conservation corrections. Users can interact by clicking and dragging the mouse to pull the wave surface, altering the height of nearby cells. The code uses the Canvas 2D API for drawing and custom event listeners for mouse interaction, with a requestAnimationFrame loop driving the animation.

CCurran Kelleher

79% match

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Mmbostock

77% match

Loading thumbnail…

Water Simulation

This example shows an interactive water surface simulation rendered with WebGL on an HTML canvas. The visualization uses D3’s `select` to manage the container and a custom `viz` module that updates the scene on each render. The code initializes the WebGL context and draws a dynamic, undulating water effect, with state managed through a `setState` function to trigger re-renders. It relies on canvas-based WebGL rendering for fluid-like motion, with no external data source beyond the visual simulation itself.

Nnandugali

75% match

Loading thumbnail…

Simple Water Simulation

This example shows a simple water simulation rendered as a full-screen, animated canvas. A static, blue gradient fill is applied based on the texture coordinate’s y-position, creating a uniform water-like surface. The piece uses the WebGL API directly via JavaScript, compiling custom vertex and fragment shaders to control geometry and color. It draws a single quad as a triangle strip and continuously re-renders it via `requestAnimationFrame`, though the color does not change over time.

Nnandugali

73% match

Loading thumbnail…

Water Simulation

This WebGL visualization demonstrates a simulated water surface using Three.js. The code constructs a 10x10 plane geometry, applies a blue wireframe material, and animates its vertices by altering their z-coordinates with a sine function based on time. Each vertex moves independently to create rippling wave-like motion, with the mesh redrawn every frame. The interactive camera, positioned at z=50, provides a perspective view of the undulating terrain, showcasing real-time procedural animation driven by a simple mathematical model.

Nnandugali

72% match

Loading thumbnail…

HTML Canvas Wave Line

This example demonstrates a sine wave pattern drawn on an HTML canvas element, showing how mathematical functions can generate visual curves. The wave oscillates vertically across the 800-pixel-wide canvas, centered vertically with an amplitude of 50 pixels and a frequency controlled by dividing the x-coordinate by 50. The visualization uses the Canvas API's `getContext('2d')` method and `lineTo()` function to plot each point incrementally, advancing horizontally by 2 pixels per iteration. A goldenrod border frames the canvas, while the wave itself is rendered with the default black stroke. No external libraries are used; the implementation relies purely on native JavaScript and the HTML5 Canvas API.

JJack Lyons

72% match

Loading thumbnail…

Fork of Changing Colors with Waves

A grid of circles animates in a wave-like pattern, with each circle's horizontal position and size fluctuating over time. The circles shift color between red and blue based on whether their current size exceeds a threshold, creating a dynamic, pulsing visual field. The example uses the Canvas 2D API, with `getContext('2d')`, `arc()`, and `fill()` to render the circles, while `requestAnimationFrame` drives the continuous animation loop. The pattern is generated procedurally using sine and cosine functions, with no external data source.

CCristina Macaraig

71% match

Loading thumbnail…

Changing Colors with Waves

A grid of colored circles animates in a wave-like pattern, shifting between red and blue based on their size. The canvas rendering shows 40 by 30 circles, where each circle’s horizontal position and radius oscillate with sine and cosine functions over time. The code uses the Canvas API’s `getContext('2d')`, `beginPath`, `arc`, and `fill` methods, with `requestAnimationFrame` driving the continuous animation. Colors change dynamically: circles larger than a threshold appear blue, while smaller ones turn red, creating a pulsing, color-shifting visual effect.

CCurran Kelleher

71% match