Help visualizing the Mandelbrot set

p5.js Coding Questions
1

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
2

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
3

Fixed it. Thanks for your response!

1 Like
4

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:

mandelbrot
mandelbrot800×800 55.9 KB

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.

5
6

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:

mandelbrot_color
mandelbrot_color800×800 20.6 KB

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

1 Like
7

Are you user/L__L_L_LL_/?

8

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