Update mandelbrot example (#25)

Author: MaxGraey

mandelbrot/asconfig.json

@@ -0,0 +1,23 @@
+{
+  "options": {
+    "runtime": "stub",
+    "use": "Math=JSMath",
+    "importMemory": true,
+    "sourceMap": true,
+    "measure": true
+  },
+  "targets": {
+    "debug": {
+      "outFile": "build/debug.wasm",
+      "textFile": "build/debug.wat",
+      "debug": true
+    },
+    "release": {
+      "outFile": "build/release.wasm",
+      "textFile": "build/release.wat",
+      "optimizeLevel": 3,
+      "shrinkLevel": 0,
+      "noAssert": true
+    }
+  }
+}

mandelbrot/build/.gitignore

@@ -1,3 +1,3 @@
 *
 !.gitignore
-!optimized.wasm
+!release.wasm

mandelbrot/build/optimized.wasm

@@ -46,22 +46,27 @@ <h1>
 ctx.scale(ratio, ratio);
 
 // Compute the size of and instantiate the module's memory
-var memory = new WebAssembly.Memory({ initial: ((byteSize + 0xffff) & ~0xffff) >>> 16 });
-var mem = new Uint16Array(memory.buffer);
-var imageData = ctx.createImageData(width, height);
-var argb = new Uint32Array(imageData.data.buffer);
+const memory = new WebAssembly.Memory({
+  initial: ((byteSize + 0xffff) & ~0xffff) >>> 16
+});
+const mem = new Uint16Array(memory.buffer);
+const imageData = ctx.createImageData(width, height);
+const argb = new Uint32Array(imageData.data.buffer);
 
 // Fetch and instantiate the module
-fetch("build/optimized.wasm")
+fetch("build/release.wasm")
 .then(response => response.arrayBuffer())
 .then(buffer => WebAssembly.instantiate(buffer, {
-  env: { memory },
-  Math
+  env: {
+    memory,
+    "Math.log": Math.log,
+    "Math.log2": Math.log2
+  },
 }))
 .then(module => {
-  var exports = module.instance.exports;
-  var computeLine = exports.computeLine;
-  var updateLine = function(y) {
+  const exports = module.instance.exports;
+  const computeLine = exports.computeLine;
+  const updateLine = function (y) {
     var yx = y * width;
     for (let x = 0; x < width; ++x) {
       argb[yx + x] = colors[mem[yx + x]];
@@ -85,14 +90,15 @@ <h1>
 
     // Let it glow a bit by occasionally shifting the limit...
     var currentLimit = limit;
-    var shiftRange = 10;
+    const shiftRange = 10;
+
     (function updateShift() {
       currentLimit = limit + (2 * Math.random() * shiftRange - shiftRange) | 0
       setTimeout(updateShift, 1000 + (1500 * Math.random()) | 0);
     })();
 
     // ...while continously recomputing a subset of it.
-    var flickerRange = 3;
+    const flickerRange = 3;
     (function updateFlicker() {
       for (let i = 0, k = (0.05 * height) | 0; i < k; ++i) {
         let ry = (Math.random() * height) | 0;
@@ -110,15 +116,15 @@ <h1>
 });
 
 // Compute a nice set of colors using a gradient
-var colors = (() => {
-  var cnv = document.createElement("canvas");
-  cnv.width = 2048;
+const colors = (() => {
+  const cnv  = document.createElement("canvas");
+  cnv.width  = 2048;
   cnv.height = 1;
-  var ctx = cnv.getContext("2d");
-  var grd = ctx.createLinearGradient(0, 0, 2048, 0);
-  grd.addColorStop(0.00, "#000764");
-  grd.addColorStop(0.16, "#2068CB");
-  grd.addColorStop(0.42, "#EDFFFF");
+  const ctx = cnv.getContext("2d");
+  const grd = ctx.createLinearGradient(0, 0, 2048, 0);
+  grd.addColorStop(0.0000, "#000764");
+  grd.addColorStop(0.1600, "#2068CB");
+  grd.addColorStop(0.4200, "#EDFFFF");
   grd.addColorStop(0.6425, "#FFAA00");
   grd.addColorStop(0.8575, "#000200");
   ctx.fillStyle = grd;

mandelbrot/build/release.wasm

@@ -1,6 +1,11 @@
 const fs = require("fs");
-const compiled = new WebAssembly.Module(fs.readFileSync(__dirname + "/build/optimized.wasm"));
-const imports = { JSMath: Math };
+const compiled = new WebAssembly.Module(fs.readFileSync(__dirname + "/build/release.wasm"));
+const imports = {
+  env: {
+    "Math.log": Math.log,
+    "Math.log2": Math.log2,
+  }
+};
 Object.defineProperty(module, "exports", {
   get: () => new WebAssembly.Instance(compiled, imports).exports
 });

mandelbrot/index.html

@@ -4,9 +4,9 @@
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "asbuild:untouched": "asc assembly/index.ts -o build/untouched.wasm -t build/untouched.wat --use Math=JSMath --runtime stub --importMemory --sourceMap --debug --measure",
-    "asbuild:optimized": "asc assembly/index.ts -o build/optimized.wasm -t build/optimized.wat --use Math=JSMath --runtime stub -O3 --importMemory --sourceMap --measure",
-    "asbuild": "npm run asbuild:untouched && npm run asbuild:optimized",
+    "asbuild:debug": "asc assembly/index.ts --target debug",
+    "asbuild:release": "asc assembly/index.ts --target release",
+    "asbuild": "npm run asbuild:debug && npm run asbuild:release",
     "start": "npx serve"
   },
   "devDependencies": {