Canvas and loadImage() examples

[shiffman]

Most of our image classification, style transfer examples are using <img> elements. Would be nice to show loadImage() and drawing image data to a canvas as well.

[shiffman]

(This may need to wait for us to sort out ml5js/ml5-library#27 and how to send a p5.Image object into the ml5 methods.)

[cvalenzuela]

All example use loadImage() and accept an p5.Image element as argument too. Closing as it seems resolved.

[shiffman]

This one is using createImg() or am I missing something?

https://github.com/ml5js/ml5-examples/blob/master/p5js/ImageClassification/sketch.js

Should we make a second version with canvas, preload() and loadImage()? Since we have the vanilla JS examples that work with DOM elements maybe it makes sense to stick with loadImage() only here?

[cvalenzuela]

I thought this meant loading all images with js instead of putting them directly in the DOM. What we had before was <img> in the index.html and select() methods in javascript. We are now using createImage() instead.

What the advantage of using loadImage over createImage?

[shiffman]

Ah, ok, this probably is best to discuss during one of our work sessions but some quick thoughts on my reasoning:

1. In short workshops about p5 or in beginner contexts the DOM manipulation stuff is typically not explored so loadImage() fits a bit easier into that context. (I am now realizing that we are using a DOM element for the classification result so my thinking is flawed here.)
2. With preload() no callback is required which is a bit friendlier to beginners.
3. The core use of p5 generally involves canvas so we it's nice to quickly show users how they can integrate ml5 into their projects with whatever other design/drawing elements they might have.

All this said there are a lot of contexts when using an <img> element makes more sense. I am not confident in my thinking here. I suppose we could have both for now?

[shiffman]

With preload() no callback is required which is a bit friendlier to beginners.

And of course we require a callback for the classification results, hah!

[cvalenzuela]

ok, this makes sense. I do agree that we should leave DOM manipulation out if possible.
We can keep what we have for now (just thinking about the beta release) and work on creating examples with both! I'm happy to work on this

[shiffman]

Agreed! (removing from ml5 soft launch, we can tackle for June 15th target.)

[shiffman]

loadImage() is working . . and classification on canvas! I think we can simplify some of the p5 examples. Here is a demo:

https://editor.p5js.org/ml5/sketches/EB4LMfd1h

@NHibiki is working on preload() support which will also allow us to have an example as drop dead simple as this!

let classifier;
let img;

function preload() {
  img = loadImage('bird.jpg');
  classifier = ml5.imageClassifier('MobileNet');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
  classifier.predict(canvas, gotResult);
}

function gotResult(err, results) {
  console.log(results);
}

[shiffman]

Noting work on this is in progress in #103! This issue can probably be closed and new individual ones can be opened for specific example issues?

[joeyklee]

Closing this up now as this seems to be resolved. Thanks for all the feedback here!