-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
89 lines (81 loc) · 3.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<title>Mandelbrot Animation</title>
<link rel="icon" href="data:;base64,=">
</head>
<body>
<button id="animate" disabled=true>Start</button>
<div>
<canvas id="fractal" width="600" height="400"></canvas>
</div>
<div id="info">
</div>
<div id="log">
</div>
<script type="text/javascript">
let imports = {}
let data = null
let mem = null
let frame_func = null
let animate = false;
var canvas = document.getElementById('fractal');
var ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
function CStrConvert(start) {
let str = "";
let i = start;
while (mem[i] != 0) {
// TextDecoder is not awailable in all engines yet
str += String.fromCharCode(mem[i]);
++i;
}
return str;
}
let log = function(str) {
document.getElementById("log").innerHTML += str + "<br>";
}
let toggle_animation = function() {
if (animate) {
animate = false;
document.getElementById("animate").innerHTML = "Start";
} else {
animate = true;
window.requestAnimationFrame(frame_func);
document.getElementById("animate").innerHTML = "Stop";
}
}
imports["memory"] = new WebAssembly.Memory({initial:64});
imports["refresh"] = function() {
ctx.putImageData(new ImageData(data, width, height), 0, 0);
if (animate)
window.requestAnimationFrame(frame_func);
}
imports["print_fps"] = function(fps) {
document.getElementById("info").innerHTML = "FPS: " + (Math.round(fps * 100) / 100);
}
fetch("animation.wasm").then(resp =>
resp.arrayBuffer()
).then(buffer =>
WebAssembly.instantiate(buffer, { "env" : imports})
).then(i_ => {
let inst = i_.instance;
let instance = {};
instance.init = inst.exports.init;
instance.fill = inst.exports.fill;
instance.zoom = inst.exports.zoom_step;
instance.heap_base = inst.exports.__heap_base;
frame_func = instance.zoom;
let offset = instance.heap_base; // In place of "malloc"
data = new Uint8ClampedArray(imports["memory"]["buffer"], offset, width*height*4);
mem = new Uint8Array(imports["memory"]["buffer"]);
instance.init(offset, width, height);
instance.fill();
// Enable animation button
document.getElementById("animate").disabled = false;
document.getElementById("animate").onclick = toggle_animation;
});
</script>
</body>
</html>