Smooth color for mandelbrot set using p5.js

Question

I was playing with p5.js trying to recreate the Mandelbrot set. I have created the set itself but I am having a problem with coloring into the right way.

I have followed up the pseudocode in the wiki page but i can't color it with the right color.

this is the p5.js code that i wrote:

let slider;

function setup() {
  createCanvas(400, 400);
  background(51)
  colorMode(HSL, 360, 100, 100)
  slider = createSlider(10, 1000, 500, 1)
}

let k = 0;

function draw() {
  loadPixels()

  for (let i = 0; i < width; i++) {
    for (let j = 0; j < height; j++) {
      let index = (i + j * width) * 4
      let x0 = map(i, 0, width, -2.0, 0.47);
      let y0 = map(j, 0, height, -1.12, 1.12);

      let x = 0;
      let y = 0;

      let iteration = 0;
      let maxIteration = slider.value();

      while (magn(x, y) <= 4 && iteration < maxIteration) {
        let xTemp = x * x - y * y + x0;
        y = 2 * x * y + y0;
        x = xTemp;
        iteration++

      }

      pixels[index + 0] = pow(iteration / maxIteration * 360, 1.5) % 360
      pixels[index + 1] = 50
      pixels[index + 2] = (iteration / maxIteration) * 100

    }
  }
  
  updatePixels()
}

function magn(a, b) {
  return a * a + b * b;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>

This is the resulting image:

the image itself is not bad, but i don't understand why i get this greenish color for the background, and i can't get the color showed in the wiki page.

I want an effect similar to this guy but i can't understand it with c code.

Answer 1

In the code you linked to, the shader (the first code snippet which is GLSL not C), gets the color value from a 1d texture based on the fraction of the maxIterations that it took for the current seed point to escape. So without knowing how they generated the colors making up that texture it is hard to deduce the algorithm they are using.

However, in your code there are a few identifiable issues: 1) the pixels array always uses RGB, regardless of the color mode, 2) when you use a high maxIterations value many of the points you see wind up with very similar, low, values. This is because when viewing a zoomed out Mandelbrot set, many of the points the that aren't very close to the boundary escape after just a few iterations, so all of those points wind up with very similar (and very dark) colors.

So to fix this you need to manually convert your desired HSV values to RGB for use in the pixels array and reduce your default maxIterations value.

let slider;

function setup() {
  createCanvas(400, 400);
  pixelDensity(1)
  background(51)
  // This had no effect
  // colorMode(HSL, 360, 100, 100)
  
  // Decreased the default to 80 instead of 500
  slider = createSlider(10, 1000, 80, 1)
  
  // Avoid unnecessary re-renders
  slider.input(() => {
    redraw();
  });
  noLoop();
}

let k = 0;

function draw() {
  loadPixels()

  for (let i = 0; i < width; i++) {
    for (let j = 0; j < height; j++) {
      let index = (i + j * width) * 4
      let x0 = map(i, 0, width, -2.0, 0.47);
      let y0 = map(j, 0, height, -1.12, 1.12);

      let x = 0;
      let y = 0;

      let iteration = 0;
      let maxIteration = slider.value();

      while (magn(x, y) <= 4 && iteration < maxIteration) {
        let xTemp = x * x - y * y + x0;
        y = 2 * x * y + y0;
        x = xTemp;
        iteration++

      }
      
      if (iteration < maxIteration) {
        let [r, g, b] = hsv2rgb(
          pow(iteration / maxIteration * 360, 1.5) % 360,
          0.5,
          (iteration / maxIteration) * 0.8 + 0.2
        );

        pixels[index + 0] = r * 255;
        pixels[index + 1] = g * 255;
        pixels[index + 2] = b * 255;
      } else {
        pixels[index + 0] = 0;
        pixels[index + 1] = 0;
        pixels[index + 2] = 0;
      }

    }
  }
  
  updatePixels()
}

function magn(a, b) {
  return a * a + b * b;
}

// Source: https://stackoverflow.com/a/54024653/229247
// Author: Kamil Kiełczewski
// CC-BY-SA 4.0 
function hsv2rgb(h, s, v) {                              
  function f(n) {
    const k = (n + h / 60) % 6;
    return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);     
  }
  return [f(5),f(3),f(1)];       
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>