1D Wave Simulation

100%

1D Wave Simulation

✓ Published0🌍 Public

Last edited Jun 4, 2015

Created on Jun 3, 2015

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.

AI-generated description

A wave simulation using HTML5 Canvas. Click on it!

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1905612&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a><br><a href="http://www.simplehitcounter.com" target="_blank" style="text-decoration:none;">web counter</a></div>

Similar vizzes

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

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

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

69% match

Loading thumbnail…

Wave Packet

This animation shows a red wave packet propagating back and forth across an SVG canvas, wrapped in a semi-transparent blue envelope that traces the pulse’s amplitude. The motion is driven by an explicit time loop with a constant step, reversing direction when the packet reaches the graph’s edge. The code uses d3.line and d3.area with d3.curveBasis to render the signal and envelope paths, while a d3.transition with duration 20 and d3.easeLinear repeatedly restarts itself to update the data. D3 v4 scales map input ranges to screen coordinates.

KKelvinZCH

66% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

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

65% match

Loading thumbnail…

Javascript First Steps 2

A wave of fifteen circles animates across the screen, rising and falling in a sine pattern driven by a continuously incrementing time variable. Using D3 v6, the code selects all circles, binds new data from `d3.range` on each interval, and updates their `cx` and `cy` attributes to create smooth motion. The React-free example renders SVG directly to the body, with the animation updating every 30 milliseconds.

Ccyriltoneatto965

64% match

Loading thumbnail…

Sine wave with line

This example animates a smooth, natural sine wave that undulates across the screen, with a line drawn through its points using a black stroke. The wave is generated from 100 data points, each positioned along the x-axis with a y-coordinate determined by a sine function that shifts over time. Built with D3 v6 in a React framework, the visualization updates every frame using `setInterval` and renders via SVG. The code employs D3’s `line` generator with a `curveNatural` interpolation and animates the wave by incrementing the phase offset `t`.

LLewis Ward

64% match