centricular
diff --git a/‎html/raf_test.html‎
Lines changed: 99 additions & 0 deletions b/‎html/raf_test.html‎
Lines changed: 99 additions & 0 deletions
diff --git a/‎html/sounds/test.mp3‎
82 KB b/‎html/sounds/test.mp3‎
82 KB
@@ -0,0 +1,99 @@
+<html>
+  <head>
+    <title>RAF Test Sample</title>
+    <style>
+      body {
+        overflow: hidden;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .wrapper {
+        width: 70%;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+        background-color: white;
+      }
+
+      .container {
+        width: 100%;
+        text-align: center;
+        font-family: monospace, monospace;
+        font-size: 8vw;
+        font-weight: bold;
+        padding: 1rem;
+      }
+    </style>
+    <script language="JavaScript">
+      let frameNum = 0; // s
+      let fps = 0;
+      let t = undefined;
+      let T = 0;
+
+      let text = undefined;
+
+      function alphaFilter(prevEst, value, alpha) {
+        return prevEst + alpha * (value - prevEst);
+      }
+
+      function animate(msg) {
+        let dt = 0;
+        if (t !== undefined) {
+          const now = performance.now() / 1000;
+          dt = now - t;
+
+          T += dt;
+
+          let _fps = 1 / dt;
+          fps = alphaFilter(fps, _fps, 0.05);
+        }
+
+        t = performance.now() / 1000;
+
+        if (!text) {
+          text = document.getElementById("text");
+        } else {
+          text.innerHTML =
+            `fn: ${frameNum}<br>fps: ${fps.toFixed(0)}<br>` +
+            `dt: ${(dt * 1000).toFixed(0)} ms<br>` +
+            `T: ${(T).toFixed(0)} s<br>`
+        }
+
+
+        frameNum++;
+
+        requestAnimationFrame(animate);
+      }
+
+      const audioDelay = 1000;
+
+      document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(() => {
+          const audio = new Audio("sounds/test.mp3");
+          // audio.loop = true;
+          audio.play();
+          audio.onended = () => {
+            setTimeout(() => {
+              audio.currentTime = 0;
+              audio.play();
+            }, audioDelay);
+          }
+        }, audioDelay);
+      });
+
+      requestAnimationFrame(animate);
+    </script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div id="text" class="container" style="background-color: #ff775c;"></div>
+    </div>
+  </body>
+</html>