// ml5.js: Classifying Drawings with DoodleNet (Template)
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/learning/ml5/9.1-doodlenet.html
// https://youtu.be/ABN_DWnM5GQ
// Template: https://editor.p5js.org/codingtrain/sketches/AHgkwgPdc
// Mouse: https://editor.p5js.org/codingtrain/sketches/6LLnGY1VY
// Video: https://editor.p5js.org/codingtrain/sketches/fxFKOn3il
// import ML5 library
let clearButton;
let canvas;
let doodleClassifier
// create canvas 400 x 400
// AB Automatically creates a canvas in a div in the run window? can specify P5 and default is 2-D
// "newRun" and "nextStep" conflicts with the P5 way of doing things ("setup" and "draw"). So this is really for writing new P5/ML5 Worlds for this platform
function setup() {
canvas = createCanvas(400, 400);
clearButton = createButton('clear');
clearButton.mousePressed(clearCanvas);
background(255);
doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady)
}
function modelReady(){
console.log('model loaded');
doodleClassifier.classify(canvas, gotResults);
}
function gotResults(error, results){
if (error) {
console.error(error)
return;
}
console.log(results);
}
// clear any doodle from canvas
function clearCanvas() {
background(255);
}
// when mouse is pressed leave trail from prev to curr position
function draw() {
if (mouseIsPressed) {
strokeWeight(8);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
// import ML5 ?
var thehtml;
thehtml = "<html> <head> "
thehtml = "<script src='https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js'></script>"
thehtml = "<script src='https://unpkg.com/ml5@0.6.0/dist/ml5.min.js'></script>"
thehtml = "<meta charset='utf-8'/>"
thehtml = "</head> <body> <script src='sketch.js'></script></body></html>"