xxxxxxxxxx
65
/*
Teachable Machine ml5 image example - modified from The Coding Train https://thecodingtrain.com/TeachableMachine/1-teachable-machine.html
and Andreas Refsgaard example here: https://editor.p5js.org/AndreasRef/sketches/gqE6vCsYf
*/
//remember to change to your URL !!!
let modelURL = "https://teachablemachine.withgoogle.com/models/eS-oMtWl/";
let label = "waiting...";
let confidence = 0.00;
let diameter = 50;
let col;
// STEP 1: Load the model
function preload() {
const options = {
probabilityThreshold: 0.95
};
classifier = ml5.soundClassifier(modelURL + "model.json", options);
}
function setup() {
createCanvas(640, 520);
// STEP 2: Start continous classifying from the microphone
classifier.classify(gotResult);
col = color(255); //whitte circle to begin with
}
function draw() {
background(0);
// STEP 4: Display current label + some graphics
textSize(32);
textAlign(CENTER, CENTER);
fill(255,0,255);
label = label.toUpperCase(); //capitalise
text(label + " " + confidence, width / 2, height - 16);
//look a new P5JS function! circle();
fill(col);
circle(width / 2, height / 2, diameter);
}
// STEP 3: Get the classification
//Notice that the model does not output results for background noise and often outputs multiple classifications for the same class in a row
function gotResult(error, results) {
if (error) {
console.error(error);
return;
}
console.log(results[0].label);
label = results[0].label;
confidence = nf(results[0].confidence, 0, 2);
//Update size of the ellipse based on the classifications
if (label == "clap") {
fill(255, 0, 0); //red
diameter += 10;
} else if (label == "whistle") {
fill(0, 0, 255); //blue
diameter -= 10;
}
diameter = constrain(diameter, 0, height);//don't go bigger than canvas height
}