Add mandelbrot example; Update game-of-life example

2025-06-26 13:11:52 +00:00 · 2018-04-19 17:32:23 +02:00
parent 350befee9b
commit 485c3fd9b2
30 changed files with 2069 additions and 980 deletions
--- a/examples/game-of-life/index.html
+++ b/examples/game-of-life/index.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Conway's Game Of Life - AssemblyScript</title>
+<style>
+html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
+h1 { padding: 20px; font-size: 12pt; }
+a { color: #111; text-decoration: none; }
+a:hover { color: #851ba7; text-decoration: underline; }
+canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #eee; }
+</style>
+</head>
+<body>
+<h1>
+  <a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">Conway's Game Of Life</a> in
+  <a href="http://assemblyscript.org">AssemblyScript</a>
+</h1>
+<canvas></canvas>
+<script>
+
+// Set up the canvas with a 2D rendering context
+var cnv = document.getElementsByTagName("canvas")[0];
+var ctx = cnv.getContext("2d");
+var bcr = cnv.getBoundingClientRect();
+
+// Compute the size of the universe (here: 2px per cell)
+var width = bcr.width >>> 1;
+var height = bcr.height >>> 1;
+var size = width * height;
+var byteSize = size + size; // input & output
+
+cnv.width = width;
+cnv.height = height;
+cnv.style = style = `
+  image-rendering: optimizeSpeed;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: -o-crisp-edges;
+  image-rendering: pixelated;
+  -ms-interpolation-mode: nearest-neighbor;
+`;
+ctx.imageSmoothingEnabled = false;
+
+// Compute the size of and instantiate the module's memory
+var memory = new WebAssembly.Memory({ initial: ((byteSize + 0xffff) & ~0xffff) >>> 16 });
+
+// Fetch and instantiate the module
+fetch("build/optimized.wasm")
+.then(response => response.arrayBuffer())
+.then(buffer => WebAssembly.instantiate(buffer, {
+  env: { memory: memory }
+}))
+.then(module => {
+  var exports = module.instance.exports;
+
+  // Tell the module about the universe's width and height
+  exports.init(width, height);
+
+  // Fill input at [0, s-1] with random live cells
+  var mem = new Uint8Array(memory.buffer);
+  for (var y = 0; y < height; ++y)
+    for (var x = 0; x < width; ++x)
+      mem[y * width + x] = Math.random() > 0.1 ? 0 : 1;
+
+  // Update about 30 times a second
+  (function update() {
+    setTimeout(update, 1000 / 30);
+    exports.step();
+    mem.copyWithin(0, size, byteSize); // copy output to input
+  })();
+
+  // Keep rendering the output at [s, S]
+  (function render() {
+    requestAnimationFrame(render);
+    var imageData = ctx.createImageData(width, height);
+    var colors = new Uint32Array(imageData.data.buffer);
+    for (let y = 0; y < height; ++y) {
+      for (let x = 0; x < width; ++x) {
+        if (mem[size + y * width + x]) colors[y * width + x] = 0xff851ba7;
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+  })();
+
+}).catch(err => {
+  throw err;
+});
+</script>
+</body>
+</html>