WebGL Fractal Explorer

Team Members

• Nguyen Hoang Kha - 23520667
• Dang Hoai Nam - 23520967
• Duong Quoc Nhut - 23521132
• Tran Bao Tran - 23521623

---

Developed for the Computer Graphics Course.

Overview

WebGL Fractal Explorer is a desktop application developed as an academic project for our Computer Graphics course. It explores the fascinating world of fractal geometry, demonstrating both recursive geometric fractals and complex-plane pixel-based fractals.

To satisfy the requirement of high-performance rendering (WebGL) while delivering a standalone executable file (.exe), this project utilizes Electron.js to package the web-based graphics pipeline into a native desktop application.

Features & Algorithms

The application successfully implements and renders the following fractal algorithms:

1. Geometric Fractals

These fractals are generated using recursive algorithms in JavaScript to calculate vertex coordinates, which are then pushed to the GPU via WebGL buffers.

• Koch Snowflake: A curve demonstrating infinite length within a finite area, generated by recursively replacing line segments with equilateral triangles.

• Minkowski Island: A closed-loop fractal generating a highly irregular, coast-like perimeter using orthogonal line replacements.

• Sierpinski Triangle: A classic fractal constructed by recursively subdividing equilateral triangles and removing the central portions.

• Sierpinski Carpet: A planar generalization of the Cantor set, created by recursively dividing a square into a 3x3 grid and removing the central square.

2. Complex Plane Fractals

These fractals are calculated directly on the GPU using GLSL (Fragment Shaders), allowing for real-time, high-performance rendering of millions of complex number iterations.

• Mandelbrot Set: Explores the boundedness of the sequence $Z_{n+1} = Z_n^2 + C$. Features real-time zooming capabilities.

• Julia Set: Closely related to the Mandelbrot set, but uses a fixed complex constant $C$. The application allows users to dynamically alter the angle of $C$ to explore different Julia Set shapes.

Setup

Prerequisites

Make sure you have Node.js installed on your machine.

Development Mode

1. Clone or download this repository.
2. Open a terminal in the project directory.
3. Go to src folder and install the required dependencies:

   cd src
   npm install

4. Run the application in development mode:

   npm start

How to Use

• Launch the application.
• Use the Sidebar Menu on the left to select the fractal you wish to explore.
• Use the Slider Control that appears below the menu to interact with the current fractal:
  • Geometric Fractals: Adjust the recursion depth (Warning: High depth values may impact performance).
  • Mandelbrot Set: Adjust the zoom level.
  • Julia Set: Adjust the phase angle to change the constant $C$ and alter the fractal's shape.

Fractal.mp4