Voronoï playground : parquet deformation

100%

Voronoï playground : parquet deformation

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Nov 18, 2016

This interactive Voronoi playground simulates parquet deformation, progressively morphing a quasi-rectangular shape at the bottom into a heart-shaped form at the top. Built with D3.js v4, it uses a Voronoi layout with seeds arranged on three concentric rings, where only the middle ring’s cells are visible. As the user moves the mouse over the canvas, the ring distance adjusts, transforming the Voronoi cells; clicking toggles the display of the grey seed points. The SVG rendering includes a transparent hover-area circle that captures mouse events, and the cellular structure is updated via `d3.interval` and a custom `d3.voronoi` helper.

AI-generated description

This block is a recreation inspired by parquet deformation, which consists on progressively transform a shape into another one (cf. www.theguardian.com/[...]/crazy-paving-the-twisted-world-of-parquet-deformations or http://www.tess-elation.co.uk/parquet-deformations).

In this block, the inital shape is the bottom most quazi-rectangle, and it is progressively transformed into the top most shape. The final result is obtained by using a Voronoï layout, with only few cells shown, and by placing seeds at adequate positions (click to show/hide seeds).

I came to parquet deformation because the Voronoï layout makes a tessellation of the 2D plane, as the parquet does. Parquet deformation is also closely linked to Escher's researches and amazing drawings (cf. http://en.tessellations-nicolas.com/method.php).

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v.4)
<a href='http://blockbuilder.org'>blockbuilder.org</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoï playground : parquet deformation

This interactive visualization demonstrates parquet deformation, where a quasi-rectangular grid progressively morphs into a quasi-hexagonal pattern. Users move the mouse to adjust the number of Voronoï cells, and click to toggle the visibility of seed points. The code uses d3.v4’s `d3.voronoi` layout, positioning seeds on concentric rings with alternating counts to create the shape transition. A Gaussian blur filter softens the cell edges, and the rendering is SVG-based.

KKcnarf

91% match

Loading thumbnail…

Voronoï playground : Do you see the path ? (II)

This interactive Voronoi playground reveals hidden paths that emerge from the smooth chaining of cell borders. Users can draw their own path by clicking and dragging, or select from predefined paths, which are then used as constraints to generate Voronoi seeds scattered near the path’s trajectory. The resulting cells are rendered as cyan outlines, with a white, blurred stroke tracing the original path and highlighting the emergent route. Built with D3 v4, it uses `d3.voronoi`, `d3.line`, and `d3.drag` to update the tessellation in real time as the path changes.

KKcnarf

83% match

Loading thumbnail…

Voronoï playground : Do you see the path ?

The example reveals emergent path-like structures within a Voronoï tesselation by generating cells whose borders align along a user-drawn route. Viewers click and drag to create a continuous white stroke, and the visualization dynamically seeds limited-distance Voronoi cells around that path, coloring and styling each cell border to suggest a coherent corridor. Built with D3 v4, it uses `d3.drag`, `d3.line`, and a custom `d3.distanceLimitedVoronoi` plugin to recompute cells in real time, with an SVG filter applied for visual saturation.

KKcnarf

80% match

Loading thumbnail…

Voronoï playground : undulating radial wave

This example shows a Voronoï tessellation morphing around an undulating radial wave. A white circular path continuously deforms, driven by simplex noise, while semi-transparent Voronoï cells fill the surrounding space and shift with the wave’s movement. The cell borders reveal smooth, emergent patterns from the tessellation. The code uses D3 v4’s `d3.voronoi` layout, `d3.interval` for animation, `d3.scaleLinear` for opacity, and the simplex-noise.js library to generate the wave’s noisy radius. A saturate filter highlights the area near the wave path.

KKcnarf

80% match

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock

78% match

Loading thumbnail…

Voronoï playground : interactive weighted Voronoï study III (multiple sites)

An interactive study of weighted Voronoi diagrams, this d3.v4 visualization shows four draggable sites (two blue, two green) and their influence areas, or cells, within a rectangular clipping polygon. Sliders control the weight of each color group, and unit circles around sites indicate their relative weights. The diagram is computed via a parabolic power diagram algorithm, with convex hulls and 3D-to-2D dual-point mapping, then clipped using the Sutherland–Hodgman method via `d3.polygonClip`. Cell polygons render in SVG with transitions, while `d3.select` manages user interactions.

KKcnarf

78% match

Loading thumbnail…

Voronoï playground: animating the addition/removing of data on a Voronoï map

This visualization animates the transition between two Voronoï maps, showing how cell areas shift when data points are added, removed, or updated. Red cells mark exiting data, green cells mark entering data, and blue cells represent updated values whose areas change accordingly. A slider interpolates between the starting and ending tessellations, while a toggle reveals the underlying sites whose radii encode the data values. The implementation combines D3 v6 with the d3-voronoi-map and d3-weighted-voronoi plugins, computing interpolated site positions and weights via linear interpolation before rebuilding each intermediate map.

KKcnarf

77% match

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a black-and-white field of curved cells generated from continuously moving points. Multiple rings of points orbit at different speeds and radii, causing the Voronoi diagram to shift and deform fluidly over time. The animation uses the D3 `d3.geom.voronoi` to compute the cells, clips them against a rectangular boundary, and subdivides each polygon edge into three equal segments before applying the `basis-closed` interpolation to create the smooth, organic curves. The SVG paths are re-rendered each frame with `d3.timer`.

Mmbostock

77% match