Interactive Parquet Deformation

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:

D3.js (v.4)
blockbuilder.org

<html>
<head>
<meta charset="utf-8">
<title>Interactive Parquet Deformation</title>
<meta content="Interactive Parquet Deformation with D3" name="description">
<style>
  
  .shape-container-border {
    fill: url("#shape-area-gradient");
  }
  
  .vertex {
    fill: black;
  }
  
  .vertex.draggable {
    stroke-width: 5;
    stroke: transparent;
    cursor: move;
  }
  
  .vertex.draggable.horizontal {
    fill: green;
  }
  
  .vertex.draggable.vertical {
    fill: blue;
  }
  
  .edge {
    fill: none;
    stroke: black;
  }
  
  .shape-container .edge {
    stroke: grey;
    stroke-width: 2;
    cursor: pointer;
  }
  
  .predef-edge-container circle {
    fill: transparent;
    cursor: pointer;
  }
  
  .predef-edge-container .edge {
    stroke: lightgrey;
    stroke-width: 1.5;
  }
  
  .predef-edge-container:hover .edge {
    stroke: grey;
  }
  
  #tooltip {
    font-size: small;
  }

</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="shape-area-gradient">
        <stop offset="90%" stop-color="white"/>
        <stop offset="100%" stop-color="grey"/>
      </radialGradient>
    </defs>
    <g id="drawing-area">
      <g id="parquet"></g>
      <g id="starting-shape-container" class="shape-container">
        <circle class="shape-container-border"></circle>
        <g class="predef-edges-container">
          <g class="horizontal-predef-edges-container"></g>
          <g class="vertical-predef-edges-container"></g>
        </g>
        <g id="starting-shape" class="shape">
          <g class="edges"></g>
          <g class="verteces">
            <g class="corners"></g>
            <g class="draggables"></g>
          </g>
        </g>
      </g>
      <g id="ending-shape-container" class="shape-container">
        <circle class="shape-container-border"></circle>
        <g class="predef-edges-container">
          <g class="horizontal-predef-edges-container"></g>
          <g class="vertical-predef-edges-container"></g>
        </g>
        <g id="ending-shape" class="shape">
          <g class="edges"></g>
          <g class="verteces">
            <g class="corners"></g>
            <g class="draggables"></g>
          </g>
        </g>
      </g>
      <text id="tooltip"></text>
    </g>
  </svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var _PI = Math.PI,
        _2PI = 2*_PI,
        _midPI = 0.5*_PI;
		//begin: layout conf.
    var svgWidth = 960,
        svgHeight = 500,
        tileSize = 40,		//size of a tile (ie. little shape) in the background
    		hTileCount = Math.floor(svgWidth/tileSize)-1,	//-1 for enought margin
        vTileCount = Math.floor(svgHeight/tileSize)-1,	//-1 for enought margin
        hMargin = (svgWidth-hTileCount*tileSize)/2,		///2 for centering purpose
        vMargin = (svgHeight-vTileCount*tileSize)/2,		///2 for centering purpose
        margin = {top: vMargin, right: hMargin, bottom: vMargin, left: hMargin},
        width = svgWidth - margin.left - margin.right,
        height = svgHeight - margin.top - margin.bottom,
    		shapeSize = 100,	//size of the large shapes
        outerShapeContainerMargin = 10,
        innerShapeContainerMargin = 60,
        shapeContainerSize = shapeSize + 2*innerShapeContainerMargin,
        shapeTileFactor = shapeSize/tileSize,
        predefEdgeSize = 20,
        predefEdgeFactor = shapeSize/predefEdgeSize;
    //end: layout conf.
    
    //begin: reusable d3-selections
    var svg = d3.select("svg"),
        drawingArea = d3.select("#drawing-area"),
        parquet = d3.select("#parquet"),
        startingShapeContainer = d3.select("#starting-shape-container"),
        endingShapeContainer = d3.select("#ending-shape-container"),
    		startingShape = d3.select("#starting-shape"),
        endingShape = d3.select("#ending-shape"),
        tooltip = d3.select("#tooltip");
    //end: reusable d3-selections
    
    //begin: shape-related things
    var shapeCurve = d3.curveBasis,
        startingShapeEdges = {},
        endingShapeEdges = {},
    		shapeEdgeLiner = d3.line()
          .curve(shapeCurve)
          .x(function(d){ return d.x; })
          .y(function(d){ return d.y; }),
    		tileEdgeLiner = d3.line()
          .curve(shapeCurve)
          .x(function(d){ return d.x/shapeTileFactor; })
          .y(function(d){ return d.y/shapeTileFactor; }),
        d = shapeSize/4,
        predefEdgeVerteces = {
          horizontal: [
            [{x:0, y:0}, {x:d, y:0}, {x:2*d, y:0}, {x:3*d, y:0}, {x:4*d, y:0}],
            [{x:0, y:0}, {x:d, y:-d}, {x:2*d, y:0}, {x:3*d, y:d}, {x:4*d, y:0}],
            [{x:0, y:0}, {x:3*d, y:-d}, {x:2*d, y:0}, {x:d, y:d}, {x:4*d, y:0}],
            [{x:0, y:0}, {x:d, y:-d}, {x:3*d, y:-d}, {x:3*d, y:0}, {x:4*d, y:0}],
            [{x:0, y:0}, {x:3*d, y:-d}, {x:3*d, y:d}, {x:3*d, y:0}, {x:4*d, y:0}]
          ],
          vertical: [
          	[{x:0, y:0}, {x:0, y:d}, {x:0, y:2*d}, {x:0, y:3*d}, {x:0, y:4*d}],
          	[{x:0, y:0}, {x:d, y:d}, {x:0, y:2*d}, {x:-d, y:3*d}, {x:0, y:4*d}],
          	[{x:0, y:0}, {x:d, y:3*d}, {x:0, y:2*d}, {x:-d, y:d}, {x:0, y:4*d}],
            [{x:0, y:0}, {x:-d, y:d}, {x:-d, y:3*d}, {x:0, y:3*d}, {x:0, y:4*d}],
            [{x:0, y:0}, {x:-d, y:3*d}, {x:d, y:3*d}, {x:0, y:3*d}, {x:0, y:4*d}]
          ]
        },
        predefEdgeLiner = d3.line()
          .curve(shapeCurve)
          .x(function(d){ return d.x/predefEdgeFactor; })
          .y(function(d){ return d.y/predefEdgeFactor; }),
        predefEdgeCount = predefEdgeVerteces.horizontal.length;
    //end: shape-related things
    
    //begin: drag behaviors
    var dragVertex = d3.drag()
      .subject(function(d) { return d; })
      .on("start", dragStarted)
      .on("drag", vertexDragged)
      .on("end", dragEnded);
    
    function dragStarted(d) {
      var x = Math.round(d3.event.x),
          y = Math.round(d3.event.y);
      
      d3.select(this).classed("dragging", true);
      showTooltip(d3.event.sourceEvent.x, d3.event.sourceEvent.y, "["+x+", "+y+"]");
    }

function dragEnded(d) {
      d3.select(this).classed("dragging", false);
      hideTooltip();
    }

https://d3js.org/d3.v4.min.js