Print Page - HTML 5 Mandelbrot / Julia Zoomer

Title: HTML 5 Mandelbrot / Julia Zoomer
Post by: asimes on May 23, 2012, 10:19:26 AM

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.

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: cKleinhuis on May 23, 2012, 10:27:29 AM

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

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: taurus on May 23, 2012, 02:18:33 PM

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 :dink:

well done, asimes! :beer:

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: DarkBeam on May 23, 2012, 05:30:55 PM

On Chrome it's blazing fast! Yesss :D

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: asimes on May 23, 2012, 06:07:20 PM

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.

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: asimes on May 24, 2012, 09:24:13 PM

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?

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: makc on March 05, 2013, 12:42:03 AM

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"

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: cKleinhuis on March 05, 2013, 08:51:23 AM

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

Title: Re: HTML 5 Mandelbrot / Julia Zoomer
Post by: Apophyster on March 05, 2013, 09:26:57 AM

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

Welcome to Fractal Forums

Fractal Math, Chaos Theory & Research => Mandelbrot & Julia Set => Topic started by: asimes on May 23, 2012, 10:19:26 AM