Welcome to Fractal Forums

Fractal Software => Fractal Programs => Topic started by: khyperia on May 20, 2012, 05:21:14 AM




Title: HTML5 realtime mandelbrot explorer
Post by: khyperia on May 20, 2012, 05:21:14 AM
You need HTML5/webgl support to run the page, came standard on my machine/browser, so you should be good.

http://khyperia.com/projects/mandelbrot/

Drag the mouse to pan, and scroll to zoom. I heard rumors of firefox not supporting the mouse scroll event, but I don't know, didn't test it on firefox.

Made this as a "hello world" type webgl project in about 3 hours. Yeah, simple algorithm is simple, color is just the sin of iteration count over some Fibonacci numbers. The point is that its realtime, and in a browser, not looks cool.

And then I realized I called it "mandelbox" because I type in mandelbox a LOT more than mandelbrot. Fail.

Edit: Updated URL to reflect what's actually displayed, and added buttons for Firefox users.


Title: Re: HTML5 realtime mandelbrot explorer
Post by: panzerboy on May 20, 2012, 09:34:21 AM
Cool.
The mousewheel zoom is a little slow for my preference.
I saved the link to my Harddrive and altered the onMouseWheel function to divide by 1000 rather than 10000
ie.

        function onMouseWheel(event) {
            var wheelData = event.wheelDelta;
            zoom *= Math.exp(-wheelData / 1000.0);
        }

I don't know much about Javascript and even less about WebGL.
Is the GPU doing the calculation through OpenGL?
The first script "shader-fs" would be the WebGL not javascript?


Title: Re: HTML5 realtime mandelbrot explorer
Post by: taurus on May 20, 2012, 12:23:43 PM

I heard rumors of firefox not supporting the mouse scroll event, but I don't know, didn't test it on firefox.


yepp, firefox doesn't scroll...


Title: Re: HTML5 realtime mandelbrot explorer
Post by: cKleinhuis on May 20, 2012, 03:54:55 PM
Lol too bad hat fireo dlol too bad that firefox doesnt support wheelie events but since it is just 2d ican live with it, well done anyways


Title: Re: HTML5 realtime mandelbrot explorer
Post by: khyperia on May 20, 2012, 07:39:33 PM
I don't know much about Javascript and even less about WebGL.
Is the GPU doing the calculation through OpenGL?
The first script "shader-fs" would be the WebGL not javascript?

Yeah, pretty sure its OpenGl, and yep, all calculations are done on the GPU, recalculating every single pixel in the frame 10 times a second. The shader-fs is the pixel/fragment shader, and shader-vs is the vertex shader. Oh, and WebStorm dosn't support webgl, so that's why theres no formatting in the shaders.