

Fractals
Natures pattern... 



 Fractals > Fractal Algorithms in 2Dimensions  
Wellknown and widely appreciated 2D fractal algorithms
• Mandelbrot Set: The classic fractal that remains one of the most wellknown and studied. It's generated by iterating a simple mathematical formula.
• Julia Set: Similar to the Mandelbrot set but allows for variation by using a complex parameter. Julia sets can exhibit a wide range of intricate patterns.
• Sierpinski Triangle: A classic fractal generated by recursively removing triangles from a larger triangle, creating a selfreplicating pattern.
• Koch Snowflake: A selfreplicating fractal curve with increasing levels of complexity, generated by adding triangles to each segment of an equilateral triangle.
• Dragon Curve: A selfreplicating curve derived from an iterative process that alternates between two directions, resulting in a visually interesting pattern.
• Barnsley Fern: An iterated function system (IFS) fractal that simulates the growth of a fern by applying affine transformations.
• Apollonian Gasket: A fractal pattern formed by recursively adding circles within circles and removing the intersecting regions.
• Menger Sponge: A 2D representation of the Menger sponge, created by recursively removing squares from a larger square to form a selfreplicating pattern.
• Cantor Set: A simple yet elegant fractal generated by removing the middle portion of an interval repeatedly, resulting in a set with zero length.
• Pythagorean Tree: A fractal generated by recursively adding branches to a tree structure based on the Pythagorean theorem, creating a visually appealing geometric pattern.
• Tetrahex Fractal (Flat 2D Version): The Tetrahex Fractal is a geometric fractal created by recursively subdividing equilateral triangles into smaller equilateral triangles
• Burning Ship: Burning ship fractal is a variant on the mandelbrot set.
• Kaleidoscope Fractal: Kaleidoscope fractal is a type of fractal pattern that exhibits symmetrical and repetitive structures resembling those seen in a kaleidoscope.
There are a diverse range of fractal algorithms from geometric patterns to complex mathematical sets. The beauty of fractals lies in their ability to produce intricate and visually striking structures with relatively simple mathematical rules.
The following provides a set of selfcontained implementations written in Javascript. Each of the examples provides working code and a screenshot to see the expected output. There are also a set of 'try yourself' tasks to help you explore and understand the fractal further (rather than just looking and trying to remember the code but making it stand up and dance for you).
 Mandelbrot Set in Javascript  
Click for details
In less than 100 lines of Javascript (in fact, include the HTML, CSS and JS, it's still less than 100 lines). Probably about 50 lines ;)
The following is a complete Javascript program you can run to see a Mandelbrot Set fractal.
Example output would look something like:
Things To TryLooking at the Mandelbrot code, it's not that scary! It shouldn't be  it's less than 100 lines (everythign). You can spend some time, researching and breaking down what's happening  essentially, it's iterating over a canvas and using the Mandelbrot set to determine what color to set the pixel output.
These tasks are fun ideas to take your mastery of fractals and the Mandelbrot set to the next level  also a chance to create even more fun and stunning visuals.
• Modify Mandelbrot code so more colors are used (e.g., inside/outside of the shape are different colors). Then do gradient colors (for the zvalue  e.g., blue to green to red).
• Try animating the threashold (default is 4)  but try modifying it (e.g., 3.9 to 4.1). Also create an animation effect (as the threashold changes it updates in realtime to the viewer can see how it changes)
• Multiple Mandelbrot sets (run the algorithm multiple times and add the patterns)  initially you could do it by adding the colors in the final output (black  0 and white  1 so black won't add anything to the output).
• Shift the Mandelbrot result (add an offset so the mandelset is drawn at different locations on the screen)
• Draw 2 Mandelbrot set algorithms, each having a different offset, and create a final result (combine the z from both  not just a single one)
• Take the 2 Mandelbrot set example and animate it
Advanced Tasks
These might take a bit more work  depending on your understanding of things.
• Try modifying the equation so it's nonlinear (e.g., scaling/shifting/offseting the complex number value during each iteration)
• Adding noise into the iteration loop (add or scale by a small random amount and see how it impacts the final fractal)
• If you're interested in optimization and parallel architectures like the GPU  you could try porting the implementation to WebGL or WebGPU API/Shader (run in realtime)
• Add an save button so you can save the generated fractal to a png or jpg (e.g., convert the canvas to image)
• 3D 'vector' version  instead of storing 'pixels'  try and store the points  then 'extrude' them (tessilate the surface)
• The example draws on a 2D plane  try and draw a 3D version  by 'rotating' around an axis (you'll probably need to look into raytracing or voxels)
 Julia Set Fractal  
Click for details
Output should look something like this:
Things to Try • Add colors (instead of black and white  gradient of colors showing the different information)
• Randomness  add smoe randomness to make the patterns/shape more creative
• Draw the fractal at different locations (x,y offset) also scale and rotation
• Draw multiple fractals on the screen at different locations with different parameters
• Instead of 'pixels' try and store the fractal as vector points and then draw the vector points
 Sierpinski Triangle Fractal  
Click for details
Output should look something like this:
Things to TryFun things to try with the Sierpinski triangle code.
• Colors  try making the different levels a different color (e.g., recursive depth change the color)
• Animating the effect (e.g., triangles can be added to a list and they interpolate 'grow')  don't just throw them on screen but try and create a slowly changing effect
• Rotate the triangle (static first then animated it rotating)
• User input  press the cursor keys (up/down) to add/remove the number of recurssions and the size/detail of the shape
• Multiple Sierpinksi triangles (add a second triangle and combine the visual effect)  do this at the pixel level and at the algorithm level
• Randomness  add some randomness to the algorithm (e.g., offsets, sizes, ...)
 Koch Snowflake Fractal  
Click for details
Output should look something like this:
Things to TryFew things to try once you've got your snowflake on screen  add a bit of pizazz!
• Color  inside and outside are two unique colors (e.g., blue/red)
• Different levels of detail (depth/recursive function)  different levels add differenet/colors/gradients
• Animate the effect (as more detail is added it intepolates and gradually shows the changes  not just 'pops')
• Randomness  insert some small random values
• Draw multiple snowflakes on screen (each offset and located at a different point  also rotated and scaled  each unique)
• Instead of drawing to a pixel  store the surface points as vectors in an array  then extrude and create a 3D shape/visualization (required using WebGL/WebGPU)
• Modifying the base algorithm/calculation (e.g., sine wave, multiple/scale/addition  to warp/modify the snowflake for artistic effect)
 Dragon Curve Fractal  
Click for details
Output should look like this:
Things to Try • Color is the first things  instead of a basic 'white'  add in some variety showing different information, such as, recurrsion depth or distance from the centre (use gradients  red, blue to green)
• Animate the fractal rotating
• Add 'User Input'  increase/decreases orders dyanimcally by pressing up or down cursor keys
• Plot the 'order' vs time it takes to render (e.g., default is 10  but higher values, like 30 will take a long long time to draw)
• Try different stroke patterns
• Draw multiple Dragon Curves and add them
• Box  4 Dragon Curves (left, right, top, bottom with the middle empty  rotate and position them around the edge)
• Explore 'splines' to make the curves/edges more rounded (also try combining this with a lower order  to create the illusion of a smoother complex fractal with rounded edges  asthetics)
• Randomness  try adding in small amounts of random values to the calculation (make the final result have slight anomalies  visual effect)
• Magnifiying and changing the algorithm calculation  mix in some other trignometric functions, scale/offset by nonlinear values to explore the visual result
• Try implementing the result in WebGL or WebGPU (shaders)
 Barnsley Fern Fractal  
Click for details
Output should look like this:
Things to Try • Color is always a good starting point  different parts of the fern different colors
• Different number of iterations (gradient  as the iterations increase the color gradually changes)
• Draw multiple ferns on screen (different locations, size and orientation)
• User input  let the user 'click' on screen and add fern at the location they clicked
• Change the direction the fern leaf faces (e.g., instead of to the right, change it so it points to the left)
• Amplify and change the 'angle'  modify how 'curved' the fern leaf is (add a scale factor)
• Modify the iteration loop  algorithm  e.g., trigonometric functions, power, scale, offset
• Randomness  try other random functions (nonlinear noise, brown noise, pink noise)
 Apollonian Gasket Fractal  
Click for details
Output should look like this:
Things to Try • Making the different circles different colors (fill)  e.g., as the recursion depth increases and the circles get smaller, draw them in a different color
• Try drawing a shape inside the circle (e.g., a triangle, hexagon, pentagon  that matches the diameter of the circle)
• Instead of drawing circles draw hexagons
 Menger Sponge Fractal  
Click for details
Essentially you just split the square into 9 pieces and remove the middle. You then repeat with the children (not the one you removed the middle from).
Output should look like this:
Things to Try • Color  try changing the color  so for each depth the drawn squares are drawn a different color
• Draw a pattern inside each square
• Rotate each square as it increases in depth
• Random  add some randomness to each square as they're draw/depth progresses (only a small amount)
• Instead of squares draw other shapes  hexigon, pentigon, ...
• Try other dimensions  instead of 3x3  try 5x5, 7x7...
• Other shapes  instead of dividing into squares  split into circles or hexagons
 Cantor Set (2D Lines)  
Click for details
Output looks like this:
Things to Try • Make the different lines different colors (based it on the depth)
• Instead of lines draw a shape (using the length and position of the line as the dimension and centre of the shape  shapes, such as circles, cubes, hexagons, ..)
 Pythagorean Tree Fractal  
Click for details
The output should look like this:
Things to Try • Add color  as the depth increases so does the color  changes from brown to green (e.g., trunk is brown while very end branches are 'green' representing the leaves)
• Increasing the depth
• Randomness  explore adding in small amounts of randomness into the recursive function (e.g., randomly subtracting different depths instead of just 1, slight deviations in angle and length)
• Moving the tree around (offset position)
• Draw multiple trees on screen (e.g., forest of trees  different sizes, position, with randomness so they're all unique)
 Tetrahex Fractal  
Click for details
The output looks like this:
Things to Try • Change the colors (as it recurses to add extra detail, change the colors)
• Try different resolutions (e.g., 2, 5, 10, ...)
 Burning Ship Fractal Javascript  
Click for details
The output looks like this:
Thigns to Try • Adding colors (emphasis edges, centre, ..)
• Try different levels of detail
• Draw the ship at different x,y locations, size and orientation
• Draw multiple ships on screen at different locations and sizes
• Adding some randomness to the result (small random values)
• Mix in some trignometric functions (add some rythmic character)
 Kaleidoscope Fractal  
Click for details
The output looks like this:
Thigns to Try • Change the sliceAngles and the depth parameters (see the different fractal shapes/level of detail)
• Try with other shapes instead of circles (e.g., squares, triangles, hexagons, ...)
• Instead of flat black and white shapes, try and insert 'images'  repeats the image in a pattern
• Add colors  each depth uses a different color
• Explore animating the effect so it transitions and rotates

