Wave 2

100%

✓ Published0🌍 Public

Last edited Jul 17, 2025

Created on Jul 17, 2025

Forked from Fork of Fork of HTML Starter

An animated sine wave travels across the canvas, its phase advancing with each frame to create a smooth, continuous motion. The wave’s amplitude, frequency, and speed are fixed, and a static horizontal center line is drawn for reference. The animation relies on the Canvas `path` and `lineTo` API, with `requestAnimationFrame` driving the update loop. The code uses a simple sine function to map x-coordinates to y-positions, and the drawing is rendered in a teal stroke against a white background.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This animated visualization demonstrates a sine wave traveling across an HTML5 Canvas, with a horizontal center reference line and adjustable wave parameters for amplitude, frequency, and speed. The code uses the Canvas API’s `getContext('2d')` for drawing, `requestAnimationFrame` for smooth animation, and `addEventListener` with the window resize event to maintain a responsive canvas. The wave’s phase updates each frame, creating the motion effect against a white background with a subtle border and shadow.

KKareena

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

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

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

74% match

Loading thumbnail…

Changing Colors with Waves

Rows of circles ripple horizontally across a 960 by 500 pixel canvas, their horizontal positions perturbed by a sine wave and their sizes pulsing with time. Each circle is drawn using the Canvas `arc` and `fill` methods, with its color switching between red and blue depending on whether its current size exceeds a threshold. The animation runs via `requestAnimationFrame`, advancing a time variable `t` in increments of 0.1 to drive the motion.

Aaishwarya8615

72% match

Loading thumbnail…

Peaceful Waves

Eight semi-transparent sine waves, each with a distinct amplitude, frequency, color, and phase, float across a blurred gradient background as a live SVG animation. The waves continuously shift leftward, with phases advancing per frame via `requestAnimationFrame`. Rendered using D3 v5’s `d3.line` and `d3.range` to generate smooth paths, each wave’s path is recalculated and updated on every frame. The animation, made with `d3.curveNatural`, runs over a glassmorphism-styled SVG canvas.

CCurran Kelleher

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

71% match

Loading thumbnail…

sin wave and move

This example animates a set of 15 circles that move along a sine wave across the screen, with the wave’s phase shifting over time. Each circle’s y-position is computed from the sine of its index plus a time variable, updated every second using a `setInterval`. The visualization uses D3’s `select`, `range`, and data-join with `.join('circle')` to create and update SVG circles, while styling is handled by inline CSS attributes. The animation runs on an SVG canvas sized to the full browser window.

JJetlinZ

71% match