loop complete

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,
-    SquareTwist_angle:SquareTwist_angle,
-    EyePrototype:EyePrototype,
-    CircleExpand:CircleExpand,
-    MaryFace:MaryFace,
+    Phyllotaxis: Phyllotaxis,
+    SquareTwist_angle: SquareTwist_angle,
+    EyePrototype: EyePrototype,
+    CircleExpand: CircleExpand,
+    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");
-  const selectedShape = shapeSelector.value;
-  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);
+  deg_per_sec = animationList[currentAnimationIndex].speed;
+  drawObj = createInstance(animationList[currentAnimationIndex].name, animationList[currentAnimationIndex].args);
 }
 
+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";