1 files changed, 20 insertions, 12 deletions
diff --git a/site/pure.mjs b/site/pure.mjs
index bc3f8a4..fdece47 100644
--- a/site/pure.mjs
+++ b/site/pure.mjs
@@ -1,5 +1,3 @@
-const NUM_POINTS = 40;
-
 // thanks vihart
 const TAU = 2 * Math.PI;
 
@@ -100,6 +98,15 @@ class Line {
     }
 }
 
+let points = [];
+// const points = [
+//     new Point(0.5, 0.1),
+//     new Point(0.75, 0.2),
+//     new Point(0.9, 0.9),
+//     new Point(0.2, 0.5),
+//     new Point(0.6, 0.4), // should be inside
+// ];
+
 // assume points is sorted min first.
 function findPoly3(points) {
     //    console.debug('findPoly()', ...points.map(p => { return {x: p.x, y: p.y} }));
@@ -141,15 +148,6 @@ function findPoly3(points) {
     return res;
 }
 
-const points = [...Array(NUM_POINTS)].map(_ => new Point());
-// const points = [
-//     new Point(0.5, 0.1),
-//     new Point(0.75, 0.2),
-//     new Point(0.9, 0.9),
-//     new Point(0.2, 0.5),
-//     new Point(0.6, 0.4), // should be inside
-// ];
-
 function randColor() {
     const [r, g, b] = [...Array(3)].map(_ => Math.random() * 255);
     return `rgb(${r} ${g} ${b})`
@@ -239,6 +237,10 @@ function update(points) {
     movePoints(points);
 }
 
+function setDotCount(n) {
+    points = [...Array(n)].map(_ => new Point());
+}
+
 export default async function () {
     const canvas = document.querySelector('section.watch canvas');
     const ctx = canvas.getContext('2d');
@@ -246,6 +248,12 @@ export default async function () {
     ctx.scale(canvas.width, canvas.height);
 
     const fps = document.querySelector('section.watch .fps');
+    const dotCount = document.querySelector('#dots');
+    dotCount.onchange = e => {
+        console.debug('dot count changed', e);
+        setDotCount(Number(dotCount.value));
+        renderFrame(document.timeline.currentTime, canvas, ctx, fps);
+    };
 
     const goButton = document.querySelector('section.watch button');
     let paused = true;
@@ -287,5 +295,5 @@ export default async function () {
             self.requestAnimationFrame(render);
         }
     }
-    renderFrame(document.timeline.currentTime, canvas, ctx, fps);
+    dotCount.onchange({ target: dotCount });
 }