/*
 * Uses the following MIT-licensed library for computing the Voronoi diagram:
 *   https://github.com/gorhill/Javascript-Voronoi
 */

(function() {
  "use strict";

  // [min, max)
  function randInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  function randColor() {
    var r = 200;
    var g = randInt(50, 150);
    var b = 0;
    return "rgb(" + r + "," + g + "," + b + ")";
  }

  function point(x, y, angle) {
    return {
      "x": x,
      "y": y,
      "angle": angle
    };
  }

  function color(strokeStyle) {
    return {
      "strokeStyle": strokeStyle
    };
  }

  var ctx, bbox, points, colors;
  var previousTimestamp, delta;

  function render() {
    ctx.fillRect(0, 0, bbox.xr, bbox.yb);

    var voronoi = new Voronoi();
    var diagram = voronoi.compute(points, bbox);
    var cells = diagram.cells;

    for (var c = 0; c < cells.length; c++) {
      var edges = cells[c].halfedges;

      ctx.strokeStyle = colors[c].strokeStyle;

      ctx.beginPath();
      // closePath fills in last edge
      for (var e = 0; e < edges.length - 1; e++) {
        var edge = edges[e];
        var startpoint = edge.getStartpoint();
        var endpoint = edge.getEndpoint();

        if (e == 0) {
          ctx.moveTo(startpoint.x, startpoint.y);
        }
        ctx.lineTo(endpoint.x, endpoint.y);
      }
      ctx.closePath();

      ctx.stroke();
    }
  }

  var xSpeed = 10;
  var ySpeed = 10;
  function update(delta) {
    for (var p = 0; p < points.length; p++) {
      var angle = points[p].angle;
      var dx = Math.cos(angle) * xSpeed * delta;
      var dy = Math.sin(angle) * ySpeed * delta;
      points[p].x += dx;
      points[p].y += dy;
      points[p].angle += Math.random() - 0.5;
    }
  }

  function step(timestamp) {
    var delta = previousTimestamp ? (timestamp - previousTimestamp) / 1000 : 0;
    previousTimestamp = timestamp;

    update(delta);

    render();

    window.requestAnimationFrame(step);
  }


  window.onload = function () {
    var mainCanvas = document.getElementById("voronoi");
    mainCanvas.width = window.innerWidth;
    mainCanvas.height = window.innerHeight;

    bbox = {xl: -10, xr: mainCanvas.width + 10, yt: -10, yb: mainCanvas.height + 10};

    ctx = mainCanvas.getContext("2d");

    var grd = ctx.createLinearGradient(bbox.xr / 2, 0, bbox.xr / 2, bbox.yb);
    grd.addColorStop(0, "hsl(12, 100%, 50%)");
    grd.addColorStop(1, "hsl(12, 100%, 15%)");
    ctx.fillStyle = grd;
    ctx.lineWidth = 2;

    var N = 50;

    points = [];
    colors = [];
    for (var i = 0; i < N; i++) {
      var x = randInt(0, bbox.xr);
      var y = randInt(0, bbox.yb);
      var angle = 0;
      points.push(point(x, y, angle));

      var stroke = "rgba(0, 0, 0, 0.05)";
      colors.push(color(stroke));
    }

    window.requestAnimationFrame(step);
  }
})();

@@ -613,16 +613,28 @@
 %7D%0A%0A  var
+ mainCanvas,
  ctx, bb
@@ -1998,97 +1998,31 @@
  %7D%0A%0A
-%0A
   
-window.onload = function () %7B%0A    var mainCanvas = document.getElementById(%22voronoi%22);
+function setSizes() %7B
 %0A   
@@ -2121,16 +2121,23 @@
  = %7B
+%0A      
 xl: -10,
  xr:
@@ -2132,16 +2132,22 @@
 xl: -10,
+%0A     
  xr: mai
@@ -2165,16 +2165,22 @@
 th + 10,
+%0A     
  yt: -10
@@ -2180,16 +2180,22 @@
 yt: -10,
+%0A     
  yb: mai
@@ -2217,49 +2217,14 @@
 + 10
-%7D;%0A
 %0A    
-ctx = mainCanvas.getContext(%222d%22)
+%7D
 ;%0A%0A 
@@ -2442,16 +2442,45 @@
 th = 2;%0A
+  %7D%0A%0A  function setPoints() %7B
 %0A    var
@@ -2769,16 +2769,427 @@
 );%0A    %7D
+%0A  %7D%0A%0A  window.onload = function () %7B%0A    mainCanvas = document.getElementById(%22voronoi%22);%0A    ctx = mainCanvas.getContext(%222d%22);%0A%0A    var resizeTimer;%0A    window.onresize = function() %7B%0A      setSizes();%0A%0A      // Only execute when finished resizing%0A      clearTimeout(resizeTimer);%0A      resizeTimer = window.setTimeout(function() %7B%0A        setPoints();%0A      %7D, 250);%0A    %7D;%0A%0A    setSizes();%0A    setPoints();
 %0A%0A    wi

Fix resizing bug for root page