let portButton;

let ultrasonicState = "No";

let pressureState1 = "No detect1";

let pressureState2 = "No detect2";

let isConnected = false;

let sliderPosition;

let flyingEmojis = [];

​

function setup() {

  createCanvas(700, 700);

​

  if (!("serial" in navigator)) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

    return;

  }

​

  serial = new p5.WebSerial();

​

  serial.getPorts();

  serial.on("noport", makePortButton);

  serial.on("portavailable", openPort);

  serial.on("requesterror", portError);

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

​

  makePortButton();

​

  // Initialize slider position to angry (left side)

  sliderPosition = width * 0.1;

}

​

function draw() {

  background(0); // Black background

​

  // Slider position and manage emojis based on sensor input

  if (pressureState2 === "detect2") {

    sliderPosition = lerp(sliderPosition, width * 0.9, 0.1); // Very happy for pressure sensor 2

    manageFlyingEmojis("veryHappy");

  } else if (pressureState1 === "detect1") {

    sliderPosition = lerp(sliderPosition, width * 0.7, 0.1); // Happy for pressure sensor 1

    manageFlyingEmojis("happy");

  } else if (ultrasonicState === "Yes") {

    sliderPosition = lerp(sliderPosition, width * 0.5, 0.1); // welcome for ultrasonic sensor

    manageFlyingEmojis("neutral");

  } else {

    sliderPosition = lerp(sliderPosition, width * 0.1, 0.1); // Angry when no input

    manageFlyingEmojis("angry");

  }

​

  // Flying emoji

  for (let i = flyingEmojis.length - 1; i >= 0; i--) {

    flyingEmojis[i].update();

    flyingEmojis[i].draw();

    if (flyingEmojis[i].isOffscreen()) {

      flyingEmojis.splice(i, 1);

    }

  }

​

  //emotion slider

  drawEmotionSlider(sliderPosition);

​

  // Display status text

  fill(86, 86, 87); // Grey Text

  textSize(16);

  textAlign(LEFT, BOTTOM);

  text(`Ultrasonic: ${ultrasonicState}`, 10, height - 70);

  text(`Pressure 1: ${pressureState1}`, 10, height - 50);

  text(`Pressure 2: ${pressureState2}`, 10, height - 30);

  text(

    `Connection Status: ${isConnected ? "Connected" : "Disconnected"}`,

    10,

    height - 10

  );

}

​

function manageFlyingEmojis(emotion) {

  // Clear emojis that don't match the current emotion

  flyingEmojis = flyingEmojis.filter((emoji) => emoji.emotion === emotion);

​

  // Add new emoji with 10% chance each frame

  if (random(1) < 0.1) {

    flyingEmojis.push(new FlyingEmoji(emotion));

  }

}

​

class FlyingEmoji {

  constructor(emotion) {

    this.x = random(width);

    this.y = height + 50;

    this.size = random(20, 40); // Smaller size range

    this.speed = random(1, 3);

    this.emotion = emotion;

  }

​

  update() {

    this.y -= this.speed;

  }

​

  draw() {

    switch (this.emotion) {

      case "veryHappy":

        drawGlowingEmoji(this.x, this.y, this.size, color(0, 255, 0), 12, 0.6);

        break;

      case "happy":

        drawGlowingEmoji(

          this.x,

          this.y,

          this.size,

          color(173, 255, 47),

          6,

          0.4

        );

        break;

      case "neutral":

        drawGlowingEmoji(this.x, this.y, this.size, color(255, 255, 0), 3, 0.3);

        break;

      case "angry":

        drawAngryFace(this.x, this.y, this.size);

        break;

    }

  }

​

  isOffscreen() {

    return this.y < -this.size;

  }

}

​

function drawGlowingEmoji(x, y, size, col, glowStrength, glowOpacity) {

  // Draw glow

  noFill();

  for (let i = glowStrength; i > 0; i--) {

    stroke(

      col.levels[0],

      col.levels[1],

      col.levels[2],

      255 * glowOpacity * (i / glowStrength)

    );

    strokeWeight(2);

    ellipse(x, y, size + i * 4, size + i * 4);

  }

​

  // Draw main emoji

  noStroke();

  fill(col);

  ellipse(x, y, size, size);

​

  // Draw face features

  fill(0);

  let eyeSize = size * 0.15;

  let mouthWidth = size * 0.4;

  let mouthHeight = size * 0.2;

​

  // Eyes

  ellipse(x - size * 0.2, y - size * 0.1, eyeSize, eyeSize);

  ellipse(x + size * 0.2, y - size * 0.1, eyeSize, eyeSize);

​

  // Mouth

  if (col.levels[1] > 200) {

    // For very happy and happy

    arc(x, y + size * 0.2, mouthWidth, mouthHeight, 0, PI);

  } else {

    // For neutral

    // Draw lips

    arc(x, y + size * 0.2, mouthWidth, mouthHeight * 0.5, 0, PI);

    arc(x, y + size * 0.2, mouthWidth, mouthHeight * 0.5, PI, TWO_PI);

  }

}

​

function drawAngryFace(x, y, size) {

  fill(255, 0, 0);

  ellipse(x, y, size, size);

  fill(0);

  ellipse(x - size * 0.2, y - size * 0.1, size * 0.15, size * 0.15);

  ellipse(x + size * 0.2, y - size * 0.1, size * 0.15, size * 0.15);

  arc(x, y + size * 0.3, size * 0.4, size * 0.2, PI, TWO_PI);

}

​

function drawEmotionSlider(position) {

  // Draw the slider bar

  strokeWeight(10);

  stroke(150);

  line(50, height / 2, width - 50, height / 2);

​

  // Draw the current emotion indicator

  noStroke();

​

  let iconSize = 70; // Smaller icon size for the slider

​

  if (position > width * 0.8) {

    // Very happy (pressure sensor 2)

    drawGlowingEmoji(position, height / 2, iconSize, color(0, 255, 0), 12, 0.6);

  } else if (position > width * 0.6) {

    // Happy (pressure sensor 1)

    drawGlowingEmoji(

      position,

      height / 2,

      iconSize,

      color(173, 255, 47),

      6,

      0.4

    );

  } else if (position > width * 0.4) {

    // Neutral (ultrasonic sensor)

    drawGlowingEmoji(

      position,

      height / 2,

      iconSize,

      color(255, 255, 0),

      3,

      0.3

    );

  } else if (position > width * 0.2) {

    // Sad

    fill(255, 165, 0);

    ellipse(position, height / 2, iconSize, iconSize);

    drawFace(position, height / 2, iconSize, "sad");

  } else {

    // Angry

    fill(255, 0, 0);

    ellipse(position, height / 2, iconSize, iconSize);

    drawFace(position, height / 2, iconSize, "angry");

  }

}

​

function drawFace(x, y, size, emotion) {

  fill(0);

  let eyeSize = size * 0.15;

  let mouthWidth = size * 0.4;

  let mouthHeight = size * 0.2;

​

  // Eyes

  ellipse(x - size * 0.2, y - size * 0.1, eyeSize, eyeSize);

  ellipse(x + size * 0.2, y - size * 0.1, eyeSize, eyeSize);

​

  // Mouth

  switch (emotion) {

    case "sad":

    case "angry":

      arc(x, y + size * 0.3, mouthWidth, mouthHeight, PI, TWO_PI);

      break;

  }

}

​

function serialEvent() {

  let stringFromSerial = serial.readStringUntil("\n");

  if (stringFromSerial) {

    stringFromSerial = stringFromSerial.trim();

    if (stringFromSerial === "Yes" || stringFromSerial === "No") {

      ultrasonicState = stringFromSerial;

    } else if (

      stringFromSerial === "detect1" ||

      stringFromSerial === "No detect1"

    ) {

      pressureState1 = stringFromSerial;

    } else if (

      stringFromSerial === "detect2" ||

      stringFromSerial === "No detect2"

    ) {

      pressureState2 = stringFromSerial;

    }

  }

}

​

function makePortButton() {

  portButton = createButton("Choose Port");

  portButton.position(width - 100, height - 30); // Positioned at the right bottom

  portButton.mousePressed(choosePort);

  isConnected = false;

}

​

function choosePort() {

  serial.requestPort();

}

​

function openPort() {

  serial.open().then(initiateSerial);

​

  function initiateSerial() {

    console.log("port open");

    isConnected = true;

  }

}

​

function portError(err) {

  console.error("Serial port error: " + err);

  isConnected = false;

}

​

function portConnect() {

  console.log("port connected");

  serial.getPorts();

  isConnected = true;

}

​

function portDisconnect() {

  console.log("port disconnected");

  serial.close();

  isConnected = false;

  makePortButton();

}

​

function closePort() {

  serial.close();

  isConnected = false;

}

​