Voronoi relaxation

Voronoi relaxation with Lloyd's algorithm in d3 4.0.

forked from veltman's block: Voronoi relaxation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
      height = 500,
      canvas = document.querySelector("canvas"),
      context = canvas.getContext("2d"),
      voronoi = d3.voronoi().extent([[-1, -1],[width + 1, height + 1]]);

context.fillStyle = "#ff3d7f";
  context.strokeStyle = "#3fb8af";

function relax(points) {

var polygons = voronoi(points).polygons(),
        centroids = polygons.map(d3.polygonCentroid),
        converged = points.every(function(point, i){
          return distance(point, centroids[i]) < 1;
        });

fade();

draw(points, polygons);

if (converged) {
      setTimeout(reset, 750);
    } else {
      setTimeout(function(){
        relax(centroids);
      }, 50);
    }

}

function fade() {
    var imageData = context.getImageData(0, 0, width, height);

for (var i = 3, l = imageData.data.length; i < l; i += 4) {
      imageData.data[i] = Math.max(0, imageData.data[i] - 10);
    }

context.putImageData(imageData, 0, 0);
  }

function draw(points, polygons) {

context.beginPath();
    polygons.forEach(function(polygon){
      context.moveTo(polygon[0][0], polygon[0][1]);
      polygon.slice(1).forEach(function(point){
        context.lineTo(point[0], point[1]);
      });
      context.lineTo(polygon[0][0], polygon[0][1]);
    });
    context.stroke();

context.beginPath();
    points.forEach(function(point){
      context.moveTo(point[0], point[1]);
      context.arc(point[0], point[1], 2, 0, 2 * Math.PI);
    });
    context.fill();

}

function distance(a, b) {
    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
  }

function reset() {
    var points = d3.range(100).map(function(d){
      return [Math.random() * width, Math.random() * height];
    });

context.clearRect(0, 0, width, height);
    draw(points, voronoi(points).polygons());

setTimeout(function(){
      relax(points);
    }, 750);

}

reset();

</script>

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