loop complete

Loop edition/index.html

@@ -12,11 +12,11 @@
   <div id="toolbar">
     <br>
     <select id="shape-selector">
+      <option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
       <option value="EyePrototype">EyePrototype</option>
       <option value="Nodal_expanding">Nodal_expanding</option>
       <option value="MaryFace">MaryFace</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>
@@ -45,9 +45,9 @@
     </div>
     <button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
   </div>
-  <div>
+  <!-- <div>
     <button onclick="manualToggleSettings()" class="button">Show/hide</button>
-  </div>
+  </div> -->
 </body>
 <script src="./js/helper.js" type="text/javascript"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Loop edition/js/helper.js

@@ -21,6 +21,7 @@ async function fetchConfig(className) {
     Spiral1: [
       { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
       { type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
+      { type: "range", min: 1, max: 10, defaultValue: 2, property: "lineWidth" },
       { type: "color", defaultValue: "#4287f5", property: "colour" },
     ],
     FloralAccident: [
@@ -68,11 +69,12 @@ async function fetchConfig(className) {
       { type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_pupil" },
       { type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_expand" },
       { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_hypno" },
+      { 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: "#00fffb", property: "colourPupil" },
       { type: "color", defaultValue: "#ff0000", property: "colourSpiral" },
       { type: "color", defaultValue: "#00fffb", property: "colourExpand" },
-      { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_eyelid" },
+      { type: "color", defaultValue: "#00fffb", property: "colourEyelid" },
     ],
     CircleExpand: [
       { type: "range", min: 1, max: 70, defaultValue: 21, property: "nCircles" },
@@ -176,7 +178,7 @@ function drawEyelid(width, x1, y1, colour) {
   ctx.stroke();
 }
 
-function drawEyelidAccident(x1, y1) {
+function drawEyelidAccident(x1, y1, colour) {
   let leafWidth = 120;
   let leafHeight = 60;
   x1 -= centerX;
@@ -232,7 +234,7 @@ function drawEyelidAccident(x1, y1) {
 
   ctx.moveTo(x1, y1);
   ctx.quadraticCurveTo(x4, y4, x2, y2);
-  ctx.strokeStyle = "orange";
+  ctx.strokeStyle = colour;
   ctx.stroke();
 }
 

Loop edition/js/index.js

@@ -16,6 +16,9 @@ let paused = true;
 render_clear();
 
 let drawObj = null;
+
+
+
 function createInstance(className, args) {
   const classMap = {
     PolyTwistColourWidth: PolyTwistColourWidth,
@@ -24,11 +27,11 @@ function createInstance(className, args) {
     FloralAccident: FloralAccident,
     FloralPhyllo_Accident: FloralPhyllo_Accident,
     Nodal_expanding: Nodal_expanding,
-    Phyllotaxis:Phyllotaxis,
+    Phyllotaxis: Phyllotaxis,
-    SquareTwist_angle:SquareTwist_angle,
+    SquareTwist_angle: SquareTwist_angle,
-    EyePrototype:EyePrototype,
+    EyePrototype: EyePrototype,
-    CircleExpand:CircleExpand,
+    CircleExpand: CircleExpand,
-    MaryFace:MaryFace,
+    MaryFace: MaryFace,
     // Add more class constructors here as needed
   };
 
@@ -42,30 +45,146 @@ function createInstance(className, args) {
 
 
 async function updateDrawObj() {
-  const shapeSelector = document.getElementById("shape-selector");
+  deg_per_sec = animationList[currentAnimationIndex].speed;
-  const selectedShape = shapeSelector.value;
+  drawObj = createInstance(animationList[currentAnimationIndex].name, animationList[currentAnimationIndex].args);
-  const config = await fetchConfig(selectedShape);
-  if (drawObj) {
-    drawObj.remove(); // Remove the previous instance
-  }
-  // Extract default values from the configuration
-  const defaultValues = config
-    // .filter((item) => item.type !== "color") // Exclude color inputs
-    .map((item) => item.defaultValue);
-
-  drawObj = createInstance(selectedShape, defaultValues);
-
-  // drawObj = await createShapeWithRandomProperties(813311281, config1);
-  console.log(drawObj)
-  drawObj.initialise(config);
 }
 
+let animationList = []
+
+animationList.push({
+  name: "PolyTwistColourWidth",
+  args: [4, 400, 5, 14, -90, 100, "#e0ba10", "#e01044"],
+  speed: 10,
+  duration: 9*8
+})
+
+animationList.push({
+  name: "FloralPhyllo",
+  args: [300, 180, 1000, "#e0ba10", "#e01044"],
+  speed: 5,
+  duration: 60*10
+})
+animationList.push({
+  name: "EyePrototype",
+  args: [0, 0, 0, 1, 800, 10, 1, 1, 0, 0, 0, 0, 1, "#e0ba10", "#e01044", "#e0ba10", "blue"],
+  speed: 10,
+  duration: 60 * 3
+})
+animationList.push({
+  name: "Spiral1",
+  args: [6, 240, 5, "#e0ba10",],
+  speed: 10,
+  duration: 60*5
+})
+animationList.push({
+  name: "PolyTwistColourWidth",
+  args: [8, 400, 5, 65, -90, 100, "black","#e0ba10"],
+  speed: 5,
+  duration: 9*8
+})
+animationList.push({
+  name: "FloralPhyllo_Accident",
+  args: [20, 240, "#e01044", "#e0ba10"],
+  speed: 4,
+  duration: 60
+})
+animationList.push({
+  name: "Nodal_expanding",
+  args: [5, 120, 56, 6, "#e01044", "#e0ba10", 5],
+  speed: 20,
+  duration: 60 * 5
+})
+animationList.push({
+  name: "Spiral1",
+  args: [50, 240, 3, "#e01044"],
+  speed: 8,
+  duration: 60 * 5
+})
+animationList.push({
+  name: "Phyllotaxis",
+  args: [13, 1000, 6650, 0, "#e01044", "#e0ba10"],
+  speed: 2,
+  duration: 60 * 5
+})
+animationList.push({
+  name: "MaryFace",
+  args: [-110, -140, 18, 160, 195, -30, 18, 160],
+  speed: 10,
+  duration: 3
+})
+animationList.push({
+  name: "FloralAccident",
+  args: [20, 240, "#e01044"],
+  speed: 8,
+  duration: 60
+})
+animationList.push({
+  name: "Phyllotaxis",
+  args: [13, 500, 200, 1, "#e01044", "#e0ba10"],
+  speed: 15,
+  duration: 60 * 10
+})
+animationList.push({
+  name: "SquareTwist_angle",
+  args: [400, 3, "#e0ba10", "#e01044"],
+  speed: 10,
+  duration: 40
+})
+animationList.push({
+  name: "Phyllotaxis",
+  args: [13, 0, 600, 2, "#e0ba10", "#e01044"],
+  speed: 15,
+  duration: 60 * 10
+})
+animationList.push({
+  name: "EyePrototype",
+  args: [0, 0, 0, 0, 1000, 10, 0, 0, 0, 0, 1, 1, 1, "#e0ba10", "#e01044", "#e0ba10", "black"],
+  speed: 10,
+  duration: 60 * 3
+})
+animationList.push({
+  name: "MaryFace",
+  args: [-110, -140, 18, 160, 195, -30, 18, 160],
+  speed: 10,
+  duration: 3
+})
+animationList.push({
+  name: "EyePrototype",
+  args: [0, 0, 0, 0, 1000, 15, 1, 0, 1, 0, 0, 1, 1, "#e01044", "#e0ba10", "#e01044", "#e01044"],
+  speed: 10,
+  duration: 60
+})
+animationList.push({
+  name: "CircleExpand",
+  args: [21, 150, 1, 1, "#e01044", "#e0ba10"],
+  speed: 10,
+  duration: 60
+})
+
+let totalTime = 0;
+for (let i = 0; i < animationList.length; i++) {
+  totalTime += animationList[i].duration;
+}
+console.log("Total time: " + totalTime / 60)
+
+let currentAnimationIndex = 0;
+
 updateDrawObj();
 
 function render() {
   setTimeout(() => {
     requestAnimationFrame(() => {
       render_clear();
+      console.log(rotation)
+      if (rotation / deg_per_sec >= animationList[currentAnimationIndex].duration) {
+        currentAnimationIndex += 1;
+        if (currentAnimationIndex === animationList.length) {
+          currentAnimationIndex = 0;
+        }
+        rotation = 0
+        updateDrawObj();
+      }
+
       if (drawObj) {
         drawObj.draw(rotation);
       }
@@ -86,7 +205,8 @@ document
 let toolbarShowing = true;
 document.addEventListener("keydown", toggleSettings);
 
-function manualToggleSettings(){
+manualToggleSettings();
+function manualToggleSettings() {
   console.log("hi")
   toolbarShowing = !toolbarShowing;
   let tb = document.getElementById("toolbar");
@@ -105,6 +225,29 @@ function toggleSettings(e) {
     paused = !paused;
   }
 
+  if (e.keyCode == '37') {
+    // left arrow
+    if (currentAnimationIndex === 0) {
+      currentAnimationIndex = animationList.length - 1
+    }
+    else {
+      currentAnimationIndex -= 1
+    }
+    updateDrawObj();
+    rotation = 0
+  }
+  else if (e.keyCode == '39') {
+    // right arrow
+    if (currentAnimationIndex === animationList.length - 1) {
+      currentAnimationIndex = 0
+    }
+    else {
+      currentAnimationIndex += 1
+    }
+    updateDrawObj();
+    rotation = 0
+  }
+
   let tb = document.getElementById("toolbar");
   if (toolbarShowing) {
     tb.style.display = "flex";

Loop edition/js/objects.js

@@ -98,10 +98,11 @@ class FloralPhyllo extends BaseShape {
   }
 }
 class Spiral1 extends BaseShape {
-  constructor(sides, width, colour) {
+  constructor(sides, width, lineWidth, colour) {
     super();
     this.sides = sides;
     this.width = width;
+    this.lineWidth = lineWidth;
     this.colour = colour;
   }
 
@@ -115,7 +116,7 @@ class Spiral1 extends BaseShape {
 
     for (let i = 1; i < this.sides + 1; i++) {
       end = stt + rad(rot);
-
+      ctx.lineWidth = this.lineWidth;
       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.strokeStyle = this.colour;
@@ -190,7 +191,7 @@ class FloralPhyllo_Accident extends BaseShape {
       let x = r * Math.cos(a) + centerX;
       let y = r * Math.sin(a) + centerY;
 
-      drawEyelidAccident(x, y);
+      drawEyelidAccident(x, y, this.colour1);
 
     }
   }
@@ -246,11 +247,12 @@ class Phyllotaxis extends BaseShape {
     const startColor = [45, 129, 252];
     const endColor = [252, 3, 98];
     const distanceMultiplier = 3;
-    const maxIterations = 200;
+    const maxIterations = this.nMax;
     //   angle=0;
     for (let n = 0; n < maxIterations; n++) {
       ctx.beginPath();
-      const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+      // const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+      const nColor = LerpHex(this.colour1, this.colour2, n / this.nMax);
 
       // const nAngle = n* angle ;
       // const nAngle = n*angle+ Math.sin(rad(n*1+angle*4000))/1 ;
@@ -259,20 +261,23 @@ class Phyllotaxis extends BaseShape {
       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.fillStyle = colourToText(nColor);
+      ctx.fillStyle = nColor;
       ctx.fill();
     }
   }
   drawSpiral(angle) {
     angle /= 5000
-    const startColor = [45, 129, 252];
+    const startColor = [224, 186, 16];
-    const endColor = [252, 3, 98];
+    const endColor = [224, 16, 68];
     const distanceMultiplier = 2;
-    const maxIterations = 1000;
+    const maxIterations = this.nMax;
 
 
     for (let n = 0; n < maxIterations; n++) {
       const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+      // const nColor = lerpHex(this.colour1, this.colour2, Math.cos(rad(n / 2)));
+      // const nColor = LerpHex(this.colour1, this.colour2, n / this.nMax);
 
       const nAngle = n * angle + Math.sin(angle * n * 2);
       const radius = distanceMultiplier * n;
@@ -281,6 +286,7 @@ class Phyllotaxis extends BaseShape {
 
       ctx.beginPath();
       ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+      // ctx.fillStyle = nColor;
       ctx.fillStyle = colourToText(nColor);
       ctx.fill();
     }
@@ -290,7 +296,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 +313,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();
@@ -443,7 +449,7 @@ class CircleExpand extends BaseShape {
 
 
 class EyePrototype extends BaseShape {
-  constructor(x, y, rotate, flip, width, blink_speed, draw_spiral, spiral_full, draw_pupil, draw_expand, draw_hypno, line_width, colourPupil, colourSpiral, colourExpand) {
+  constructor(x, y, rotate, flip, width, blink_speed, draw_spiral, spiral_full, draw_pupil, draw_expand, draw_hypno, draw_eyelid, line_width, colourPupil, colourSpiral, colourExpand, colourEyelid) {
     super();
     this.x = x;
     this.y = y;
@@ -461,13 +467,15 @@ class EyePrototype extends BaseShape {
     this.draw_pupil = draw_pupil;
     this.draw_expand = draw_expand;
     this.draw_hypno = draw_hypno;
+    this.draw_eyelid = draw_eyelid;
     this.colourPupil = colourPupil;
     this.colourSpiral = colourSpiral;
     this.colourExpand = colourExpand;
-    this.centerPulse = new CircleExpand(10, 30, 1, 0, "#2D81FC", "#FC0362")
+    this.colourEyelid = colourEyelid;
+    this.centerPulse = new CircleExpand(20, 40, 0, 0, "#2D81FC", "#FC0362")
   }
   drawEyelid(rotation) {
-    ctx.strokeStyle = "orange";
+    ctx.strokeStyle = this.colourEyelid;
     let relCenterX = centerX + this.x;
     let relCenterY = centerY + this.y;
     rotation *= (this.speedMultiplier / 100)
@@ -578,7 +586,9 @@ class EyePrototype extends BaseShape {
 
     ctx.fillStyle = "black";
     ctx.save();
-    this.drawEyelid(outputRotation);
+    if (this.draw_eyelid) {
+      this.drawEyelid(outputRotation);
+    }
     // squareCut();
     this.eyelidCut(outputRotation);
     // console.log(Math.floor(this.counter % this.width / 2))

docs/js/objects.js

@@ -115,7 +115,7 @@ class Spiral1 extends BaseShape {
 
     for (let i = 1; i < this.sides + 1; i++) {
       end = stt + rad(rot);
-
+      ctx.lineWidth = 5
       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.strokeStyle = this.colour;

webGl/circle fractal/index.js

@@ -1,101 +0,0 @@
-// Get a reference to the canvas element
-const canvas = document.getElementById('canvas');
-
-// Set up WebGL context
-const gl = canvas.getContext('webgl');
-// Set the canvas size and WebGL viewport
-canvas.width = 800;
-canvas.height = 800;
-//   let centerX = canvas.width / 2;
-//   let centerY = canvas.height / 2;
-gl.viewport(0, 0, canvas.width, canvas.height);
-// Create vertex shader
-const vertexShaderSource = `
-    attribute vec2 position;
-    void main() {
-        gl_Position = vec4(position, 0.0, 1.0);
-    }
-`;
-
-// Create fragment shader using the code you wrote
-const fragmentShaderSource = `
-    precision mediump float;
-    uniform vec2 iResolution;
-    uniform float iTime;
-    
-    void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-        vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
-        vec2 uv0 = uv;
-        vec3 colour = vec3(1.0, 1.5, 2.0);
-        vec3 colour2 = vec3(0.2, 0.2, 1.0);
-        float pi = 3.1415926;
-    
-        for (float i = 0.0; i < 2.0; i++) {
-            uv = fract(uv * 1.5) - 0.5;
-            float distance = length(uv);
-    
-            distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
-            distance = abs(distance);
-            distance = 0.02 / distance;
-    
-            colour = mix(colour, colour2, length(uv));
-    
-            colour *= distance;
-        }
-        
-        float distance = length(uv0);
-        distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
-        distance = abs(distance);
-        distance = 0.02 / distance;
-    
-        colour = mix(colour, colour2, length(uv0));
-        colour *= distance;
-    
-        fragColor = vec4(colour, 1.0);
-    }
-    
-    void main() {
-        vec2 fragCoord = gl_FragCoord.xy;
-        vec2 iResolution = vec2(${canvas.width.toFixed(1)}, ${canvas.height.toFixed(1)});
-        float iTime = ${performance.now().toFixed(3)} / 1000.0;
-        vec4 fragColor;
-        mainImage(fragColor, fragCoord);
-        gl_FragColor = fragColor;
-    }
-`;
-
-// Compile and link shaders
-const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-gl.shaderSource(vertexShader, vertexShaderSource);
-gl.compileShader(vertexShader);
-
-const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-gl.shaderSource(fragmentShader, fragmentShaderSource);
-gl.compileShader(fragmentShader);
-
-const program = gl.createProgram();
-gl.attachShader(program, vertexShader);
-gl.attachShader(program, fragmentShader);
-gl.linkProgram(program);
-gl.useProgram(program);
-
-// Create vertex buffer
-const positionBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-const positionAttributeLocation = gl.getAttribLocation(program, 'position');
-gl.enableVertexAttribArray(positionAttributeLocation);
-gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-
-// Set uniforms
-const iResolutionLocation = gl.getUniformLocation(program, 'iResolution');
-gl.uniform2f(iResolutionLocation, canvas.width, canvas.height);
-
-// Render the shader
-function render() {
-    gl.uniform1f(gl.getUniformLocation(program, 'iTime'), performance.now() / 1000.0);
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    requestAnimationFrame(render);
-}
-
-render();

webGl/circle fractal/js/objects.js

@@ -71,11 +71,11 @@ class EyePrototype extends BaseShape {
         vec3 colour = vec3(1.0, 1.5, 2.0);
         vec3 colour2 = vec3(0.2, 0.2, 1.0);
         float pi = 3.1415926;
-        float pie = iVal1/10.0;
+        float val1Div = iVal1/10.0;
         
     
         for (float i = 0.0; i < 2.0; i++) {
-            uv = fract(uv * pie) - 0.5;
+            uv = fract(uv * val1Div) - 0.5;
             float distance = length(uv);
     
             distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);