let portButton;

let ultrasonicState = "No";

let pressureState = "No detect";

let isConnected = false;

let gradientColor;

let lastPressureTime = 0;

const pressureTimeout = 100; 

let floatingCircles = [];

​

function setup() {

  createCanvas(1000, 1000);

​

  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();

​

  gradientColor = createGraphics(width, height);

  createGradient();

  createFloatingCircles();

}

​

function draw() {

  background(220);

  // Determine slider position based on sensor input

  let sliderPosition = width * 0.25; // Default to neutral

​

  if (pressureState === "detect" && millis() - lastPressureTime < pressureTimeout) {

    sliderPosition = width * 0.9; // Very happy for pressure sensor

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

    sliderPosition = width * 0.7; // Less happy for ultrasonic sensor

  }

​

  // Draw the emotion slider

  drawEmotionSlider(sliderPosition);

​

  // Display status text

  fill(0);

  textSize(16);

  textAlign(LEFT, TOP);

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

  text(`Pressure: ${pressureState}`, 10, 30);

  text(`Connection Status: ${isConnected ? "Connected" : "Disconnected"}`, 10, 50);

}

​

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 = 80; // Increase the size of the icons

​

  if (position > width * 0.8) {

    fill(0, 255, 0); // Green for very happy

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

    fill(0); 

    ellipse(position - 65, height / 2 - 15, 15, 15); 

    ellipse(position - 35, height / 2 - 15, 15, 15);

    arc(position - 50, height / 2 + 20, 40, 20, radians(0), radians(180)); 

   } else if (position > width * .6) {

    fill(173,255,47); // Light green for happy

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

    fill(0); 

    ellipse(position -65 , height /2 -15 ,15 ,15); 

    ellipse(position -35 , height /2 -15 ,15 ,15); 

    arc(position-50,height/2+20 ,40 ,20,radians(0),radians(180)); 

​

   } else if (position > width * .4) {

    fill(255,255,0); // Yellow for neutral

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

    fill(0); 

    ellipse(position-65,height/2-15 ,15 ,15); 

    ellipse(position-35,height/2-15 ,15 ,15); 

   } else if (position > width * .2) {

    fill(255,165,0); // Orange for less happy

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

    fill(0); 

    ellipse(position-65,height/2-15 ,15 ,15); 

    ellipse(position-35,height/2-15 ,15 ,15); 

    line(position-60,height/2+20 ,position-40,height/2+20); 

​

   } else {

    fill(255,69,0); // Red for unhappy

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

    fill(0); 

    ellipse(position-65,height/2-15 ,15 ,15); 

    ellipse(position-35,height/2-15 ,15 ,15);

    arc(position -50,height/2+30 ,40 ,-20,radians(180),radians(360));  

   }

}

function serialEvent() {

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

  if (stringFromSerial) {

    stringFromSerial = stringFromSerial.trim();

    if (stringFromSerial === "Yes") {

      ultrasonicState = "Yes";

    } else if (stringFromSerial === "No") {

      ultrasonicState = "No";

    } else if (stringFromSerial === "detect") {

      pressureState = "detect";

      lastPressureTime = millis();

    } else if (stringFromSerial === "No detect") {

      pressureState = "No detect";

    }

  }

}

​

function createGradient() {

  gradientColor.background(220);

  // Define pastel colors

  let colors = [

    color(255, 182, 193), // Light pink

    color(173, 216, 230), // Light blue

    color(255, 255, 224)  // Light yellow

  ];

  // Create smooth gradient

  for (let y = 0; y < height; y++) {

    let inter = map(y, 0, height, 0, colors.length - 1);

    let colorIndex = floor(inter);

    let amt = inter - colorIndex;

    let c = lerpColor(colors[colorIndex], colors[(colorIndex + 1) % colors.length], amt);

    gradientColor.stroke(c);

    gradientColor.line(0, y, width, y);

  }

}

​

function createFloatingCircles() {

  let colors = [

    color(255, 182, 193, 100), // Light pink

    color(173, 216, 230, 100), // Light blue

    color(255, 255, 224, 100)  // Light yellow

  ];

​

  for (let i = 0; i < 50; i++) {

    floatingCircles.push({

      x: random(width),

      y: random(height),

      size: random(10, 30),

      color: colors[floor(random(colors.length))],

      speedX: random(-0.2, 0.2),

      speedY: random(-0.2, 0.2)

    });

  }

}

​

function updateAndDrawFloatingCircles() {

  for (let circle of floatingCircles) {

    // Update position

    circle.x += circle.speedX;

    circle.y += circle.speedY;

​

    // Wrap around screen

    if (circle.x < 0) circle.x = width;

    if (circle.x > width) circle.x = 0;

    if (circle.y < 0) circle.y = height;

    if (circle.y > height) circle.y = 0;

​

    // Draw circle

    noStroke();

    fill(circle.color);

    ellipse(circle.x, circle.y, circle.size);

  }

}

​

function makePortButton() {

  portButton = createButton("choose port");

  portButton.position(10, height - 30);

  portButton.mousePressed(choosePort);

  isConnected = false;

}

​

function choosePort() {

  serial.requestPort();

}

​

function openPort() {

  serial.open().then(initiateSerial);

​

  function initiateSerial() {

    console.log("port open");

    isConnected = true;

    //if (portButton) portButton.hide();

  }

}

​

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;

}

​