Play the demos only on hover to preserve the resources

index.html

@@ -10,47 +10,58 @@
     <p>Below is a bunch of demos written in C using this library compiled to WebAssembly. Every frame of the animations is generated pixel by pixel on CPU without using any special GPU APIs like OpenGL, Metal, etc. </p>
     <p>The source code of the library and the demos is available on GitHub: <a href="https://github.com/tsoding/olive.c">https://github.com/tsoding/olive.c</a></p>
 
-    <h2 id="demo-triangle"><a href="#demo-triangle">Triangle</a></h2>
-    <p>Rainbow triangle together with a transparent circle. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle.c">demos/triangle.c</a></p>
-    <canvas id="app-triangle"></canvas>
+    <div id="sec-triangle">
+      <h2 id="demo-triangle"><a href="#demo-triangle">Triangle</a></h2>
+      <p>Rainbow triangle together with a transparent circle. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle.c">demos/triangle.c</a></p>
+      <canvas id="app-triangle"></canvas>
+    </div>
 
-    <h2 id="demo-3d"><a href="#demo-3d">3D</a></h2>
-    <p>A bunch of 3D points projected onto your 2D screen plus a text with a builtin monospaced font. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/3d.c">demos/3d.c</a></p>
-    <canvas id="app-3d"></canvas>
+    <div id="sec-3d">
+      <h2 id="demo-3d"><a href="#demo-3d">3D</a></h2>
+      <p>A bunch of 3D points projected onto your 2D screen plus a text with a builtin monospaced font. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/3d.c">demos/3d.c</a></p>
+      <canvas id="app-3d"></canvas>
+    </div>
 
-    <h2 id="demo-squish"><a href="#demo-squish">Squish</a></h2>
-    <p>Resizing images on the fly. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/squish.c">demos/squish.c</a></p>
-    <canvas id="app-squish"></canvas>
+    <div id="sec-squish">
+      <h2 id="demo-squish"><a href="#demo-squish">Squish</a></h2>
+      <p>Resizing images on the fly. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/squish.c">demos/squish.c</a></p>
+      <canvas id="app-squish"></canvas>
+    </div>
 
-    <h2 id="demo-triangle3d"><a href="#demo-triangle3d">Triangle 3D</a></h2>
-    Rotating rainbow triangle in 3D. Unlike <a href="#demo-3d">3D dots above</a> this is a solid shape. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3d.c">demos/triangle3d.c</a></p>
-    <canvas id="app-triangle3d"></canvas>
+    <div id="sec-triangle3d">
+      <h2 id="demo-triangle3d"><a href="#demo-triangle3d">Triangle 3D</a></h2>
+      Rotating rainbow triangle in 3D. Unlike <a href="#demo-3d">3D dots above</a> this is a solid shape. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3d.c">demos/triangle3d.c</a></p>
+      <canvas id="app-triangle3d"></canvas>
+    </div>
 
-    <h2 id="demo-triangleTex"><a href="#demo-triangleTex">Rotating Textures</a></h2>
-    Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangleTex.c">demos/triangleTex.c</a></p>
-    <canvas id="app-triangleTex"></canvas>
+    <div id="sec-triangleTex">
+      <h2 id="demo-triangleTex"><a href="#demo-triangleTex">Rotating Textures</a></h2>
+      Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangleTex.c">demos/triangleTex.c</a></p>
+      <canvas id="app-triangleTex"></canvas>
+    </div>
 
-    <h2 id="demo-triangle3dTex"><a href="#demo-triangle3dTex">Rotating Textures</a></h2>
-    Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3dTex.c">demos/triangle3dTex.c</a></p>
-    <canvas id="app-triangle3dTex"></canvas>
+    <div id="sec-triangle3dTex">
+      <h2 id="demo-triangle3dTex"><a href="#demo-triangle3dTex">Rotating Textures</a></h2>
+      Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/triangle3dTex.c">demos/triangle3dTex.c</a></p>
+      <canvas id="app-triangle3dTex"></canvas>
+    </div>
 
     <!-- TODO: fix distortion and performance of Cup 3D example on the Web -->
-    <!--
-    <h2 id="demo-cup3d"><a href="#demo-cup3d">Cup 3D</a></h2>
-    Design by <a href="https://github.com/tsoding/rexim">rexim</a>. 3D model by <a href="https://github.com/kolumb">kolumb</a>. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/cup3d.c">demos/cup3d.c</a></p>
-    <canvas id="app-cup3d"></canvas>
-    -->
+    <div id="sec-cup3d">
+      <h2 id="demo-cup3d"><a href="#demo-cup3d">Cup 3D</a></h2>
+      Design by <a href="https://github.com/tsoding/rexim">rexim</a>. 3D model by <a href="https://github.com/kolumb">kolumb</a>. Distorted by a bug. Source:&nbsp;<a href="https://github.com/tsoding/olive.c/blob/master/demos/cup3d.c">demos/cup3d.c</a></p>
+      <canvas id="app-cup3d"></canvas>
+    </div>
 
     <script src="js/vc.js"></script>
-    <!-- TODO: play the demos only hover to preserve the resources -->
     <script>
-      startDemo("app-triangle", "./wasm/triangle.wasm");
-      startDemo("app-3d", "./wasm/3d.wasm");
-      startDemo("app-squish", "./wasm/squish.wasm");
-      startDemo("app-triangle3d", "./wasm/triangle3d.wasm");
-      startDemo("app-triangleTex", "./wasm/triangleTex.wasm");
-      startDemo("app-triangle3dTex", "./wasm/triangle3dTex.wasm");
-      //startDemo("app-cup3d", "./wasm/cup3d.wasm");
+      startDemo("triangle", "./wasm/triangle.wasm");
+      startDemo("3d", "./wasm/3d.wasm");
+      startDemo("squish", "./wasm/squish.wasm");
+      startDemo("triangle3d", "./wasm/triangle3d.wasm");
+      startDemo("triangleTex", "./wasm/triangleTex.wasm");
+      startDemo("triangle3dTex", "./wasm/triangle3dTex.wasm");
+      startDemo("cup3d", "./wasm/cup3d.wasm");
     </script>
   </body>
 </html>

js/vc.js

@@ -40,11 +40,20 @@ function readCanvasFromMemory(memory_buffer, canvas_ptr)
 }
 
 async function startDemo(elementId, wasmPath) {
-    const app = document.getElementById(elementId);
+    const app = document.getElementById(`app-${elementId}`);
     if (app === null) {
-        console.error(`Could not find element ${elementId}. Skipping demo ${wasmPath}...`);
+        console.error(`Could not find element app-${elementId}. Skipping demo ${wasmPath}...`);
         return;
     }
+    const sec = document.getElementById(`sec-${elementId}`);
+    if (sec === null) {
+        console.error(`Could not find element sec-${elementId}. Skipping demo ${wasmPath}...`);
+        return;
+    }
+
+    let paused = true;
+    sec.addEventListener("mouseenter", () => paused = false);
+    sec.addEventListener("mouseleave", () => paused = true);
 
     const ctx = app.getContext("2d");
     const w = await WebAssembly.instantiateStreaming(fetch(wasmPath), {
@@ -54,15 +63,7 @@ async function startDemo(elementId, wasmPath) {
     // TODO: if __heap_base not found tell the user to compile their wasm module with -Wl,--export=__heap_base
     const heap_base = w.instance.exports.__heap_base.value;
 
-    let prev = null;
-    function first(timestamp) {
-        prev = timestamp;
-        window.requestAnimationFrame(loop);
-    }
-    function loop(timestamp) {
-        const dt = timestamp - prev;
-        prev = timestamp;
-
+    function render(dt) {
         const buffer = w.instance.exports.memory.buffer;
         w.instance.exports.vc_render(heap_base, dt*0.001);
         const canvas = readCanvasFromMemory(buffer, heap_base);
@@ -75,6 +76,18 @@ async function startDemo(elementId, wasmPath) {
         app.width = canvas.width;
         app.height = canvas.height;
         ctx.putImageData(image, 0, 0);
+    }
+
+    let prev = null;
+    function first(timestamp) {
+        prev = timestamp;
+        render(0);
+        window.requestAnimationFrame(loop);
+    }
+    function loop(timestamp) {
+        const dt = timestamp - prev;
+        prev = timestamp;
+        if (!paused) render(dt);
         window.requestAnimationFrame(loop);
     }
     window.requestAnimationFrame(first);