// Eoin Mc Cormack - 15112128
let canvas;
let doodleClassifier;
let divMessage;
var resultHtml = [];
var lastBestGuess = "";
// Setup the page
function setup() {
canvas = createCanvas(400, 400);
// Using a grey tone so you can identify the doodle area
background(235);
// Classify image
doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
divMessage = createDiv("Doodle in grey box and click 'Get Result' when finished");
}
// Checks if the model is ready
function modelReady() {
console.log("The model is ready");
}
// Retrieves the results of image classifier, it returns the results or an error.
// The previous results will presist so you can check results mid doodle or click clearResults
function getResults(error, results) {
if (error) {
console.error(error);
return;
} else {
console.log(results);
for (let i = 0; i < results.length; i ++) {
resultHtml.push("Guess " + (i + 1) + " is [" + results[i].label + "], with confidence of [" + nf(100*results[i].confidence, 2, 2) + "%] <br/>");
}
AB.msg(resultHtml, 5);
lastBestGuess = "The previous best guess was [" + results[0].label + "], with confidence of [" + nf(100*results[0].confidence, 2, 2) + "%] <br/>";
}
}
// Clears the results list
function clearResults() {
resultHtml = [];
AB.msg(lastBestGuess + resultHtml, 5);
}
// Clears the doodle and results to let user try again, also reloads the doodle classifier
function clearDoodleAndResults() {
background(235);
clearResults();
doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
resultHtml = [];
AB.msg("", 5);
divMessage.html("Doodle in grey box and click 'Get Result' when finished");
}
// Tracks the mouse while the button is clicked to draw image
function draw() {
if (mouseIsPressed) {
strokeWeight(20);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
// Waits for click from user confirming they are finished doodling
function finishedDrawing() {
doodleClassifier.classify(canvas, getResults);
}
// Html for page
var theHtml;
// Imports ml5
theHtml = "<!DOCTYPE html>" +
"<html>" +
"<head>" +
"<script src='https://unpkg.com/ml5@0.6.0/dist/ml5.min.js'></script>" +
"<meta charset='utf-8' />" +
"</head> </html>";
AB.msg ( theHtml, 1 );
// 1 Doodle header
theHtml = "<h1>Doodle Controls</h1> <br/> " +
"<button onclick='finishedDrawing();' class='normbutton' >Get Result</button> <br/> ";
AB.msg ( theHtml, 2 );
theHtml = "<button onclick='clearResults();' class='normbutton' >Clear Previous Results</button> <br> ";
AB.msg ( theHtml, 3 );
// Wait for user input to be finished before checking results
theHtml = "<button onclick='clearDoodleAndResults();' class='normbutton' >Start A new doodle</button> <br/> ";
AB.msg ( theHtml, 4 );