Help visualizing the Mandelbrot set

Hey folks I am trying to create a simple mandelbrot set visualization using p5js library. I read the wikipedia article on the Mandelbrot Set and came up a quick visualization. It seems to have worked correctly, but I didn’t get quite what I was expecting. Any insights as to why my implementation is the way it is? Thanks in advance!

1 Like

Hello, @TerminatorP, and welcome to the Processing Foundation Forum!

Please check the link to the image of what you were expecting. It seems to be incomplete.

1 Like

Fixed it. Thanks for your response!

1 Like

Are you essentially using the algorithm that is presented in pseudocode at Wikipedia: Mandelbrot set: Computer drawings?

The following is my take on that in p5.js:

// algorithm from https://en.wikipedia.org/wiki/Mandelbrot_set#Computer_drawings
function setup() {
  createCanvas(400, 400);
  noLoop();
  background(255);
}
function draw() {
  for (let px = 0; px < width; px += 1) {
    for (let py = 0; py < height; py += 1) {
      let x0 = map(px, 0, width, -2.0, 0.47);
      let y0 = map(py, 0, height, -1.12, 1.12);
      let x = 0.0;
      let y = 0.0;
      let iteration = 0;
      let max_iteration = 255;
      while ((x * x + y * y <= 2 * 2) && (iteration < max_iteration)) {
        let xtemp = x * x - y * y + x0;
        y = 2 * x * y + y0;
        x = xtemp;
        iteration = iteration + 1;
      }
      stroke(iteration);
      point(px, py);
    }
  }
}

Image:

EDIT (March 28, 2022):

Is there a particular section of the Wikipedia article that served as a basis for the criteria used in your check_if_in_mandlebrot_set function? If you provide a link to that section, we can compare it to your function and experiment with it.

If the concern is the sparseness of the image, the issue may be the increment of 3 that is being used in the outer and inner loops …

  for (x = 0; x <= width; x+=3) {
    for (y = 0; y <= height; y+=3) {

If the concern is the geometry of the image, that would be due to the criteria that are specified within the check_if_in_mandlebrot_set function.

Regarding the algorithm coded here, color can be added to the image via mapping the iteration variable to a hue in HSB mode, for example, as follows:

// algorithm from https://en.wikipedia.org/wiki/Mandelbrot_set#Computer_drawings
function setup() {
  createCanvas(400, 400);
  noLoop();
  background(0, 0, 0);
  noStroke();
  noSmooth();
  colorMode(HSB);
}
function draw() {
  for (let px = 0; px < width; px += 1) {
    for (let py = 0; py < height; py += 1) {
      let x0 = map(px, 0, width, -2.0, 0.47);
      let y0 = map(py, 0, height, -1.12, 1.12);
      let x = 0.0;
      let y = 0.0;
      let iteration = 0;
      let max_iteration = 255;
      while ((x * x + y * y <= 2 * 2) && (iteration < max_iteration)) {
        let xtemp = x * x - y * y + x0;
        y = 2 * x * y + y0;
        x = xtemp;
        iteration = iteration + 1;
      }
      fill(map(iteration, 0, max_iteration / 8, 0, 360), 100, 100);
      rect(px, py, 1, 1);
    }
  }
}

Note this statement:

      fill(map(iteration, 0, max_iteration / 8, 0, 360), 100, 100);

Result:

Vary the coloring scheme by adjusting the arguments to the map function.

1 Like

Are you user/L__L_L_LL_/?

If the concern is the geometry of the image, that would be due to the criteria that are specified within the check_if_in_mandlebrot_set function.

Yes, that was my initial concern. Turns out I had wrongly implemented the logic inside this function. I hadn’t used a temporary variable to store the new value of the x_new variable. Also I had initialized x_new and y_new as x and y instead of 0 both. Fixing this addresses my concern.

I found the coloring system you’ve proposed to be pretty cool. Thanks!

1 Like