HTML5 realtime mandelbrot explorer

[khyperia]

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.

[panzerboy]

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?

[taurus]

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

[cKleinhuis]

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

[khyperia]

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.