Ml5-library: a.default.p5Instance.createGraphics is not a function

[sps014]

Hi i am using ML5 and on flipImage() i am getting an error

here imageFrame is instance of video from createCapture() p5 function

function Classify(imageFrame,callBack)
  {
    const flippedFrame = ml5.flipImage(imageFrame);
    this.classifier.classify(imageFrame, callBack);
  }
 ```

I am getting the following error 

imageUtilities.js:102 Uncaught TypeError: a.default.p5Instance.createGraphics is not a function
at Object.e.flipImage (imageUtilities.js:102)
at CNN.Classify (CNN.js:11)
at getImageFrame (index.html:28)
at CamFetch.sketch.draw (CamFetcher.js:23)
at p5._main.default.redraw (p5.js:65953)
at _draw (p5.js:58869)
```
any help will be greatly appreciated ,
thank you

[joeyklee]

Hi @sps014,

So our flipImage function looks like this:

const flipImage = (img) => {
  // image image, bitmap, or canvas
  let imgWidth;
  let imgHeight;
  let inputImg;

  if (img instanceof HTMLImageElement ||
    img instanceof HTMLCanvasElement ||
    img instanceof HTMLVideoElement ||
    img instanceof ImageData) {
    inputImg = img;
  } else if (typeof img === 'object' &&
    (img.elt instanceof HTMLImageElement ||
      img.elt instanceof HTMLCanvasElement ||
      img.elt instanceof HTMLVideoElement ||
      img.elt instanceof ImageData)) {

    inputImg = img.elt; // Handle p5.js image
  } else if (typeof img === 'object' &&
    img.canvas instanceof HTMLCanvasElement) {
    inputImg = img.canvas; // Handle p5.js image
  } else {
    inputImg = img;
  }

  if (inputImg instanceof HTMLVideoElement) {
    // should be videoWidth, videoHeight?
    imgWidth = inputImg.width;
    imgHeight = inputImg.height;
  } else {
    imgWidth = inputImg.width;
    imgHeight = inputImg.height;
  }


  if (p5Utils.checkP5()) {
    const p5Canvas = p5Utils.p5Instance.createGraphics(imgWidth, imgHeight);
    p5Canvas.push()
    p5Canvas.translate(imgWidth, 0);
    p5Canvas.scale(-1, 1);
    p5Canvas.image(img, 0, 0, imgWidth, imgHeight);
    p5Canvas.pop()

    return p5Canvas;
  }
  const canvas = document.createElement('canvas');
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(inputImg, 0, 0, imgWidth, imgHeight);
  ctx.translate(imgWidth, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(canvas, imgWidth * -1, 0, imgWidth, imgHeight);
  return canvas;

}

As you might see, if p5 is available, we return a p5canvas element that plays nicely with p5 so you can do image(flippedImage) if you want to render it. I wonder if this has something to do with how your JS class is structured that is throwing this error.

[joeyklee]

This could also be related to running ml5 w/ p5 instance mode.

[starakaj]

I've encountered this same issue, and while I can't say that it's always caused by instance mode, instance mode does seem to make it happen. flipImage is calling checkP5 to see if p5 is available to do the image flipping. That function looks like this

    /**
     * This function will check if the p5 is in the environment
     * Either it is in the p5Instance mode OR it is in the window 
     * @returns {boolean} if it is in p5 
     */
    checkP5() {
        // typeof this.p5Instance !== 'undefined' && this.p5Instance.p5 && this.p5Instance.p5.Image && typeof this.p5Instance.p5.Image === 'function'
        if (typeof this.p5Instance !== 'undefined' &&
            typeof this.p5Instance.loadImage === 'function' || 
            typeof this.p5Instance.p5 !== 'undefined' &&
            typeof this.p5Instance.p5.Image !== 'undefined' &&
            typeof this.p5Instance.p5.Image === 'function') return true;
        return false
    }

So this will return true even if the actual p5 instance is in p5Utils.p5instance.p5, and not p5Utils.p5Instance. Maybe a getter for p5Utils.p5Instance makes sense? Also while we're on the subject it looks like CVAE is still using its own internal implementation of checkp5

  checkP5() {
    if (typeof window !== 'undefined' && window.p5 && this
        && window.p5.Image && typeof window.p5.Image === 'function') return true;
    return false;
  }

Related to but not quite the same. I can try to clean some of this up on a branch, though I'm not 100% sure what the right solution is here.

In general, it looks like you're meant to call setp5Instance on ml5 before doing anything else. Is that right? Is that documented somewhere? Seems pretty important for people using instance mode.

[vennsoh]

Hi there, I'm also having this problem with ml v0.6.0 with p5 instance mode. I wonder if this has been fixed?
If yes, how can I fix this?

Thanks!

[joeyklee]

Hi @vennsoh 👋
Might you be able to share a larger code snippet or a demo example in the p5 web editor or jsfiddle (or equivalent)? This would help us to debug with a bit more clarity. Thank you!

[vennsoh]

@joeyklee Not a problem, here you go,
https://codesandbox.io/s/romantic-brattain-hxinl?file=/src/sketch.js

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.