www.xbdev.net
xbdev - software development
Sunday July 21, 2024
Home | Contact | Support | Fractals Natures pattern... | Fractals Natures pattern...
     
 

Fractals

Natures pattern...

 

Fractals > Fractal Algorithms in 2-Dimensions


Well-known and widely appreciated 2D fractal algorithms

Mandelbrot Set: The classic fractal that remains one of the most well-known 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 self-replicating pattern.
Koch Snowflake: A self-replicating fractal curve with increasing levels of complexity, generated by adding triangles to each segment of an equilateral triangle.
Dragon Curve: A self-replicating 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 self-replicating 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 self-contained 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 Try

Looking 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 z-value - 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 non-linear (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 real-time)
• 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 ray-tracing 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 Try

Fun 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 Try

Few 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 non-linear 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 (non-linear 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











































 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2024 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.