Can someone help me in optimising this code?

Question

My intention is to zoom into the fractal, and I need the code to be as fast as possible. But I have no idea of how to optimize it.

https://code.sololearn.com/WW5k30TdVULU/?ref=app

Answer 1

It is nice that you're already using updatePixels from p5 because it appears to copy the pixel data in bulk to the canvas using something like putImageData method. That is far faster than drawing a rectangle for each pixel.

You could use a shader language get a lot more speed. Video cards can draw all pixels of a mandelbrot fast enough for smooth animation. I used a WebGL shader to zoom out of Mandelbrot at: https://code.sololearn.com/WiH4n0rrvD1B

One thing I found helpful is slicing up the calculation using setTimeout to keep the page responsive. This is pretty important if you're doing all calculations in JavaScript and not using web workers. You can see what I mean at:
https://code.sololearn.com/WVhoMHzy3K81
That implements a Mandelbrot fractal zoom feature. You just have to select it from the dropdown.

One thing to speed up calculations on a multicore processor is web workers. That would allow you to take advantage of multiple cores.

Answer 2

This code contains a WebGL shader for Mandelbrot in case it helps you or anyone else trying to speed up the drawing of Mandelbrot:
https://code.sololearn.com/Wyd87dQXWe96/