Wave Motion

100%

✓ Published0🌍 Public

Last edited Aug 7, 2019

Created on Nov 29, 2015

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.

AI-generated description

A recreation of a lovely GIF by Dave Whyte. As the Exploratorium explains, “Wave motion at the surface of water is made up of small circular motions of parcels of water.”

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Circle Wave

Three semi-transparent rings in cyan, magenta, and yellow form undulating circular waves around a shared center. Each ring’s radius oscillates based on a cosine function modulated by time, creating a continuously morphing, layered pattern with a darken blend mode. The animation uses `d3.radialLine` to generate the wave paths from an array of 200 angles, while `d3.timer` drives the redraw of each SVG path every frame. The code relies on D3 v4’s SVG rendering and the `mix-blend-mode` CSS property to composite the overlapping strokes.

Mmbostock

80% match

Loading thumbnail…

Wave Simulation

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.

CCurran Kelleher

77% 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

77% match

Loading thumbnail…

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo

77% match

Loading thumbnail…

Sine Wave Circles

A grid of 30 circles animates in a sine wave pattern, with each circle’s vertical position oscillating over time to create a flowing, wavelike motion across the screen. The wave’s frequency and amplitude are driven by a time-based function, with circles shifting smoothly as the animation progresses. Built with D3 v7, the visualization uses an SVG container and selects all circles to update their `cy` attributes via D3’s `timer` and `range` APIs. The example is a direct port of a p5.js sine wave demonstration, rendered entirely with SVG elements.

HHeisenberg

77% match

Loading thumbnail…

Sine Wave Circles

A row of white circles animates vertically to form a flowing sine wave. The visualization uses D3 v4 to bind an array of 40 numbers to SVG circle elements, positioning each along the x-axis. A `d3.timer` continuously updates each circle’s y-coordinate based on the sine of its index plus elapsed time, creating the wave effect. The circles are evenly spaced with a fixed radius, rendered on a black background.

CCurran Kelleher

76% match

Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais

75% match

Loading thumbnail…

Sine Wave Circles Playground

A grid of 300 white circles forms a static horizontal row that animates vertically as a sine wave, creating a fluid, undulating pattern across a black background. The animation uses D3 v7's `d3.timer` to continuously update each circle's `cy` attribute based on the sine of its index and elapsed time. Written in ES6 and ported from an older bl.ocks.org example, this SVG-based playground demonstrates how math functions can drive simple shapes into organic motion.

AAndre J Denais

75% match