Mandelbrot Set in JavaScript

The Mandelbrot Set is a fractal defined by a simple iterative algorithm. The set is named after the mathematician Benoit Mandelbrot, who studied fractals and pioneered their visualization.

In this project, we will implement a Mandelbrot Set visualization using JavaScript. Our implementation will generate an HTML canvas element and draw the fractal on it using color-coded pixels.

Getting Started

Prerequisites

You will need a modern web browser that supports HTML, CSS, and JavaScript.

Installation

No installation is required. Simply clone this repository:

git clone https://github.com/yourusername/mandelbrot-js.git

Usage

Open the index.html file in your web browser. You should see the Mandelbrot Set visualization rendered on the screen. You can use your mouse to zoom in and out of the fractal.

Implementation

The Mandelbrot Set is generated by iterating the function f(z) = z^2 + c, where z is a complex number and c is a constant that represents a point on the complex plane. The iteration starts with z = 0 and calculates f(z) repeatedly. If at any point the magnitude of z exceeds 2, the iteration is stopped, and the point c is said to be outside of the Mandelbrot Set. If the iteration continues indefinitely without exceeding the magnitude of 2, the point c is said to be inside the Mandelbrot Set.

To generate the visualization, we will iterate this function for each point on the complex plane represented by a pixel on the canvas. We will color the point based on how quickly the magnitude of z exceeds 2. Points that are inside the Mandelbrot Set will be colored black.

Here's the code:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;

const xMin = -2;
const xMax = 1;
const yMin = -1;
const yMax = 1;

for (let x = 0; x < width; x++) {
  for (let y = 0; y < height; y++) {
    const cx = xMin + (x / width) * (xMax - xMin);
    const cy = yMin + (y / height) * (yMax - yMin);

    let zx = 0;
    let zy = 0;
    let i = 0;

    while (i < 100 && zx * zx + zy * zy < 4) {
      const newZx = zx * zx - zy * zy + cx;
      const newZy = 2 * zx * zy + cy;

      zx = newZx;
      zy = newZy;

      i++;
    }

    if (i === 100) {
      ctx.fillStyle = '#000000';
    } else {
      ctx.fillStyle = `hsl(${i}, 100%, 50%)`;
    }

    ctx.fillRect(x, y, 1, 1);
  }
}

The code first grabs the canvas element and its 2D context. It sets some constants for the width, height, and range of the complex plane to be visualized. It then iterates over each pixel on the canvas, calculates the corresponding complex number, and iterates the Mandelbrot Set function. If the point is inside the set, it is colored black. Otherwise, it is colored based on how quickly it escaped from the set.

Conclusion

In this project, we implemented a Mandelbrot Set visualization using JavaScript and HTML canvas. We learned about the iterative algorithm that defines the set and how to use JavaScript to visualize it. We also saw how changing the range and resolution of the canvas can give us different views of the fractal.

References

• Wikipedia: Mandelbrot set
• Fractal Foundation: Mandelbrot set