Fractal Source Codes

Experiments with Fractals

Introduction

The traditional way of constructing fractal patterns is with mathematical algorithms. Some of these are based on pixel-by-pixel drawing techniques wherein the output of a recursive function is evaluated against a predefined condition. This is a slow process which requires of a large number of iterations.

Other strategies or combination of strategies have been proposed; for instance, using HTML tables, image files, VML, SVG, or the canvas tag introduced in HTML5. In most cases, implementing these strategies and techniques is not a straightforward process, involve a learning curve, or unnecessarily consume Web server resources.

In a recent article, titled A Web Browser Approach to the Design of Fractals and Multifractals, we described the construction of fractal patterns with a Web browser (1 - 5). The purpose of this page is to facilitate the source code of the patterns described in that article. In this way others can reproduce, modify, or try to improve our results.

Requirements

The patterns are best viewed in Internet Explorer 8 or higher and to some extent with Firefox 3 or higher. Due to CSS sub-pixel rounding errors, at this time we cannot recommend viewing the patterns with other browsers or older versions of IE or FF. Why? This has a lot to do with CSS sub-pixel rounding errors that plague most browsers. Iterated Web layouts tend to amplify these errors. For additional information, please read the article.

Excluding the Sierpinski Gasket and Left-Skewed Sierpinski Gasket, the patterns are not compatible with other browsers. In this regard, any effort for making these cross-browsers compatible is very much welcome and appreciated. That's another reason for facilitating the patterns online.

Instructions

Click the corresponding links to download the files. Uncompress these with a tool like WinRAR. Feel free to use the patterns for decorative purposes or as an educational resource for teaching Fractal Geometry principles.

Please let us know by email if you have any question about the patterns or if you have any problem downloading these.

Patterns

1. Sierpinski Gasket (View unzipped live example « here.)
2. Left-Skewed Sierpinski Gasket
3. Sierpinski Carpet
4. Vicsek Fractal 1
5. Vicsek Fractal 2
6. Dhan Carpet
7. Black and Red Carpet
8. Kangri Carpet
9. Krishna Carpet
10. Vinod Carpet 1
11. Vinod Carpet 2
12. Multifractal Sierpinski Carpet 1
13. Multifractal Sierpinski Carpet 2
14. Multifractal Sierpinski Carpet 3

References

1. Garcia, E. (2009). Fractal CSS Design
2. Garcia, E. (2010). Fractal CSS Design as a Row Primary Technique
3. Garcia, E. (2010). Fractal Movies, CSS-only Backgrounds, and Two-Column Layouts
4. Garcia, E. (2010). Fractal Art and Three-Column Iterated Layouts. .
5. Garcia, E. (2010). A Web Browser Approach to the Design of Fractals and Multifractals