Marys face done, added params for others

docs/index.html

@@ -12,16 +12,15 @@
   <div id="toolbar">
     <br>
     <select id="shape-selector">
+      <option value="Nodal_expanding">Nodal_expanding</option>
       <option value="MaryFace">MaryFace</option>
-      <option value="CircleExpand">CircleExpand</option>
       <option value="EyePrototype">EyePrototype</option>
+      <option value="CircleExpand">CircleExpand</option>
       <option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
       <option value="FloralPhyllo">FloralPhyllo</option>
       <option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
       <option value="Spiral1">Spiral1</option>
       <option value="FloralAccident">FloralAccident</option>
-      <option value="Nodal_expanding">Nodal_expanding</option>
-      <option value="Nodal">Nodal</option>
       <option value="Phyllotaxis">Phyllotaxis</option>
       <option value="SquareTwist_angle">SquareTwist_angle</option>
       <option value="rectangle_pattern1">rectangle_pattern1</option>

docs/js/helper.js

@@ -13,7 +13,8 @@ async function fetchConfig(className) {
     ],
     FloralPhyllo: [
       { type: "range", min: 1, max: 600, defaultValue: 300, property: "width" },
-      { type: "range", min: 1, max: 100, defaultValue: 50, property: "depth" },
+      { type: "range", min: 1, max: 300, defaultValue: 150, property: "depth" },
+      { type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
       { type: "color", defaultValue: "#4287f5", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
     ],
@@ -35,22 +36,18 @@ async function fetchConfig(className) {
     ],
     Nodal_expanding: [
       { type: "range", min: 1, max: 100, defaultValue: 5, property: "expand" },
-      { type: "range", min: 1, max: 100000, defaultValue: 100000, property: "points" },
+      { type: "range", min: 1, max: 1000, defaultValue: 150, property: "points" },
-      { type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
+      { type: "range", min: 1, max: 360, defaultValue: 0, property: "start" },
+      { type: "range", min: 1, max: 10, defaultValue: 6, property: "line_width" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
       { type: "range", min: 0, max: 10, defaultValue: 5, property: "colour_change" },
     ],
-    Nodal: [
-      { type: "range", min: 1, max: 1000, defaultValue: 400, property: "width" },
-      { type: "range", min: 1, max: 20, defaultValue: 10, property: "points" },
-      { type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
-      { type: "range", min: 1, max: 20, defaultValue: 1, property: "step" },
-      { type: "color", defaultValue: "#2D81FC", property: "colour" },
-    ],
     Phyllotaxis: [
       { type: "range", min: 1, max: 40, defaultValue: 24, property: "width" },
+      { type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
       { type: "range", min: 1, max: 1000, defaultValue: 300, property: "nMax" },
+      { type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
     ],
@@ -89,13 +86,13 @@ async function fetchConfig(className) {
       { type: "color", defaultValue: "#00fffb", property: "colour2" },
     ],
     MaryFace: [
-      { type: "range", min: -400, max: 400, defaultValue: -100, property: "x1" },
+      { type: "range", min: -400, max: 400, defaultValue: -110, property: "x1" },
-      { type: "range", min: -400, max: 400, defaultValue: -150, property: "y1" },
+      { type: "range", min: -400, max: 400, defaultValue: -140, property: "y1" },
-      { type: "range", min: -180, max: 180, defaultValue: 0, property: "rotate1" },
+      { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate1" },
       { type: "range", min: 0, max: 400, defaultValue: 160, property: "width1" },
-      { type: "range", min: -400, max: 400, defaultValue: 200, property: "x2" },
+      { type: "range", min: -400, max: 400, defaultValue: 195, property: "x2" },
       { type: "range", min: -400, max: 400, defaultValue: -30, property: "y2" },
-      { type: "range", min: -180, max: 180, defaultValue: 0, property: "rotate2" },
+      { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate2" },
       { type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
     ],
   };
@@ -242,7 +239,7 @@ function drawEyelidAccident(x1, y1) {
   ctx.stroke();
 }
 
-function DrawPolygon(sides, width, rotation, colour,line_width) {
+function DrawPolygon(sides, width, rotation, colour, line_width) {
   ctx.beginPath();
   ctx.moveTo(
     centerX + width * Math.cos((rotation * Math.PI) / 180),
@@ -272,8 +269,8 @@ function colourToText(colour) {
 }
 
 
-function waveNormal(x,max){
+function waveNormal(x, max) {
-  let val = Math.sin((x/max)* Math.PI*2-max*(Math.PI/(max*2)))/2+0.5
+  let val = Math.sin((x / max) * Math.PI * 2 - max * (Math.PI / (max * 2))) / 2 + 0.5
   return val
 }
 
@@ -306,6 +303,13 @@ function LerpRGB(a, b, t) {
   return newColor;
 }
 
+function lerpRGB(a, b, t) {
+  const result = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    result[i] = (1 - t) * a[i] + t * b[i];
+  }
+  return result;
+}
 
 
 function drawCenter(width) {
@@ -330,3 +334,31 @@ function render_clear() {
   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 }
 
+function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
+  let xFromC = x - centerXX;
+  let yFromC = y - centerYY;
+  let d = (xFromC ** 2 + yFromC ** 2) ** 0.5
+  // let orgAngle = Math.atan2(yFromC/xFromC)
+  let orgAngle = Math.atan2(xFromC, yFromC)
+  let tmp = Math.cos(rad(orgAngle - rotation)) * d
+  // console.log(Math.cos((-90)*(Math.PI/180)))
+  console.log(orgAngle)
+  console.log(rad(rotation))
+  console.log(Math.cos(orgAngle - rad(rotation)) * d)
+  console.log(d)
+  // console.log(d)
+  let newPointX = Math.cos(orgAngle - rad(rotation+90)) * d + centerXX;
+  let newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY;
+  return [newPointX, newPointY]
+}
+
+function rotatePoint(x,y,rotation){
+  let nCos = Math.cos(rad(rotation))
+  // console.log(nCos*(180/Math.PI))
+  // console.log(rad(rotation))
+  let nSin = Math.sin(rad(rotation))
+  console.log(nSin)
+  let newX = x*nCos - y*nSin
+  let newY = y*nCos + x*nSin
+  return [newX,newY]
+}

docs/js/index.js

@@ -24,7 +24,6 @@ function createInstance(className, args) {
     FloralAccident: FloralAccident,
     FloralPhyllo_Accident: FloralPhyllo_Accident,
     Nodal_expanding: Nodal_expanding,
-    Nodal: Nodal,
     Phyllotaxis:Phyllotaxis,
     SquareTwist_angle:SquareTwist_angle,
     rectangle_pattern1:rectangle_pattern1,

docs/js/objects.js

@@ -69,22 +69,24 @@ class PolyTwistColourWidth extends BaseShape {
   }
 }
 class FloralPhyllo extends BaseShape {
-  constructor(width, depth, colour1, colour2) {
+  constructor(width, depth, start, colour1, colour2) {
     super();
     this.width = width;
     this.depth = depth;
+    this.start = start;
     this.colour1 = colour1;
     this.colour2 = colour2;
     this.speedMultiplier = 500;
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= (this.speedMultiplier / 500)
+    rotation += this.start
     // 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
-    let max = 200;
+    let max = this.depth;
-    for (let n = 200; n > 0; n -= 1) {
+    for (let n = this.depth; n > 0; n -= 1) {
       let colVal = waveNormal(n, max)
       let ncolour = LerpHex(this.colour1, this.colour2, n / max);
       const a = n * rotation / 1000; //137.5;
@@ -195,10 +197,11 @@ class FloralPhyllo_Accident extends BaseShape {
   }
 }
 class Nodal_expanding extends BaseShape {
-  constructor(expand, points, line_width, colour1, colour2, colour_change) {
+  constructor(expand, points, start, line_width, colour1, colour2, colour_change) {
     super();
     this.expand = expand;
     this.points = points;
+    this.start = start;
     this.line_width = line_width;
     this.colour1 = colour1;
     this.colour2 = colour2;
@@ -206,18 +209,18 @@ class Nodal_expanding extends BaseShape {
   }
 
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= (this.speedMultiplier / 1000)
     let colour_change = this.colour_change / 8
-    var angle = 360 / this.points * rotation
+    var angle = (360 / 3000 * rotation) + this.start //2000 controls speed
 
     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 <= this.points; 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, z / this.points);
 
       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.lineTo(centerX + (Math.cos(rad(angle * z + 0)) * length), centerY + (Math.sin(rad(angle * z + 0)) * length));
@@ -233,55 +236,71 @@ class Nodal_expanding extends BaseShape {
 
   }
 }
-class Nodal extends BaseShape {
-  constructor(width, points, line_width, step, colour) {
-    super();
-    this.width = width;
-    this.points = points;
-    this.line_width = line_width;
-    this.step = step;
-    this.colour = colour;
-  }
-  // Draw_nodal(300, 100, 31, rotation, "blue");
-  draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
-    // console.log(rotate)
-    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));
-
-    while (done != true) {
-      if ((total_moves * this.step) % this.points != 0) {
-        total_moves++
-      }
-      else {
-        total_moves++
-        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.lineWidth = this.line_width;//try 1
-    ctx.strokeStyle = this.colour;
-    ctx.stroke();
-
-  }
-}
 class Phyllotaxis extends BaseShape {
-  constructor(width, nMax, colour1, colour2) {
+  constructor(width, start, nMax, wave, colour1, colour2) {
     super();
     this.width = width;
+    this.start = start;
     this.nMax = nMax;
+    this.wave = wave;
     this.colour1 = colour1;
     this.colour2 = colour2;
   }
+  drawWave(angle) {
+    angle /= 1000
+    const startColor = [45, 129, 252];
+    const endColor = [252, 3, 98];
+    const distanceMultiplier = 3;
+    const maxIterations = 200;
+    //   angle=0;
+    for (let n = 0; n < maxIterations; n++) {
+      ctx.beginPath();
+      const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+
+      // const nAngle = n* angle ;
+      // const nAngle = n*angle+ Math.sin(rad(n*1+angle*4000))/1 ;
+      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, 8, 0, 2 * Math.PI);
+      ctx.fillStyle = colourToText(nColor);
+      ctx.fill();
+    }
+  }
+  drawSpiral(angle) {
+    angle /= 5000
+    const startColor = [45, 129, 252];
+    const endColor = [252, 3, 98];
+    const distanceMultiplier = 2;
+    const maxIterations = 1000;
+  
+    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 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();
+    }
+  }
+
   // Draw_nodal(300, 100, 31, rotation, "blue");
   draw(rotation) {
-    rotation *= (this.speedMultiplier / 100)
+    rotation *= (this.speedMultiplier / 300)
+    rotation += this.start
+    if (this.wave===1) {
+      this.drawWave(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);
         // const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2);
@@ -297,7 +316,7 @@ class Phyllotaxis extends BaseShape {
         ctx.fill();
         // console.log(this.c)
       }
-
+    }
   }
 }
 class SquareTwist_angle extends BaseShape {
@@ -474,24 +493,45 @@ class EyePrototype extends BaseShape {
   }
   drawEyelid(rotation) {
     ctx.strokeStyle = "orange";
+    let relCenterX = centerX + this.x;
+    let relCenterY = centerY + this.y;
     rotation *= (this.speedMultiplier / 100)
     ctx.lineWidth = 1;
     ctx.beginPath();
-    ctx.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
+    let newPoint = 0
-    ctx.quadraticCurveTo(centerX + this.x, centerY + this.y - rotation / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
+    let newPoint1 = 0
 
-    ctx.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
+    newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
-    ctx.quadraticCurveTo(centerX + this.x, centerY + this.y + rotation / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
+    ctx.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
+    newPoint = rotatePoint(0, - rotation / 400 * this.width, this.rotate)
+    newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
+    ctx.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
+
+    newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
+    ctx.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
+    newPoint = rotatePoint(0, + rotation / 400 * this.width, this.rotate)
+    newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
+    ctx.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
     ctx.stroke();
   }
-  eyelidCut(step) {
+  eyelidCut(rotation) {
+    let relCenterX = centerX + this.x;
+    let relCenterY = centerY + this.y;
+    let newPoint = 0
+    let newPoint1 = 0
     // ctx.lineWidth = 1;
     let squarePath = new Path2D();
-    squarePath.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
+    newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
-    squarePath.quadraticCurveTo(centerX + this.x, centerY + this.y - step / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
+    squarePath.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
+    newPoint = rotatePoint(0, - rotation / 400 * this.width, this.rotate)
+    newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
+    squarePath.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
 
-    squarePath.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
+    newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
-    squarePath.quadraticCurveTo(centerX + this.x, centerY + this.y + step / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
+    squarePath.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
+    newPoint = rotatePoint(0, + rotation / 400 * this.width, this.rotate)
+    newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
+    squarePath.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
 
     ctx.clip(squarePath);
   }
@@ -558,7 +598,7 @@ class EyePrototype extends BaseShape {
     let a = cap * 2 + d
     let outputRotation = Math.min(Math.abs((Math.floor(rotation * speedMult) % a) - a / 2 - d / 2), cap)
     // console.log("Rot: "+ rotation + " | " +Math.floor(rotation)%a)
-    console.log(outputRotation)
+    // console.log(outputRotation)
     // console.log(this.counter)
 
     ctx.fillStyle = "black";
@@ -582,7 +622,7 @@ class EyePrototype extends BaseShape {
       this.counter = 0;
     }
     ctx.fillStyle = "black";
-    ctx.fillRect(this.x-this.width/2 +centerX,0 , this.width, ctx.canvas.height);
+    ctx.fillRect(this.x - this.width / 2 + centerX, 0, this.width, ctx.canvas.height);
     if (this.draw_expand) {
       this.drawGrowEye(this.width / 4 + this.counter);
     }
@@ -611,8 +651,8 @@ class MaryFace extends BaseShape {
     this.y2 = y2;
     this.rotate2 = rotate2;
     this.width2 = width2;
-    this.eye1 = new EyePrototype(x1, y1, rotate1, width1, 10, 1, 1, 0, 1, "#00fffb", "#00fffb", "#00fffb")
+    this.eye1 = new EyePrototype(x1, y1, rotate1, width1, 10,1, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
-    this.eye2 = new EyePrototype(x2, y2, rotate2, width2, 10, 1, 1, 0, 1, "#00fffb", "#00fffb", "#00fffb")
+    this.eye2 = new EyePrototype(x2, y2, rotate2, width2, 10, 1, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
   }
 
   draw(rotation) {