Progress bar from inside draw()

Hello fellow Processing enthusiasts.

Inside my draw() I have a tight loop working on pixels (I’m drawing fractals) and I’d like to have a progress bar reflecting how far draw() has got in its loop. I can do this fine if I have a second window – its draw() can access a variable that the main draw() updates. Fine. But how to put the progress bar in the main window which draw() writes to? Can anyone advise on the technique needed? I’ve done some looking here and elsewhere with no success. thread() was a thought, but it can’t do drawing. Thanks a lot!

1 Like

draw only shows something on the canvas at the end of draw,
so i think that is not possible what you try to do,
but
if you split the jobs ( in 100 steps )
and use 100 draw loops to do them
it might be possible to make a progress bar with 100 pix lines…

1 Like

Thanks a lot kll. I think I’ll go back to using a small 2nd window that just has the progress bar in it, and have that window anchor itself onto the main window using surface.setLocation(). cheers!

sorry, the concept of processing is that draw() runs 60 times per second,

  • if the code inside draw() is too long,
  • or the hardware too slow

that frameRate will be slower,
still some code
what is so slow that it would need a progress bar between 2 draw() executions
looks more like a questionable project setup?

Good question kll! I’m rendering fractals at 4K x 4K pixels, iterating on each pixel up to 500 times using functions from the [Apache complex library](https://commons.apache.org/proper/commons-math/userguide/complex.html. So it’s common to have a single draw() taking up to 5 minutes. The program renders previews at 512x512 in real time, and then when it’s time to render one you like, you press the Render button and go and have a cup of tea. So that’s where the progress bar comes in. Example attached.

3 Likes

Another way to approach this is to kick off a thread and do the render calculations on an int array. When the thread finishes, set a flag to done so you can copy the int array into a PImage or PGraphics and draw the image. In the meantime, draw is looping at 60fps – not only could you draw a progress bar in your main window, you have full UI – for example, to cancel or quit.

Note that this makes sense for iterating over integers with a math library, but not for drawing – drawing in a thread does not work by default due to the single-threaded design of Processing PGraphics, and working around that can be a real pain. This includes using color() in a thread – don’t do it. For more on why, see:

1 Like

The example sketch “Threaded PGraphics II” from 2nd link is for when we need to use an OpenGL PGraphics in another Thread.

If you don’t need an OpenGL PGraphics, go w/ the example sketch “Linked Balls” from the 1st link:

Or go w/ “Threaded PGraphics” from this link:

2 Likes

Thanks a lot Jeremy. It never occurred to me to put the computation in a separate thread! I’ll have a look. Cheers.

Thanks for the links GoToLoop, cheers!