Buffered Draw to improve performance

p5.js
1

I notice that p5.js gets overloaded quickly when it gets a lot of work and screen updates to do on every draw cycle. My system temperature goes up and I hear the fan spinning at max speed. It happens a lot!

So, I’m wondering is there a way to buffer screen I/O? Delphi has functions called beginUpdate … endUpdate. You wrap these around list processing and it does an amazing job at speeding up the writing of lists to screen.

Does p5.js have such a thing?

In p5, I do see beginContour and beginShape but these are specific to vertex. I think it would be very useful to have a general beginUpdate block.

2

Hello, and welcome to the forum! :partying_face:

You can use createGraphics to get and off-screen graphics buffer. There’s also tips n tricks around optimizing for performance in this article.

If you share your code with us, chances are that you will get some pointers as well.

3

Thanks for the optimize link.
I’m experimenting with Genetic Algorithms and the function distSquared() is a much better idea for fitness.

I have been trying createGraphics and it does seem to be a good solution. I treat it like an off screen bitmap.