Fractals
All fractals on this website have an element of randomness to them, so they will appear differently each time the page is loaded.
A setTimeout function, in which each line currently being drawn is overlaid by a slightly longer line, is looped hundreds of times to achieve an effect of gradual-expansion.
Binary Heather
This is the background of the website's home page. 10 binary trees (splitting immediately) are initialised radially from the centre at semi-random angles. Each completed branch sets off 2 new branches from its end, also at semi-random angles, up to a set depth-limit. The depth also determines the colour of the branches, changing from light- to dark-green and then to alternating pairs of pink and purple, while the length of each green branch is proportional to the distance from its base to the edge of the canvas, similar to Escher's Circle Limits.
Tartan Matrix
The background to the spell-checker pages, this one is shallower but has a higher branching factor. Branches only grow in the four cardinal directions and branch length is again proportional to the edge distance at its base. The colours are looped through as the lines are drawn, with some occasionally being hidden as they are simultaneously overlaid.
Limit Rings
A more bubbly backdrop for the distance calculator pages, this one is similar in underlying code to the home page background, but with a lower branching factor and depth. The randomness can be seen in the branching angles, with the size of each ring dependent on its distance from the canvas edge and the colours are looped through in each layer. The circles are drawn by slowly layering gradually larger arcs with a fixed midpoint and the half-fill effect is achieved by drawing lines to the diameter while the circle is being drawn. The curves to the fill boundaries were introduced entirely by accident by setting the initial angle of the arc midpoint to that intended for the parent ring (not quite an off-by-one error, but similar). The resulting figures resemble thorns on budding rose heads, so the bug was kept.
Crumpled Web
This angular pattern is used as the background for all of the origami pages. Each of its nodes is generated at a random offset from a preset grid point, giving the appearance of a creased piece of paper with its vertices moved only slightly out of place. It uses the same fill trick as 'Limit Rings', calling lineTo functions simultaneously in order to shade an area. The sparsity of the lines and use of cross-hatching produces varying intensities of colour in adjacent areas to further the illusion of crumpled paper.
Length of Code
Each fractal is produced by no more than 40 lines of Javascript. The backgrounds.js file contains instructions for all of the above fractals and only needs an element ID for each canvas to decide which one to draw (this restricts the program to drawing one of each fractal per page).