# Plotting Fractals in WebAssembly

# Plotting Fractals in WebAssembly

Previous | Top | Next |
---|---|---|

4: Optimised WAT Implementation | 5: Plotting a Julia Set | 6: Zooming In |

5.1: Web Page Changes |

## 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.