Perspective Transformation

100%

Perspective Transformation

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 13, 2014

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.

AI-generated description

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

The image is transformed using a matrix3d CSS transform. The transformation matrix 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 apply a perspective transform manually for simple 2D shapes, such as lines and circles.

gpl-3.0 Licensed

Similar vizzes

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

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

67% match

Loading thumbnail…

Sailing

A serene sea scene rendered with SVG and animated using D3.js v6. The visualization depicts a sailboat with a brown hull, green triangular sail, and mast, floating on a deep blue ocean with white wave circles oscillating vertically via chained transitions with sinusoidal easing. Clouds drift horizontally across the sky using linear transitions, while simple black bird shapes flap through the air. The code constructs the scene procedurally, generating wave data with `d3.range` and `Math.sin`, and animates all elements using D3 transitions with recursive callbacks for infinite looping.

AAsrar Al Qassem

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

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

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

65% match

Loading thumbnail…

Multiple Rotations

An animated canvas displays a rotating globe. The graticule and sphere are drawn using D3’s geometry pipeline, which applies two sequential rotations—a fixed tilt and a time-based spin—before orthographic projection and clipping. The code uses `d3.geo.pipeline` with `d3.geo.rotate`, `d3.geo.clipCircle`, and `d3.geo.project`, rendering via a `contextSink`. The graticule is generated by `d3.geo.graticule`.

Mmbostock

62% match

Loading thumbnail…

Rotating Transverse

Two animated map projections rotate in sync on a single canvas: a transverse equirectangular (Cassini) projection on the left and a transverse Mercator on the right. Each frame, `d3.geo.equirectangular` and `d3.geo.mercator` recompute their rotation via `d3.timer`, while `d3.geo.path` renders land from TopoJSON world-110m data and a graticule. The canvas context is manually rotated by 90 degrees to align the transverse orientation.

Mmbostock

62% match