Perspective Vibrations

100%

Perspective Vibrations

✓ Published0🌍 Public

Last edited Oct 30, 2015

Created on Oct 30, 2015

Two offset grids of blue squares appear to shift rhythmically side to side, creating a faux 3D perspective effect. The far grid uses lighter, smaller squares at full opacity, while the near grid uses darker, larger squares at half opacity. An animation loop redraws the canvas every 15 milliseconds, using D3.js only for its bundled code and the Canvas 2D API's `fillRect` and `clearRect`. Square sizes and positions are computed from a sine wave and depth-based projection formulas.

AI-generated description

Exploring some ways to provide perspective and give a faux 3D effect.

Similar vizzes

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

75% match

Loading thumbnail…

Perspective Transformation II

An interactive perspective projection of a grid is overlaid on a mosque photograph. Four draggable handles define corresponding point pairs, and the grid lines are redrawn in cyan to show the warped result. Clicking preset buttons animates the handles to new positions, smoothly transitioning the grid’s perspective. The transformation matrix is computed by solving linear equations via LU decomposition from numeric.js, with D3.js v3 handling SVG rendering, drag interactions, and tweening.

Mmbostock

72% match

Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel

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

71% match

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Mmbostock

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

70% match

Loading thumbnail…

Isometric

A grid of white cubes is rendered on a canvas, each rotating around its vertical axis. The rotation angle for each cube is determined by the sine of the elapsed time plus a value derived from its grid position, creating a subtle, wave-like variation across the display. The animation is driven by d3-timer, while a custom isometric projection library handles the 3D-to-2D transformation by projecting vertices onto the canvas using a fixed camera angle.

Mmbostock

70% match

Loading thumbnail…

Mathematical Graphic Patterns

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.

CConvert-Jade

69% match