D3 Examples - Shape-shifting Bounded Voronoi Tessellation [UNLISTED]

Shape-shifting Bounded Voronoi Tessellation [UNLISTED]
Bounded Voronoi Tesselation using the algorithm described in xlr8r.info
circularly distributed sites
the median distance instead of the mean (allowing a small optimisation)
many more exterior control points
a d3.curveCatmullRomClosed convex hull shape
not displaying links and sites
Author: Philippe Rivière, August 2016
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.links {
  stroke: #000;
  stroke-opacity: 0;
}
​
.polygons {
  stroke: #fff;
}
​
.polygons :first-child {
  fill: #ff3d5a;
}
​
.sites {
  fill: none;
  stroke: none;
}
​
.sites :first-child {
  fill: #fff;
}
​
.convex-hull {
    fill: none;
    stroke: #feccd5;
    stroke-width: 5px;
}
​
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
​
var svg = d3.select("svg").on("touchmove mousemove", moved),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = 0.2; // 0 ≤ m < 0.5
​
var color = d3.scaleOrdinal(d3.schemeCategory20 || d3.schemePastel1),
    line = d3.line().curve(d3.curveCatmullRomClosed);
​
var sites = d3.range(200)
    .map(function(d,i) {
      var len = Math.min(width, height) / 2 * (1 - margin) * Math.sqrt(Math.random()),
          angle = Math.random() * 2 * Math.PI;
      
      var p = [
       width / 2 + len * Math.cos(angle),
      height / 2 + len * Math.sin(angle)
    ];
      p.gr = 10 + i*i/20;
      p.id = i;
      return p;
    });
  
var voronoi = d3.voronoi()
    .extent([[10, 10], [width - 10, height - 10]]);
​
var convexhull = svg.append('path')
  .attr('class', 'convex-hull');
​
var polygon = svg.append("g")
    .attr("class", "polygons");
​
var link = svg.append("g")
    .attr("class", "links");
​
var site = svg.append("g")
    .attr("class", "sites");
​
d3.timer(redraw);
  
function moved() {
  sites[0][0] = d3.mouse(this)[0];
  sites[0][1] = d3.mouse(this)[1];
  redraw();
}
​
function redraw() {
  
  var links = voronoi.links(sites),
    ext = Math.sqrt(d3.median(links, function(l) {
      var dx = l.source[0] - l.target[0],
          dy = l.source[1] - l.target[1];
      return dx*dx + dy*dy;
    }));
​
  var convex = d3.polygonHull(sites);
    convex.centroid = d3.polygonCentroid(convex);
  convex = convex.map(function(p){
    var dx = p[0] - convex.centroid[0],
      dy = p[1] - convex.centroid[1],
      angle = Math.atan2(dy, dx);
    return [p[0] + Math.cos(angle) * ext, p[1] + Math.sin(angle) * ext];
  });
​
  var sites2 = sites.slice(); // clone
  for (var i = 0; i < convex.length; i++) {
    var n = convex[i], m = convex[i+1]||convex[0]; 
    var dx = n[0] - m[0],
        dy = n[1] - m[1],
        dist = Math.sqrt(dx * dx + dy * dy);
    var pts = 10 * Math.ceil(dist / 2 / ext);
    for(var j=0; j <= pts; j++) {
      var p = [m[0] + dx *j / pts, m[1] + dy * j / pts];
      p.artificial = 1;
      sites2.push(p);
    }
  }
​
  var diagram = voronoi(sites2), poly = diagram.polygons();
​
  var p = polygon.selectAll("path") 
    .data(poly)
  p.enter().append("path").merge(p).call(redrawPolygon)
  p.exit().remove();
​
  var l = link
    .selectAll("line")
  .data(diagram.links().filter(function(l){
    return !l.source.artificial && !l.target.artificial;
  }));
   l.enter()
     .append("line")
   .merge(l)
     .call(redrawLink)
   .exit()
     .remove();
​
​
​
  l.each(function(l){
    var i = l.source.id,
        centroid = d3.polygonCentroid(poly[i]);
    // move a bit the site towards the centroid of its polygon
    sites[i][0] += 0.1 * (centroid[0] - sites[i][0]) + (Math.random() - 1/2) * 1; 
    sites[i][1] += 0.1 * (centroid[1] - sites[i][1]) + (Math.random() - 1/2) * 1; 
    
    // push (or pull) the neighbors to try changing our surface
    if (true){
      pushpull(l.source.id,l.target.id);
      pushpull(l.target.id,l.source.id);
    }
    
  });
​
function pushpull(a,b){
try{
  var surf = d3.polygonArea(poly[a]),
       sgn = Math.atan(surf / sites[a].gr - 1),
      f = sgn * 0.2;
      sites[b][0] += f * (sites[a][0] - sites[b][0]); 
      sites[b][1] += f * (sites[a][1] - sites[b][1]); 
      sites[a][0] -= f * (sites[a][0] - sites[b][0]); 
      sites[a][1] -= f * (sites[a][1] - sites[b][1]);
  sites[a].stress = Math.abs(sgn)/1.5;
} catch(e){}
}
  
  var s = site
    .selectAll("circle")
    .data(sites);
  s.enter()
      .append("circle")
      .attr("r", 2.5)
  .merge(s)
    .call(redrawSite);
​
   convexhull.attr('d', line(convex));
 
}
​
function redrawPolygon(polygon) {
  polygon
      .attr("fill", function(d, i) {
         return i < sites.length ? color(i) : 'none';
      })
      .attr("stroke-width", function(d, i) {
         return i < sites.length ? 2 : 0;
      })
      .attr("d", function(d, i) {
       // shape shift
        try {
          var c = d3.polygonCentroid(d);
          sites[i][0] += sgn * 0.2 * (c[0] - sites[i][0]) + (Math.random() - 1/2)*1;
          sites[i][1] += sgn * 0.2 * (c[1] - sites[i][1]) + (Math.random() - 1/2)*1; 
        } catch(e) {}
        return d ? "M" + d.join("L") + "Z" : null;
     })
    .attr('fill-opacity', function(d,i){ return i < sites.length ? 1-sites[i].stress || 1 : 0; })
  ;
}
​
function redrawLink(link) {
  
  link
      .attr("x1", function(d) { return d.source[0]; })
      .attr("y1", function(d) { return d.source[1]; })
      .attr("x2", function(d) { return d.target[0]; })
      .attr("y2", function(d) { return d.target[1]; });
}
​
function redrawSite(site) {
  site
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; });
}
​
</script>
​
    