From 1fe4d3763eaefbfcc4ac99bbdb2ec15413b20ce9 Mon Sep 17 00:00:00 2001
From: Sam <Samkleinhanss98@gmail.com>
Date: Mon, 1 Sep 2025 18:42:23 +1200
Subject: [PATCH] Add spiralProngs to Phyllotaxis and update config

Introduces a new 'spiralProngs' property to the Phyllotaxis class and its configuration, allowing control over spiral prong count. Also expands the 'width' range for NewWave in the config. Updates the drawSpiral method to use spiralProngs for angle calculation.
---
 docs/js/helper.js  |  3 ++-
 docs/js/objects.js | 21 +++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/docs/js/helper.js b/docs/js/helper.js
index c2aca4f..eeaf9d3 100644
--- a/docs/js/helper.js
+++ b/docs/js/helper.js
@@ -50,6 +50,7 @@ async function fetchConfig(className) {
       { type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
       { type: "range", min: 1, max: 10000, defaultValue: 300, property: "nMax" },
       { type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" },
+      { type: "range", min: 1, max: 12, defaultValue: 2, property: "spiralProngs" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
     ],
@@ -98,7 +99,7 @@ async function fetchConfig(className) {
       { type: "range", min: 8000, max: 2000000, defaultValue: 2000000, property: "milestone" },
     ],
     NewWave: [
-      { type: "range", min: 300, max: 600, defaultValue: 342, property: "width" },
+      { type: "range", min: 300, max: 1600, defaultValue: 342, property: "width" },
       { type: "range", min: 2, max: 40, defaultValue: 4, property: "sides" },
       { type: "range", min: 1, max: 100, defaultValue: 1, property: "step" },
       { type: "range", min: 1, max: 10, defaultValue: 4, property: "lineWidth" },
diff --git a/docs/js/objects.js b/docs/js/objects.js
index 5d8d0ee..b8b553a 100644
--- a/docs/js/objects.js
+++ b/docs/js/objects.js
@@ -310,7 +310,7 @@ class Nodal_expanding extends BaseShape {
   }
 }
 class Phyllotaxis extends BaseShape {
-  constructor(width, size, sizeMin, start, nMax, wave, colour1, colour2) {
+  constructor(width, size, sizeMin, start, nMax, wave, spiralProngs, colour1, colour2) {
     super();
     this.width = width;
     this.size = size;
@@ -318,6 +318,7 @@ class Phyllotaxis extends BaseShape {
     this.start = start;
     this.nMax = nMax;
     this.wave = wave;
+    this.spiralProngs = spiralProngs;
     this.colour1 = colour1;
     this.colour2 = colour2;
   }
@@ -343,6 +344,7 @@ class Phyllotaxis extends BaseShape {
       ctx.fill();
     }
   }
+
   drawSpiral(angle) {
     angle /= 5000
     const startColor = [45, 129, 252];
@@ -350,27 +352,30 @@ class Phyllotaxis extends BaseShape {
     const distanceMultiplier = 2;
     const maxIterations = 1000;
 
-
+    ctx.beginPath();
+    ctx.moveTo(centerX, centerY); // Start at the center
     for (let n = 0; n < maxIterations; n++) {
       const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
 
-      const nAngle = n * angle + Math.sin(angle * n * 2);
+      const nAngle = n * angle + Math.sin(angle * n * this.spiralProngs);
       const radius = distanceMultiplier * n;
       const xCoord = radius * Math.cos(nAngle) + centerX;
       const yCoord = radius * Math.sin(nAngle) + centerY;
 
-      ctx.beginPath();
-      ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
-      ctx.fillStyle = colourToText(nColor);
-      ctx.fill();
+
+      // ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+      ctx.lineTo(xCoord, yCoord);
+      // ctx.fillStyle = colourToText(nColor);
+      // ctx.fill();
     }
+    ctx.stroke();
   }
 
   // Draw_nodal(300, 100, 31, rotation, "blue");
   draw(rotation) {
     rotation *= (this.speedMultiplier / 300)
     rotation += this.start
-    const sizeMultiplier = this.nMax / this.size +  (5 - 3)
+    const sizeMultiplier = this.nMax / this.size + (5 - 3)
     if (this.wave === 1) {
       this.drawWave(rotation)
     }