pure: separate render/update

1 files changed, 36 insertions, 31 deletions

diff --git a/site/pure.mjs b/site/pure.mjs
index 3a77aee..5065bb7 100644
--- a/site/pure.mjs
+++ b/site/pure.mjs
@@ -201,29 +201,9 @@ function bouncePoints(points) {
     return didBounce;
 }
 
-export default async function () {
-    const canvas = document.querySelector('canvas');
-    const ctx = canvas.getContext('2d');
-    console.debug('canvas:', canvas, 'ctx', ctx);
-    ctx.scale(canvas.width, canvas.height);
-
-    const fps = document.querySelector('#fps');
-
-    const goButton = document.querySelector('button');
-    let paused = true;
-    goButton.onclick = e => {
-        paused = !paused;
-        if (paused) {
-            e.target.textContent = 'go';
-        } else {
-            e.target.textContent = 'pause';
-            self.requestAnimationFrame(render);
-        }
-    };
-
-    let lastTime = document.timeline.currentTime;
-    let interCount = 1;
-    function render(t) {
+let lastTime = document.timeline.currentTime;
+let interCount = 1;
+function renderFrame(t, canvas, ctx, fps) {
         if (t > lastTime) {
             fps.textContent = Math.floor(1_000 * interCount / (t - lastTime));
             lastTime = t;
@@ -233,12 +213,7 @@ export default async function () {
         }
 
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-
         renderPoints(ctx, points);
-        if (bouncePoints(points)) {
-            //goButton.onclick({ target: goButton });
-        }
-        movePoints(points);
 
         points.sort((a, b) => a.y > b.y);
         const polyPoints = findPoly3(points);
@@ -255,12 +230,42 @@ export default async function () {
 
             last = p;
         }
+}
 
+function update(points) {
+    if (bouncePoints(points)) {
+        // console.debug("bounced");
+    }
+    movePoints(points);
+}
+
+export default async function () {
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+    console.debug('canvas:', canvas, 'ctx', ctx);
+    ctx.scale(canvas.width, canvas.height);
+
+    const fps = document.querySelector('#fps');
+
+    const goButton = document.querySelector('button');
+    let paused = true;
+    goButton.onclick = e => {
+        paused = !paused;
+        if (paused) {
+            e.target.textContent = 'go';
+        } else {
+            e.target.textContent = 'pause';
+            self.requestAnimationFrame(render);
+        }
+    };
+
+    let interCount = 1;
+    function render(t) {
+        update(points);
+        renderFrame(t, canvas, ctx, fps);
         if (!paused) {
             self.requestAnimationFrame(render);
         }
     }
-
-    //goButton.onclick({ target: goButton });
-    render(document.timeline.currentTime);
+    renderFrame(document.timeline.currentTime, canvas, ctx, fps);
 }