From c5969362ad461659697dde12f8c9a9351fbd5f7c Mon Sep 17 00:00:00 2001
From: "F.W. Dekker" <f@fwdekker.com>
Date: Sun, 31 Oct 2021 16:31:59 +0100
Subject: [PATCH] Add some sort of adaptive zoom

---
 src/main/js/Main.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index 726a850..b15f7d4 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -114,6 +114,7 @@ class Line {
  */
 const settings = {
     dotRadius: 10,
+    fillGoal: 0.3,
     stepTime: 250,
     stepsPerLevel: 5,
 };
@@ -133,6 +134,7 @@ doAfterLoad(() => {
     const lines: Line[] = [new Line(1), new Line(5)];
 
     let step = 0;
+    let lastStepTime = Date.now();
     setInterval(() => {
         const stepLine = Math.floor(step / (settings.stepsPerLevel ** 2));
         const inductionLine = stepLine + 1;
@@ -163,6 +165,7 @@ doAfterLoad(() => {
         }
 
         step++;
+        lastStepTime = Date.now();
     }, settings.stepTime);
 
 
@@ -177,6 +180,8 @@ doAfterLoad(() => {
 
     // Draw
     const startTime = Date.now();
+    let maxX = 0;
+    let zoomFactor = 1;
     const draw = () => {
         ctx.restore();
         ctx.save();
@@ -196,11 +201,10 @@ doAfterLoad(() => {
         ctx.stroke();
 
         // Zoom
-        // TODO: Adaptive zoom
-        const nowTime = Date.now();
-        const factor = settings.stepsPerLevel **
-            ((nowTime - startTime) / (settings.stepsPerLevel ** 2 * settings.stepTime));
-        ctx.scale(1 / factor, 1 / factor);
+        if ((1 / zoomFactor) * maxX > canvas.width * settings.fillGoal) {
+            zoomFactor *= (((1 / zoomFactor) * maxX) / (canvas.width * settings.fillGoal)) ** (1 / 60);
+        }
+        ctx.scale(1 / zoomFactor, 1 / zoomFactor);
 
         // Lines
         ctx.strokeStyle = "#ffffff";
@@ -213,6 +217,8 @@ doAfterLoad(() => {
             for (const segment of line.segments) {
                 lastPos = new Point(lastPos.x + segment.x, lastPos.y + segment.y);
                 ctx.lineTo(lastPos.x, lastPos.y);
+
+                maxX = Math.max(maxX, lastPos.x);
             }
 
             ctx.stroke();