@[14:29] (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
you know there is some code
https://thecodingtrain.com/CodingChallenges/021-mandelbrot-p5.html
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?
?? 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/
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.
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 
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
</> code tag
looks
```
type or paste code here
```
and paste you code into
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
the video you linked is
p5.js
the code you can download is
// 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
// 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?
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
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(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)));
//}
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 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
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 ?
and what i see first is that you deleted the
// Daniel Shiffman
// http://codingtra.in
// The Coding Train | creating Creative Coding Videos! | Patreon
// Code for: https://youtu.be/6z7GQewK-Ks
section.
why you do this?
Sorry I didn’t realise I did that. I just corrected it now thank you.
your code runs into a
NullPointerException
error,
yes pixel array is different between JAVA and p5.js
( like a array of pixels * colorvalues )
( like a array of colors )
( but every color info with 4 values each, RGBA )