Voronoï playground: weighted Voronoï relaxation

This block experiments the Lloyd's relaxation algorithm on weighted sites.

This block is an adaptation of veltam's Voronoi relaxation block, which applies the algorithm to basic, non-weigthed, sites.

At each iteration

the weighted voronoi diagram is computed based on each weighted sites, thanks to the d3-weighted-voronoi plugin
then, each site is re-position at the center of its influence area

The algorithm stops when each site no longer moves (more exactly, when each site moves below a certain treshold).

User interactions :

you can choose to draw the Weighted Voronoï Diagram (default) or the weights (visualized as circles).
you can hide/show sites
you can choose among different rendering (greyscale, radial rainbow, or conical rainbow (default, having hard-&-fun time to implement it because canvas don't provides conical gradient)).

Acknowledgments to :

D3.js (v.4)
d3-weighted-voronoi plugin
blockbuilder.org
veltman's block: Voronoi relaxation, for the overall routine

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Voronoï playground: weighted Voronoï relaxation</title>
    <meta name="description" content="Lloyd's algorithm applied to weighted sites, using D3.js and the d3-weighted-voronoi plugin">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://raw.githack.com/kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js"></script>
    <style>
      #layouter {
        text-align: center;
        position: relative;
      }
      
      #wip {
        display: none;
        position: absolute;
        top: 200px;
        left: 330px;
        font-size: 40px;
        text-align: center;
      }

.control {
        position: absolute;
      }
      .control.top{
        top: 5px;
      }
      .control.bottom {
        bottom: 5px;
      }
      .control.left{
        left: 5px;
      }
      .control.right {
        right: 5px;
      }
      .control.right div{
        text-align: right;
      }
      .control.left div{
        text-align: left;
      }
      .control .separator {
        height: 5px;
      }

canvas {
        margin: 1px;
        border-radius: 1000px;
        box-shadow: 2px 2px 6px grey;
      }
      canvas#background-image, canvas#alpha {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="layouter">
      <canvas id="background-image"></canvas>
      <canvas id="alpha"></canvas>
      <canvas id="colored"></canvas>

<div id="control0" class="control top left">
        <div>
          <input id="cellsOrCircles" type="radio" name="cellsOrCircles" value="cells" checked onchange="cellsOrCirclesUpdated('cells')"> Weighted Voronoï 
        </div>
        <div>
          <input id="cellsOrCircles" type="radio" name="cellsOrCircles" value="circles" onchange="cellsOrCirclesUpdated('circles')"> Weights
        </div>
      </div>
      
      <div id="control1" class="control bottom left">
        <div>
          <input id="showSites" type="checkbox" name="showSites" onchange="siteVisibilityUpdated()"> Show sites
        </div>
      </div>
      
      <div id="control2" class="control bottom right">
        <div>
          Grey <input id="bgImgGrey" type="radio" name="bgImg" onchange="bgImgUpdated('grey')">
        </div>
        <div>
          Radial rainbow <input id="bgImgRadialRainbow" type="radio" name="bgImg" onchange="bgImgUpdated('radialRainbow')">
        </div>
        <div>
          Canonical rainbow <input id="bgImgCanonicalRainbow" type="radio" name="bgImg" checked onchange="bgImgUpdated('canonicalRainbow')">
        </div>
      </div>

<div id="wip">
        Work in progress ...
      </div>
    </div>
    
    <script>
      var _2PI = 2*Math.PI,
          sqrt = Math.sqrt,
          sqr = function(d) { return Math.pow(d,2); };
      
      //begin: layout conf.
      var totalWidth = 550,
          totalHeight = 500,
          controlsHeight = 0,
          canvasRadius = (totalHeight-controlsHeight)/2,
          canvasbw = 1, //canvas border width
          canvasHeight = 2*canvasRadius,
          canvasWidth = 2*canvasRadius,
          radius = canvasRadius-canvasbw,
          width = 2*canvasRadius,
          height = 2*canvasRadius,
          halfRadius = radius/2
          halfWidth = halfRadius,
          halfHeight = halfRadius,
          quarterRadius = radius/4;
          quarterWidth = quarterRadius,
          quarterHeight = quarterRadius;
      //end: layout conf.
      
      //begin: drawing conf.
      var drawSites = false,
          bgType = "canonicalRainbow",
      		drawCellsOrCircles = "cells",
          bgImgCanvas, alphaCanvas, coloredCanvas,
          bgImgContext, alphaContext, coloredContext,
      		radialGradient;
      //end: drawing conf.
      
      //begin: init layout
      initLayout()
      //end: init layout
      
      //begin: weighted voronoi conf.
      var siteCount = 100,
          maxWeight = 2000,
          convergenceTreshold = 0.1;
      var circlingPolygon = [];
      for (a=0; a<_2PI; a+=_2PI/60) {
        circlingPolygon.push([(radius+1)*(1+Math.cos(a)), (radius+1)*(1+Math.sin(a))])
      }
      var	weightedVoronoi = d3.weightedVoronoi().clip(circlingPolygon);
      //end: weighted voronoi conf.

//begin: user interaction handlers
      function siteVisibilityUpdated() {
        drawSites = d3.select("#showSites").node().checked;
      }
      
      function bgImgUpdated(newType) {
        bgType = newType;
        setBackgroundImage();
      }
      
      function cellsOrCirclesUpdated(type) {
        drawCellsOrCircles = type;
      }
      //end: user interaction handlers
      
      function relax(points) {

if (converged) {
          setTimeout(reset, 750);
        } else {
          setTimeout(function(){
            var newPoints = [];
            for(i=0;i<siteCount; i++) {
              data = pointIdToPolyAndCenter[i];
              newPoints.push({
                index: data.point.index,
                x: data.centroid[0],
                y: data.centroid[1],
                weight: data.point.weight,
                sqrtWeight: data.point.sqrtWeight
              });
            }
            relax(newPoints);
          }, 50);
        }

}

function distance(p, c) {
        return sqrt(sqr(p.x - c[0], 2) + sqr(p.y - c[1], 2));
      }

alphaContext.clearRect(0, 0, width, height);
        redraw(points, weightedVoronoi(points));

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

};
      
      reset();
      
      /********************************/
      /*      Drawing functions       */
      /*   Playing with canvas :-)    */
      /*                              */
      /* Experiment to draw           */
      /*   with a uniform color,      */
      /*   or with a radial gradient, */
      /*   or over a background image */
			/********************************/
      
      function initLayout() {
        d3.select("#layouter").style("width", totalWidth+"px").style("height", totalHeight+"px");
        d3.selectAll("canvas").attr("width", canvasWidth).attr("height", canvasHeight);

bgImgCanvas = document.querySelector("canvas#background-image");
        bgImgContext = bgImgCanvas.getContext("2d");
        alphaCanvas = document.querySelector("canvas#alpha");
        alphaContext = alphaCanvas.getContext("2d");
        coloredCanvas = document.querySelector("canvas#colored");
        coloredContext = coloredCanvas.getContext("2d");

//begin: set a radial rainbow
        radialGradient = coloredContext.createRadialGradient(radius, radius, 0, radius, radius, radius);
        var gradientStopNumber = 10,
            stopDelta = 0.9/gradientStopNumber;
            hueDelta = 360/gradientStopNumber,
            stop = 0.1,
            hue = 0;
        while (hue<360) {
          radialGradient.addColorStop(stop, d3.hsl(Math.abs(hue+160), 1, 0.45));
          stop += stopDelta;
          hue += hueDelta;
        }
        //end: set a radial rainbow
        
        //begin: set the background image
        setBackgroundImage();
        //end:  set the initial background image
      }
      
      function setBackgroundImage() {
        if (bgType==="canonicalRainbow") {
          //begin: make conical rainbow gradient
          var imageData = bgImgContext.getImageData(0, 0, 2*radius, 2*radius);
          
          var i = -radius,
              j = -radius,
              pixel = 0,
              radToDeg = 180/Math.PI;
          var aRad, aDeg, rgb;
          while (i<radius) {
            j = -radius;
            while (j<radius) {
              aRad = Math.atan2(j, i);
              aDeg = aRad*radToDeg;
              rgb = d3.hsl(aDeg, 1, 0.45).rgb();
              
              imageData.data[pixel++] = rgb.r;
              imageData.data[pixel++] = rgb.g;
              imageData.data[pixel++] = rgb.b;
              imageData.data[pixel++] = 255;
              
              j++;
            }
            i++;
          }
          bgImgContext.putImageData(imageData, 0, 0);
          //end: make conical rainbow gradient
        } else if (bgType==="radialRainbow") {
          bgImgContext.fillStyle = radialGradient;
          bgImgContext.fillRect(0, 0, canvasWidth, canvasHeight);
        } else {
          bgImgContext.fillStyle = "grey";
        	bgImgContext.fillRect(0, 0, canvasWidth, canvasHeight);
        }
      }

Updated missing url https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js to https://raw.githack.com/kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js

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

https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js