let speechRec;

let continuous = true;

let lang = navigator.language || 'en-US';

​

//Element UI Settings

let elementRecognition = "off";

let currentElement = "off";

let airBool = false;

let waterBool = false;

let earthBool = false;

let fireBool = false;

​

​

​

function preload() {

  AirSymbol = loadImage("Images/AirSymbol.jpg");

  WaterSymbol = loadImage("Images/WaterSymbol.jpg");

  EarthSymbol = loadImage("Images/EarthSymbol.jpg");

  FireSymbol = loadImage("Images/FireSymbol.jpg");

}

​

function setup() {

  createCanvas(640, 480)

  speechRec = new p5.SpeechRec(lang, gotSpeech);

  speechRec.start(continuous);

  FireSymbol.resize(width/4, FireSymbol.height/1.25);

  AirSymbol.resize(width/4, AirSymbol.height/1.25);

  WaterSymbol.resize(width/4, WaterSymbol.height/1.25);

  EarthSymbol.resize(width/4, EarthSymbol.height/1.25);

}

​

function draw() {

  background(220);

  text(elementRecognition, width/2, height/2);  

  ListenerForElements();

}

​

function gotSpeech() {

  if(speechRec.resultValue) {

    elementRecognition = speechRec.resultString.toLowerCase();

  }

}

​

function ListenerForElements() {  

  if(elementRecognition == "fire" && !fireBool) {

    console.log("Fire");

    currentElement = "fire";

    fireBool = true;

    airBool = false;

    waterBool = false;

    earthBool = false;

  }

  else if(elementRecognition == "air" && !airBool) {

    console.log("Air");

    currentElement = "air";

    fireBool = false;

    airBool = true;

    waterBool = false;

    earthBool = false;

  }

  else if(elementRecognition == "water" && !waterBool) {

    console.log("Water");

    currentElement = "water";

    fireBool = false;

    airBool = false;

    waterBool = true;

    earthBool = false;

  }

  else if(elementRecognition == "earth" && !earthBool) {

    console.log("Earth");

    currentElement = "earth";

    fireBool = false;

    airBool = false;

    waterBool = false;

    earthBool = true;

  }

  else if(elementRecognition == "off") {

    console.log("Off");

    currentElement = "off";

    fireBool = false;

    airBool = false;

    waterBool = false;

    earthBool = false;

  }

  HighlightImage(currentElement);

}

​

function HighlightImage(keyword) {

  const images = document.querySelectorAll('.elementContainer img');

​

  images.forEach((img) => {

    const altText = img.alt;

    if (altText.includes(keyword)) {

      img.classList.add('active');

    } 

    else {

      img.classList.remove('active');

    }

  });

}