laying the groundwork for implementing fortune's algorithm

voronoi.js

@@ -8,12 +8,12 @@ const canvas = document.getElementById('canvas'),
 const minDist = 20,
     edgeBounds = 20;
 
-function drawSite(x, y) {
+function drawSite(x, y, colour = 'black') {
     ctx.save();
     ctx.beginPath();
     ctx.arc(x, y, 2, 0, Math.PI * 2, false);
     ctx.closePath();
-    ctx.fillStyle = 'black';
+    ctx.fillStyle = colour;
     ctx.fill();
     ctx.restore();
 }
@@ -190,9 +190,38 @@ function goRow(i, sites) {
         }, 100);
     }
 }
-goRow(0, sites);
+//goRow(0, sites);
 
+function parabola(focus, directrixY) {
+    // http://jtauber.com/blog/2008/11/08/from_focus_and_directrix_to_bezier_curve_parameters/
+    const a = Math.sqrt(Math.pow(directrixY, 2) - Math.pow(focus.y, 2)),
+        start = {x: (focus.x - a), y: 0},
+        control = {x: focus.x, y: (focus.y + directrixY)},
+        end = {x: (focus.x + a), y: 0};
 
+    ctx.save();
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = '#aaa';
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
+    ctx.stroke();
+    ctx.closePath()
+    ctx.restore();
+}
+
+function demo(dirY) {
+    ctx.clearRect(0,0,canvwidth,canvheight);
+    drawSite(250, 200, 'red');
+    drawSite(450, 100, 'blue');
+    parabola({x:250, y:200}, dirY);
+    parabola({x:450, y:100}, dirY);
+    drawLine(0,dirY,canvwidth,dirY);
+    if( dirY < canvheight + 500 ) {
+        setTimeout(demo, 10, dirY + 1)
+    }
+}
+demo(200);