# Help visualizing the Mandelbrot set
**URL:** https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974
**Category:** Coding Questions
**Created:** [March 28, 2022, 6:15am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974 "2022-03-28T06:15:29Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@TerminatorP](https://discourse.processing.org/u/TerminatorP)
#### Post date: [March 28, 2022, 6:15am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/1 "2022-03-28T06:15:29Z")
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](https://editor.p5js.org/TerminatorP/sketches/PGvkzL9Af). It seems to have worked correctly, but I didn’t get quite what I was [expecting](https://ibb.co/nMpDgYr). Any insights as to why my implementation is the way it is? Thanks in advance!
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [March 28, 2022, 6:35am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/2 "2022-03-28T06:35:37Z")
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.
---
### Author:  [@TerminatorP](https://discourse.processing.org/u/TerminatorP)
#### Post date: [March 28, 2022, 8:03am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/3 "2022-03-28T08:03:32Z")
Fixed it. Thanks for your response!
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [March 28, 2022, 12:46pm UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/4 "2022-03-28T12:46:21Z")
Are you essentially using the algorithm that is presented in pseudocode at [Wikipedia: Mandelbrot set: Computer drawings](https://en.wikipedia.org/wiki/Mandelbrot_set#Computer_drawings)?
The following is my take on that in p5.js:
```auto
// 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.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 28, 2022, 8:28pm UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/5 "2022-03-28T20:28:17Z")
> **[r/p5js - \[Help\] Simple Mandelbrot Set visualization in p5js](https://www.Reddit.com/r/p5js/comments/tq2ppv/help_simple_mandelbrot_set_visualization_in_p5js/)**
>
> 2 votes and 1 comment so far on Reddit
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [March 28, 2022, 9:45pm UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/6 "2022-03-28T21:45:38Z")
> [@TerminatorP](#):
>
> … didn’t get quite what I was [expecting](https://ibb.co/nMpDgYr).
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 …
```auto
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](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/4), color can be added to the image via mapping the `iteration` variable to a hue in `HSB` mode, for example, as follows:
```auto
// 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:
```auto
fill(map(iteration, 0, max_iteration / 8, 0, 360), 100, 100);
```
Result:
Vary the coloring scheme by adjusting the arguments to the `map` function.
---
### Author:  [@TerminatorP](https://discourse.processing.org/u/TerminatorP)
#### Post date: [March 31, 2022, 6:52am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/7 "2022-03-31T06:52:53Z")
Are you user/ **L\_\_L\_L\_LL** \_/?
---
### Author:  [@TerminatorP](https://discourse.processing.org/u/TerminatorP)
#### Post date: [March 31, 2022, 7:37am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974/8 "2022-03-31T07:37:32Z")
> 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!