Forced Perspective

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.

70% match

Gist 5603752c8b3589d1a327

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 grid lines are transformed using a matrix computed by solving linear equations from the four point-pairs via LU decomposition (numeric.js). D3 handles the SVG rendering and animation, with draggable corner handles and preset scene buttons (Floor, Near Wall, Far Wall, Reset) for quick placement.

Aapburnes

69% match

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

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.

64% match

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.

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.

tracking.js - volume control with camera

This example uses tracking.js’s Viola-Jones face detection to turn a webcam feed into a playful volume control. As the user moves their head closer to the camera, the detected face size increases, and a d3.v4 canvas animation maps that size to a rising volume level, with the current amplitude visualized in real time. The larger the face appears in the frame, the louder the volume—if it's too quiet, you just move your head closer. Built with d3.v4 and animated on canvas, this MIT-licensed gist demonstrates a simple, interactive computer-vision-driven interface.

Aalexmacy

Force-Directed Layout

This example shows a force-directed network graph where nodes appear incrementally, followed by their connecting links chaining into view one by one. Built with the D3 v2 `d3.layout.force`, it renders SVG circles and lines using data from the "miserables.json" character co-occurrence dataset. Each node fades in via `transition().delay()` and `attr("opacity")`; once visible, its links are queued and faded in sequentially through chained transitions triggered by the tick event.

GGerHobbelt