P5.js copy function slow performance since version 0.10.0

p5.js
1

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.
https://editor.p5js.org/eriksiemund/sketches/ZD7V3_qKM
https://editor.p5js.org/eriksiemund/sketches/79w6n7V2W

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

Thank you in advance!

2

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)

https://editor.p5js.org/micuat/sketches/XXyKscqN9

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?

3

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