V1.1

Giant refactor. added layers. ui overhaul. added save/load and we now got presets

docs/js/index.js

@@ -1,128 +1,46 @@
 //jshint esversion:8
+
+/**
+ * Animation Framework - Main Entry Point
+ * 
+ * This file initializes the animation engine and control system.
+ * Shapes are registered via shapeRegistry and managed through the Scene.
+ */
+
+// ============================================
+// Global references (for backward compatibility with shapes)
+// ============================================
 let c = document.getElementById("myCanvas");
 let ctx = c.getContext("2d");
-ctx.canvas.width = window.innerWidth;
-ctx.canvas.height = window.innerHeight;
 let centerX = ctx.canvas.width / 2;
 let centerY = ctx.canvas.height / 2;
 
+// ============================================
+// Initialize Core Systems
+// ============================================
 
-let deg_per_sec = 10;
-let targetFps = 60;
-let frameDuration = 1000 / targetFps;
+// Create animation engine and connect it to the scene
+const engine = new AnimationEngine('myCanvas');
+engine.setScene(scene);
 
-let rotation = 0; //was = j = angle
-let paused = false;
-let elapsedTime = 0;
-let lastTimestamp = 0;
-render_clear();
+// Initialize Scene UI
+const sceneUI = new SceneUI(scene, 'layers-container');
 
-let drawObj = null;
-function createInstance(className, args) {
-  const classMap = {
-    NewWave: NewWave,
-    Countdown: Countdown,
-    RaysInShape: RaysInShape,
-    PolyTwistColourWidth: PolyTwistColourWidth,
-    FloralPhyllo: FloralPhyllo,
-    Spiral1: Spiral1,
-    FloralAccident: FloralAccident,
-    FloralPhyllo_Accident: FloralPhyllo_Accident,
-    Nodal_expanding: Nodal_expanding,
-    Phyllotaxis: Phyllotaxis,
-    SquareTwist_angle: SquareTwist_angle,
-    EyePrototype: EyePrototype,
-    CircleExpand: CircleExpand,
-    MaryFace: MaryFace,
-    // Add more class constructors here as needed
-  };
-
-  if (classMap.hasOwnProperty(className)) {
-    return new classMap[className](...args);
-  } else {
-    throw new Error(`Unknown class name: ${className}`);
-  }
-}
-
-
-
-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);
-}
-
-updateDrawObj();
-
-function render(timestamp) {
-  if (!lastTimestamp) lastTimestamp = timestamp;
-  const deltaTime = timestamp - lastTimestamp;
-  const adjustedElapsed = elapsedTime / 100; // Convert to seconds
-  lastTimestamp = timestamp;
-  let adjustedDeltaTime;
-  if (!paused) {
-    rotation += deg_per_sec / targetFps;
-    elapsedTime += deltaTime;
-    adjustedDeltaTime = deltaTime / 100; // Convert to seconds
-    // console.log(adjustedDeltaTime)
-  }
-  // console.log(deltaTime)
-  // console.log(elapsedTime)
-  render_clear();
-  if (drawObj) {
-    // drawObj.draw(rotation);
-
-    drawObj.draw(adjustedElapsed, adjustedDeltaTime);
-
-  }
-
-  // ctx.font = "48px serif";
-  // ctx.fillStyle = "white"
-  // ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400);
-  // drawCenter(300)
-
-  requestAnimationFrame(render);
-}
-
-
-document
-  .getElementById("shape-selector")
-  .addEventListener("change", updateDrawObj);
+// ============================================
+// Event Listeners
+// ============================================
 
 let toolbarShowing = true;
 document.addEventListener("keydown", toggleSettings);
 
-// Add resize event listener
-window.addEventListener('resize', function () {
-  ctx.canvas.width = window.innerWidth;
-  ctx.canvas.height = window.innerHeight;
-  centerX = ctx.canvas.width / 2;
-  centerY = ctx.canvas.height / 2;
-
-});
+// ============================================
+// UI Control Functions
+// ============================================
 
 function manualToggleSettings() {
-  console.log("hi")
   toolbarShowing = !toolbarShowing;
   let tb = document.getElementById("toolbar");
-  if (toolbarShowing) {
-    tb.style.display = "flex";
-  } else {
-    tb.style.display = "none";
-  }
+  tb.style.display = toolbarShowing ? "flex" : "none";
 }
 
 function toggleSettings(e) {
@@ -130,43 +48,40 @@ function toggleSettings(e) {
     toolbarShowing = !toolbarShowing;
   }
   if (e.code === "Space") {
-    paused = !paused;
+    engine.togglePause();
   }
 
   let tb = document.getElementById("toolbar");
-  if (toolbarShowing) {
-    tb.style.display = "flex";
-  } else {
-    tb.style.display = "none";
-  }
+  tb.style.display = toolbarShowing ? "flex" : "none";
 }
 
 function TogglePause() {
   let pb = document.getElementById("pauseButton");
-  paused = !paused;
-
-  if (paused) {
-    pb.textContent = "Play";
-  } else {
-    pb.textContent = "Pause";
-  }
+  const paused = engine.togglePause();
+  pb.textContent = paused ? "Play" : "Pause";
 }
+
 function Reset() {
-  rotation = 0; //was = j = angle
-  currentFrame = 0;
+  engine.reset();
 }
 
 function ForwardFrame() {
-  rotation += deg_per_sec / targetFps; // was = j = innerRotation, now = rotation
-  currentFrame += 1; // was = i
+  engine.stepForward();
 }
+
 function BackwardFrame() {
-  rotation -= deg_per_sec / targetFps; // was = j = innerRotation, now = rotation
-  currentFrame -= 1; // was = i
+  engine.stepBackward();
 }
 
 function ChangeDegPerSec(newValue) {
-  deg_per_sec = newValue;
+  engine.setSpeed(newValue);
 }
 
-window.onload = requestAnimationFrame(render);
+function render_clear() {
+  engine.clear();
+}
+
+// Start animation
+window.onload = function() {
+  engine.start();
+};