p5.js Web Editor | RUJUL FINAL FULL SCREEN

xxxxxxxxxx
let dir = 0;
let robotX, robotY;
let img1, title, speakImg;
let speechRec;
​
​
function preload() {
  img1 = loadImage("img.png");
  title = loadImage("title.png");
  speakImg = loadImage("speak.png");
}
​
function setup() {
  createCanvas(windowWidth, windowHeight); 
​
  robotX = width * 0.5667*3-90; // Adjusted X position proportionally
  robotY = (height-100); // Adjusted Y position proportionally
​
  let lang = navigator.language || "en-US";
  speechRec = new p5.SpeechRec(lang, gotSpeech);
  let speech = new p5.Speech();
  speech.onEnd = () => {
    isSpeaking = false;
    let continuous = true;
    let interim = false;
    speechRec.start(continuous, interim);
  };
  isSpeaking = true;
  speech.speak('Hi there!,This is your walking buddy. Join me to explore the world on foot. Use the commands Right, Left, Forward, Backward and Stop to navigate the directions. Finally, remember to stop when you hear the siren.');
​
  function gotSpeech() {
    if (speechRec.resultValue) {
      createP(speechRec.resultString);
​
      if (speechRec.resultString.toLowerCase().includes("right")) {
        dir = 1;
      } else if (speechRec.resultString.toLowerCase().includes("left")) {
        dir = 2;
      } else if (speechRec.resultString.toLowerCase().includes("forward")) {
        dir = 3;
      } else if (speechRec.resultString.toLowerCase().includes("backward")) {
        dir = 4;
      } else if (speechRec.resultString.toLowerCase().includes("stop")) {
        dir = 0;
      }
    }
  }
}
​
function draw() {
  stroke(0);
  background("rgb(244,227,68)");
​
  // Adjusted image positions and sizes proportionally
  image(img1, width * 0.05, height * 0.35, width * 0.2833, height * 0.65);
  image(title, width * 0.04, height * 0.05, width * 0.5, height * 0.45);
​
  fill(111,186,241);
  rect(width * 0.5667, height * 0.1, width * 0.4, height * 0.775); // Adjusted rectangle size proportionally
​
  fill(0);
  ellipse(robotX, robotY, 30, 30);
  fill(255);
  textSize(25);
​
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", width * 0.6, height * 0.95);
  } else {
    text("Connected", width * 0.5667, height * 0.95);
  }
​
  if (dir == 1) {
    stroke(255, 0, 0); // Red stroke for right
  } else if (dir == 2) {
    stroke(0, 255, 0); // Green stroke for left
  } else if (dir == 3) {
    stroke(0, 0, 255); // Blue stroke for forward
  } else if (dir == 4) {
    stroke(255, 255, 0); // Yellow stroke for backward
  } else {
    noStroke(); // No stroke for stop
  }
​
  noFill();
  strokeWeight(2);
  ellipse(robotX, robotY, 40, 40);
//rect(width * 0.5667, height * 0.1, width * 0.4, height * 0.775);
  if (dir == 1 && robotX < width * 0.5667 + width * 0.4 -50) {
    robotX += 1;
  } else if (dir == 2 && robotX > width * 0.5667+50) {
    robotX -= 1;
  } else if (dir == 3 && robotY > height * 0.1+50) {
    robotY -= 1;
  } else if (dir == 4 && robotY < height * 0.1+ height * 0.775-50) {
    robotY += 1;
  }
​
  if (isSpeaking) {
    image(speakImg, width * 0.3, height * 0.525, width * 0.1667, height * 0.175);
  }
}
​
function keyPressed() {
  if (key == " ") {
    setUpSerial();
  }
}
​
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////
​
  if (data != null) {
    let fromArduino = split(trim(data), ",");
    if (fromArduino.length == 1) {
      console.log(fromArduino[0]);
    }
​
    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
​
    console.log(dir);
    let sendToArduino = dir + "\n";
    writeSerial(sendToArduino);
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
​
function keyTyped() {
  // $$$ For some reason on Chrome/Mac you may have to press f twice to toggle. Works correctly on Firefox/Mac
  if (key === 'f') {
    toggleFullscreen();
  }
  // uncomment to prevent any default behavior
  // return false;
}
​
// Toggle fullscreen state. Must be called in response
// to a user event (i.e. keyboard, mouse click)
function toggleFullscreen() {
  let fs = fullscreen(); // Get the current state
  fullscreen(!fs); // Flip it!
}
​
Cookies

Sketch Files

Console

Preview
