Skip to main content
SimilarExport ZIP
100%

Mathematical Graphic Patterns

✓ Published1🌍 Public
CConvert-Jade
Last edited Nov 29, 2019
Created on Nov 29, 2019

This example generates an animated, abstract screensaver-like pattern using a grid of circles on an HTML canvas. A 30×30 grid animates each point over time, with positions and radii driven by sine and cosine functions of a continuously increasing time variable, creating swirling, rhythmic motion. The code uses the Canvas API’s 2D rendering context (`canvas.getContext('2d')`) and `requestAnimationFrame` to update frames, with a semi-transparent black overlay to create fading trails. Circle colors shift smoothly through RGB values based on grid position, while the canvas dynamically resizes to the browser window.

AI-generated description

A modern day screensaver!

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

MIT Licensed

Similar vizzes

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

Mathematical Graphic Patterns

A grid of 30 by 30 small circles continuously shifts and morphs in an animated screensaver-like display. Each circle’s position and size are driven by sine and cosine functions of its grid coordinates and a continually advancing time value, producing swirling, geometric motion. The code uses Canvas drawing APIs such as `getContext('2d')`, `beginPath`, `arc`, and `fill` to render the circles, with colors computed via a custom `rgb` function based on grid position and time. The animation runs through `requestAnimationFrame`, and the canvas resizes to match the window dimensions.

DDhruval Patel
93% 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
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
92% 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
91% 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
90% match
Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving, abstract geometric patterns from mathematical formulas. White dots are drawn programmatically based on sine and cosine functions, with positions and speeds influenced by a continuously incrementing time variable. The rendering uses the HTML5 Canvas API’s `getContext('2d')`, `fillRect` for semi-transparent fading trails, and `arc` to draw each circle, creating a complex, shifting web of points that resembles a modern-day screensaver.

CConvert-Jade
89% 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
89% match