I have a code that activates an image and leaves it activated but i want to change to other images if the parameters are met. i want to activate one thing and deactivate the other if i say a certain word

My code: https://editor.p5js.org/perikleousd910/sketches/OI1glzfWS

let video;
let poseNet;
let pose;
let classifier;
let label = "listening";
let soundModelURL = "https://teachablemachine.withgoogle.com/models/xe3C8s4Co/model.json";
var flag = false;
var flag2 = false;
var flag3 = false;
let div = createDiv("div");

//var song = new Audio('sound/Itachi.mp3');

function preload() {
  img1 = loadImage("pics/Sharingan_Triple.png");
  img2 = loadImage("pics/Untitled-5.jpg");
  img3 = loadImage("pics/orochimaruright.png");
  img4 = loadImage("pics/orochimaruleft.png");
  //song = loadSound('sound/Itachi.mp3');
  classifier = ml5.soundClassifier(soundModelURL);
}

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded);
  poseNet.on("pose", gotPoses);
  classifier.classify(gotResult);
}

function gotPoses(poses) {
  if (poses.length > 0) {
    pose = poses[0].pose;
  }
}

function modelLoaded() {
  console.log("poseNet ready");
}

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

  if (flag === true || (pose && label == "HowMuchCanYouSee")) {
    flag = true;

    let eyeR = pose.rightEye;
    let eyeL = pose.leftEye;
    let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);

    //sharingan complete
    image(img1, pose.leftEye.x - d / 2, pose.leftEye.y - d / 2, d, d);
    image(img1, pose.rightEye.x - d / 2, pose.rightEye.y - d / 2, d, d);
  } else if (flag2 === true || (pose && label == "Orochimaru")) {
    flag2 = true;

    let eyeR = pose.rightEye;
    let eyeL = pose.leftEye;
    let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);

    image(img4, pose.leftEye.x - d / 1.53, pose.leftEye.y - d / 1.5, (d * 3) / 2, (d * 3) / 2);
    image(img3, pose.rightEye.x - d / 1.2, pose.rightEye.y - d / 1.5, (d * 3) / 2, (d * 3) / 2);
  }

  fill(255, 0, 0);
  textSize(24);
  textAlign(CENTER, CENTER);
  text(label, 118, 15);
}

function gotResult(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  label = results[0].label;
}

CodePudding user response：

If I understand you correctly, you might want something like this; the global variable shownImageSet is "held" to the last value if there is no pose and label.

There is no need for flag/flag2 variables.

// ... initialization code elided ...
let shownImageSet = 0;

function drawImages() {
  // Select image set based on pose   label
  if (pose) {
    if (label == "HowMuchCanYouSee") {
      shownImageSet = 1;
    }
    if (label == "Orochimaru") {
      shownImageSet = 2;
    }
  }

  if (shownImageSet) {
    // Need to show something?
    const eyeR = pose.rightEye;
    const eyeL = pose.leftEye;
    const d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);
    if (shownImageSet == 1) {
      image(img1, eyeL.x - d / 2, eyeL.y - d / 2, d, d);
      image(img1, eyeR.x - d / 2, eyeR.y - d / 2, d, d);
    } else if (shownImageSet == 2) {
      image(img4, eyeL.x - d / 1.53, eyeL.y - d / 1.5, (d * 3) / 2, (d * 3) / 2);
      image(img3, eyeR.x - d / 1.2, eyeR.y - d / 1.5, (d * 3) / 2, (d * 3) / 2);
    }
  }
}

function draw() {
  image(video, 0, 0);
  drawImages();
  fill(255, 0, 0);
  textSize(24);
  textAlign(CENTER, CENTER);
  text(label, 118, 15);
}