Wild new animation

docs/index.html

@@ -12,6 +12,7 @@
   <div id="toolbar">
     <br>
     <select id="shape-selector">
+      <option value="NewWave">NewWave</option>
       <option value="EyePrototype">EyePrototype</option>
       <option value="Nodal_expanding">Nodal_expanding</option>
       <option value="MaryFace">MaryFace</option>

docs/js/helper.js

@@ -92,12 +92,19 @@ async function fetchConfig(className) {
       { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate2" },
       { type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
     ],
+    NewWave: [
+      { type: "range", min: 300, max: 600, 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" },
+      { type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" },
+    ],
   };
   return config[className];
 }
 
 function addControl(item, instance) {
-  console.log(item);
+  // console.log(item);
   let parentDiv = document.getElementById("custom");
 
   let title = document.createElement("p");

docs/js/index.js

@@ -18,6 +18,7 @@ render_clear();
 let drawObj = null;
 function createInstance(className, args) {
   const classMap = {
+    NewWave: NewWave,
     PolyTwistColourWidth: PolyTwistColourWidth,
     FloralPhyllo: FloralPhyllo,
     Spiral1: Spiral1,

docs/js/objects.js

@@ -290,7 +290,7 @@ class Phyllotaxis extends BaseShape {
   draw(rotation) {
     rotation *= (this.speedMultiplier / 300)
     rotation += this.start
-    const sizeMultiplier = this.nMax/(5-3)
+    const sizeMultiplier = this.nMax / (5 - 3)
     if (this.wave === 1) {
       this.drawWave(rotation)
     }
@@ -307,7 +307,7 @@ class Phyllotaxis extends BaseShape {
         const y = r * Math.sin(a) + centerY;
 
         ctx.beginPath();
-        ctx.arc(x, y, (n/sizeMultiplier)+3, 0, 2 * Math.PI);
+        ctx.arc(x, y, (n / sizeMultiplier) + 3, 0, 2 * Math.PI);
         ctx.fillStyle = ncolour;
         // ctx.fillStyle = colourToText(ncolour);
         ctx.fill();
@@ -634,4 +634,41 @@ class MaryFace extends BaseShape {
     this.eye3.draw(rotation);
   }
 }
+class NewWave extends BaseShape {
+  constructor(width,sides,step,lineWidth,limiter) {
+    super();
+    this.width = width
+    this.sides = sides;
+    this.step = step;
+    this.lineWidth = lineWidth;
+    this.limiter = limiter;
+  }
+
+  draw(rotation) {
+    rotation *= this.speedMultiplier/400
+    ctx.lineWidth = this.lineWidth
+    for (let j = 0; j < this.sides; j++) {
+      const radRotation = rad(360/this.sides*j)
+      const inverter = 1-(j%2)*2
+      let lastX = centerX
+      let lastY = centerY
+      for (let i = 0; i < this.width; i += this.step) {
+
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.strokeStyle = colourToText(lerpRGB([255,51,170],[51,170,255],i/this.width))
+        const x = i
+        const y = (Math.sin(-i*inverter / 30 + rotation*inverter) * i/(this.limiter/100))
+
+        const xRotated = x * Math.cos(radRotation) - y * Math.sin(radRotation)
+        const yRotated = x * Math.sin(radRotation) + y * Math.cos(radRotation)
+        lastX= centerX + xRotated;
+        lastY= centerY + yRotated;
+        ctx.lineTo(centerX + xRotated, centerY + yRotated);
+        ctx.stroke();
+      }
+    }
+
+  }
+}