PhylloCone seperated

Tests/webGl/my-threejs-test/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "parcel": "^1.12.4"
+    "parcel": "^2.16.3"
   },
   "dependencies": {
     "@parcel/transformer-glsl": "^2.12.0",

docs/config.json

@@ -1,16 +0,0 @@
-{
-    "PolyTwistColourWidth": [
-      { "type": "range", "min": 3, "max": 10, "defaultValue": 5, "property": "sides" },
-      { "type": "range", "min": 1, "max": 600, "defaultValue": 300, "property": "width" },
-      { "type": "range", "min": 1, "max": 100, "defaultValue": 50, "property": "depth" },
-      { "type": "range", "min": 0, "max": 360, "defaultValue": 180, "property": "rotation" },
-      { "type": "color", "defaultValue": "#4287f5", "property": "colour1" },
-      { "type": "color", "defaultValue": "#42f57b", "property": "colour2" }
-    ],
-    "FloralPhyllo": [
-        { "type": "range", "min": 1, "max": 600, "defaultValue": 300, "property": "width" },
-        { "type": "range", "min": 1, "max": 100, "defaultValue": 50, "property": "depth" },
-        { "type": "color", "defaultValue": "#4287f5", "property": "colour1" },
-        { "type": "color", "defaultValue": "#4287f5", "property": "colour2" }
-    ]
-  }

docs/index.html

@@ -56,6 +56,7 @@
 <script src="./js/shapes/FloralPhyllo_Accident.js" type="text/javascript"></script>
 <script src="./js/shapes/Nodal_expanding.js" type="text/javascript"></script>
 <script src="./js/shapes/Phyllotaxis.js" type="text/javascript"></script>
+<script src="./js/shapes/PhylloCone.js" type="text/javascript"></script>
 <script src="./js/shapes/SquareTwist_angle.js" type="text/javascript"></script>
 <script src="./js/shapes/CircleExpand.js" type="text/javascript"></script>
 <script src="./js/shapes/EyePrototype.js" type="text/javascript"></script>

docs/js/core/BaseShape.js

@@ -43,7 +43,7 @@ class BaseShape {
   constructor() {
     this.controls = [];
     this.controlManager = null;
-    this.speedMultiplier = 500;
+    this.speedMultiplier = 100;
   }
 
   /**

docs/js/presets.js

@@ -5,59 +5,10 @@
  * Each preset has: name, description, and data (scene export)
  */
 const BUILT_IN_PRESETS = [
-  {
+
-    name: "Hypnotic Spiral",
-    description: "Classic spiral pattern with smooth colors",
-    builtIn: true,
-    data: {
-      version: 1,
-      layers: [
-        {
-          name: "Spiral1",
-          visible: true,
-          paused: false,
-          collapsed: true,
-          values: {
-            width: 400,
-            n: 6,
-            piv: 60,
-            step: 1,
-            line_width: 2
-          },
-          filters: {}
-        }
-      ]
-    }
-  },
-  {
-    name: "Floral Bloom",
-    description: "Organic flower-like pattern",
-    builtIn: true,
-    data: {
-      version: 1,
-      layers: [
-        {
-          name: "FloralPhyllo",
-          visible: true,
-          paused: false,
-          collapsed: true,
-          values: {
-            width: 500,
-            n: 8,
-            piv: 45,
-            start: 0,
-            end: 180,
-            step: 1,
-            line_width: 1
-          },
-          filters: {}
-        }
-      ]
-    }
-  },
   {
     name: "Poly Twist Rainbow",
-    description: "Colorful twisting polygon",
+    description: "hexagon bby",
     builtIn: true,
     data: {
       version: 1,
@@ -92,15 +43,19 @@ const BUILT_IN_PRESETS = [
           name: "Nodal_expanding",
           visible: true,
           paused: false,
-          collapsed: true,
+          collapsed: false,
           values: {
-            width: 300,
+            expand: 2,
-            nodeCount: 12,
+            points: 550,
             start: 0,
+            line_width: 4,
             colour1: "#ffffff",
-            colour2: "#4a9eff"
+            colour2: "#4a9eff",
+            colour_change: 3,
+            speedMultiplier: 535
           },
-          filters: {}
+          filters: {},
+          controlBounds: {}
         }
       ]
     }
@@ -146,7 +101,7 @@ const BUILT_IN_PRESETS = [
           }
         }
       ]
-}
+    }
   },
   {
     name: "Black Hole Spiral",
@@ -160,7 +115,8 @@ const BUILT_IN_PRESETS = [
           visible: true,
           paused: false,
           collapsed: true,
-          values: { width: 350, n: 4, piv: 90, step: 1, line_width: 2,
+          values: {
+            width: 350, n: 4, piv: 90, step: 1, line_width: 2,
             colour: "#7734D3"
           },
           filters: {}
@@ -170,27 +126,30 @@ const BUILT_IN_PRESETS = [
     }
   },
   {
-    name: "Phyllotaxis Garden",
+    name: "PhylloCone Blob",
-    description: "Nature-inspired spiral arrangement",
+    description: "Mystery orb",
     builtIn: true,
     data: {
       version: 1,
       layers: [
         {
-          name: "Phyllotaxis",
+          name: "PhylloCone",
           visible: true,
           paused: false,
-          collapsed: true,
+          collapsed: false,
           values: {
-            n: 300,
+            start: 0,
-            c: 8,
+            spiralProngs: 4,
-            start: 137.5,
+            width_10: 12,
-            colour1: "#ff6b6b",
+            iterations: 437,
-            colour2: "#4ecdc4",
+            distance: 1,
-            dotSize: 6,
+            line_width: 2,
-            mode: "spiral"
+            colour1: "#2D81FC",
+            colour2: "#FC0362",
+            speedMultiplier: 100
           },
-          filters: {}
+          filters: {},
+          controlBounds: {}
         }
       ]
     }

docs/js/shapes/PhylloCone.js

@@ -0,0 +1,52 @@
+/**
+ * PhylloCone - Spiral cone pattern based on phyllotaxis
+ */
+class PhylloCone extends BaseShape {
+  static config = [
+    { type: 'range', min: 0, max: 3141, defaultValue: 0, property: 'start' },
+    { type: 'range', min: 1, max: 12, defaultValue: 2, property: 'spiralProngs' },
+    { type: 'range', min: 1, max: 50, defaultValue: 10, property: 'width_10' },
+    { type: 'range', min: 1, max: 2000, defaultValue: 1000, property: 'iterations' },
+    { type: 'range', min: 1, max: 10, defaultValue: 2, property: 'distance' },
+    { type: 'range', min: 1, max: 10, defaultValue: 2, property: 'line_width' },
+    { type: 'color', defaultValue: '#2D81FC', property: 'colour1' },
+    { type: 'color', defaultValue: '#FC0362', property: 'colour2' },
+  
+  ];
+
+  constructor(start, spiralProngs, width_10, iterations, distance,line_width, colour1, colour2) {
+    super();
+    this.start = start;
+    this.spiralProngs = spiralProngs;
+    this.width_10 = width_10;
+    this.iterations = iterations;
+    this.distance = distance;
+    this.line_width = line_width;
+    this.colour1 = colour1;
+    this.colour2 = colour2;
+  }
+
+  draw(elapsed) {
+    this.updateFilters(elapsed);
+    const rotation = elapsed * (this.speedMultiplier / 100) + this.start;
+    const angle = rotation / 1000;
+    const distanceMultiplier = this.distance;
+    const maxIterations = this.iterations;
+
+    ctx.beginPath();
+    ctx.moveTo(centerX, centerY);
+    for (let n = 0; n < maxIterations; n++) {
+      const nAngle = n * angle + Math.sin(angle * n * this.spiralProngs)*(this.width_10/10);
+      const radius = distanceMultiplier * n;
+      const xCoord = radius * Math.cos(nAngle) + centerX;
+      const yCoord = radius * Math.sin(nAngle) + centerY;
+      ctx.lineTo(xCoord, yCoord);
+    }
+    ctx.lineWidth = this.line_width;
+    ctx.strokeStyle = this.colour1;
+    ctx.stroke();
+    console.log(this.line_width);
+  }
+}
+
+shapeRegistry.register('PhylloCone', PhylloCone);

docs/js/shapes/Phyllotaxis.js

@@ -1,5 +1,5 @@
 /**
- * Phyllotaxis - Classic phyllotaxis pattern with multiple wave modes
+ * Phyllotaxis - Classic phyllotaxis pattern with optional giggle effect
  */
 class Phyllotaxis extends BaseShape {
   static config = [
@@ -8,73 +8,48 @@ class Phyllotaxis extends BaseShape {
     { type: 'range', min: 1, max: 40, defaultValue: 4, property: 'sizeMin' },
     { 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: 'checkbox', defaultValue: false, property: 'giggle' },
-    { type: 'range', min: 1, max: 12, defaultValue: 2, property: 'spiralProngs' },
     { type: 'color', defaultValue: '#2D81FC', property: 'colour1' },
     { type: 'color', defaultValue: '#FC0362', property: 'colour2' },
   ];
 
-  constructor(width, size, sizeMin, start, nMax, wave, spiralProngs, colour1, colour2) {
+  constructor(width, size, sizeMin, start, nMax, giggle, colour1, colour2) {
     super();
     this.width = width;
     this.size = size;
     this.sizeMin = sizeMin;
     this.start = start;
     this.nMax = nMax;
-    this.wave = wave;
+    this.giggle = giggle;
-    this.spiralProngs = spiralProngs;
     this.colour1 = colour1;
     this.colour2 = colour2;
   }
 
-  drawWave(angle) {
+  drawGiggle(angle) {
     angle /= 1000;
-    const startColor = [45, 129, 252];
-    const endColor = [252, 3, 98];
     const distanceMultiplier = 3;
     const maxIterations = this.nMax;
 
     for (let n = 0; n < maxIterations; n++) {
       ctx.beginPath();
-      const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+      const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);
       const nAngle = n * angle + Math.sin(rad(n * 1 + angle * 40000)) / 2;
       const radius = distanceMultiplier * n;
       const xCoord = radius * Math.cos(nAngle) + centerX;
       const yCoord = radius * Math.sin(nAngle) + centerY;
       ctx.arc(xCoord, yCoord, this.size, 0, 2 * Math.PI);
-      ctx.fillStyle = colourToText(nColor);
+      ctx.fillStyle = ncolour;
       ctx.fill();
     }
   }
 
-  drawSpiral(angle) {
-    angle /= 5000;
-    const startColor = [45, 129, 252];
-    const endColor = [252, 3, 98];
-    const distanceMultiplier = 2;
-    const maxIterations = 1000;
-
-    ctx.beginPath();
-    ctx.moveTo(centerX, centerY);
-    for (let n = 0; n < maxIterations; n++) {
-      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.lineTo(xCoord, yCoord);
-    }
-    ctx.stroke();
-  }
-
   draw(elapsed) {
     this.updateFilters(elapsed);
     const rotation = elapsed * (this.speedMultiplier / 300) + this.start;
     const sizeMultiplier = this.nMax / this.size + (5 - 3);
 
-    if (this.wave === 1) {
+    if (this.giggle) {
-      this.drawWave(rotation);
+      this.drawGiggle(rotation);
-    } else if (this.wave === 2) {
-      this.drawSpiral(rotation);
     } else {
       for (let n = 0; n < this.nMax; n += 1) {
         const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);