javascript - Can anyone tell me how to create an array of images in p5.js using poseNet ml5.js?

Question

here is the code I have done but it comes up with an error about loading my image. I want to create an array of images for the eyes and eventually add a mousePressed function to go through the images. Im not sure if its to do with the way I set up the array or if its something to do with the path of my images but I have made sure they were uploaded onto the files correctly without errors.

let camera;
let poseNet;

let noseX = 0;
let noseY = 0;

let leftEyeX = 0;
let leftEyeY = 0;

let rightEyeX = 0;
let rightEyeY = 0;

let leftEarX = 0;
let leftEarY = 0;

let rightEarX = 0;
let rightEarY = 0;

let heart;
let heart2;
let nose;

let eyeImg = [];
let noseImg = [];
let earImg = [];

function preload(){
  
  let eyes = ["heart", "heart1", "heart2", "heart3", "heart4", "heart5", "heart6", "heart7"];
  
 for (var i = 0; i < 8; i++) {
   eyeImg[i] = loadImage("eyeImages/" + eyes[i] + ".png");
   
   
  
  
  
  //heart = loadImage("heart.png");
  //heart2 = loadImage("heart2.png");
  nose = loadImage("nose.png");
  
 
  
 }
   
}

function setup() {
  createCanvas(640, 480);
  
   //background(255, 10);
  camera = createCapture(VIDEO);
  camera.hide(); //created video element and hiden§ the second reflection
  
  poseNet = ml5.poseNet(camera, modelReady);
  
  poseNet.on('pose', gotPoses);
  

}

function gotPoses(poses) {
  console.log(poses);
  
  if(poses.length > 0){
  let nX = poses[0].pose.keypoints[0].position.x;
  let nY = poses[0].pose.keypoints[0].position.y;
    
  let leftEX = poses[0].pose.keypoints[1].position.x;
  let leftEY = poses[0].pose.keypoints[1].position.y;
    
  let rightEX = poses[0].pose.keypoints[2].position.x;
  let rightEY = poses[0].pose.keypoints[2].position.y;
    
  let learX = poses[0].pose.keypoints[3].position.x;
  let learY = poses[0].pose.keypoints[3].position.y;
    
  let RearX = poses[0].pose.keypoints[4].position.x;
  let RearY = poses[0].pose.keypoints[4].position.y;
    
    
    //lerp(val1, val2, num0-1) linear interpellation
    noseX = lerp(noseX, nX, 0.8);
    noseY = lerp(noseY, nY, 0.8);
    
    leftEyeX = lerp(leftEyeX, leftEX, 0.8);
    leftEyeY = lerp(leftEyeY, leftEY, 0.8);
    
    rightEyeX = lerp(rightEyeX, rightEX, 0.8);
    rightEyeY = lerp(rightEyeY, rightEY, 0.8);
    
    leftEarX = lerp(learX, leftEX, 0.8);
    leftEarY = lerp(learY, leftEY, 0.8);
    
    rightEarX = lerp(RearX, rightEX, 0.8);
    rightEarY = lerp(RearY, rightEY, 0.8);
    
    
}
}

function modelReady(){
 // console.log('model is ready');
}



function draw() {
  
  
  image(camera, 0, 0);
  
  //https://p5js.org/reference/#/p5/filter
  //filter(THRESHOLD, 0.4);
  
  console.log('ml5 version:', ml5.version); //check ml5 library is imported
  
  
  
  push();
  imageMode(CENTER);
  image(nose, noseX, noseY, 100, 100);
  pop();
  
  push();
  imageMode(CENTER);
  for (var i=0;i<eyes.length;i++){
    image(eyeImg[i], leftEyeX, leftEyeY, 55, 50);
    image(eyeImg[i], rightEyeX, rightEyeY, 55, 50);
  }
   pop();
  
//   push();
//   imageMode(CENTER);
//   image(eyeImg[i], leftEyeX, leftEyeY, 55, 50);
//   image(eyeImg[i], rightEyeX, rightEyeY, 55, 50);
//   pop();
  
  // fill(0, 0, 255);
  // noStroke();
  // ellipse(leftEyeX, leftEyeY, 20);
  // fill(0, 0, 255);
  // noStroke();
  // ellipse(rightEyeX, rightEyeY, 20);
  // fill(255, 0, 255);
  // noStroke();
  // ellipse(noseX, noseY, 30);
  


  
  
}

Answer 1

等待大神解答