Issue to add particle system to my facemesh

[Ganzi1995]

Dear ml5 community,

I'm submitting a new issue. Please see the details below.

→ Step 1: Describe the issue 📝

Did you find a bug? Want to suggest an idea for feature?

I am new to P5js and I am trying to understand why I can not let the particle system move simultaniosly with my facemesh.

→ Step 2: Screenshots or Relevant Documentation 🖼

Here's some helpful screenshots and/or documentation of the new feature

→ Step 3: Share an example of the issue 🦄

Here's some example code or a demonstration of my feature in this issue, separate GitHub repo, or in the https://editor.p5js.org or codepen/jsfiddle/Glitch/etc...

let facemesh;
let video;
let predictions = [];
let emitter;
let particle;

function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.size(width, height);
emitter = new Emitter(width / 2, height / 2);

facemesh = ml5.facemesh(video, modelReady);

// This sets up an event that fills the global variable "predictions"
// with an array every time new predictions are made
facemesh.on("predict", results => {
predictions = results;
});

// Hide the video element, and just show the canvas
video.hide();
}

function modelReady() {
console.log("Model ready!");
}

function draw() {
//image(video, 0, 0, width, height);
drawSelectKeypoints()
emitter.show();
emitter.update();
blendMode(ADD);

}

function drawSelectKeypoints() {
for (let i = 0; i < predictions.length; i += 1) {

//for (let i = 0; i < predictions.length; i += 1) {
//const keypoints = predictions[i].scaledMesh;

if (random (1) < 1){
    emitter.updatePosition (mouseX, mouseY) //(leftInnerEyeX,leftInnerEyeY);
  emitter.emit(0.1)
  }   
  
const keypoints = predictions[i].scaledMesh;

// an arbitrary selection of keypoints, using their indices in the array
// for detailed diagram of array indices, see:
// https://raw.githubusercontent.com/tensorflow/tfjs-models/master/face-landmarks-detection/mesh_map.jpg

// corners of left eye
const [leftInnerEyeX, leftInnerEyeY] = keypoints[362];
const [leftOuterEyeX, leftOuterEyeY] = keypoints[263];
ellipse(leftInnerEyeX, leftInnerEyeY, 5, );
ellipse(leftOuterEyeX, leftOuterEyeY, 5);

// corners of right eye
const [rightInnerEyeX, rightInnerEyeY] = keypoints[133];
const [rightOuterEyeX, rightOuterEyeY] = keypoints[33];
ellipse(rightInnerEyeX, rightInnerEyeY, 5);
ellipse(rightOuterEyeX, rightOuterEyeY, 5);

// tip of nose
const [noseX, noseY] = keypoints[4];
ellipse(noseX, noseY, 5);

// corners of mouth
const [rightMouthX, rightMouthY] = keypoints[78];
const [leftMouthX, leftMouthY] = keypoints[308];
ellipse(leftMouthX, leftMouthY, 5);
ellipse(rightMouthX, rightMouthY, 5);

}
}

Other relevant information, if applicable

→ Describe your setup 🦄

Here's some helpful information about my setup...

• Web browser & version:
• Operating System:
• ml5 version you're using:
• Any additional notes

[sproutleaf]

Hi @Ganzi1995 ,

Thank you for opening an issue with us! I'm wondering if this is happening because of something that has to do with the emitter class?

Could you link the p5.js sketch you're using so that I can debug in a more comprehensive way? Thank you!

Miaoye