HTML 5 Mandelbrot / Julia Zoomer

[asimes]

There was a post recently on a Mandelbrot zoomer ( http://www.fractalforums.com/fractal-related-links/fractal-web-app-t11951/msg47219/ ) that I really liked and I decided to make my own (EDIT: This link does not exist anymore. I rewrote it and a new version is here: http://alexsimes.com/index.php?foo=visual%20programming&bar=mandelbrot%20set).

The goal was to make something intuitive enough for non-fractal-experts to use. Suggestions or feedback is greatly appreciated.

Note: This probably will not work in IE 8 or older (HTML 5). I am still testing out bugs in different browsers, if you notice any please let me know.

[cKleinhuis]

sloow default 50 iterations is enough
would like to have double click zoom ...
and drag n drop
well done!

[taurus]

cool thingy. works fine on firefox and pretty fast - even with full window @ 1920x1200

on ie9 it's almost unusable. takes about half a minute to show up in same resolution, and crashes the tab sometimes. (who wonders?)

the interface is really simple and intuitive. doubleclick zoom would be nice, but i'm not sure, if there is such a browser event... (edit: there is - dblclick - rarely used and difficult to separate from click)
picking julia constants from crosshair would also be nice  

well done, asimes!  

[DarkBeam]

On Chrome it's blazing fast! Yesss

[asimes]

Thanks all

cKleinhuis, what browser did you use? I have a mac so I checked Safari, Chrome, Firefox, and Opera but not IE. It seemed fairly quick (assuming there are not too many pixels that hit the max iterations)

I think double clicking would be much faster for zooming but I'm afraid of people getting confused when they do it on accident and then the browser starts rendering the new image. Right now I have it set up so that the zoomed in / out fractal is centered to where the cross hair was.

I like the Julia Constants from cross hair idea, I'll see about adding it.

[asimes]

One thing that really annoys me about me code is that I am testing if "Mandelbrot" or "Julia" mode is selected and running ALMOST identical code based on that. The only real difference is that:

Code:

zr = zrr-zii+x;
zi = twozri+y;

becomes:

Code:

zr = zrr-zii+jx;
zi = twozri+jy;

inside of this loop:

Code:

var x = xMin-pSize/2+xMargin;
for (var i = 0; i < msWidth; i++) {
	var y = yMin-pSize/2+yMargin;
	for (var j = 0; j < msHeight; j++) {
		var zr = x;
		var zi = y;
		var n = 0;
		while (n < maxIterations) {
			var zrr = zr*zr;
			var zii = zi*zi;
			var twozri = 2.0*zr*zi;
			zr = zrr-zii+x;
			zi = twozri+y;
			if (zrr+zii > 16) break;
			n++;
		}
		var index = (i+j*msWidth)*4;
		if (n == maxIterations) {
			msImageData.data[index] = 255;
			msImageData.data[index+1] = 255;
			msImageData.data[index+2] = 255;
			msImageData.data[index+3] = 255;
		}
		else {
			var fn = n+1-Math.log(Math.log(Math.sqrt(zr*zr+zi*zi)))/Math.log(2);
			var logColor = Math.max(Math.log(fn)/Math.log(maxIterations)*255, 0);
			msImageData.data[index] = logColor;
			msImageData.data[index+1] = logColor;
			msImageData.data[index+2] = logColor;
			msImageData.data[index+3] = 255;
		}
		y += dInc;
	}
	x += dInc;
}

There must be some clever way to change those two lines without performing a test inside of the while loop (that slows everything down A LOT). Any ideas?

[makc]

obviously you could put zi = twozri+y*a+jy*b; where a,b are 0,1 or 1,0 but not sure this would be any faster than "if"

[cKleinhuis]

i used gts250 nvidia gpu, might be that it is rather slow after all

[Apophyster]

confirm In Delphi it is arctan2(y,x) .