P5.js copy function slow performance since version 0.10.0

Hey everyone,
my question is about the copy function. As many before I tried to recreate the tutorial of Tim Rodenbröcker about kinetic typography with p5.

It runs very slow (3fps) in the current p5 version 1.3.1, but when I change the version to 0.9.0 it reaches up to 60fps. The performance drop appeared since version 0.10.0. In the release notes on github for version 0.10.0 I found out, that “copy() now works with 2D and WebGL”. I am not sure if it has something to do with that, but maybe it is a starting point.

I append two examples with the same code, one with p5 version 0.9.0 and the other with version 1.3.1.

Can someone help me figure out, how to fix this problem?

Thank you in advance!

Hi! Welcome to the forum!

This looks like a strange case. Comparing the code, there seems only an addition for the case for webgl.

0.9.0: p5.js/p5.Renderer2D.js at 0.9.0 · processing/p5.js · GitHub
current: p5.js/pixels.js at 374acfb44588bfd565c54d61264df197d798d121 · processing/p5.js · GitHub

When I replace copy with context.drawImage in your code, the performance is fine (comparable to 0.9.0)


Then I noticed that, while I haven’t dug further, loadPixels’ implementation might have changed. If you add pg.loadPixels to the above sketch, performance drops significantly. I believe that for context.drawImage there is no need to do loadPixels and this is causing the performance issue. Can you open an issue on github, link this forum and suggest a change?

Thank you micuat!

I opened a new issue and I hope that I quoted you correctly:
copy function slow performance since v0.10.0 · Issue #5237 · processing/p5.js (github.com)

Maybe just for other beginners like me:
slow since v0.10.0: copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);
temporary solution by micuat: drawingContext.drawImage(pg.canvas, sx, sy, sw, sh, dx, dy, dw, dh);

1 Like