mirror of
https://github.com/vlang/v.git
synced 2025-08-04 10:17:22 -04:00
59 lines
1.5 KiB
HTML
59 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>V Mandelbrot WebAssembly Example</title>
|
|
</head>
|
|
<body>
|
|
<p>Below you should see the picture of the Mandelbrot set,
|
|
<br>calculated in WASM, and shown in a Canvas element.</p>
|
|
<canvas
|
|
id="canvas"
|
|
width="400"
|
|
height="400"
|
|
style="image-rendering: crisp-edges"
|
|
></canvas>
|
|
<script>
|
|
var canvas = document.getElementById("canvas");
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.font = "32px serif";
|
|
ctx.fillText("Please wait...", 100, 250);
|
|
var memory;
|
|
|
|
function get_string(ptr, len) {
|
|
const buf = new Uint8Array(memory.buffer, ptr, len);
|
|
const str = new TextDecoder("utf8").decode(buf);
|
|
return str;
|
|
}
|
|
|
|
const env = {
|
|
canvas_x: () => canvas.width,
|
|
canvas_y: () => canvas.height,
|
|
setpixel: (x, y, c) => {
|
|
ctx.fillStyle = "rgba(1,1,1," + c / 255 + ")";
|
|
ctx.fillRect(x, y, 1, 1);
|
|
},
|
|
__writeln: (ptr, len) => {
|
|
console.log(get_string(ptr, len));
|
|
},
|
|
__panic_abort: (ptr, len) => {
|
|
throw get_string(ptr, len);
|
|
},
|
|
};
|
|
|
|
WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {
|
|
env: env,
|
|
}).then((res) => {
|
|
console.log(env.canvas_x())
|
|
console.log(env.canvas_y())
|
|
memory = res.instance.exports["memory"];
|
|
console.time("main.main");
|
|
res.instance.exports["main.main"]();
|
|
console.timeEnd("main.main");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|