Prevent eventual scaling overflow

package.json

@@ -1,6 +1,6 @@
 {
     "name": "psychotherapy",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "Psychotherapy",
     "author": "F.W. Dekker",
     "browser": "dist/bundle.js",

src/main/js/Main.ts

@@ -96,6 +96,19 @@ class Line {
     }
 
 
+    /**
+     * Rescales this `Line` by [factor].
+     *
+     * @param factor the factor to rescale by
+     */
+    scale(factor: number) {
+        this.segments.forEach(segment => {
+            segment.x *= factor;
+            segment.y *= factor;
+        });
+        this.thickness *= factor;
+    }
+
     /**
      * Returns the sum of a slice of this `Line`'s [LineSegment]s.
      *
@@ -136,6 +149,8 @@ const settings = {
     lineLength: 5,
     // Desired thickness of a line, based on the current level
     lineThicknesses: [1, 5, 15],
+    // Maximum number of lines simultaneously visible
+    maxVisibleLines: 5,
     // Number of milliseconds between each new line segment
     stepTime: 25,
     // Number of steps before performing induction
@@ -154,14 +169,18 @@ doAfterLoad(() => {
     const canvas = $("#art");
     const ctx = canvas.getContext("2d");
 
+    // Shared state
+    let lineColorIndex = Math.floor(Math.random() * settings.lineColors.length);
+    const lines: Line[] = [
+        new Line(settings.lineColors[lineColorIndex], settings.lineThicknesses[0]),
+        new Line(settings.lineColors[++lineColorIndex % settings.lineColors.length], settings.lineThicknesses[1])
+    ];
+
+    let maxPoint = new Point(0, 0);
+    let zoomFactor = 1;
+
 
     // Model
-    const lineColorOffset = Math.floor(Math.random() * settings.lineColors.length);
-    const lines: Line[] = [
-        new Line(settings.lineColors[lineColorOffset], settings.lineThicknesses[0]),
-        new Line(settings.lineColors[(lineColorOffset + 1) % settings.lineColors.length], settings.lineThicknesses[1])
-    ];
-    let step = 0;
     setInterval(() => {
         const currentLevel = lines.findIndex(it => it.segments.length !== settings.stepsPerLevel ** 2);
 
@@ -182,7 +201,7 @@ doAfterLoad(() => {
             if (lowerLines.segments.length !== 0 && lowerLines.segments.length % settings.stepsPerLevel === 0) {
                 if (lines.length <= inductionLevel) {
                     lines[inductionLevel] = new Line(
-                        settings.lineColors[(lineColorOffset + inductionLevel) % settings.lineColors.length],
+                        settings.lineColors[++lineColorIndex % settings.lineColors.length],
                         settings.lineThicknesses[level] / zoomFactor
                     );
                 }
@@ -191,8 +210,15 @@ doAfterLoad(() => {
             }
         }
 
-        // Update shared info
+        // Rescale if necessary
-        step++;
+        if (currentLevel >= settings.maxVisibleLines) {
+            lines.splice(0, 1);
+
+            const scalingFactor = lines[0].thickness;
+            lines.forEach(it => it.scale(1 / scalingFactor));
+            maxPoint = new Point(maxPoint.x / scalingFactor, maxPoint.y / scalingFactor);
+            zoomFactor *= scalingFactor;
+        }
     }, settings.stepTime);
 
 
@@ -206,8 +232,6 @@ doAfterLoad(() => {
 
 
     // Draw
-    let maxPoint = new Point(0, 0);
-    let zoomFactor = 1;
     const draw = () => {
         ctx.restore();
         ctx.save();