0

I have made a program on Javascript that creates the mandelbrot fractal and I drew it in an html canvas. My method to render it is to iterate per row, from 0 to 500 pixels and then simply do a loop that creates 500 rows of 500 pixels.

My problem is that when I render it, (refresh the page with more magnification), it takes a lot of time A LOT. 300 magnification works in about 30 seconds but 5000 takes over an hour. Please help. I want to have very high magnifications and the image to load quickly.

5000X magnification (-1.42 , 0) 5000X magnification (-1.42 , 0)

400X magnification (-1.4 , 0) 400X magnification (-1.4 , 0)

I run my program through a downloaded file, edited in atom, with extension .html in chrome browser.

Barmar
  • 741,623
  • 53
  • 500
  • 612
Santiago Ávila
  • 11
  • 2
  • Sounds like you need to throttle your renderer. Stick in a timeout prior to rendering upon window resizing. – Randy Casburn Oct 15 '18 at 23:27
  • Also, it may be really, really import to consider Web Workers for this task. – Randy Casburn Oct 15 '18 at 23:28
  • @RandyCasburn Thanks! – Santiago Ávila Oct 15 '18 at 23:38
  • Isn't your function recursive/progressive? I don't think there is a workaround to this. You will have to calculate the image at each zoom from 1 to 4999 to be able to calculate it at zoom 5000. – JPortillo Oct 15 '18 at 23:38
  • I just have a question, I want to do the fractal much faster because the more magnification, the more it takes for the computer to render – Santiago Ávila Oct 15 '18 at 23:39
  • @JPortillo Yeah, I think I do... I just don't understand how an app on my phone does it so much faster. Thanks tho – Santiago Ávila Oct 15 '18 at 23:41
  • This is a monster, for which zoom at 5000 depends on zoom at 4999 and so on. Do you have to calculate each zoom level on the fly? Maybe you can generate the images at the different zoom levels and save them. Then create a rendering algorithm that locates the image at the selected zoom and coordinates to render the image, something like what google maps does. This is also challenging that will will require a whole lot of processing time and space. May I ask why you need to do this? RE: the mobile app. I am guessing it does fetch the cached image. Turn Mobile Data and WiFi off before using it. – JPortillo Oct 15 '18 at 23:51
  • @JPortillo It's just a small project I wanted to do, nothing special. But yeah, I would probably have to do that. – Santiago Ávila Oct 16 '18 at 00:00
  • You need to post the code, but this might actually be a better candidate for [codereview.se]. – Barmar Oct 16 '18 at 00:40

1 Answers1

2

As someone who once implemented Mandelbrot in C++, yes, it's slow.

What you want to do in your case is take advantage of WebGL for full GPU acceleration and do the heavy lifting inside a fragment shader. Just be very careful about floating point shenanigans.

Cyber
  • 857
  • 5
  • 10