Invisible root pendulum

build/index.js

@@ -19,7 +19,7 @@ let pendulum = new Pendulum();
 /**
  * The pendulum count (of real pendulums).
  */
-let pendulumCount = Math.max(3, parseInt(urlParameter.get("count") ?? randomIntInRange(5, 10).toFixed()));
+let pendulumCount = Math.max(2, parseInt(urlParameter.get("count") ?? randomIntInRange(5, 10).toFixed())) + 1;
 /**
  * The animation speed.
  */
@@ -84,8 +84,12 @@ function generateRandomPendulumTree() {
     }
     // 3: connect the remaining two nodes
     connect(list[0], list[1]);
+    // make graph directed
+    makeDirected(nodes[0]);
+    // the root pendulum is just a dummy (container)
+    nodes[0].isDummy = true;
+    // assign the root pendulum
     pendulum = nodes[0];
-    makeDirected(pendulum);
     function connect(a, b) {
         nodes[a].children.push(nodes[b]);
         nodes[b].children.push(nodes[a]);

build/pendulum.js

@@ -1,6 +1,10 @@
 "use strict";
 console.log("pendulum.ts loaded");
 class Pendulum {
+    /**
+     * Whether this is just a dummy. (invisible container for children)
+     */
+    isDummy;
     /**
      * The length.
      */
@@ -51,6 +55,7 @@ class Pendulum {
             * Spinner - Fast rotation speed
             * Cleaner - Same color as background
         */
+        this.isDummy = isDummy;
         this.length = {
             base: randomIntInRange(100, 250),
             amplitude: randomInRange(10, 25),
@@ -84,7 +89,7 @@ class Pendulum {
         const x = parentX + this.getCurrentValue(this.length) * Math.cos(angle * Math.PI / 180);
         const y = parentY + this.getCurrentValue(this.length) * Math.sin(angle * Math.PI / 180);
         const currentColor = this.updateColor(deltaTime);
-        if (this.lastPosition) {
+        if (!this.isDummy && this.lastPosition) {
             context.beginPath();
             context.strokeStyle = currentColor;
             context.lineWidth = Math.max(this.getCurrentValue(this.width), 1);

src/index.ts

@@ -23,7 +23,7 @@ let pendulum: Pendulum = new Pendulum();
 /**
  * The pendulum count (of real pendulums).
  */
-let pendulumCount: number = Math.max(3, parseInt(urlParameter.get("count") ?? randomIntInRange(5, 10).toFixed()));
+let pendulumCount: number = Math.max(2, parseInt(urlParameter.get("count") ?? randomIntInRange(5, 10).toFixed())) + 1;
 
 /**
  * The animation speed.
@@ -95,9 +95,15 @@ function generateRandomPendulumTree(): void {
     }
     // 3: connect the remaining two nodes
     connect(list[0], list[1]);
-    pendulum = nodes[0];
 
-    makeDirected(pendulum);
+    // make graph directed
+    makeDirected(nodes[0]);
+
+    // the root pendulum is just a dummy (container)
+    nodes[0].isDummy = true;
+
+    // assign the root pendulum
+    pendulum = nodes[0];
 
     function connect(a: number, b: number) {
         nodes[a].children.push(nodes[b]);

src/pendulum.ts

@@ -1,6 +1,11 @@
 console.log("pendulum.ts loaded");
 
 class Pendulum {
+    /**
+     * Whether this is just a dummy. (invisible container for children)
+     */
+    public isDummy: boolean;
+
     /**
      * The length.
      */
@@ -65,6 +70,7 @@ class Pendulum {
             * Spinner - Fast rotation speed
             * Cleaner - Same color as background
         */
+        this.isDummy = isDummy;
         this.length = {
             base: randomIntInRange(100, 250),
             amplitude: randomInRange(10, 25),
@@ -100,7 +106,7 @@ class Pendulum {
         const x = parentX + this.getCurrentValue(this.length) * Math.cos(angle * Math.PI / 180);
         const y = parentY + this.getCurrentValue(this.length) * Math.sin(angle * Math.PI / 180);
         const currentColor = this.updateColor(deltaTime);
-        if (this.lastPosition) {
+        if (!this.isDummy && this.lastPosition) {
             context.beginPath();
             context.strokeStyle = currentColor;
             context.lineWidth = Math.max(this.getCurrentValue(this.width), 1);