Add colours to lines

package.json

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

src/main/js/Main.ts

@@ -79,16 +79,19 @@ class LineSegment {
  */
 class Line {
     segments: LineSegment[];
+    color: string;
     thickness: number;
 
 
     /**
      * Constructs a new `Line`.
      *
+     * @param color the color to draw the line in
      * @param thickness the relative thickness of the line
      */
-    constructor(thickness: number) {
+    constructor(color: string, thickness: number) {
         this.segments = [];
+        this.color = color;
         this.thickness = thickness;
     }
 
@@ -114,7 +117,7 @@ class Line {
      */
     equals(other: Line): boolean {
         return this.segments.every((_, i) => this.segments[i].equals(other.segments[i]))
-            && this.thickness === other.thickness;
+            && this.color == other.color && this.thickness === other.thickness;
     }
 }
 
@@ -123,12 +126,21 @@ class Line {
  * Global constants.
  */
 const settings = {
+    // Radius of the central dot
     dotRadius: 20,
-    fillGoal: 0.3,
+    // How much percent of the window width should be filled in either direction before zooming starts
+    fillGoal: 0.6,
+    // Colors to assign to the lines
+    lineColors: ["#0072bd", "#d95319", "#edb120", "#7e2f8e", "#77ac30"],
+    // Length of an individual line piece
     lineLength: 5,
+    // Desired thickness of a line, based on the current level
     lineThicknesses: [1, 5, 15],
+    // Number of milliseconds between each new line segment
     stepTime: 25,
+    // Number of steps before performing induction
     stepsPerLevel: 15,
+    // How responsive zooming should be. Lower values are smoother but change zooming speed more often
     zoomSpeed: 1 / 30,
 };
 
@@ -144,7 +156,10 @@ doAfterLoad(() => {
 
 
     // Model
-    const lines: Line[] = [new Line(settings.lineThicknesses[0]), new Line(settings.lineThicknesses[1])];
+    const lines: Line[] = [
+        new Line(settings.lineColors[0], settings.lineThicknesses[0]),
+        new Line(settings.lineColors[1], settings.lineThicknesses[1])
+    ];
     let step = 0;
     setInterval(() => {
         const currentLevel = lines.findIndex(it => it.segments.length !== settings.stepsPerLevel ** 2);
@@ -165,7 +180,10 @@ doAfterLoad(() => {
 
             if (lowerLines.segments.length !== 0 && lowerLines.segments.length % settings.stepsPerLevel === 0) {
                 if (lines.length <= inductionLevel) {
-                    lines[inductionLevel] = new Line(settings.lineThicknesses[level] / zoomFactor);
+                    lines[inductionLevel] = new Line(
+                        settings.lineColors[inductionLevel % settings.lineColors.length],
+                        settings.lineThicknesses[level] / zoomFactor
+                    );
                 }
 
                 lines[inductionLevel].segments.push(lowerLines.sumSegmentsSlice(-settings.stepsPerLevel));
@@ -209,8 +227,8 @@ doAfterLoad(() => {
 
         // Zoom
         const excessFactor = Math.max(
-            (zoomFactor * maxPoint.x) / (canvas.width * settings.fillGoal),
-            (zoomFactor * maxPoint.y) / (canvas.height * settings.fillGoal)
+            (zoomFactor * maxPoint.x) / (canvas.width / 2 * settings.fillGoal),
+            (zoomFactor * maxPoint.y) / (canvas.height / 2 * settings.fillGoal)
         );
         if (excessFactor > 1) {
             zoomFactor /= excessFactor ** settings.zoomSpeed;
@@ -221,6 +239,7 @@ doAfterLoad(() => {
         ctx.lineCap = "round";
         ctx.strokeStyle = "#ffffff";
         for (const line of lines) {
+            ctx.strokeStyle = line.color;
             ctx.lineWidth = line.thickness;
             ctx.beginPath();
             ctx.moveTo(0, 0);