Add canvas animation demo

2025-01-18 04:03:21 -08:00 · 2019-06-09 20:09:50 +01:00
parent b8bf9995ca
commit 7d59825716
5 changed files with 540 additions and 9 deletions
--- a/canvas/index.html
+++ b/canvas/index.html
@@ -0,0 +1,101 @@
+<html>
+
+<head>
+    <title>go webassembly - repulsion</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js"></script>
+    <script src="wasm_exec.js"></script>
+    <script>
+        hljs.configure({ tabReplace: '  ' });
+        const go = new Go();
+        WebAssembly.instantiateStreaming(fetch('test.wasm'), go.importObject).then(res => {
+            go.run(res.instance)
+        })
+        window.onload = function () {
+            linkRange('count', 'count-value')
+            linkRange('speed', 'speed-value')
+
+            // Go code background
+            fetch('main.go').then(res => res.text()).then(res => {
+                let codeEl = document.getElementById("code")
+                codeEl.innerHTML = res.replace(/&/g, "&amp;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/</g, "&lt;")
+                hljs.highlightBlock(codeEl)
+            })
+        }
+        function linkRange(id, idValue) {
+            let El = document.getElementById(id)
+            let valEl = document.getElementById(idValue)
+            El.addEventListener("input", function () { valEl.innerHTML = El.value })
+            valEl.innerHTML = El.value
+        }
+    </script>
+    <style>
+        body,
+        pre {
+            margin: 0;
+            padding: 0;
+        }
+
+        .control-group {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        .control-group label {
+            flex: 0;
+            flex-basis: 100px;
+        }
+
+        .control-group input {
+            flex-grow: 0;
+        }
+
+        .control-group span {
+            width: 50px;
+        }
+
+        .control {
+            position: fixed;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.2);
+            color: #FFF;
+            top: 0;
+            right: 0;
+        }
+
+        #mycanvas {
+            position: fixed;
+            opacity: 0.9;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="code">
+        <pre><code id="code"></code></pre>
+    </div>
+    <canvas id="mycanvas"></canvas>
+    <div class="control">
+        <div id="fps">0</div>
+        <div class="control-group">
+            <label>Speed</label><input id="speed" type="range" min="10" max="1000" value="160"> <span id="speed-value">
+                160</span>
+        </div>
+        <div class="control-group">
+            <label>Number of dots</label><input id="count" type="range" min="10" max="1000" value="100"> <span
+                id="count-value"> 100</span>
+        </div>
+    </div>
+</body>
+
+</html>