mobile ui fixed

Tests/webGl/my-threejs-test/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "parcel": "^2.12.0"
+    "parcel": "^1.12.4"
   },
   "dependencies": {
     "@parcel/transformer-glsl": "^2.12.0",

docs/css/styles.css

@@ -57,6 +57,26 @@ canvas {
 }
 
 
+/* Playback controls - pinned to bottom of toolbar */
+.playback-controls {
+  margin-top: auto;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding: 15px 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(25, 25, 25, 0.95);
+  position: sticky;
+  bottom: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .playback-controls {
+    margin-left: -10px;
+    margin-right: -10px;
+    padding: 15px 10px;
+  }
+}
+
 .controls {
   display: flex;
   margin: 8px 0px;
@@ -117,6 +137,32 @@ canvas {
 
 .buttonReset{
   background-color: #f4e1e1;
+  width: 100%;
+}
+
+/* Speed Control */
+.speed-control {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 8px 0;
+  padding: 8px 12px;
+  background: rgba(40, 45, 50, 0.4);
+  border-radius: 6px;
+}
+
+.speed-label {
+  color: #e0e0e0;
+  font-family: Roboto, system-ui;
+  font-size: 14px;
+  min-width: 80px;
+}
+
+#inputSpeed {
+  flex: 1;
+  height: 6px;
+  cursor: pointer;
+  accent-color: #3a9bdc;
 }
 
 /* ============================================
@@ -128,7 +174,7 @@ canvas {
   flex-direction: column;
   margin: 2px 0;
   padding: 6px 8px;
-  background: rgba(40, 45, 50, 0.5);
+  background: rgba(40, 45, 50, 0.35);
   border-radius: 4px;
 }
 
@@ -258,7 +304,7 @@ canvas {
 .control-settings-panel {
   margin-top: 8px;
   padding: 8px;
-  background: rgba(30, 35, 40, 0.6);
+  background: rgba(30, 35, 40, 0.4);
   border-radius: 4px;
   border-left: 2px solid #5a6a7a;
 }
@@ -319,7 +365,7 @@ canvas {
 
 /* Individual filter item */
 .filter-item {
-  background: rgba(40, 50, 60, 0.5);
+  background: rgba(40, 50, 60, 0.35);
   border-left: 3px solid #4a9eff;
   border-radius: 0 4px 4px 0;
   padding: 6px 8px;
@@ -453,7 +499,7 @@ canvas {
 .param-bounds-panel {
   margin-top: 4px;
   padding: 4px;
-  background: rgba(30, 40, 50, 0.5);
+  background: rgba(30, 40, 50, 0.35);
   border-radius: 3px;
 }
 
@@ -499,8 +545,8 @@ canvas {
 .scene-btn {
   padding: 6px 10px;
   font-size: 11px;
-  background: #3a3a3a;
+  background: rgba(58, 58, 58, 0.7);
-  border: 1px solid #444;
+  border: 1px solid rgba(68, 68, 68, 0.6);
   border-radius: 4px;
   color: #e0e0e0;
   cursor: pointer;
@@ -708,8 +754,8 @@ canvas {
 
 /* Layer panels */
 .layer-panel {
-  background: #1a1a1a;
+  background: rgba(26, 26, 26, 0.7);
-  border: 1px solid #333;
+  border: 1px solid rgba(51, 51, 51, 0.6);
   border-radius: 6px;
   margin-bottom: 10px;
   overflow: hidden;
@@ -719,8 +765,8 @@ canvas {
   display: flex;
   align-items: center;
   padding: 8px 10px;
-  background: #252525;
+  background: rgba(37, 37, 37, 0.7);
-  border-bottom: 1px solid #333;
+  border-bottom: 1px solid rgba(51, 51, 51, 0.6);
   gap: 8px;
 }
 

docs/index.html

@@ -12,25 +12,20 @@
   <div id="toolbar">
     <!-- Shape layers -->
     <div id="layers-container"></div>
-    <br>
+    
-    <p>Controls:</p>
+    <!-- Playback controls - pinned to bottom -->
-    <p>
+    <div class="playback-controls">
-      Press "Space" to pause and start the animation
+      <div class="speed-control">
-    </p>
+        <span class="speed-label">Speed: <span id="speedValue">1.0</span>x</span>
-    <p>
+        <input type="range" id="inputSpeed" min="-10" max="10" step="0.1" value="1" oninput="ChangeSpeed(this.value)">
-      Press "P" to show/hide the control panel
+      </div>
-    </p>
+      <div class="controls">
-    <br>
+        <button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
-    <p>Speed</p>
+        <button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Pause</button>
-    <input type="text" id="inputDegPerSec" value="10" onchange="ChangeDegPerSec(this.value)">
+        <button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
-    <br>
+      </div>
-    <p>Controls</p>
+      <button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Timeline</button>
-    <div class="controls">
-      <button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
-          <button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Play</button>
-          <button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
     </div>
-    <button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
   </div>
   <div>
     <button onclick="manualToggleSettings()" class="button">Show/hide</button>

docs/js/core/AnimationEngine.js

@@ -17,6 +17,7 @@ class AnimationEngine {
     this.elapsedTime = 0;
     this.rotation = 0;
     this.degPerSec = 10;
+    this.speedMultiplier = 1.0;
     
     // State
     this.paused = false;
@@ -78,8 +79,8 @@ class AnimationEngine {
     
     if (!this.paused) {
       this.rotation += this.degPerSec / this.targetFps;
-      this.elapsedTime += deltaTime;
+      this.elapsedTime += deltaTime * this.speedMultiplier;
-      adjustedDeltaTime = deltaTime / 100;
+      adjustedDeltaTime = (deltaTime * this.speedMultiplier) / 100;
     }
     
     const adjustedElapsed = this.elapsedTime / 1000;
@@ -127,24 +128,24 @@ class AnimationEngine {
   }
 
   /**
-   * Step forward one frame
+   * Step forward one frame (advances elapsed time by 1 frame)
    */
   stepForward() {
-    this.rotation += this.degPerSec / this.targetFps;
+    this.elapsedTime += this.frameDuration;
   }
 
   /**
-   * Step backward one frame
+   * Step backward one frame (rewinds elapsed time by 1 frame)
    */
   stepBackward() {
-    this.rotation -= this.degPerSec / this.targetFps;
+    this.elapsedTime = Math.max(0, this.elapsedTime - this.frameDuration);
   }
 
   /**
-   * Set degrees per second
+   * Set speed multiplier (-10 to 10)
    */
-  setSpeed(degPerSec) {
+  setSpeed(speed) {
-    this.degPerSec = parseFloat(degPerSec);
+    this.speedMultiplier = parseFloat(speed);
   }
 
   /**

docs/js/index.js

@@ -48,7 +48,7 @@ function toggleSettings(e) {
     toolbarShowing = !toolbarShowing;
   }
   if (e.code === "Space") {
-    engine.togglePause();
+    TogglePause();
   }
 
   let tb = document.getElementById("toolbar");
@@ -73,8 +73,10 @@ function BackwardFrame() {
   engine.stepBackward();
 }
 
-function ChangeDegPerSec(newValue) {
+function ChangeSpeed(newValue) {
-  engine.setSpeed(newValue);
+  const speed = parseFloat(newValue);
+  engine.setSpeed(speed);
+  document.getElementById('speedValue').textContent = speed.toFixed(1);
 }
 
 function render_clear() {