// Classifier Variable
let classifier;
// Model URL
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/x-zsz-E9i/';
// Video
let video;
let flippedVideo;
// To store the classification
let label = "";
// Load the model first
function preload() {
classifier = ml5.imageClassifier(imageModelURL + 'model.json');
}
function setup() {
createCanvas(320, 260);
// Create the video
video = createCapture(VIDEO);
video.size(320, 240);
video.hide();
flippedVideo = ml5.flipImage(video);
// Start classifying
classifyVideo();
}
function draw() {
background(0);
// Draw the video
image(flippedVideo, 0, 0);
// Draw the label
fill(255);
textSize(16);
textAlign(CENTER);
text(label, width / 2, height - 4);
}
// Get a prediction for the current video frame
function classifyVideo() {
flippedVideo = ml5.flipImage(video)
classifier.classify(flippedVideo, gotResult);
flippedVideo.remove();
}
// When we get a result
function gotResult(error, results) {
// If there is an error
if(label == "Azul"){
document.body.style.backgroundColor = 'blue';
}
else{
document.body.style.backgroundColor = 'yellow';
}
if (error) {
console.error(error);
return;
}
// The results are in an array ordered by confidence.
// console.log(results[0]);
label = results[0].label;
// Classifiy again!
classifyVideo();
}
I import my model from the Teachable machine page, and I don't know how to remove the default canvas, because if I simply remove it I can't capture the data it returns. Is there any way to make it transparent? Thank you very much.
The model is downloaded machine with the p5.js option
I try to make the canvas transparent, but I didn't get it
You're currently drawing into the default canvas:
background(0);
// Draw the video
image(flippedVideo, 0, 0);
// Draw the label
fill(255);
textSize(16);
textAlign(CENTER);
text(label, width / 2, height - 4);
background(0); means clear the previously drawn pixels by making them all opaque blackimage(flippedVideo, 0, 0); will render the webcam image on top (hiding a large portion of the background)text(label, width / 2, height - 4); will render the label on top of the background.If you don't want to display the webcam image simply don't render it:
background(0);
// Draw the label
fill(255);
textSize(16);
textAlign(CENTER);
text(label, width / 2, height - 4);
(you don't need flippedVideo.remove(); in this case).
If you want to mostly display the text label, instead of background(), but want a black background for the text, you can use a rect() that has roughly the dimensions of the text.
You can do this with rectMode(CENTER); (which will help with the center aligned text):
// Classifier Variable
let classifier;
// Model URL
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/x-zsz-E9i/';
// Video
let video;
let flippedVideo;
// To store the classification
let label = "";
// Load the model first
function preload() {
classifier = ml5.imageClassifier(imageModelURL + 'model.json');
}
function setup() {
createCanvas(320, 260);
// draw rectangles from center
rectMode(CENTER);
// Create the video
video = createCapture(VIDEO);
video.size(320, 240);
video.hide();
flippedVideo = ml5.flipImage(video);
// Start classifying
classifyVideo();
}
function draw() {
// Draw the label background rect
let margin = 3;
fill(0)
rect(width / 2, height - 5, 70, 25);
// Draw the label
fill(255);
textSize(16);
textAlign(CENTER);
text(label, width / 2, height - 4);
}
// Get a prediction for the current video frame
function classifyVideo() {
flippedVideo = ml5.flipImage(video)
classifier.classify(flippedVideo, gotResult);
}
// When we get a result
function gotResult(error, results) {
// If there is an error
if(label == "Azul"){
document.body.style.backgroundColor = 'blue';
}
else{
document.body.style.backgroundColor = 'yellow';
}
if (error) {
console.error(error);
return;
}
// The results are in an array ordered by confidence.
// console.log(results[0]);
label = results[0].label;
// Classifiy again!
classifyVideo();
}
function draw() {
let margin = 3;
fill(0);
rect(width, height - 0, 0, 0);
}
I changed this in the draw function and finally the entire canvas was gone.