Below, you can choose a fractal to discover more about its properties and visualize it using my WebGL graphics engine. You'll also have the opportunity to manipulate the inputs, allowing for deeper exploration of these fascinating structures. Dive in and start exploring the beauty of fractals!
The term "fractal" was coined by mathematician Benoit Mandelbrot in 1975, derived from the Latin word "fractus," meaning "broken" or "fractured." Fractals are mathematical structures that are self-similar and infinitely complex. They are usually created through recursive processes that result in intricate patterns. Zooming in on these patterns reveals their self-similarity, where either exact replicas of the fractal are found or statitically similar shapes are found (as seen in natural phenomena).
The recursive processes for fractals involve calling a function, f(x), which then calls itself with the result of the previous call as its input. This process is repeated a set number of times or until a condition is met.
An important class of fractals is generated using an approach known as iterated function systems (IFS). In this method, a finite set of contraction mappings is applied repeatedly to create self-similar structures. Each mapping transforms points in a space, and the collective result forms a fractal known as an attractor. Common examples include:
Fractals not only capture the beauty of mathematical patterns but also have significant applications in fields such as computer graphics, nature modeling, and even medicine. In computer graphics, fractals can be used to generate natual-looking terrains and other natural phenomena like branching of trees, river networks, and cloud formations. In medicine, fractals can be used to model healthy tissue to improve diagnosis from medical imaging.
I started this project after working on Three.js projects and became intereseted in learning more about shaders. This lead me to studying WebGl and graphics programming more in depth than when I was just using Three.js. As learning by doing is the best way to learn a skill, I created a graphics engine from scratch using javascript and WebGl. In this web app, I showcase my graphics engine by creating fractals and enabling the user to update the parameters which are then passed to the GPU to update the image.
I continue to improve my WebGl graphics engine to learn more graphics concepts and find ways to optimize it. I am also working on a C++/OpenGl version to expand my skillset.
This site was crafted using primarily vanilla JavaScript and WebGL, showcasing my ability to build complex applications with minimal reliance on external libraries and without the use of frameworks.
The following libraries were utilized:
Rather than relying on popular frameworks I've used in the past like React or Vue, I chose to utilize the Web Components standard for creating custom HTML elements. This decision reduced bloat and allowed me to learn more about the concepts and methods that are used to create frameworks.
This is a static webpage. Therefore none of the computations are made server-side. All computations are client-side, in your browser utilizing your CPU and GPU. This demonstrates that the graphics engine is efficient enough to not rely on a powerful server.
One of the standout features of this project is the custom graphics engine developed from scratch using JavaScript and WebGL. This engine includes custom shaders tailored to achieve specific visual effects, demonstrating my capability in graphics programming and low-level rendering techniques.
This project exemplifies my commitment to delivering high-quality, efficient solutions while leveraging advanced web technologies. I am excited about the opportunity to bring this level of expertise to future projects.