Chaos Game Visualiser

Settings

Polygon

Custom

Triangle

Square

Pentagon

Hexagon

All the preset shapes are normal regular shapes

Shape Settings:

Points Count

Line Proportion %

Vertex Rules

Generate Points:

When the old variable was set to , no vertex could be chosen that satisfied the vertex rules.

Playback Settings:

Playback Speed points/s

Show Lines

Show Start Point

0:00/0:00

v2.1.0 ● Notes

The Chaos Game

The Chaos Game is a mathematical method of drawing fractals. It uses a polygon shape and a random point within the shape as a starting point. The steps for then generating the points are as follows:

Pick a random vertex
Draw a new point halfway inbetween the current point and the vertex
Go back to step 1, using the previously generated point

Once this process has been repeated a large number of times with a triangle, it will create the triangle known as the Sierpiński Triangle which looks like the following:

How to generate a Sierpiński Triangle

Select the triangle shape from stage

Keep shape settings from stage default for the purpose of this tutorial (descriptions of the shape settings can be seen here)

Click Generate Points in stage

Click in stage (descriptions of the playback settings can be seen here)

Watch as the triangle on the grid is filled with points

General

Whilst using this site, there are a number of keyboard shortcuts that can be used to make the experience easier:

Key	Description
`s`	Toggle settings box
`h`	Toggle help box
`esc`	Close the current pannel (either help or settings)
`+`	Zoom in
`-`	Zoom out
The following are only available when points have been generated
`Space`	Toggle play/pause
`Arrow Left`	Go back one point
`Arrow Right`	Go forward one point

If you want to save a configuartion, you can do this by interacting with these buttons at the bottom on the settings pannel When clicking Save, the JSON data of your settings will be downloaded to your device. Then when clicking Load, you will need to select the downloaded file. When loading a file, the site will attempt to generate the points, because of this, you can only save a configuration once you are at a point where points can be generated

Shape Type

Initially you will need to select a shape type. There are two classes of shape types:

Class	Description
Regular	Includes `Polygon` and the preset shapes which are `Triangle`, `Square`, `Pentagon` and `Hexagon`
Irregular	The only option in this class is `Custom` which requires extra steps in other stages

Shape Settings

The shape settings are different depending on the class of the shape type. The settings that are common to all classes are:

Setting Description

Points Count The number of points to be generated

Line Proportion The proportion of the line to be drawn between the current point and the vertex (with 0% being at the point in the shape)

Vertex Rules

Vertex rules are the rules that the program will follow when picking a random vertex, the variables that can be used are:

difference (abbr. d) - The clockwise difference between the old and new vertex index, always inbetween -x/2 and x/2 where x is the number of sides (preferring the positive value)
old (abbr. o) - The previous vertex index that was chosen
new (abbr. n) - The new vertex index that has been chosen
Note: Index is the number that each vertex is assigned, starting from 0 and going clockwise (a custom shape will have the vertices assigned in the order that they were created)

The operations that can be used are *, /, % (divides the left side by the right side and returns the remainder), +, - (order of operations is followed, with % having the same precedence as * and /)

The equators that can be used are =, ≠ (accessed by typing !=), ∈ (accessed by typing in), ∉ (accessed by typing !in), <, ≤ (accessed by typing <=), >, ≥ (accessed by typing >=)

When using an inequality or equals equator, the right side must be a singular numberic value. When using a set equator, the right side should be alist of values contained in curly brackets ({}) and separated by commas. Any number in the right hand side can use the ± operator (accessed by typing +-) infront of a number to test both the positive and negative values of the number (this can not be used when using inequalities)

Example vertex rules are:

difference ∈ {0, ±1, 2} - All vertices will either be repeated one, next to the previous one or 2 to the right
old + new = 3 - The value of the old index + the new index must equal 3
difference * 2 ≤ 5 - Double the difference must be less than or equal to 5

All the special characters accessible in the vertex rules input are:

Character	Accessible by
`≠`	`!=`
`≤`	`<=`
`≥`	`>=`
`∈`	`in`
`∉`	`!in`
`±`	`+-`

To make a vertex rule, type it into the box then click enter

The settings that are specific to each class are:

Regular
If you have selected a preset shape, Side Count and Rotate Shape aren't available
Setting Description
Side Length The length of each side of the shape
Side Count The number of sides to have in the shape
Rotate Shape The number of degrees to rotate the shape clockwise
Irregular
To create an irregular shape, click the Start Recording Vertices button then click on the grid to create the vertices of the shape, once you have finished, click the Stop Recording Vertices button. If you need to reset the vertices, click the button. You will only be able to go onto the next stage when you have at least 3 vertices

Setting	Description
Side Length	The length of each side of the shape
Side Count	The number of sides to have in the shape
Rotate Shape	The number of degrees to rotate the shape clockwise

Generate Points

To generate the points configued in the previous stages, click the Generate Points button, a loading bar may momentarily appear, but this shouldn't take more than a few seconds

In some cases, you may get an error that looks similar to the error below, this means that the program has tried every combination of points but has found that the combination of vertex rules stop any further points being generated

Playback Settings

The playback settings set out how the points that were just generated are displayed back to you. The options are:

Setting	Description
Playback Speed	The number of points that will be played per second whilst it is playing, a higher playback spped will decrease the playback time
Show Lines	Show the lines used when generating points, whilst this might look hectic when playing back, if playing back slowly or seeking point by point it can be interesting. Once this option is enabled, you can also change the colour of the lines
Show Start Point	Show the point used at the start of the question. Once this option is enabled, you can also change the colour of the lines

Once you settings are decided, you can begin playing by clicking , you can also seek back and forward one point by clicking and respectively. You can also seek to any point by clicking on the progress bar. If you close the settings pannel, you will notice another player pannel appear on the bottom left of your screen. Back arrow, space and forward arrow will seek back, play/pause and seek forward respectively