Published on 05/21/2012

Fractals are beautiful mathematical figures that were truly revealed by computers. . Tao Presentations Tao Presentations makes it easy to explore fractals such as the Mandelbrot set interactively and in real-time.

Displaying fractals in real-time enables an interactive exploration of these fascinating mathematical figures. You can show to a class the essential properties of fractals.

You will find an example of such a presentation directly from the "New from template chooser" menu in Tao Presentations.

You can zoom in the Mandelbrot set simply by clicking where you want to go. The presentation shows the coordinates of the point you are looking at, allowing you to return to a known position later. You can also zoom out by pressing the "ALT" key while you click.

What makes real-time display of the Mandelbrot set possible is the use of a *fragment shader*, a small program executed directly on the GPU for each of the pixels on the screen.

In Tao Presentations, shader programs are declared very simply as follows:

shader_program fragment_shader << shader code >>

In our case, the core of this program is a loop iterating on the Mandelbrot equation *z' = z ^{2} + C*, where

// Loop checking for divergence for (int i = 0; i < int(maxIter); i++) { // Compute z' = z*z + C in cartesian coordinates z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c; // Verify if the result diverges // (dot is the dot product, so we compute the distance to origin) if (dot(z, z) > 4.0) { // Compute pixel color ... break; } }

It is easy to change the kind of fractal being drawn, simply by changing the equation in the loop or the loop itself. Exercise for the reader: modify the presentation to draw a Julia set.

The pixel color is computed by interpolating between four colors named `insideColor`, `middleColor1`, `middleColor2` and `outerColor`, that "trigger" at levels of iteration called `threshold1` (0.1 by default) and `threshold2 `(0.5 by default):

float v = float(i)/maxIter; float frac; if (v < threshold1) { frac = v / threshold1; gl_FragColor = mix(outerColor, middleColor2, frac); } else if (v < threshold2) { frac = (v - threshold1) / (threshold2 - threshold1); gl_FragColor = mix(middleColor2,middleColor1,frac); } else { frac = (v - threshold2) / (1.0 - threshold2); gl_FragColor = mix(middleColor1,insideColor,frac); }

Using the GPU to perform heavy computations largely in parallel is now quite easy. Not so long ago, such computations would have required large supercomputers.

Naturally, the most frequent use of this technique is to implement computatins on the pixels of an image, for exampe to implement image filters. This will be the topic of a future blog.

Christophe

##### Happy New Year 2014

01/1/2014##### A Christmas Tree is x * sin x

12/29/2013##### Version 1.43 is available

10/22/2013##### Storytelling: the web is doing it wrong

10/11/2013

## COMMENTS