Fork of Changing Colors with Waves

100%

Fork of Changing Colors with Waves

✓ Published0🌍 Public

Last edited Jul 17, 2021

Created on Jul 17, 2021

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.

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

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

87% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas piece generates a shifting grid of glowing colored circles that ripple outward in a spiral formation, creating a dynamic, screensaver-like visual effect. The pattern continuously redraws over a semi-transparent black background, leaving faint trails as the positions and radii of the circles evolve over time. Rendering uses the Canvas 2D API with `getContext('2d')` and `requestAnimationFrame` for smooth animation. Each circle’s color, size, and location are computed from sine and cosine functions of grid coordinates and a steadily incrementing time variable, producing a complex, mathematically driven display.

AAndre J Denais

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

84% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization displays a grid of 30 by 30 circles that orbit and pulse in a rhythmic, colorful pattern, creating a hypnotic screensaver effect. Circles move along circular paths with varying radii and speeds, while their size and color shift over time based on sine functions tied to the animation clock. The canvas API handles all rendering, with requestAnimationFrame driving the continuous loop and a semi-transparent fillRect creating motion trails. The code uses no external libraries, drawing directly as a fork of the original mathematical patterns tutorial.

Ggrateful4music@hotmail.com

83% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization, built with the Canvas API, generates a shifting field of colored circles arranged on a grid. The code applies mathematical functions to coordinates and radii, creating rhythmic patterns where circle positions and sizes oscillate over time. As the animation loops, it layers translucent dark rectangles to create a fading trail effect, while the circles' colors cycle through based on their grid position and the current time value. The entire canvas resizes dynamically to match the window dimensions, with the pattern always centered and scaled proportionally.

MMauricio García Benítez

82% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

The visualization displays an animated, generative pattern of colorful circles arranged in a grid. It simulates a modern-day screensaver with dynamic motion, where each circle's position, size, and color shift over time. The piece uses Canvas API calls for drawing, including `beginPath`, `arc`, and `fill`, and relies on `requestAnimationFrame` to drive the continuous animation. The effect is created through mathematical functions, such as sine and cosine, that calculate coordinates and radii based on grid indices and a time variable.

RRSSBDAE

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

80% match