event.preventDefault();

  event.stopPropagation();

  return false;

};

​

let textUrl="https://bd32ace9.ngrok.io/receive/"

let Http = new XMLHttpRequest();

let oldResponses = "";

​

let eyeDistX;

let eyeDistY;

let eyeWidth;

​

let eyeSize;

let mouthSize;

​

let mode=1;

​

let toSpeech;

let triggerSpeech = false;

​

let message;

​

let input;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  eyeDistX = width / 8;

  eyeDistY = height / 6;

  eyeWidth = width / 5;

​

  mouthDistY = height / 3;

  mouthWidth = width / 8;

​

  eyeSize = width / 10;

​

  mouthSize = width / 3;

​

  toSpeech = new p5.Speech();

  toSpeech.onEnded = speechEnded;

​

  input = new p5.AudioIn();

  input.start();

​

​

  document.querySelector('body').addEventListener('click', function() {

    getAudioContext().resume().then(() => {

      console.log('Playback resumed successfully');

    });

  });

​

  if (typeof DeviceOrientationEvent.requestPermission === 'function') {

    document.body.addEventListener('click', function() {

      getAudioContext().resume();

    });

  }

​

}

​

function speechEnded() {

  triggerSpeech = false;

}

​

function draw() {

  background(218, 208, 255);

​

  let level = input.getLevel();

​

​

  strokeWeight(20);

  if (mode == 0) {

​

    line(width / 2 - eyeDistX, height / 2 - eyeDistY, width / 2 - eyeDistX - eyeWidth, height / 2 - eyeDistY);

    line(width / 2 + eyeDistX, height / 2 - eyeDistY, width / 2 + eyeDistX + eyeWidth, height / 2 - eyeDistY);

    line(width / 2 - mouthWidth, height - mouthDistY* 1.4, width / 2 + mouthWidth, height - mouthDistY);

  } else if (mode == 1) {

    fill(0);

    ellipse(width / 2 - eyeDistX - eyeWidth / 2, height / 2 - eyeDistY, eyeSize, eyeSize);

    ellipse(width / 2 + eyeDistX + eyeWidth / 2, height / 2 - eyeDistY, eyeSize, eyeSize);

​

    let mappedSize = int(map(level, 0, 0.6, 30, 400));

    // print(mappedSize);

    ellipse(width / 2, height - mouthDistY* 1.4, mouthSize, mappedSize);

  } else if (mode == 2) {

    fill(0);

​

    ellipse(width / 2 - eyeDistX - eyeWidth / 2, height / 2 - eyeDistY, eyeSize, eyeSize);

    ellipse(width / 2 + eyeDistX + eyeWidth / 2, height / 2 - eyeDistY, eyeSize, eyeSize);

​

    noFill();

    arc(width / 2, height - mouthDistY * 1.6, mouthSize, mouthSize, PI / 8, PI - PI / 8);

  }

​

  if (triggerSpeech) {

    toSpeech.speak(message);

​

    if (toSpeech.onEnded) {

      triggerSpeech = false;

      //print("stop");

    }

  }

​

​

​

}

​

function keyPressed() {

​

  if (key == "0") {

    mode = 0;

  }

​

  if (key == "1") {

    mode = 1;

  }

​

  if (key == "2") {

    mode = 2;

  }

​

  if (key == " ") {

  }

}

​

checkNewText = () => {

​

  Http.open("GET", textUrl, true);

  Http.send();

​

  Http.onload = function (e) {

   if (Http.readyState === 4) {

    if (Http.status === 200) {

      if (Http.responseText !== oldResponses){

        console.log(Http.responseText);  

        oldResponses = Http.responseText;

        triggerSpeech = true;

        message = oldResponses;

        mode=1;

      } else {

        console.log('no new message');

        mode = 2;

​

        }

​

    } else {

      console.error(Http.statusText);

    }

  }

};

​

setTimeout(checkNewText, 1000);

​

}

​

checkNewText();

​

​