Initial project import

tools/v/examples/wasm/mandelbrot/mandelbrot.html

@@ -0,0 +1,58 @@
+<!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>