Hi everyone,

I’ve used p5.js to render a fractal image by running Newton’s method on each pixel in a 600 by 600 grid. This works well enough for rendering the image once, and my result looks like this:

But, this image takes a few seconds to render even once with all those calculations.

What I’d really like to do is be able to render the image repeatedly so that I can drag the image to recenter it, zoom in/out, etc. However, my image rendering is way too slow for that. Can anyone point me in the direction of something that would speed this up? The problem is extremely parallel in nature, so gpu.js seems like it might do the trick. But I’m not sure, and I don’t want to dive into figuring that library out if there’s a better/easier route. So, I’d appreciate any suggestions.

Thanks, in advance, and my code is below:

```
function setup() {
createCanvas(600,600);
noLoop();
}
function draw() {
background(204);
translate(300,300);
for (var i = -300; i < 300; i += 1) {
for (var j = -300; j < 300; j += 1) {
stroke(getColor(i/200,j/200));
point(i,j);
}
}
}
function newton(x,y) {
bigCoeff = .25/(Math.pow(x*x*x-3*x*y*y,2)+Math.pow(3*x*x*y-y*y*y,2));
return [.75*x + bigCoeff*(x*x*x-3*x*y*y), .75*y - bigCoeff*(3*x*x*y-y*y*y)];
}
function getColor(x,y) {
red = [255,0,0];
green = [0,255,0];
blue = [0,0,255];
yellow = [255,255,0];
black = [0,0,0];
tolerance = 0.001;
zeroTolerance = 0.000001
while (true) {
if ((x-1)*(x-1) + y*y < tolerance) {
return green;
}
else if (x*x + (y-1)*(y-1) < tolerance) {
return red;
}
else if ((x+1)*(x+1) + y*y < tolerance) {
return blue;
}
else if (x*x + (y+1)*(y+1) < tolerance) {
return yellow;
}
else if (x*x + y*y < zeroTolerance) {
return black;
}
else {
[x,y] = newton(x,y);
}
}
}
```