Plotting Fractals in WebAssembly
|4: Optimised WAT Implementation||Top||6: Zooming In|
5: Plotting a Julia Set
Now that we have an efficient means of plotting the Mandelbrot Set, we can add a second HTML
canvas element to display the Julia Set.
For every point on the Mandelbrot Set, there is a corresponding Julia Set. So as the mouse pointer moves over the Mandelbrot Set, a completely new Julia Set needs to be rendered. Consequently, every time a
mousemove event goes off over the Mandelbrot
canvas, our now dual-purpose plot function needs to be called.
This is where we start to see the benefits of writing in WebAssembly Text. Since we can focus on low-level efficiency, we can produce a very small, very fast program.
To plot the additional Julia Sets, we need to make two sets of changes:
Here’s a working version of the Mandelbrot Set with Dynamic Julia Sets
How Big is the WASM Module Now?
Good question, glad you asked… 😃
Now that we have a single WebAssembly module that can plot both the Mandelbrot and Julia Sets, it is worth looking at the size of the compiled module:
$ ll total 56 drwxr-xr-x 8 chris staff 256 9 Dec 19:04 . drwxr-xr-x 10 chris staff 320 9 Dec 18:41 .. drwxr-xr-x 3 chris staff 96 9 Dec 14:42 01 drwxr-xr-x 3 chris staff 96 9 Dec 14:42 02 -rw-r--r-- 1 chris staff 894 9 Dec 16:26 README.md -rw-r--r-- 1 chris staff 6812 9 Dec 18:25 mb-julia-set.html -rw-r--r-- 1 chris staff 712 9 Dec 19:04 mj_plot.wasm -rw-r--r-- 1 chris staff 11936 9 Dec 14:08 mj_plot.wat
Wow! Only 712 bytes!
This is not as small as the program could be, but its a big step forwards (downwards?) compared to the 74Kb module mentioned in the introduction.