Trying to use .flipImage() in p5 instance mode and I get an error.

[vennsoh]

Create a new issue from this. https://github.com/ml5js/ml5-library/issues/717

I'm getting an error saying a.default.p5Instance.createGraphics is not a function... when I try to use the .flipImage() function from ml5 in p5 instance mode.

Here is the demo to demonstrate that. https://codesandbox.io/s/romantic-brattain-hxinl?file=/src/sketch.js

Recreating this example from the ml5 website https://learn.ml5js.org/#/reference/utils?id=flipimage BUT in instance mode.

In the example, if I try to use .flipImage() it won't work. I'm using p5 instance mode for in order to integrate p5 with React.

Originally posted by @vennsoh in https://github.com/ml5js/ml5-library/issues/717#issuecomment-735233648

[ss-cmd]

hi,when i using teachable machine learing i have a same issue,how you fixed it?

[lindapaiste]

If ml5 can't find the p5 instance then it will flip the image using the native HTML canvas and return an HTMLCanvasElement. This element is not accepted by p5.image(), which only accepts p5 image objects. That's what's going on here.

In your setup function you can call ml5.p5Utils.setP5Instance(p5) with the local p5 variable which is passed in by the react-p5-wrapper library. This will let ml5 access the p5 instance and be able to use it.

functioning code:

import * as ml5 from "ml5";

let video;

export default function sketch(p5) {
  p5.setup = () => {
    ml5.p5Utils.setP5Instance(p5);
    p5.createCanvas(400, 400);
    video = p5.createCapture(p5.VIDEO);
    video.size(640, 480);
    video.hide();
  };

  p5.draw = () => {
    const flippedVideo = ml5.flipImage(video);
    p5.image(flippedVideo, 0, 0, p5.width, p5.height);
  };
}

https://codesandbox.io/s/ml5-p5-flipimage-webcam-s0gcux?file=/src/sketch.js:0-384