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);

    }

  }

};

​

​

​

​

​

​

​

​