Skip to content

๐Ÿ•น๏ธ Chaos game

JavaScriptThree.js

๐ŸŽฏ Improved understanding of the chaos game
๐Ÿง  Inspired by nnakul/chaos-game by Nikhil Nakul
๐Ÿ A VPython version is available as well, see chaos_game.py


The chaos game is an iterative procedure siโ†’si+1s_i\rightarrow s_{i+1} that can be written as an affine transformation

si+1=Tjsi+rjs_{i+1}=T_js_i+r_j

where the set of pairs {(Tj,rj)โˆฃj=1,2,โ€ฆโ€‰}\{(T_j, r_j) | j=1,2,\dots\} with matrices TjT_j and rjr_j characterize the chosen ruleset and jj denotes a (per iteration) randomly chosen index. The famous Barnsley fern is generated in a similar way.


The chaos game is an iterative process of placing dots on a canvas using certain fixed locations (vertices) that are chosen randomly. For example, in the animation below, the position of each new dot is halfway between the current position and one of the three fixed corners of a triangle.

Sierpinksy chaos

Source Wikipedia

Letโ€™s assume we start with a point that is located in one of the areas that will eventually be empty, see the figure below.

Sierpinksy chaos

Source BU Math

After one iteration, the point will jump to either one of the three smaller empty triangles. Eventually after a couple of iterations, the point will enter a small triangle that is so small that, given the finite resolution of the screen and the pixels it contains, it will disappear.

In a certain sense, the fractal itself is a kind of strange attractor!