let canvas;

let resultsDiv;

let inputImage

let sx;

let sy;

let ex;

let ey;

​

function setup() {

  canvas = createCanvas(128*4, 96*4);

  background(255);

  pixelDensity(1);

    let options = {

      inputs: [128, 96, 4],

      task: "imageClassification",

    };

  shapeClassifier = ml5.neuralNetwork(options);

  const modelDetails = {

    model: 'model/model.json',

    metadata: 'model/model_meta.json',

    weights: 'model/model.weights.bin'

  }

  background(255);

  clearButton = createButton('clear');

  clearButton.mousePressed(function () {

    background(255);

    sx = undefined;

    sy = undefined;

  })

  resultsDiv = createDiv('loading model');

  inputImage = createGraphics(128,96);

  shapeClassifier.load(modelDetails, modelLoaded);

}

​

function draw() {

  stroke(0);

  strokeWeight(12);

  // if (mouseIsPressed){

  //   line(mouseX,mouseY,pmouseX,pmouseY);

  // }

}

​

function modelLoaded() {

  console.log('model ready!');

  classifyImage();

}

​

function classifyImage() {

  inputImage = createGraphics(128,96);

  inputImage.copy(canvas, 0, 0, width, height, 0,0,128,96);

  //image(inputImage, 0, 0);

  shapeClassifier.classify({image: inputImage}, gotResults) 

}

​

function gotResults(err,results) {

  if (err) {

    console.error(err);

    return;

  }

  let i = 0

  let label = results[i].label;

  let confidence = nf(100*results[i].confidence,2,0);

  resultsDiv.html(`${label} ${confidence}%`);

    // console.log(results);

    classifyImage();

}

​

function mousePressed() {

  sx = mouseX;

  sy = mouseY;

  if (ex != undefined && ey != undefined) {

      line(sx,sy,ex,ey);

  } else {

    point(sx,sy);

  }

  ex = sx;

  ey = sy;

}

​

// function mouseReleased() {

//   ex = mouseX;

//   ey = mouseY;

//   line(sx,sy,ex,ey);

// }

​

​