Add mandelbrot render to demo page

Author: Shrike

app.js

@@ -24,6 +24,8 @@ function run_wasm(obj) {
   w = obj.instance;
   memory = new Uint8Array(w.exports.memory.buffer);
 
+  let m = new Mandel(w);
+
   test1(w);
   test2(w);
   test3(w);
@@ -125,3 +127,110 @@ function test4(w) {
   console.log("test4", reverseResult, typeof(reverseResult));
   element.innerHTML = result;
 }
+
+class Mandel
+{
+    constructor(w) {
+        this.buttonStartC = document.getElementById("btnStartC");
+        this.buttonStopC = document.getElementById("btnStopC");
+
+        this.canvasC = document.getElementById("canvasC");
+        this.w = w;
+
+        this.ctxC = this.canvasC.getContext("2d");
+
+        this.canvasWidth = this.canvasC.width;
+        this.canvasHeight = this.canvasC.height;
+
+        this.boundHandleClickStartC = this.startC.bind(this);
+        this.boundHandleClickStopC = this.stopC.bind(this);
+
+        this.boundLoopC = this.loopC.bind(this);
+
+        this.buttonStartC.addEventListener("click", this.boundHandleClickStartC);
+        this.buttonStopC.addEventListener("click", this.boundHandleClickStopC);
+
+        this.buttonStopC.style.display = "none";
+
+        this.runC = false;
+
+        this.startC();
+    }
+
+    startC()
+    {
+        this.buttonStartC.style.display = "none";
+        this.buttonStopC.style.display = "block";
+        this.initMandel();
+
+        this.ctxC.fillStyle = "rgba(10,10,10,255)";
+        this.ctxC.fillRect( 0, 0, this.canvasWidth, this.canvasHeight );
+
+        this.runC = true;
+        requestAnimationFrame(this.boundLoopC);
+    }
+
+    stopC()
+    {
+        this.buttonStartC.style.display = "block";
+        this.buttonStopC.style.display = "none";
+        this.runC = false;
+    }
+
+    initMandel()
+    {
+        this.minR = -1.016104875794718741911;
+        this.maxR = -1.016069839835083325286;
+        this.minI = 0.277341371563625000140;
+        this.maxI = 0.277367718605270833442;
+
+        // this.minR = -1.016097461503191826601;
+        // this.maxR = -1.016097461213187951076;
+        // this.minI = 0.277356844127615701971;
+        // this.maxI = 0.277356844344781394806;
+
+        this.minR = -2;
+        this.maxR = 1;
+        this.minI = -1;
+        this.maxI = 1;
+
+        this.minR = -1.293019999999999985104;
+        this.maxR = -1.193859999999999987472;
+        this.minI = 0.12808;
+        this.maxI = 0.20245;
+     
+        this.minR = -0.868819999999999995828;
+        this.maxR = -0.858714999999999996086;
+        this.minI = 0.239415;
+        this.maxI = 0.246935;
+
+        this.maxIterations = 5000;
+        this.x = 0;
+        this.y = 0;
+
+        this.colors = new Array(16).fill(0).map((_, i) => i === 0 ? '#000' : `#${((1 << 24) * Math.random() | 0).toString(16)}`);
+
+        this.w.exports.initMandel(this.minR, this.maxR, this.minI, this.maxI, this.maxIterations, this.canvasWidth, this.canvasHeight);
+    }
+
+    loopC()
+    {
+        for (let x = 0; x < this.canvasWidth; ++x)
+        {
+            const iterations = this.w.exports.calcPixel(x, this.y);
+            this.ctxC.fillStyle = this.colors[iterations >= this.maxIterations ? 0 : (iterations % this.colors.length - 1) + 1];
+            this.ctxC.fillRect( x, this.y, 1, 1 );
+        }
+
+        this.y += 1;
+        if (this.y >= this.canvasHeight)
+        {
+            this.stopC();
+        }
+
+        if (this.runC)
+        {
+            requestAnimationFrame(this.boundLoopC);
+        }
+    }
+}

c_wasm_screenshot.png

@@ -15,25 +15,37 @@
 
   <h1>Running C functions in WebAssembly</h1>
   <hr/>
-  <p>
-    <h2>C function with 2 integer arguments</h2>
-    add(42, 666) = <span class="result" id="test1result"></span>
-  </p>
-
-  <p>
-    <h2>Pass integer array to C function</h2>
-    sum([1, 2, ... 100]) = <span class="result" id="test2result"></span>
-  </p>
-
-  <p>
-    <h2>C function with float argument</h2>
-    square_root(2) = <span class="result" id="test3result"></span>
-  </p>
-
-  <p>
-    <h2>C function with string argument</h2>
-    reverse("WebAssembly") = <span class="result" id="test4result"></span>
-  </p>
+
+  <div class="wrapper">
+    <div>
+    <p>
+      <h2>C function with 2 integer arguments</h2>
+      add(42, 666) = <span class="result" id="test1result"></span>
+    </p>
+
+    <p>
+      <h2>Pass integer array to C function</h2>
+      sum([1, 2, ... 100]) = <span class="result" id="test2result"></span>
+    </p>
+
+    <p>
+      <h2>C function with float argument</h2>
+      square_root(2) = <span class="result" id="test3result"></span>
+    </p>
+
+    <p>
+      <h2>C function with string argument</h2>
+      reverse("WebAssembly") = <span class="result" id="test4result"></span>
+    </p>
+  </div>
+
+    <div class="cnvC">
+      <div style="margin:0; padding:0;"><canvas id="canvasC" width="480" height="360"></canvas></div>
+      <button type="button" id="btnStartC">Start</button>
+      <button type="button" id="btnStopC" style="display:none;">Stop</button>
+    </div>
+
+  </div>
 
 <script type="module">
   init();

index.html

@@ -1,8 +1,8 @@
-/////////////
-// Example //
-/////////////
+///////////
+// Setup //
+///////////
 
-// Function declared in Javascript
+// Function implemented in Javascript
 void print(char* msg);
 float sqrt(float number);
 
@@ -22,7 +22,10 @@ void c_free(void* p)
 	// Not implemented yet
 }
 
-// Function to be called from Javascript
+////////////////////
+// Test Functions //
+////////////////////
+
 int add(int a, int b)
 {
 	print("In C add()\n");
@@ -47,8 +50,6 @@ float square_root(float number)
 	return sqrt(number);
 }
 
-#define MAX_MSG_LENGTH	100
-
 char* reverse(char* msg, int len)
 {
 	print(msg);
@@ -62,8 +63,9 @@ char* reverse(char* msg, int len)
 	return result;
 }
 
-/*********************************************/
-/* Mandelbrot ********************************/
+////////////////
+// Mandelbrot //
+////////////////
 
 double minR;
 double maxR;