Shorten code in "else if" statement in p5.js

Question

I want to embed face mask code in to "else if" statement, so that I don't have to open a new html page. This is a code that I want to embed a code in the "else if".

Explanation : Camera is on, and the buttons are moving. When user clicks the button, new page opens and drives to face mask. But my intention is that face mask opens in the same page by embedding face mask code in the else if statement.

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

The code below is the the code that I want to embed in the

else if(feeling == 1){
        
      } 

statement. How can I edit this code to embed?

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