Merge 'main' https://github.com/SamEyeBam/animate

docs/js/helper.js

@@ -70,8 +70,12 @@ async function fetchConfig(className) {
       { type: "range", min: 1, max: 100, defaultValue: 10, property: "blink_speed" },
       { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_spiral" },
       { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_pupil" },
+      { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_expand" },
+      { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_eyelid" },
       { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" },
-      { type: "color", defaultValue: "#2D81FC", property: "colour1" },
+      { type: "color", defaultValue: "#00fffb", property: "colourPupil" },
+      { type: "color", defaultValue: "#ff0000", property: "colourSpiral" },
+      { type: "color", defaultValue: "#00fffb", property: "colourExpand" },
     ],
   };
   return config[className];

docs/js/objects.js

@@ -10,7 +10,16 @@ class BaseShape {
       this.controls.push({ element, listener });
     }
 
-    const { element, listener } = addControl({ type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", }, this);
+    const { element, listener } = addControl(
+      {
+        type: "range",
+        min: 1,
+        max: 500,
+        defaultValue: 100,
+        property: "speedMultiplier",
+      },
+      this
+    );
     this.controls.push({ element, listener });
   }
 
@@ -21,7 +30,9 @@ class BaseShape {
       }
       if (element && element.parentElement) {
         element.parentElement.removeChild(element);
-        const titleElement = document.getElementById("elText" + element.id.slice(2));
+        const titleElement = document.getElementById(
+          "elText" + element.id.slice(2)
+        );
         titleElement.parentElement.removeChild(titleElement);
       }
     });
@@ -34,7 +45,16 @@ class BaseShape {
 }
 
 class PolyTwistColourWidth extends BaseShape {
-  constructor(sides, width, line_width, depth, rotation, speedMultiplier, colour1, colour2) {
+  constructor(
+    sides,
+    width,
+    line_width,
+    depth,
+    rotation,
+    speedMultiplier,
+    colour1,
+    colour2
+  ) {
     super();
     this.sides = sides;
     this.width = width;
@@ -47,24 +67,49 @@ class PolyTwistColourWidth extends BaseShape {
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     let out_angle = 0;
     const innerAngle = 180 - ((this.sides - 2) * 180) / this.sides;
-    const scopeAngle = rotation - (innerAngle * Math.floor(rotation / innerAngle));
+    const scopeAngle =
+      rotation - innerAngle * Math.floor(rotation / innerAngle);
 
     if (scopeAngle < innerAngle / 2) {
-      out_angle = innerAngle / (2 * Math.cos((2 * Math.PI * scopeAngle) / (3 * innerAngle))) - innerAngle / 2;
+      out_angle =
+        innerAngle /
+          (2 * Math.cos((2 * Math.PI * scopeAngle) / (3 * innerAngle))) -
+        innerAngle / 2;
     } else {
-      out_angle = -innerAngle / (2 * Math.cos(((2 * Math.PI) / 3) - ((2 * Math.PI * scopeAngle) / (3 * innerAngle)))) + (innerAngle * 3) / 2;
+      out_angle =
+        -innerAngle /
+          (2 *
+            Math.cos(
+              (2 * Math.PI) / 3 - (2 * Math.PI * scopeAngle) / (3 * innerAngle)
+            )) +
+        (innerAngle * 3) / 2;
     }
-    let minWidth = Math.sin(rad(innerAngle / 2)) * (0.5 / Math.tan(rad(innerAngle / 2))) * 2;
+    let minWidth =
+      Math.sin(rad(innerAngle / 2)) * (0.5 / Math.tan(rad(innerAngle / 2))) * 2;
 
-    let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90 + innerAngle / 2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle)));
+    let widthMultiplier =
+      minWidth /
+      Math.sin(
+        (Math.PI / 180) *
+          (90 +
+            innerAngle / 2 -
+            out_angle +
+            innerAngle * Math.floor(out_angle / innerAngle))
+      );
 
     for (let i = 0; i < this.depth; i++) {
       const fraction = i / this.depth;
       const ncolour = LerpHex(this.colour1, this.colour2, fraction);
-      DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation, ncolour, this.line_width);
+      DrawPolygon(
+        this.sides,
+        this.width * widthMultiplier ** i,
+        out_angle * i + this.rotation,
+        ncolour,
+        this.line_width
+      );
     }
   }
 }
@@ -79,13 +124,13 @@ class FloralPhyllo extends BaseShape {
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     // var c = 24; //something to do with width. but not width
     var c = 1; //something to do with width. but not width
     //dont make larger than 270 unless altering the number of colours in lerpedColours
     for (let n = 200; n > 0; n -= 1) {
       // let ncolour = LerpHex(this.colour1, this.colour2, n);
-      const a = n * rotation / 1000; //137.5;
+      const a = (n * rotation) / 1000; //137.5;
       const r = c * Math.sqrt(n);
       const x = r * Math.cos(a) + centerX;
       const y = r * Math.sin(a) + centerY;
@@ -103,31 +148,42 @@ class Spiral1 extends BaseShape {
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
-    var rot = Math.round((this.sides - 2) * 180 / this.sides * 2)
+    var rot = Math.round((((this.sides - 2) * 180) / this.sides) * 2);
     var piv = 360 / this.sides;
-    var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
+    var stt = 0.5 * Math.PI - rad(rot); //+ rad(rotation);
     var end = 0;
-    var n = this.width / ((this.width / 10) * (this.width / 10)) //pixel correction for mid leaf
+    var n = this.width / ((this.width / 10) * (this.width / 10)); //pixel correction for mid leaf
 
     for (let i = 1; i < this.sides + 1; i++) {
       end = stt + rad(rot);
 
       ctx.beginPath();
-      ctx.arc(centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width, this.width, stt + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 0);
+      ctx.arc(
+        centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width,
+        centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width,
+        this.width,
+        stt + rad(rotation) - (stt - end) / 2,
+        end + rad(rotation) + rad(n),
+        0
+      );
       ctx.strokeStyle = this.colour;
       ctx.stroke();
 
-
       ctx.beginPath();
-      ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i - rotation)) * this.width, this.width, stt - rad(rotation), end - (end - stt) / 2 + rad(n) - rad(rotation), 0);
+      ctx.arc(
+        centerX + Math.cos(rad(90 + piv * i - rotation)) * this.width,
+        centerY + Math.sin(rad(90 + piv * i - rotation)) * this.width,
+        this.width,
+        stt - rad(rotation),
+        end - (end - stt) / 2 + rad(n) - rad(rotation),
+        0
+      );
       ctx.strokeStyle = this.colour;
       ctx.stroke();
 
-
+      stt = end + -rad(rot - piv); //+rad(30);
-      stt = end + -(rad(rot - piv)) //+rad(30);
     }
-
   }
 }
 
@@ -140,31 +196,42 @@ class FloralAccident extends BaseShape {
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
-    var rot = Math.round((this.sides - 2) * 180 / this.sides * 2)
+    var rot = Math.round((((this.sides - 2) * 180) / this.sides) * 2);
     var piv = 360 / this.sides;
-    var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
+    var stt = 0.5 * Math.PI - rad(rot); //+ rad(rotation);
     var end = 0;
-    var n = this.width / ((this.width / 10) * (this.width / 10)) //pixel correction for mid leaf
+    var n = this.width / ((this.width / 10) * (this.width / 10)); //pixel correction for mid leaf
 
     for (let i = 1; i < this.sides + 1; i++) {
       end = stt + rad(rot);
 
       ctx.beginPath();
-      ctx.arc(centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width, this.width, stt - (stt - end + rad(rotation)) / 2, end + rad(n), 0);
+      ctx.arc(
+        centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width,
+        centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width,
+        this.width,
+        stt - (stt - end + rad(rotation)) / 2,
+        end + rad(n),
+        0
+      );
       ctx.strokeStyle = this.colour;
       ctx.stroke();
 
-
       ctx.beginPath();
-      ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i - rotation)) * this.width, this.width, stt, end - (end - stt - rad(rotation)) / 2 + rad(n), 0);
+      ctx.arc(
+        centerX + Math.cos(rad(90 + piv * i - rotation)) * this.width,
+        centerY + Math.sin(rad(90 + piv * i - rotation)) * this.width,
+        this.width,
+        stt,
+        end - (end - stt - rad(rotation)) / 2 + rad(n),
+        0
+      );
       ctx.strokeStyle = this.colour;
       ctx.stroke();
 
-
+      stt = end + -rad(rot - piv); //+rad(30);
-      stt = end + -(rad(rot - piv)) //+rad(30);
     }
-
   }
 }
 class FloralPhyllo_Accident extends BaseShape {
@@ -177,7 +244,7 @@ class FloralPhyllo_Accident extends BaseShape {
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     var c = 24; //something to do with width. but not width
 
     for (let n = 0; n < 300; n += 1) {
@@ -188,7 +255,6 @@ class FloralPhyllo_Accident extends BaseShape {
       let y = r * Math.sin(a) + centerY;
 
       drawEyelidAccident(x, y);
-
     }
   }
 }
@@ -200,35 +266,44 @@ class Nodal_expanding extends BaseShape {
     this.line_width = line_width;
     this.colour1 = colour1;
     this.colour2 = colour2;
-    this.colour_change = colour_change
+    this.colour_change = colour_change;
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
-    let colour_change = this.colour_change / 8
+    let colour_change = this.colour_change / 8;
-    var angle = 360 / this.points * rotation
+    var angle = (360 / this.points) * rotation;
 
     var start_angle = angle;
     var done = false;
     var total_moves = 1;
     var length = this.expand;
 
-    for (let z = 1; z <= 100; z++) { //why specifically 2500
+    for (let z = 1; z <= 100; z++) {
+      //why specifically 2500
       ctx.beginPath();
-      let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(z * colour_change)));
+      let ncolour = LerpHex(
+        this.colour1,
+        this.colour2,
+        Math.cos(rad(z * colour_change))
+      );
 
-      ctx.moveTo(centerX + (Math.cos(rad(angle * (z - 1) + 0)) * (length - this.expand)), centerY + (Math.sin(rad(angle * (z - 1) + 0)) * (length - this.expand)));
+      ctx.moveTo(
-      ctx.lineTo(centerX + (Math.cos(rad(angle * z + 0)) * length), centerY + (Math.sin(rad(angle * z + 0)) * length));
+        centerX + Math.cos(rad(angle * (z - 1) + 0)) * (length - this.expand),
+        centerY + Math.sin(rad(angle * (z - 1) + 0)) * (length - this.expand)
+      );
+      ctx.lineTo(
+        centerX + Math.cos(rad(angle * z + 0)) * length,
+        centerY + Math.sin(rad(angle * z + 0)) * length
+      );
       length += this.expand;
-      ctx.lineWidth = this.line_width;//try 1
+      ctx.lineWidth = this.line_width; //try 1
       ctx.strokeStyle = ncolour;
-      ctx.lineCap = "round"
+      ctx.lineCap = "round";
       // ctx.strokeStyle = colourToText(ncolour);
-      console.log(ncolour)
+      console.log(ncolour);
       ctx.stroke();
     }
-
-
   }
 }
 class Nodal extends BaseShape {
@@ -242,31 +317,35 @@ class Nodal extends BaseShape {
   }
   // Draw_nodal(300, 100, 31, rotation, "blue");
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     // console.log(rotate)
-    var angle = 360 / this.points * this.step
+    var angle = (360 / this.points) * this.step;
     ctx.beginPath();
     var start_angle = angle;
     var done = false;
     var total_moves = 1;
-    ctx.moveTo(centerX + (Math.cos(rad(angle + rotation)) * this.width), centerY + (Math.sin(rad(angle + rotation)) * this.width));
+    ctx.moveTo(
+      centerX + Math.cos(rad(angle + rotation)) * this.width,
+      centerY + Math.sin(rad(angle + rotation)) * this.width
+    );
 
     while (done != true) {
       if ((total_moves * this.step) % this.points != 0) {
-        total_moves++
+        total_moves++;
-      }
+      } else {
-      else {
+        total_moves++;
-        total_moves++
+        done = true;
-        done = true
       }
     }
     for (let z = 1; z <= total_moves; z++) {
-      ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotation)) * this.width), centerY + (Math.sin(rad(angle * z + rotation)) * this.width));
+      ctx.lineTo(
+        centerX + Math.cos(rad(angle * z + rotation)) * this.width,
+        centerY + Math.sin(rad(angle * z + rotation)) * this.width
+      );
     }
-    ctx.lineWidth = this.line_width;//try 1
+    ctx.lineWidth = this.line_width; //try 1
     ctx.strokeStyle = this.colour;
     ctx.stroke();
-
   }
 }
 class Phyllotaxis extends BaseShape {
@@ -279,11 +358,11 @@ class Phyllotaxis extends BaseShape {
   }
   // Draw_nodal(300, 100, 31, rotation, "blue");
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     for (let n = 0; n < this.nMax; n += 1) {
       const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);
       // const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2);
-      const a = n * (rotation / 1000)//137.5;
+      const a = n * (rotation / 1000); //137.5;
       const r = this.width * Math.sqrt(n);
       const x = r * Math.cos(a) + centerX;
       const y = r * Math.sin(a) + centerY;
@@ -295,7 +374,6 @@ class Phyllotaxis extends BaseShape {
       ctx.fill();
       // console.log(this.c)
     }
-
   }
 }
 class SquareTwist_angle extends BaseShape {
@@ -307,7 +385,7 @@ class SquareTwist_angle extends BaseShape {
   }
   drawSquare(angle, size, colour) {
     ctx.save();
-    ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
+    ctx.translate(centerX, centerY); //-(Math.sin(rad(angle)) *centerX));
     ctx.rotate(rad(angle + 180));
     ctx.beginPath();
     ctx.strokeStyle = colour;
@@ -318,14 +396,24 @@ class SquareTwist_angle extends BaseShape {
   }
   // DrawSquareTwist_angle(400,0,rotation,"red")
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     let out_angle = rotation;
-    let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90)))) + 0.5
+    let widthMultiplier =
+      1 /
+        (2 *
+          Math.sin(
+            (Math.PI / 180) *
+              (130 - out_angle + 90 * Math.floor(out_angle / 90))
+          )) +
+      0.5;
 
     for (let i = 0; i < 25; i++) {
-      this.drawSquare(rotation * i, this.width * widthMultiplier ** i, this.colour1)
+      this.drawSquare(
+        rotation * i,
+        this.width * widthMultiplier ** i,
+        this.colour1
+      );
     }
-
   }
 }
 class rectangle_pattern1 extends BaseShape {
@@ -338,7 +426,7 @@ class rectangle_pattern1 extends BaseShape {
   }
   drawSquare(angle, size, colour) {
     ctx.save();
-    ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
+    ctx.translate(centerX, centerY); //-(Math.sin(rad(angle)) *centerX));
     ctx.rotate(rad(angle + 180));
     ctx.beginPath();
     ctx.strokeStyle = colour;
@@ -349,18 +437,31 @@ class rectangle_pattern1 extends BaseShape {
   }
   // Draw_rectangle_pattern1(rotation, squares, 200, "blue");
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     for (let z = 0; z < 360; z += 360 / this.squares) {
       this.drawSquare(z + rotation, this.width, this.colour1);
     }
   }
 }
 class EyePrototype extends BaseShape {
-  constructor(width, blink_speed, draw_spiral, draw_pupil, line_width, colour1) {
+  constructor(
+    width,
+    blink_speed,
+    draw_spiral,
+    draw_pupil,
+    draw_expand,
+    draw_eyelid,
+    line_width,
+    colourPupil,
+    colourSpiral,
+    colourExpand
+  ) {
     super();
     this.width = width;
     this.line_width = line_width;
-    this.colour1 = colour1;
+    this.colourPupil = colourPupil;
+    this.colourSpiral = colourSpiral;
+    this.colourExpand = colourExpand;
     this.step = 0;
     this.speed = blink_speed;
     this.opening = true;
@@ -368,40 +469,63 @@ class EyePrototype extends BaseShape {
     this.cooldown = 0;
     this.draw_spiral = draw_spiral;
     this.draw_pupil = draw_pupil;
+    this.draw_expand = draw_expand;
+    this.draw_eyelid = draw_eyelid;
   }
   drawEyelid(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= this.speedMultiplier / 100;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(centerX - this.width / 2, centerY);
-    ctx.quadraticCurveTo(centerX, centerY - rotation / 400 * this.width, centerX + this.width / 2, centerY);
+    ctx.quadraticCurveTo(
+      centerX,
+      centerY - (rotation / 400) * this.width,
+      centerX + this.width / 2,
+      centerY
+    );
 
     ctx.moveTo(centerX - this.width / 2, centerY);
-    ctx.quadraticCurveTo(centerX, centerY + rotation / 400 * this.width, centerX + this.width / 2, centerY);
+    ctx.quadraticCurveTo(
+      centerX,
+      centerY + (rotation / 400) * this.width,
+      centerX + this.width / 2,
+      centerY
+    );
     ctx.stroke();
   }
   eyelidCut(step) {
     // ctx.lineWidth = 1;
     let squarePath = new Path2D();
     squarePath.moveTo(centerX - this.width / 2, centerY);
-    squarePath.quadraticCurveTo(centerX, centerY - step / 400 * this.width, centerX + this.width / 2, centerY);
+    squarePath.quadraticCurveTo(
+      centerX,
+      centerY - (step / 400) * this.width,
+      centerX + this.width / 2,
+      centerY
+    );
 
     squarePath.moveTo(centerX - this.width / 2, centerY);
-    squarePath.quadraticCurveTo(centerX, centerY + step / 400 * this.width, centerX + this.width / 2, centerY);
+    squarePath.quadraticCurveTo(
+      centerX,
+      centerY + (step / 400) * this.width,
+      centerX + this.width / 2,
+      centerY
+    );
 
     ctx.clip(squarePath);
   }
   drawGrowEye(step) {
     // console.log(step)
-    ctx.strokeStyle = "aqua";
+    ctx.strokeStyle = this.colourExpand;
     ctx.beginPath();
     ctx.lineWidth = 5;
     ctx.arc(centerX, centerY, step, 0, 2 * Math.PI);
     ctx.stroke();
-    ctx.strokeStyle = "red";
+
     // ctx.strokeStyle = "orange";
   }
   drawCircle(step) {
+    ctx.strokeStyle = this.colourPupil;
     ctx.beginPath();
     ctx.lineWidth = 5;
     ctx.arc(centerX, centerY, step, 0, 2 * Math.PI);
@@ -409,8 +533,8 @@ class EyePrototype extends BaseShape {
   }
 
   drawSpiral(step) {
-    let a = 1
+    let a = 1;
-    let b = 5
+    let b = 5;
     ctx.moveTo(centerX, centerY);
     ctx.beginPath();
     for (let i = 0; i < 400; i++) {
@@ -421,7 +545,7 @@ class EyePrototype extends BaseShape {
       ctx.lineTo(x, y);
     }
     ctx.lineWidth = 3;
-    ctx.strokeStyle = "red";
+    ctx.strokeStyle = this.colourSpiral;
     ctx.stroke();
   }
   stepFunc() {
@@ -457,7 +581,12 @@ class EyePrototype extends BaseShape {
     // console.log("Rot: "+ rotation + " | " +Math.floor(rotation)%a)
     console.log(outputRotation)
     // console.log(this.counter)
-    ctx.strokeStyle = "orange";
+    if (this.draw_eyelid) {
+      ctx.strokeStyle = "white";
+    }
+    else{
+      ctx.strokeStyle = "black";
+    }
     ctx.fillStyle = "black";
     // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     // ctx.fillRect(0, 0, 500, 500);
@@ -483,6 +612,18 @@ class EyePrototype extends BaseShape {
     if (this.draw_spiral) {
       this.drawSpiral(rotation)
     }
+
+    this.eyelidCut(outputRotation);
+    console.log(this.draw_expand);
+    if (this.counter % Math.floor(this.width / 4) == 0) {
+      this.counter = 0;
+    }
+    if (this.draw_expand) {
+      this.drawGrowEye(this.width / 4 + this.counter);
+    }
+    if (this.draw_spiral) {
+      this.drawSpiral(rotation);
+    }
     if (this.draw_pupil) {
       this.drawCircle(this.width / 4);
     }
@@ -493,4 +634,3 @@ class EyePrototype extends BaseShape {
     // this.counter++;
   }
 }
-