Mobile ui, bug fixes

docs/js/helper.js

@@ -100,7 +100,7 @@ async function fetchConfig(className) {
       { type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" },
     ],
     RaysInShape: [
-      { type: "range", min: 50, max: 1000, defaultValue: 300, property: "rays" },
+      { type: "range", min: 50, max: 1000, defaultValue: 6, property: "rays" },
       { type: "range", min: 1, max: 30, defaultValue: 2, property: "speed" },
       { type: "checkbox", defaultValue: true, property: "doesWave" },
       { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedVertRate" },
@@ -108,7 +108,7 @@ async function fetchConfig(className) {
       { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedVert" },
       { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedHorr" },
       { type: "range", min: 10, max: 2000, defaultValue: 800, property: "boxSize" },
-      { type: "range", min: 1, max: 60, defaultValue: 20, property: "trailLength" },
+      { type: "range", min: 1, max: 800, defaultValue: 20, property: "trailLength" },
       { type: "range", min: 1, max: 500, defaultValue: 5, property: "lineWidth" },
       { type: "checkbox", defaultValue: false, property: "fade" },
       { type: "color", defaultValue: "#43dbad", property: "colourFree" },
@@ -245,9 +245,9 @@ function updateControlInput(value, controlName) {// Find and update the slider e
     elementSlider.value = value;
 
     // Update the text display
-    const elementSliderText = document.getElementById('elTextspeedVert');
+    const elementSliderText = document.getElementById(`elText${controlName}`);
     if (elementSliderText) {
-      elementSliderText.innerText = "speedVert: " + Math.round(this.speedVert);
+      elementSliderText.innerText = `${controlName}: ${Math.round(value)}`;
     }
   }
   console.log("Updated control input:", controlName, value);
@@ -483,8 +483,6 @@ function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
 
 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))
   let newX = x * nCos - y * nSin
   let newY = y * nCos + x * nSin

docs/js/index.js

@@ -3,8 +3,8 @@ let c = document.getElementById("myCanvas");
 let ctx = c.getContext("2d");
 ctx.canvas.width = window.innerWidth;
 ctx.canvas.height = window.innerHeight;
-centerX = ctx.canvas.width / 2;
-centerY = ctx.canvas.height / 2;
+let centerX = ctx.canvas.width / 2;
+let centerY = ctx.canvas.height / 2;
 
 
 let deg_per_sec = 10;
@@ -28,11 +28,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
   };
 
@@ -66,39 +66,37 @@ async function updateDrawObj() {
 
 updateDrawObj();
 
-function render() {
-  setTimeout(() => {
-    requestAnimationFrame((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);
+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);
+    drawObj.draw(adjustedElapsed, adjustedDeltaTime);
 
-      }
+  }
 
-      ctx.font = "48px serif";
-      ctx.fillStyle = "white"
-      ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400);
-      // drawCenter(300)
-    });
-    render();
-  }, frameDuration);
+  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);
@@ -106,7 +104,16 @@ document
 let toolbarShowing = true;
 document.addEventListener("keydown", toggleSettings);
 
-function manualToggleSettings(){
+// 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;
+
+});
+
+function manualToggleSettings() {
   console.log("hi")
   toolbarShowing = !toolbarShowing;
   let tb = document.getElementById("toolbar");
@@ -149,11 +156,11 @@ function Reset() {
 }
 
 function ForwardFrame() {
-  rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
+  rotation += deg_per_sec / targetFps; // was = j = innerRotation, now = rotation
   currentFrame += 1; // was = i
 }
 function BackwardFrame() {
-  rotation -= deg_per_sec / fps; // was = j = innerRotation, now = rotation
+  rotation -= deg_per_sec / targetFps; // was = j = innerRotation, now = rotation
   currentFrame -= 1; // was = i
 }
 
@@ -161,4 +168,4 @@ function ChangeDegPerSec(newValue) {
   deg_per_sec = newValue;
 }
 
-window.onload = render;
+window.onload = requestAnimationFrame(render);

docs/js/objects.js

@@ -838,8 +838,8 @@ class RaysInShape extends BaseShape {
     if (this.doesWave) {
       const vertRate = this.speedVertRate / 100;
       const horrRate = this.speedHorrRate / 100;
-      this.speedVert = Math.sin(elapsed / 10 * vertRate) * 90 + 100;
-      this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 90 + 100;
+      this.speedVert = Math.sin(elapsed / 10 * vertRate) * 85 + 100;
+      this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 85 + 100;
       updateControlInput(this.speedVert, "speedVert");
       updateControlInput(this.speedHorr, "speedHorr");
       console.log(this.controls)