Beautiful (Fractal) Image Generator
Karl Kuusik, Kaarel Loide, Kaspar Valk
Link to live version of project
Controls:
- Press on keyboard keys "1", "2", "3", "4" to switch between scenes or to stop any animations and reset zoom.
- Aim the cursor where do you want to zoom and use the scroll wheel or keys "Q" and "W" to zoom.
- Use the mouse to drag around the scene.
- Use buttons and sliders on the bottom of the page to change settings or trigger animations.
Description
Initial goal
The goal of this project is to generate some cool fractal patterns by visualizing different sets of complex numbers or by creating recursive shapes in 3D. We will explore what can be done with the patterns and try to add as much manipulation options as possible to get customizable results.
Result
In total we added 4 different kinds of visualizations:
- In scene 1 there is a visualization of the Mandelbrot set.
- In scene 2 there is a visualization of 2nd rank Julia set.
- In scene 3 there is a visualization of 3rd rank Julia set.
- In scene 4 there is a spinning Sierpiński tetrahedron.
Mandelbrot set is a set of all the complex numbers {$c$} for which the result of function {$f(z_{n})=z_{n-1}^2+c$} remains bounded in absolute value, when iterated from {$z_0=0$}.
Julia sets are defined in a similar manner to the Mandelbrot set, but there exists infinitely many of them. Each Julia set is defined by a function {$f(z_{n})=z_{n-1}^x+c$}, where
- {$x$} is 2 for normal Julia sets and >2 for multi-Julia sets,
- the initial iteration value {$z_0$} is equal to the initial complex number,
- {$c$} is a constant complex number that doesn't have to be related to the initial complex number.
In our project we use Three.js PlaneBufferGeometry as the mesh on which to visualize the fractals. In the fragment shader we interpret the UV-coordinates as the complex numbers for which to calculate whether or not they belong to the set. This allows us to utilize the GPU for the quite costly calculations. The complex numbers are then visualized based on whether they belong to the set or if not then how many iterations it took the algorithm to realize that the number does not belong into the set.
The Sierpiński tetrahedron is a tetrahedron that is constructed of smaller tetrahedrons which themselves are constructed from even smaller tetrahedrons and so on. In our project the tetrahedron is rendered on to Three.js PlaneBufferGeometry using a distance estimation function and ray marching in the fragment shader. The fragment shader describes a 3D world with a light source, camera and a tetrahedron. For each fragment the UV-coordinates are interpreted as the direction in which a ray departs from the camera and then using ray marching combined with a distance estimation function, that describes the tetrahedron, we estimate how many ray lengths it would take the ray to hit something. Then based on that, we calculate the position in the 3D world the ray hit and estimate the normal of this position again using the distance estimation function. Finally, we use Phong's lightning model to calculate the color for the fragment.
Pictures
Snippet of Julia set {$z^2-1.201+0.156i$} colored with a smooth coloring algorithm with added bloom effect
Snippet of Julia set {$z^3-0.594+0.156i$} colored with a non-smooth algorithm
Progress details
17.11.2019
- Created a basic web page that allows us to easily add fractal patterns and switch between them using number keys.
- A simple Mandelbrot set visualization.
- A simple Julia set ({$z^2+c$}) visualization.
- An overlay for sliders and create an easy way to add new sliders.
11.12.2019
- Live link.
- One new Julia set ({$z^3+c$}) fractal.
- Prettier coloring algorithm for both Julia set fractals.
- Zooming with mouse cursor and mouse wheel.
- Zoom animation button.
- Loop animation button for the old Julia set.
- Constant presets for the old Julia set.
- Toggleable bloom.
- Responsive window size.
- Better layout design.
05.01.2020
- Zoom information in upper left corner.
- Dragging with mouse.
- Bloom controls: threshold, strength, radius.
- New recursive tetrahedron fractal implemented with raymarching.
- Zoom in possibility with W and zoom out with Q.