Final Project Draft 1

My aim in this project was to try and make a game that allows the player to help sell pie.

Using the serial connectios the player should be able to use the potentiometer in order to get the wanted order. When one is chosen they press a button to confirm the choice.

The game goes for 2.5 minuts and the player must complete as many orders as possible.

 

So far I have this

P5.js sketch:

let x = 0;

let backgroundImage;
let rawImage, undercookedImage, perfectImage, overcookedImage, burntImage;

function preload() {
  // Load background image only for now
  backgroundImage = loadImage('Background.jpg');
}

function loadFoodImages() {
  // Load images after the serial connection starts
  rawImage = loadImage('raw.jpg');
  undercookedImage = loadImage('undercooked.jpg');
  perfectImage = loadImage('perfect.jpg');
  overcookedImage = loadImage('overcooked.jpg');
  burntImage = loadImage('burnt.jpg');
}

function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  // Display background image
  image(backgroundImage, 0, 0, width, height);

  // Display image based on the value of x
  displayFoodImage();
  
  // Display serial connection status
  fill(0);
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
}

function displayFoodImage() {
  // Define the ranges for each image
  const rawRange = [0, 200];
  const undercookedRange = [201, 400];
  const perfectRange = [401, 600];
  const overcookedRange = [601, 800];
  const burntRange = [801, 1023];

  // Map x to the corresponding image based on the ranges
  let currentImage;
  if (x >= rawRange[0] && x <= rawRange[1]) {
    currentImage = rawImage;
  } else if (x >= undercookedRange[0] && x <= undercookedRange[1]) {
    currentImage = undercookedImage;
  } else if (x >= perfectRange[0] && x <= perfectRange[1]) {
    currentImage = perfectImage;
  } else if (x >= overcookedRange[0] && x <= overcookedRange[1]) {
    currentImage = overcookedImage;
  } else if (x >= burntRange[0] && x <= burntRange[1]) {
    currentImage = burntImage;
  }

  // Display the current image
  if (currentImage) {  // Check if the image is defined
    image(currentImage, width / 2 - 50, height / 2 - 50, 100, 100);
  }
}

function keyPressed() {
  if (key == " ") {
    // Important to have in order to start the serial connection!!
    setUpSerial();
  }
}

// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  // READ FROM ARDUINO HERE
  ////////////////////////////////////
  if (data != null) {
    x = int(trim(data));
    
    // Load images only when the serial connection starts
    if (serialActive) {
      loadFoodImages();
    }
  }
}

 

Arduino sketch:

int sensorPin = A0;  
int sensorValue;

void setup() {
  Serial.begin(9600);
}

void loop() {
  // Read the sensor value
  sensorValue = analogRead(sensorPin);

  // Print the sensor value to the serial port
  Serial.println(sensorValue);

  delay(100);  
}

 

Circuit:

My potineometer works just fine. I still need to

-Display the required image according the the divided readings of the potineometer

-work on the button as a submitted answer

-figure out how to add timer and end results (maybe a leadboard)

-add sounds

-Finalize Instructions