Skip to main content
SimilarExport ZIP
100%

Fork of Mathematical Graphic Patterns

✓ Published0🌍 Public
RRSSBDAE
Last edited Jan 11, 2023
Created on Jan 11, 2023

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.

AI-generated description

A modern day screensaver!

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
94% 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
93% 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
93% 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
90% 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
90% 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
90% match
Loading thumbnail…

Mathematical Graphic Patterns

A grid of 900 circles animates as a colorful, ever-changing mathematical pattern. The code uses Canvas API methods and `requestAnimationFrame` to continuously redraw the visualization. Each circle's position is calculated using sine and cosine functions based on its grid coordinates and a global time variable, while its radius and color shift dynamically. A semi-transparent black rectangle overlays the canvas each frame to create a fading trail effect, producing a modern, generative screensaver aesthetic.

Pprashant birajdar
89% match
Loading thumbnail…

Mathematical Graphic Patterns

Mathematical Graphic Patterns is an animated canvas screensaver that generates a shifting grid of colorful circles. The code uses the Canvas 2D API via `canvas.getContext('2d')` and relies on `requestAnimationFrame` for continuous motion. Each circle’s position, size, and RGB color are computed from sine and cosine functions of its grid coordinates and a slowly incrementing `time` variable, creating a flowing, kaleidoscopic effect. A partially transparent black overlay fades older frames, leaving trails that enhance the visual complexity.

CConvert-Jade
89% match