缩短 p5.js 中“else if”语句中的代码

Question

我想将面罩代码嵌入到“else if”语句中，这样我就不必打开新的 html 页面。 这是我想在“else if”中嵌入代码的代码。

说明：相机开启，按钮在移动。当用户单击按钮时，新页面打开并转到面罩。但我的意图是通过在 else if 语句中嵌入面罩代码，在同一页面打开面罩。

let myButton1, myButton2, myButton3, myButton4;
    let feeling = -1;
    let ball1 = {
      x: 300,
      y: 100,
      xspeed: 2.7,
      yspeed: 2.7
    };
    
    let ball2 = {
      x: 100,
      y: 200,
      xspeed: 2.7,
      yspeed: -2.7
    };
    
    let ball3 = {
      x: 200,
      y: 300,
      xspeed: -2.7,
      yspeed: -2.7
    }; 

    let ball4 = {
      x: 150,
      y: 150,
      xspeed: -2.7,
      yspeed: 2.7
    }; 

    let video;
    
    function setup() {
      createCanvas(1200, 900);
      textFont("Playfair Display");
      //happiness
      myButton1 = createButton("happiness");
      myButton1.style("background-color", "#ff0096");
      myButton1.style("color", "#fff");
      myButton1.style("font-size", "18px");
      myButton1.style("font-family", "Playfair Display"); 
      myButton1.style('border-radius', '18px');
      myButton1.style("box-shadow", "10px -2px 16px #000");
      myButton1.style("mix-blend-mode", "darken");
      myButton1.style("border", "0");
      myButton1.size(110, 36);
      myButton1.position(width/3-myButton1.width/3, height/2-myButton1.height/3);
      myButton1.mousePressed(happiness);
      
      //anxiety
      myButton2 = createButton("anxiety");
      myButton2.style("background-color", "#8400B9");
      myButton2.style("color", "#fff");
      myButton2.style("font-size", "18px");
      myButton2.style("font-family", "Playfair Display"); 
      myButton2.style('border-radius', '18px');
      myButton2.style("box-shadow", "10px -2px 16px #000");
      myButton2.style("mix-blend-mode", "darken");
      myButton2.style("border", "0");
      myButton2.size(110, 36);
      myButton2.position(width/2-myButton2.width/2, height/2-myButton2.height/2);
      myButton2.mousePressed(anxiety);
      
      //anger
      myButton3 = createButton("anger");
      myButton3.style("background-color", "#FF1B1B");
      myButton3.style("color", "#fff");
      myButton3.style("font-size", "18px");
      myButton3.style("font-family", "Playfair Display"); 
      myButton3.style('border-radius', '18px');
      myButton3.style("box-shadow", "10px -2px 16px #000");
      myButton3.style("mix-blend-mode", "darken");
     
      myButton3.size(110, 36);
      myButton3.position(width-myButton3.width/2, height/2-myButton3.height/2);
      myButton3.mousePressed(anger);

      //depressed
      myButton4 = createButton("depressed");
      myButton4.style("background-color", "#000FFF");
      myButton4.style("color", "#fff");
      myButton4.style("font-size", "18px");
      myButton4.style("font-family", "Playfair Display"); 
      myButton4.style('border-radius', '18px');
      myButton4.style("box-shadow", "10px -2px 16px #000");
      myButton4.style("mix-blend-mode", "darken");
      myButton4.style("border", "0");
      myButton4.size(110, 36);
      myButton4.position(width-myButton4.width/2, height/2-myButton4.height/2);
      myButton4.mousePressed(depressed);

      //canvas size 
      createCanvas(1280, 960);
      video = createCapture({
      video: {
      width: 1280,
      height: 960
    }
  });

      video.hide();
    }

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { 
    fullscreen(true);
    
  }
}

// function windowResized() {
//   resizeCanvas(1200, 900);
//   // background(255);
// }

function modelReady() {
  console.log("Model ready!");
  // resizeCanvas(width, height);
}
    
    function draw() {
      
      background(0);
        moves(ball1);
        bounce(ball1, myButton1);
        display(myButton1, ball1); 
        
        moves(ball2);
        bounce(ball2, myButton2);
        display(myButton2, ball2);
        
        moves(ball3);
        bounce(ball3, myButton3);
        display(myButton3, ball3);

        moves(ball4);
        bounce(ball4, myButton4);
        display(myButton4, ball4);

      if(feeling == -1){
        
      }else if(feeling == 0){
        
      }else if(feeling == 1){
        
      }else if(feeling == 2){

      }else if(feeling == 3){
        
      }

      image(video, 0, 0, width, height);

      textAlign(CENTER, CENTER);
      fill(0, 0, 0, 150);
      textSize(32);
      text('How do you feel today?', width/2, 40);
    }
    
    function moves (ball, button) {
      ball.x += ball.xspeed;
      ball.y += ball.yspeed;
    }
    
    function bounce (ball, button) {
      if (ball.x > width - button.width || ball.x < 0) {
        ball.xspeed *= -1;
      }
      
      if (ball.y > height - button.height || ball.y < 0) {
        ball.yspeed *= -1;
      }
    }
    
    function display (button, ball) {
      button.position(ball.x, ball.y);
    }
    
    function happiness() {
      feeling = 0;
      //window.open('happiness.html',"_self","toolbar=no,scrollbars=no");
    }
    
    function anxiety() {
      feeling = 1 ;
      //window.open('anxiety.html',"_self");
    }
    
    function anger() {
      feeling = 2;
      //window.open('anger.html',"_self");
    }

    function depressed() {
      feeling = 3;
    //window.open('depressed.html',"_self");
    }

下面的代码是我要嵌入的代码

else if(feeling == 1){
        
      } 

声明。 如何编辑此代码以嵌入？

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

function setup() {
  createCanvas(1200, 900);
  video = createCapture({
    video: {
      width: 1200,
      height: 900
    }
  });
  
  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();

  const saveButton = createButton("save");
  saveButton.style("background-color", "#000");
  saveButton.style("color", "#fff");
  saveButton.style("font-size", "12px");
  saveButton.style('border-radius', '18px');
  saveButton.size(60, 24);
  saveButton.position(1280, 15);
  saveButton.mousePressed(saveImage);
}

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

function draw() {
  image(video, 0, 0, width, height);

  // We can call both functions to draw all keypoints
  drawKeypoints();
}

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    // Draw facial keypoints.
    for (let j = 0; j < keypoints.length; j += 1) {
      const [x, y] = keypoints[j];

      // Calculate the x and y positions of the wave
      const sinOffset = sin(frameCount / 10 + j) * 20;
      const endX = x + sinOffset;
      const endY = y + random(-15, 15);

      strokeWeight(5);
      stroke(0, 0, random(255));
      line(x, y, x + random(-40, 40), y);
    }
  }

}

if (buttonPressed === 'anxiety') {
  fill(255, 0, 0);
  textSize(32);
  text('You are feeling anxious today.', width/2, height/2);
}

function saveImage() {
  saveCanvas("anxiety", "jpg");
}