mirror of
https://github.com/taigrr/wasm-experiments
synced 2025-01-18 04:03:21 -08:00
102 lines
2.9 KiB
HTML
102 lines
2.9 KiB
HTML
<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, "&")
|
|
.replace(/>/g, ">")
|
|
.replace(/</g, "<")
|
|
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>
|