Voronoï playground : Voronoï's heart

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:

D3.js (v.4)
blockbuilder.org

computeSeeds();
        redrawVoronoi();
        redrawSeeds();
        seedContainer.classed("hide", hideSeeds);
      }
    });
    
    function initLayout() {
      svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height);
      
      drawingArea = d3.select("#drawing-area")
        .attr("transform", "translate("+[midWidth, midHeight]+")rotate(90)");
      d3.select("#hover-area")
      	.attr("r", midWidth)
      	.on("touchmove mousemove", moved)
      	.on("mouseout", exited)
      	.on("click", clicked);
      
      voronoiContainer = d3.select("#voronoi-container");
      seedContainer = d3.select("#seed-container");
      heart = d3.select("#heart").attr("transform", "rotate(-90)translate(0,6)")
    }
    
    function moved() {
      var coords = d3.mouse(this);
      var mouseRadius = Math.sqrt(Math.pow(coords[0],2)+Math.pow(coords[1],2));
      var scaledMouseRadius = mouseRadius*interRingMaxDistance/midWidth;
      if (scaledMouseRadius<interRingHeartTreshold) {
        interRingDistanceObjective = interRingHeartTreshold;
      } else {
        interRingDistanceObjective = scaledMouseRadius;
      }
    }
    
    function exited() {
      interRingDistanceObjective = interRingMaxDistance;
    }
    
    function clicked() {
      hideSeeds = !hideSeeds;
    }
    
    function computeSeeds() {
      seeds = [];
      var hidden = true;
      
      //compute seeds for visible cells
      seeds = seeds.concat(ringSeeds(visibleSeedCount, 0, !hidden));
      //compute seeds for inner hidden cells
      seeds = seeds.concat(ringSeeds(hiddenSeedCount, -interRingDistance, hidden));
      //compute seeds for outer hidden cells
      seeds = seeds.concat(ringSeeds(hiddenSeedCount, interRingDistance, hidden));
    }
    
    function ringSeeds(count, distanceDelta, hidden) {
      var ringSeeds=[],
          interRadAngle = _2PI/count,
          interDegAngle = 360/count,
          radAngle, cos, sin, distance;
      
      for(var ai=0; ai<count; ai++) {
        radAngle = interRadAngle*ai;
        cos = Math.cos(radAngle);
        sin = Math.sin(radAngle);
        distance = seedDistance+distanceDelta*Math.cos(radAngle/2);
        ringSeeds.push({
          x: distance*cos,
          y: distance*sin,
          hidden: hidden,
          strokeColor: d3.hsl(Math.abs(interDegAngle*ai-180), 1, 0.45)
        });
      }
      return ringSeeds;
    }
    
    function redrawVoronoi() {
      //begin: draw Voronoi cells
      voronoiContainer.selectAll(".cell").remove();
      var drawnCells = voronoiContainer.selectAll(".cell")
        	.data(voronoiLayout.polygons(seeds));
      drawnCells.enter()
        .append("path")
        .classed("cell", true)
      	.classed("hide", function(d){ return d.data.hidden; })
        .attr("d", function(d){ return d3.line()(d)+"z"; })
      	.style("fill", function(d){ return d.data.strokeColor; });
      //end: draw Voronoi cells
    }
    
    function redrawSeeds() {
      //begin: draw Voronoi cells
      seedContainer.selectAll(".seed").remove();
      var drawnSeeds = seedContainer.selectAll(".seed")
        	.data(seeds);
      drawnSeeds.enter()
        .append("circle")
        .classed("seed", true)
      	.attr("cx", function(d){ return d.x; })
      	.attr("cy", function(d){ return d.y; })
      	.attr("r", 1);
      //end: draw Voronoi cells
    }
  </script>
</body>

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