copy function slow performance since v0.10.0

[Erik167]

Most appropriate sub-area of p5.js?

• [x ] Core/Environment/Rendering

Details about the bug:

• p5.js version: since v0.10.0
• Web browser and version: Edge v90
• Operating System: Windows 10
• Steps to reproduce this:

The framerate drops significantly (3fps), when using the copy() function in the context shown in the examples below. I tried to recreate the tutorial of Tim Rodenbröcker about kinetic typography in p5.js.
This happens when p5 versions since 0.10.0 are used. It runs smoothly with versions before 0.9.0.

v0.9.0: https://editor.p5js.org/eriksiemund/sketches/ZD7V3_qKM
v.1.3.1: https://editor.p5js.org/eriksiemund/sketches/79w6n7V2W

The issue is already posted in the p5 forum, where micuat suggested a solution. He replaced copy() with context.drawImage and made a guess, that it might have something to do with the implementation of loadPixels since v0.10.0.

Fix by misuat: https://editor.p5js.org/micuat/sketches/XXyKscqN9

Link to forum thread: https://discourse.processing.org/t/p5-js-copy-function-slow-performance-since-version-0-10-0/30007

Thank you in advance!

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[micuat]

thanks for opening this! just as a followup, I found webgl->2d copy is nevertheless slow even with context.drawImage (maybe because of preserveDrawingBuffer??)
https://editor.p5js.org/micuat/sketches/eXsahOENI

[Erik167]

your sketch runs at 60 fps on my pc and phone, so I can't see any performance issues with that :)

[micuat]

thanks, it's actually funny that performs awful on firefox but fine on chrome

[micuat]

comparing loadPixels, what changed is only this line

https://github.com/processing/p5.js/blob/0.9.0/src/core/p5.Renderer2D.js#L288

which makes sense - till 0.9.0, when the dirty flag is on, loadPixels skips the actual operation - in the example above, pg doesn't change so loadPixels is only triggered in the first frame. From 0.10.0, whatever the flag state is, it will load the image to the pixels, which is causing the lag.

whatever it is, for copy I don't think loadPixels is needed as context.drawImage is not dependent on the pixels. Does anyone know if there are any cases that will break if there is no loadPixels?

p5.js/src/image/pixels.js

Lines 265 to 274 in 374acfb

	dy,
	dw,
	dh
	) => {
	srcImage.loadPixels();
	const s = srcImage.canvas.width / srcImage.width;
	// adjust coord system for 3D when renderer
	// ie top-left = -width/2, -height/2
	let sxMod = 0;
	let syMod = 0;

[stalgiag]

Thanks all!

It looks like the call toloadPixels in _copyHelper was added in this commit.. As @micuat points out the behavior inside of loadPixels has changed since that commit.