Voronoï playground : parquet deformation

100%

Voronoï playground : parquet deformation

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Nov 22, 2016

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.

AI-generated description

This block is a recreation (and a continuation of 1) 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 quazi-hexagon shape. The final result is obtained by using a Voronoï layout, with inner and outer cells hidden, and by positioning seeds at adequate positions (click to show/hide seeds): seeds are positioned on cocentric rings, and each ring has one less (or one more) seed than its contiguous rings. This difference in the number of seeds per ring produces the progressive shape transformation. At the bottom of the figure, first seeds of all rings are perfectly aligned, which leads to quazi-rectangle Voronoï cells. Conversely, at the top of the figure, seeds are alternatively aligned/disaligned (due to odd/even number of seeds), which leads to quazy-hexagon Voronoï cells.

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 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.

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

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

81% 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: 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

80% match

Loading thumbnail…

Interactive Parquet Deformation

This interactive visualization demonstrates parquet deformation, morphing a starting shape into an ending shape through a tessellated grid. Users can select predefined curves, drag control points, or click edges to alter the shapes symmetrically, with the deformation rendered via `d3.curveBasis` and `d3.line` from D3 v4. The SVG output displays the tiled parquet background and the two editable shape containers, with a tooltip providing feedback. The code uses `d3.interpolate` to progressively transform the shapes, showcasing a geometric puzzle inspired by Escher's tessellations.

KKcnarf

79% 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 : interactive weighted Voronoï study II

This interactive visualization explores the 2D additive weighted power diagram, showing how two draggable sites partition a rectangular area into concave cells whose borders shift as sliders adjust each site’s weight. The diagram is computed via a convex hull algorithm (ConvexHull.js, PowerDiagram.js) that lifts sites to a paraboloid, with the resulting polygons clipped using a Sutherland–Hodgman implementation from d3-polygon-clip. Rendered in SVG with D3 v4, the display updates live, and circles around each site scale with the square root of the weight to visualize its influence.

KKcnarf

78% match