Canvas: Mandelbrot

In the first of my series of postings about the canvas element: A mandelbrot generator that allows you to save the generated image. This demo works really well in Opera 9, and fails in Firefox, because of repeated “This script is taking to long to run” messages.
The really quick manual:
* Select a size. The default is 640×480 – you can go as high as 1600×1200 if your computer is fast enough.
* Click “Plot” to see the painted image
* If you want to zoom in, you do so by either editing the coordinates directly, or by clicking twice on the map to select that area. Click “Plot” again to repaint.
* If you have found a particularily interesting area, you can save it by clicking “Open as PNG”. This will open the image in a new window as a data: URI.
Open the “Mandelbrot demo”:

Next Post
Leave a comment


  1. Jakub81

     /  2005-10-21

    Cool! It does work in Firefox 1.5 beta 2, but a dialog window with a script warning is showed a few times and you have to click “Continue” every time to continue rendering.

  2. Arve, could you tell me why this demo “”: doesn’t work in Merlin?

  3. quiris: Know n issue. The site uses rgb color values, something which always yields white.
    Change this line:
    bc. var result = “rgb(” + index2 + “,” + index1 + “,” + index2 + “)”;
    … so it instead reads:
    bc. var result = “rgba(” + index2 + “,” + index1 + “,” + index2 + “,1)”;
    and the demo will work.

  4. Thank you for the explaination 🙂 There is “”: a quite long list of canvas demos. Unfortunately the most don’t work or work buggy in Merlin? Could you tell us some details about the issues? Are they also don’t work because of bugs in Merlin canvas implementation?

  5. It’ll work better in other UAs (those that block the UI during script execution) if you draw the fractal bit by bit using timers. It’ll also look better since you’ll be able to see what’s happening as the script executes. This is what most fractal generators do. (This also allows for zooming and stuff, since you can just zoom what is there already as you continue, in a background thread, to increase the sharpness of whatever is visible at that time).