Changing Colors with Waves

100%

Changing Colors with Waves

✓ Published0🌍 Public

Last edited Sep 24, 2019

Created on Sep 24, 2019

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.

AI-generated description

A grid of moving and colored circles.

From "Mathematical Patterns" tutorial given at MIT on July 28, 2013.

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Messing around with Sine Wave Circles

Four overlapping sine and cosine waves are rendered as horizontal rows of blue, crimson, turquoise, and orange circles. Each wave uses a separate D3 group and a `d3.timer` to animate the vertical positions of 50 circles per row in real time. The animation is driven by `Math.sin` and `Math.cos` functions with a shared time parameter, creating contrasting phase-shifted motion across the four color-coded sets. Circles are positioned using D3’s data join and `attr` updates, with an SVG canvas sized 960 by 500 pixels.

SSebastian Barrett

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

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

74% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization displays a grid of circles that ripple outward in concentric, rotating patterns resembling a living mathematical kaleidoscope. The code, written by hotdoujiang, generates each circle’s position and radius using trigonometric functions of a continuously incrementing `time` variable, while colors shift through an RGB spectrum based on grid coordinates. The rendering uses the raw Canvas 2D API with `fillRect` to create a fading trail effect and `arc` calls to draw individual circles. The pattern adapts to the window size, recalculating dimensions and offsets as the browser resizes.

Hhotdoujiang

74% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas visualization generates a shifting spiral of colored circles that expands outward in a grid-like pattern. The animation continuously updates using `requestAnimationFrame`, with each circle’s position and radius computed from trigonometric functions of grid coordinates and a slowly advancing time variable. Colors derive from sine-based RGB values, while a semi-transparent black overlay creates a fading trail effect. The code relies solely on the Canvas 2D API, using `getContext('2d')`, `arc`, and `fillRect`, with no external libraries.

RReyden Harris

73% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. The code maps a 30×30 grid of points through sine and cosine functions using time-based parameters, causing the positions and sizes of the circles to shift continuously. Each frame applies a semi-transparent black overlay before redrawing, creating fading trails that enhance the motion effect. The rendering uses the Canvas 2D API’s `arc()` and `fillRect()` methods, with colors computed from sine waves tied to the grid position and animation time. The visualization is inspired by a mathematical patterns tutorial and runs as an infinite loop via `requestAnimationFrame`.

PPeter S

73% match