Interactive Parquet Deformation

100%

Interactive Parquet Deformation

✓ Published0🌍 Public

Last edited Dec 9, 2016

Created on Dec 2, 2016

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.

AI-generated description

This block is a recreation (and a continuation of 2 and 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). The progressive shape transformation is provided by d3-interpolate.

You can modify the starting shape and the ending shape, by choosing among predefined curves, drag&droping control points, or clicking an edge to change its control points in a symetric way.

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

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

79% match

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

75% match

Loading thumbnail…

Gist f4dd5c4b997e02efe9be

Four animated SVGs show a square deforming as its four corner points move along a continuously shrinking path. Each panel uses a different rule for selecting the next point: constant interpolation, gradually increasing step size, random step length, and a step inversely proportional to the remaining distance. The code relies on `d3.select`, `transition`, and `setInterval`, drawing line segments with `path` elements while updating point positions via the geometric helper functions defined in `geomtry.js`.

11wheel

71% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

69% match

Loading thumbnail…

curve again.js Demo

This example shows an interactive SVG visualization of a smooth curve generated from a set of control points, with a dataset of historical figures plotted as points along the curve based on their birth dates. The visualization uses the D3.js v3 library with a custom SDCurve object implementing dynamic Levin-type subdivision for curve refinement. Users can drag control points to reshape the curve in real time, and the data points reposition accordingly, illustrating how the curve acts as a timeline mapping individuals’ birth dates to positions in two-dimensional space. The rendering is done via SVG circles and paths, with data loaded from a TSV file.

Pparniantaghipour

68% match

Loading thumbnail…

D3 Curve Explorer

This interactive example shows how different D3 curve types interpolate the same set of draggable points, with buttons to toggle curve families and variants like `curveLinear`, `curveBasis`, `curveBundle`, and `curveCardinal` at various parameters. A sidebar displays a description of the active curve. Users can drag points, add new points via the plus icon, and remove them with the minus icon, all rendered as SVG elements. The code uses D3 v4’s shape API to generate the path data and event handlers for mouse interaction.

Vvivianaaai@qq.com

67% match

Loading thumbnail…

Delaunay Triangulation

This interactive demonstration shows a Delaunay triangulation of 100 randomly generated points, with triangles and links redrawn in real time as the user moves the mouse. The first point follows the cursor, highlighting all triangles and links connected to it in red and white. Built with d3.v4 and the d3-voronoi API, it uses SVG paths, lines, and circles to render the triangulation, updating the visualization dynamically on mousemove and touchmove events.

Mmbostock

67% match

Loading thumbnail…

Impossible Geometry Builder

This interactive SVG builder lets users construct impossible geometries by placing cubes on an isometric grid, where each cube can expand toward others to create optical illusions that are locally consistent but globally impossible. Users add, select, delete, and constrain cube expansion directions via mouse clicks and an axis widget, or by typing commands like `M2,3` and `Ex` into a text field. Built with D3 v5, the tool renders cube faces with distinct gray shades and highlights the closest hovered cell, while the input field can export the current configuration back into the mini-language for reuse.

KKcnarf

67% match