How to Create the Mandelbrot Set with MoonBit?

September 15, 2023 · 8 min read

Have you ever watched the following video?

video source: https://www.youtube.com/shorts/MLEHL8hcKJk

It's the famous Mandelbrot set, a collection of points that form a fractal on the complex plane. This fractal is the most famous creation in the field of fractal theory, proposed by the mathematician Benoit B. Mandelbrot.

What makes this set truly extraordinary is that as you zoom in infinitely, you discover exquisite details, all generated by a simple formula. Some even consider the Mandelbrot set to be "the most peculiar and magnificent geometric form ever produced by mankind", often referred to as "God's fingerprint".

Today, we will show you what fractal theory is, how to create the Mandelbrot fractal using MoonBit, and discover the beauty of mathematics with MoonBit.

What is Fractal Theory?

To begin with, let's dive into what fractal theory is.

Fractal theory was created by Mandelbrot in 1975 and derives its name from the Latin term "fractus", which means "broken" or "fractured". The mathematical foundation of fractal theory lies in fractal geometry. Its fundamental characteristic is the description and study of objective phenomena from the perspective of fractional dimensions and mathematical methods.

Precisely because of this, fractal theory transcends the dimensions of our everyday world, allowing for a more concrete and realistic depiction of complex systems, providing insight into the intricacies and diversities of objective phenomena.

Because of the "infinite complexity" inherent in fractals, one might think they are difficult to create. In fact, it's a remarkably straightforward process. Creating a fractal involves repeating the same process over and over again, which in mathematical terms is an iterative equation.

One of the most famous fractals is the Mandelbrot set, which is based on a simple complex number $c$ . The mathematician Adrien Douady defined the following function:

f_c(z) = z^2 + c

In homage to Mandelbrot, it was named the Mandelbrot set. When iterated from $z=0$ , it does not diverge to infinity. Essentially, it's an iterative formula where the variables involved are complex numbers. As you perform computations according to this formula, local patterns tend to resemble the global structure, often concentrating in subtle details that require careful observation to discern.

How to Create the Mandelbrot Set with MoonBit?

Next, we will show you how to create the Mandelbrot set using MoonBit.

To define the region of the image we want to draw, we must need to know the concept of coordinate regions. A point in the complex plane is represented by a complex number $(d=x+yi)$ . Adding width and height helps to define a rectangular region on the complex plane.

Suppose an image has a width of $w$ pixels and a height of $h$ pixels. We need to calculate the colors of $w\times h$ pixels and then plot them.

We use Moonbit to handle the color calculation part, and then pass the computed colors to JavaScript, where we use canvas to draw the image.

Color Calculation

pub fn calc_color(col: Int, row: Int, ox: Double, oy: Double, width: Double) -> Int {
  let pixel_size = width / image_width
  let cx = (float_of_int(col) - coffset) * pixel_size + ox
  let cy = (float_of_int(row) - roffset) * pixel_size + oy
  var r = 0
  var g = 0
  var b = 0
  var i = -1
  while i <= 1 {
    var j = -1
    while j <= 1 {
      let d = iter(
      cx + float_of_int(i) * pixel_size / 3.0,
      cy + float_of_int(j) * pixel_size / 3.0,
      )
      let c = get_color(d)
      r = r + c.asr(16).land(0xFF)
      g = g + c.asr(8).land(0xFF)
      b = b + c.land(0xFF)
      j = j + 1
    }
    i = i + 1
  }
  r = r / 9
  g = g / 9
  b = b / 9
  return r.lsl(16).lor(g.lsl(8)).lor(b)
}

Here, we calculate the coordinates of the square's center in the complex plane represented by the pixel at row row and column col.

let pixel_size = width / image_width
let cx = (float_of_int(col) - coffset) * pixel_size + ox
let cy = (float_of_int(row) - roffset) * pixel_size + oy

We know that for a complex number $c$ , it belongs to the Mandelbrot set if and only if the infinite sequence of complex numbers generated by the following recursive definition always stays within a circle in the complex plane centered at the origin with a radius of $2$ : $z_0 = 0;\ z_n = z_{n-1}^2 + c$ ; If we express $z_k$ as $x_k+y_ki$ , separating the real and imaginary parts, and also express c as $c_x+c_yi$ (where $c_x$ and $c_y$ are the real and imaginary parts of $c$ , respectively), then the recursive definition above can be rewritten as: $x_0 = 0, y_0 = 0;\ x_n = x_{n-1}^2 - y_{n-1}^2 + c_x, y_n = 2x_{n-1}y_{n-1} + c_y$ . A complex number $c_x+c_yi$ belongs to the Mandelbrot set if and only if, for all natural numbers $n$ , $x_n^2+y_n^2 < 2^2 = 4$ .

The calc_color function then calls iter to calculate $x_n$ and $y_n$ . This function returns the number of iterations at which the escape radius is first exceeded, or $-1.0$ if it iterates max_iter_number times without escaping.

pub fn iter(cx : Double, cy : Double) -> Double {
  var x = 0.0
  var y = 0.0
  var newx = 0.0
  var newy = 0.0
  var smodz = 0.0
  var i = 0
  while i < max_iter_number {
    newx = x * x - y * y + cx
    newy = 2.0 * x * y + cy
    x = newx
    y = newy
    i = i + 1
    smodz = x * x + y * y
    if smodz >= escape_radius {
      return float_of_int(i) + 1.0 - log(log(smodz) * 0.5) / log(2.0)
    }
  }
  return -1.0
}

Next, we need to choose the appropriate color based on the returned number of iterations. To begin with, we need a color palette, and this is the fuction of interpolation, which is used to generate a color gradient.

fn interpolation(f : Double, c0 : Int, c1 : Int) -> Int {
  let r0 = c0.asr(16).land(0xFF)
  let g0 = c0.asr(8).land(0xFF)
  let b0 = c0.land(0xFF)
  let r1 = c1.asr(16).land(0xFF)
  let g1 = c1.asr(8).land(0xFF)
  let b1 = c1.land(0xFF)
  let r = floor((1.0 - f) * float_of_int(r0) + f * float_of_int(r1) + 0.5)
  let g = floor((1.0 - f) * float_of_int(g0) + f * float_of_int(g1) + 0.5)
  let b = floor((1.0 - f) * float_of_int(b0) + f * float_of_int(b1) + 0.5)
  return r.lsl(16).lor(g.lsl(8).lor(b))
}

The get_color function first performs some transformations on the iteration count and then passes it to the interpolation function to obtain the corresponding color.

pub fn get_color(d : Double) -> Int {
  if d >= 0.0 {
    var k = 0.021 * (d - 1.0 + log(log(128.0)) / log(2.0))
    k = log(1.0 + k) - 29.0 / 400.0
    k = k - float_of_int(floor(k))
    k = k * 400.0
    if k < 63.0 {
      return interpolation(k / 63.0, 0x000764, 0x206BCB)
    } else if k < 167.0 {
      return interpolation((k - 63.0) / (167.0 - 63.0), 0x206BCB, 0xEDFFFF)
    } else if k < 256.0 {
      return interpolation((k - 167.0) / (256.0 - 167.0), 0xEDFFFF, 0xFFAA00)
    } else if k < 342.0 {
      return interpolation((k - 256.0) / (342.0 - 256.0), 0xFFAA00, 0x310230)
    } else {
      return interpolation((k - 342.0) / (400.0 - 342.0), 0x310230, 0x000764)
    }
  } else {
    return 0x000000
  }
}

The caculation of color is now complete.

Drawing with Canvas

Create a canvas

<html>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Obtain the canvas element in the JavaScript code and set its size.

let canvas = document.getElementById('canvas')
var IMAGEWIDTH = 800
var IMAGEHEIGHT = 600
canvas.width = IMAGEWIDTH
canvas.height = IMAGEHEIGHT

Create an ImageData object to store the computed pixel colors.

var imagedata = context.createImageData(IMAGEWIDTH, IMAGEHEIGHT)

Then import the wasm compiled from the MoonBit code above:

WebAssembly.instantiateStreaming(
  fetch('target/mandelbrot.wasm'),
  spectest
).then((obj) => {
  obj.instance.exports._start()
  const calcColor = obj.instance.exports['mandelbrot/lib::calc_color']
  const drawColor = obj.instance.exports['mandelbrot/lib::draw_color']

  //...
})

Draw image:

function saveImage() {
  context.putImageData(imagedata, 0, 0)
}

function generateImage() {
  for (row = 0; row < IMAGEHEIGHT; row++) {
    for (col = 0; col < IMAGEWIDTH; col++) {
      let x = +ox.value
      let y = +oy.value
      let w = +width.value
      var color = calcColor(col, row, x, y, w)
      drawColor(imagedata, col, row, color)
    }
  }

  saveImage()
}

This is the final presented rendering:

The rendering of the Mandelbrot involves numerous mathematical derivations, which are not extensively explained in this blog post. You can refer to: https://en.wikipedia.org/wiki/Mandelbrot_set

Complete code: https://github.com/moonbitlang/moonbit-docs/pull/69/files

That is all we want to share today. We look forward to your creations.

What is Fractal Theory?​

How to Create the Mandelbrot Set with MoonBit?​

Color Calculation​

Drawing with Canvas​

What is Fractal Theory?

How to Create the Mandelbrot Set with MoonBit?

Color Calculation

Drawing with Canvas