Skip to main content
SimilarExport ZIP
100%

Fireworks on Canvas

✓ Published0🌍 Public
Bbootshine2
Last edited Sep 26, 2019
Created on Sep 26, 2019

This visualization displays a dynamic field of colorful dots that radiate outward and pulse in a circular pattern, evoking the effect of a fireworks display against a fading black backdrop. The animation is driven by a generative mathematical formula based on a grid of parameters, where each dot’s position is calculated from trigonometric functions of time, and its hue shifts through a rainbow spectrum. The code utilizes the Canvas `getContext('2d')` API for all drawing, with `fillStyle`, `fillRect`, and `arc` methods to render the fading trails and circles, and `requestAnimationFrame` for the continuous animation loop.

AI-generated description

Revision of the "modern day screensaver." added random jitter and moved the center so that it looks like fireworks.

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

MIT Licensed

Similar vizzes

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
77% 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
77% 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
77% match
Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade
76% 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
76% match
Loading thumbnail…

Creative coding using React & D3s

An animated, colorful particle field derived from a “Mathematical Patterns” tutorial, rendered continuously via Canvas `requestAnimationFrame`. The code generates a grid of circles whose radius and color shift over time, creating a rippling, screensaver-like effect. It uses React-style animation loops and the Canvas API’s `arc`, `fillStyle`, and `clearRect` methods, with no external D3 libraries—pure JavaScript and Math functions drive the pattern.

BBizmundo
76% 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
76% match
Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel
76% match