React / Webpack中的p5 image（）友好错误消息

Question

I am refactoring a p5 sketch as part of a React/Redux build and am getting the following friendly error message from p5 concerning arguments passed to the p.image() function (note: I am using p5 in instance mode ).

p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received p5.Element instead at webpack-internal:///239:103:9. [http://p5js.org/reference/#p5/image]

The video argument the message seems to refer to, is a p5.MediaElement returned from p.createCapture( p.VIDEO ) - ie webcam stream. I have had no issues when using the same function calls in a static context.

The p.image call sits within the following code block:

const noiseX = p.noise(xoff)*(canvWidth+vWidth);
const noiseY = p.noise(yoff)*(canvHeight+vHeight);
xoff+=visualSettings.perlinScale.active;
yoff+=visualSettings.perlinScale.active;
p.image(video, noiseX-vWidth, noiseY-vHeight, vWidth, vHeight);

The sketch still runs as expected, but I would like to resolve the issues appropriately (besides, the error sits within the draw cycle which is really irritating).

It is unclear as to what is required to resolve the issue since the friendly error message says it was 'expecting a p5.Image or p5.Element' and has 'received p5.Element instead' . Any clarification anyone can provide would be much appreciated.

Answer 1

The issue here relates to a bug in p5 0.6.0. Will be fixed in an upcoming release of p5.

In the meantime, the error msg can be hidden by setting p5.disableFriendlyErrors = true; or using the minified version of p5 (which has friendly error msgs hidden by default).

Special thanks to GoToLoop for the help via the Processing forum discussion .