Perspective Transformation II

100%

Perspective Transformation II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 13, 2014

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.

AI-generated description

A perspective projection can be precisely specified through four pairs of corresponding points. By dragging the four corners of the grid above, you can adjust the perspective projection interactively and place the grid anywhere you like in the scene.

The points of the grid are transformed using a transformation matrix, which is computed by solving a series of linear equations derived from the four point-pairs using LU decomposition as implemented by numeric.js.

This technique can also be used to compute a CSS matrix3d transform to place a DOM element within a scene.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Perspective Transformation

A sailboat image is perspective-transformed onto a mosque background, with draggable corner handles adjusting the projection in real time. The image and a grid of lines are rendered in SVG, while the transform is applied via a CSS `matrix3d` style. The matrix is computed by solving linear equations from four point-pairs using LU decomposition from numeric.js, with `d3.behavior.drag` handling handle movement and preset buttons animating transitions.

Mmbostock

85% match

Loading thumbnail…

Perspective Vibrations

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.

BBrideau

72% match

Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis

71% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

70% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

70% match

Loading thumbnail…

Perspective Map (transformed projection)

This example demonstrates a distorted world map using a transformed Robinson projection, with adjustable parameters controlling scale, angle, and vertical compression. The map renders country polygons on a canvas, with colored dots highlighting the centroids of populous nations. Built with d3 v4 and d3-geo-projection, it composes a custom projection via `d3.geoTransform` and `d3.geoPath`, while a dat.GUI panel allows live tweaking of visual properties like fill color and translation. World geometry comes from a TopoJSON file of countries.

PPhilippe Rivière

66% match

Loading thumbnail…

Orthographic Grid

An orthographic grid of graticule lines at 10-degree intervals rotates slowly over time, demonstrating an azimuthal projection that resembles a globe viewed from space. The visualization uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.graticule` to render SVG paths, while a `d3.timer` continuously updates the projection’s rotation based on a fixed velocity vector. A static circle outlines the globe’s edge, and the animation shows how latitude and longitude lines curve as the view shifts.

Mmbostock

66% match

Loading thumbnail…

Rectilinear Grid

A mouse-driven rectilinear distortion grid demonstrates a fisheye effect on a Cartesian coordinate system. D3 v3 and SVG render vertical and horizontal paths spaced every 20 pixels, with finer 6-pixel segments preserving curve continuity. As the mouse moves, `d3.fisheye` recalculates the focal point, and the `line` generator maps each point through the fisheye function to update path attributes, creating a localized magnification that bends the grid around the cursor.

Mmbostock

66% match