// 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

​

let clearButton;

let canvas;

let sSlider;

​

let doodleClassifier;

let resultsDiv;

​

​

​

function setup() {

  canvas = createCanvas(400, 400);

  clearButton = createButton('clear');

    sSlider = createSlider(1, 20, 4, 1);

  clearButton.mousePressed(clearCanvas);

  background(255);

  doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);

  resultsDiv = createDiv('model loading');

  function preventBehavior(e) {

    e.preventDefault(); 

    //e.stopPropagation()

};

​

canvas.elt.addEventListener("touchmove", preventBehavior, {passive: false});

}

​

function modelReady() {

  console.log('model loaded');

  doodleClassifier.classify(canvas, gotResults);

}

​

function gotResults(error, results) {

  if (error) {

    console.error(error);

    return;

  }

  let content = "";

  for (let i = 0; i < results.length; i++) {

  content += `<div style="font-size: ${(1*(1/(i+1)))}em">${results[i].label} 

                 ${nf(100 * results[i].confidence, 2, 1)}%</div>`

  }

​

  resultsDiv.html(content);

  doodleClassifier.classify(canvas, gotResults);

}

​

function clearCanvas() {

  background(255);

}

​

function draw() {

  if (mouseIsPressed) {

    strokeWeight(sSlider.value());

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

​