WebGL Fractals

Mandelbrot

Your browser does not support HTML5 canvas.

Julia

Your browser does not support HTML5 canvas.

Usage

Move your mouse over the Mandelbrot set to select the seed for the starting point for the Julia set on the bottom.

How this works

There are two canvases being drawn on by WebGL and my shaders, each calculating one of the two sets.
Drawing fractals in OpenGL/WebGL is surprisingly easy because of how shaders work. They basically call your function once per Pixel, and you just have to:

• based on the position in the canvas, calculate which part of the fractal you want to draw
• calculate the fractal at that position

Here, I also optimize further by only re-drawing if anything changed.