xxxxxxxxxx
168
let handPose;
let myVideo;
let myResults;
let myParticles;
// variables for doodleNet via Webcam
let clearButton;
let guessButton;
let doodleNet;
let myCanvas;
let myResultP;
let video;
let indexHistory = [];
let indexX;
let indexY;
function setup() {
createCanvas(640, 480);
myVideo = createCapture(VIDEO);
myVideo.size(width, height);
myVideo.hide();
// DOM elements ----->
clearButton = createButton("Clear");
clearButton.position(0, 310);
clearButton.mousePressed(clearCanvas);
guessButton = createButton("Guess");
guessButton.position(50, 310);
guessButton.mousePressed(guessDoodle);
myResultP = createP("Click Guess");
myResultP.style("color", "white");
myResultP.style("font-size", "20px");
myResultP.position(100, 320);
// ------------->
handPose = ml5.handpose();
handPose.detectStart(myVideo, gotResults);
doodleNet = ml5.imageClassifier("DoodleNet", doodleModelLoaded);
}
function gotResults(results) {
// console.log(results);
myResults = results;
}
function doodleModelLoaded() {
console.log("ready");
}
function draw() {
image(myVideo, 0, 0, width, height);
if (myResults) {
drawFire();
}
}
function gotDoodleResult(res){
if (error) {
console.log(error);
}
if (res) {
console.log("Doodle Result!",res);
const allLabels = res.map((r) => r.label).join(",");
// myResultP.html(`${res[0].label}, with a confidence of ${(res[0].confidence * 100).toFixed(2)} %, ${allLabels}`)
myResultP.html(
res[0].label +
",with a confidence of" +
(res[0].confidence * 100).toFixed(2) +
"%," +
allLabels
);
}
}
function drawFire() {
const leftHand = myResults[0];
const rightHand = myResults[1];
if (!leftHand && !rightHand) {
return;
}
drawEmoji(leftHand);
drawEmoji(rightHand);
}
function drawEmoji(hand) {
if (!hand) return;
const thumb = hand.thumb_tip;
const index = hand.index_finger_tip;
const middle = hand.middle_finger_tip;
const ring = hand.ring_finger_tip;
const pinky = hand.pinky_finger_tip;
if (!myParticles) {
myParticles = new ParticleSystem(createVector(index.x, index.y));
} else {
myParticles.origin = createVector(index.x, index.y);
myParticles.addParticle();
myParticles.run();
}
}
// A simple Particle class
let Particle = function(position) {
this.acceleration = createVector(0, 0.05);
this.velocity = createVector(random(-1, 1), random(-1, 0));
this.position = position.copy();
this.lifespan = 255;
};
Particle.prototype.run = function() {
this.update();
this.display();
};
// Method to update position
Particle.prototype.update = function(){
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.lifespan -= 2;
};
// Method to display
Particle.prototype.display = function() {
stroke(255,127,80, this.lifespan);
strokeWeight(2);
fill(255, 0, 0, this.lifespan);
ellipse(this.position.x, this.position.y, 12, 12);
};
// Is the particle still useful?
Particle.prototype.isDead = function(){
return this.lifespan < 0;
};
let ParticleSystem = function(position) {
this.origin = position.copy();
this.particles = [];
};
ParticleSystem.prototype.addParticle = function() {
this.particles.push(new Particle(this.origin));
};
ParticleSystem.prototype.run = function() {
for (let i = this.particles.length-1; i >= 0; i--) {
let p = this.particles[i];
p.run();
if (p.isDead()) {
this.particles.splice(i, 1);
}
}
};