# Mandelbrot set coding challenge
**URL:** https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162
**Category:** Coding Questions
**Created:** [May 12, 2019, 10:51am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162 "2019-05-12T10:51:06Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 10:51am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/1 "2019-05-12T10:51:06Z")
# Coding Challenge #21: Mandelbrot Set. Youtube.
**@[14:29]** ([https://www.youtube.com/watch?v=6z7GQewK-Ks&t=869s](https://www.youtube.com/watch?v=6z7GQewK-Ks&t=869s))
Can someone help me please **@[14:29]** when we are going to test to see if it’s all working I keep getting this syntax **\>NullPointerException\<** and I have no idea what this is if anyone would like to check out my code I can post it in the comments it’s exceptionally ok I believe but still a nice lesson for me to learn any help is appreciated : D
Kind Regards
FractalGenieGod
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 10:57am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/2 "2019-05-12T10:57:07Z")
you know there is some code
[https://thecodingtrain.com/CodingChallenges/021-mandelbrot-p5.html](https://thecodingtrain.com/CodingChallenges/021-mandelbrot-p5.html)
---
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 11:03am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/3 "2019-05-12T11:03:26Z")
Hey thanks, I didn’t know we could download the code directly. I wanted find out why my one was messing up? I’m using Processing as opposed p5.js. Could the coding be different? as I was following along I was making minor adjustments to the code in order for it to work on Processing but was still following the same structure, could the structure of the code have been the issue? Can I post my code up until the current point to be checked please?
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 11:06am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/4 "2019-05-12T11:06:41Z")
?? sorry, you talk about using Processing IDE 3.5.3 P5.js MODE
or the differences p5.js to JAVA mode, anyhow when click on
[View Code][Processing] you get the JAVA code too.
* * *
other side yes there are different version for p5.js
best is you work online editor
[https://editor.p5js.org/](https://editor.p5js.org/)
open a NEW project and paste your sketch.js code into it.
now can adjust name and SAVE project.
that project will keep that version stored!
and also can DOWNLOAD ( and that comes with that used version of p5.js
if you install the P5.js MODE for the Processing IDE you get a version installed.
later you might need to update that manually.
---
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 11:12am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/5 "2019-05-12T11:12:25Z")
Yes sorry, I mean Im using Processing Java IDE 3.5.3 latest one Operating system. Yes I understand I get the processing JAVA code also but I want to know what is wrong with the code I wrote myself I wanted to post my own code here so I can learn what I did wrong 🙂
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 11:13am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/6 "2019-05-12T11:13:46Z")
yes, can do, but first you compare yours with the downloaded version,
possibly find the error alone?
* * *
but if you post code, please format it correctly
in Processing IDE hit [ctrl][t]
in forum editor use the
```auto
code tag
```
looks
```
type or paste code here
```
and paste you code into
---
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 11:18am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/7 "2019-05-12T11:18:34Z")
That’s very strange because the youtube tutorial code is completely different to the pde file from the download 🤔 When I followed along with the youtube tutorial it was done the same way its just during the part where he tests the code it works for him except it doesn’t work for me weird 🤔 which makes it difficult to pinpoint where I went wrong
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 11:21am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/8 "2019-05-12T11:21:32Z")
the video you linked is
p5.js
the code you can download is
```auto
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/6z7GQewK-Ks
var minval = -0.5;
var maxval = 0.5;
var minSlider;
var maxSlider;
var frDiv;
function setup() {
createCanvas(200, 200);
pixelDensity(1);
minSlider = createSlider(-2.5, 0, -2.5, 0.01);
maxSlider = createSlider(0, 2.5, 2.5, 0.01);
frDiv = createDiv('');
}
function draw() {
var maxiterations = 100;
loadPixels();
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
var a = map(x, 0, width, minSlider.value(), maxSlider.value());
var b = map(y, 0, height, minSlider.value(), maxSlider.value());
var ca = a;
var cb = b;
var n = 0;
while (n < maxiterations) {
var aa = a * a - b * b;
var bb = 2 * a * b;
a = aa + ca;
b = bb + cb;
if (a * a + b * b > 16) {
break;
}
n++;
}
var bright = map(n, 0, maxiterations, 0, 1);
bright = map(sqrt(bright), 0, 1, 0, 255);
if (n == maxiterations) {
bright = 0;
}
var pix = (x + y * width) * 4;
pixels[pix + 0] = bright;
pixels[pix + 1] = bright;
pixels[pix + 2] = bright;
pixels[pix + 3] = 255;
}
}
updatePixels();
frDiv.html(floor(frameRate()));
}
```
you can not compare it with the JAVA ( CC\_021\_Mandelbrot.pde ) code
```auto
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/6z7GQewK-Ks
void setup() {
size(640, 480);
colorMode(RGB, 1);
}
void draw() {
background(255);
// Establish a range of values on the complex plane
// A different range will allow us to "zoom" in or out on the fractal
// It all starts with the width, try higher or lower values
float w = 5;
float h = (w * height) / width;
// Start at negative half the width and height
float xmin = -w/2;
float ymin = -h/2;
// Make sure we can write to the pixels[] array.
// Only need to do this once since we don't do any other drawing.
loadPixels();
// Maximum number of iterations for each point on the complex plane
int maxiterations = 100;
// x goes from xmin to xmax
float xmax = xmin + w;
// y goes from ymin to ymax
float ymax = ymin + h;
// Calculate amount we increment x,y for each pixel
float dx = (xmax - xmin) / (width);
float dy = (ymax - ymin) / (height);
// Start y
float y = ymin;
for (int j = 0; j < height; j++) {
// Start x
float x = xmin;
for (int i = 0; i < width; i++) {
// Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
float a = x;
float b = y;
int n = 0;
while (n < maxiterations) {
float aa = a * a;
float bb = b * b;
float twoab = 2.0 * a * b;
a = aa - bb + x;
b = twoab + y;
// Infinty in our finite world is simple, let's just consider it 16
if (a*a + b*b > 16.0) {
break; // Bail
}
n++;
}
// We color each pixel based on how long it takes to get to infinity
// If we never got there, let's pick the color black
if (n == maxiterations) {
pixels[i+j*width] = color(0);
} else {
// Gosh, we could make fancy colors here if we wanted
pixels[i+j*width] = color(sqrt(float(n) / maxiterations));
}
x += dx;
}
y += dy;
}
updatePixels();
println(frameRate);
}
```
are you sure you know what you want learn first?
---
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 11:27am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/9 "2019-05-12T11:27:44Z")
Yes I’m learning Processing directly I’m not using the online P5.JS. If the tutor is using P5.JS then Im trying to take the code he’s using and re-write it so that Processing understands…just to clarify Processing & P5.JS are both different right?
i’m kind of starting to understand that I might be better of not looking at the video tutorials where he uses P5.JS and instead read the tutorial from the PDE file directly and practice it
---
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 11:30am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/10 "2019-05-12T11:30:39Z")
```auto
What was not shown in the youtube tutorial video.
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/6z7GQewK-Ks
void setup() {
size(640, 480);
colorMode(RGB, 1);
}
void draw() {
background(255);
// Establish a range of values on the complex plane
// A different range will allow us to "zoom" in or out on the fractal
// It all starts with the width, try higher or lower values
float w = 5;
float h = (w * height) / width;
// Start at negative half the width and height
float xmin = -w/2;
float ymin = -h/2;
// Make sure we can write to the pixels[] array.
// Only need to do this once since we don't do any other drawing.
loadPixels();
// Maximum number of iterations for each point on the complex plane
int maxiterations = 100;
// x goes from xmin to xmax
float xmax = xmin + w;
// y goes from ymin to ymax
float ymax = ymin + h;
// Calculate amount we increment x,y for each pixel
float dx = (xmax - xmin) / (width);
float dy = (ymax - ymin) / (height);
// Start y
float y = ymin;
for (int j = 0; j < height; j++) {
// Start x
float x = xmin;
for (int i = 0; i < width; i++) {
// Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
float a = x;
float b = y;
int n = 0;
while (n < maxiterations) {
float aa = a * a;
float bb = b * b;
float twoab = 2.0 * a * b;
a = aa - bb + x;
b = twoab + y;
// Infinty in our finite world is simple, let's just consider it 16
if (a*a + b*b > 16.0) {
break; // Bail
}
n++;
}
// We color each pixel based on how long it takes to get to infinity
// If we never got there, let's pick the color black
if (n == maxiterations) {
pixels[i+j*width] = color(0);
} else {
// Gosh, we could make fancy colors here if we wanted
pixels[i+j*width] = color(sqrt(float(n) / maxiterations));
}
x += dx;
}
y += dy;
}
updatePixels();
println(frameRate);
}
```
My attempt at converting the code seen in the tutorial video into Processing directly
void setup(){
size(500,500);
[//surface.setResizable](https://surface.setResizable)(true);
pixelDensity(1);
for (int x = 0; x \< width; x++){
for (int y = 0; y \< height; y++){
```
float a = map(x,0,width, -2, 2);
float b = map(y,0,height, -2, 2);
float n = 0;
float z = 0;
while (n < 100) {
float aa = a*a - b*b;
float bb = 2 * a * b;
a = aa;
b = bb;
if (abs(a + b) > 16 ){
break;
}
n++;
}
int bright = 0;
if (n == 100){
bright = 255;
}
int pix = (x + y * width) * 4;
pixels[pix + 0] = bright;
pixels[pix + 1] = bright;
pixels[pix + 2] = bright;
pixels[pix + 3] = 255;
}
```
}
updatePixels();
}
//void keyPressed(){
// surface.setSize(round(random(200, 500)), round(random(200, 500)));
//}
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 11:33am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/11 "2019-05-12T11:33:48Z")
again
the processing IDE 3.5.3
comes with the JAVA mode,
add you can install the p5.js MODE too. ( but running in your default browser )
so you can play both versions from Processing IDE
still you should make a account at [p5js.org](http://p5js.org) if you want play with me together p5.js code
if you have questions for JAVA mode you need to post your code here in
- a running version,
- but only cut down to the point of question ( MCVE )
- providing also add files if required,
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 11:39am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/12 "2019-05-12T11:39:55Z")
i just try to check on your posted code ( what is the JAVA version )
[website-archive/CodingChallenges/CC\_021\_Mandelbrot/Processing/CC\_021\_Mandelbrot/CC\_021\_Mandelbrot.pde at main · CodingTrain/website-archive · GitHub](https://github.com/CodingTrain/website/blob/master/CodingChallenges/CC_021_Mandelbrot/Processing/CC_021_Mandelbrot/CC_021_Mandelbrot.pde) ?
and what i see first is that you deleted the
> // Daniel Shiffman
> // [http://codingtra.in](http://codingtra.in)
> // [The Coding Train | creating Creative Coding Videos! | Patreon](http://patreon.com/codingtrain)
> // Code for: [https://youtu.be/6z7GQewK-Ks](https://youtu.be/6z7GQewK-Ks)
section.
why you do this?
---
### Author:  [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)
#### Post date: [May 12, 2019, 11:48am UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/13 "2019-05-12T11:48:53Z")
Sorry I didn’t realise I did that. I just corrected it now thank you.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [May 12, 2019, 12:04pm UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162/14 "2019-05-12T12:04:46Z")
your code runs into a
> NullPointerException
error,
yes pixel array is different between JAVA and p5.js
> **[reference | p5.js](https://p5js.org/reference/#/p5/pixels)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
( like a array of pixels \* colorvalues )
> **[pixels\[\] / Reference](https://processing.org/reference/pixels.html)**
>
> The pixels\[\] array contains the values for all the pixels in the display window. These values are of the color datatype. This array is defined by the size of the display window. For example, if…
( like a array of colors )
( but every color info with 4 values each, RGBA )