P5.js Code:
let fsrVal = 0; // Force Sensitive Resistor Value
let smoothfsrVal = 0; // Global Variable to not have jitter for image
let backgroundImage; // Classroom Image
let teachImageHappy; // Play state teacher Image
let teachImageMad; // Win State teacher Image
let teachImageProud // Lose State teacher Image
let gameStarted = false; // Flag for Game Start
let gameOver = false; // Flag for Game Over
let gameWon = false; // Flag for Game won
let gameStartTime; // Variable for timer
let dogBarkSound; // Variable for Dog barking
let barkTimeout; // Variable for when the dog cannot bark
let lastBarkTime = 0; // Variable to hold when dog stopped barking
let winSound; // Variable to hold the win sound
let gameOverSound; // Variable to hold the game over sound
let winSoundPlayed = false; // Variable to track if win sound has been played
let gameOverSoundPlayed = false; // Variable to track if game over sound has been played
let gameMusic; // Variable to hold the game music sound
let gameMusicPlayed = false; // Variable to track if game music has been played
let showingInstructions = false; // Flag to track if we are currently showing instructions
// It is necessary to preload the images in
function preload() {
backgroundImage = loadImage('class.jpeg');
teachImageHappy = loadImage('teacher_woman_happy.png');
teachImageMad = loadImage('teacher_woman_mad.png');
teachImageProud = loadImage("teacher_woman_teaching.png")
dogBarkSound = loadSound('dog_bark.mp3');
winSound = loadSound('win.mp3');
gameOverSound = loadSound('gameover.mp3');
gameMusic = loadSound('gameMusic.mp3');
}
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
textSize(18);
// Serial Point button logic
const connectButton = createButton('Connect to Serial');
connectButton.position(width / 2 - connectButton.width / 2, height / 2 - connectButton.height / 2);
connectButton.mousePressed(setUpSerial);
// Play button logic
const playButton = createButton('Play');
playButton.position(width / 2 - playButton.width / 2-15, height / 2 - playButton.height / 2);
playButton.mousePressed(startGame);
playButton.hide();
styleButton(playButton);
// Instruction button logic
const instructionsButton = createButton('Instructions');
instructionsButton.position(width / 2 - instructionsButton.width / 2 -20, height / 2 +40);
instructionsButton.mousePressed(displayInstructions);
instructionsButton.hide();
styleButton(instructionsButton);
// Restart button logic
const restartButton = createButton('Restart Game');
restartButton.position(width / 2 - restartButton.width / 2 -25, height / 2 +15); // Positioned below the "Play" button
restartButton.mousePressed(restartGame);
restartButton.hide();
styleButton(restartButton);
// Main Menu button logic
const mainMenuButton = createButton('Main Menu');
mainMenuButton.position(width / 2 - mainMenuButton.width / 2 -25, height / 2 + 75);
mainMenuButton.mousePressed(goToMainMenu);
mainMenuButton.hide();
styleButton(mainMenuButton);
// Button branding for further use
window.connectButton = connectButton;
window.playButton = playButton;
window.instructionsButton = instructionsButton;
window.restartButton = restartButton;
window.mainMenuButton = mainMenuButton;
// Background game music was intially too loud
gameMusic.setVolume(0.035);
noLoop(); // Stop drawing until the game starts
}
// Buttons needed to be style
function styleButton(button) {
button.style('background-color', '#FFFFFF'); // White background
button.style('color', '#000000'); // Black text
button.style('border', '2px solid #000000'); // Black border
button.style('padding', '10px 20px'); // Larger padding for bigger size
button.style('font-size', '16px'); // Larger font size
button.style('cursor', 'pointer'); // Cursor pointer on hover
}
function draw() {
if (serialActive) {
// After connection I prefer the button to no longer be present
window.connectButton.hide();
if (showingInstructions) {
// Instruction state needed these buttons hidden
window.playButton.hide();
window.instructionsButton.hide();
} else {
window.playButton.show(); //If not in instruction state the play button can be shown
window.instructionsButton.show(); // And the instructions button can be shown
}
// button logic/visibility during/post-game
if (gameStarted && !gameOver && !gameWon) {
window.playButton.hide();
window.instructionsButton.hide();
updateGame();
} else if (gameOver) {
displayGameOver();
} else if (gameWon) {
displayGameWin();
}
} else {
displayClassCrashOutScreen();
}
}
function updateGame() {
// Tracking time logic (CHATGPT USED TO HELP SET THIS UP)
let elapsedTime = (millis() - gameStartTime) / 1000;
// Start playing game music when the game starts
if (!gameMusicPlayed && gameStarted) {
gameMusic.play();
gameMusic.loop(); // if game music ends early loop it
gameMusicPlayed = true; // Set the flag to true after playing the music
}
// Stop game music when the game ends
if ((gameOver || gameWon) && gameMusic.isPlaying()) {
gameMusic.stop();
}
// Check win condition (CHATGPT WAS USED)
if (fsrVal >= 250 && !gameWon) {
gameWon = true;
dogBarkSound.stop(); // Stop the dog bark sound if it's playing
winTime = elapsedTime; // Record the time taken to win
}
// Check game over condition (CHATGPT WAS USED)
if (elapsedTime >= 45) {
gameOver = true;
dogBarkSound.stop(); // Stop the dog bark sound if it's playing
return;
}
background(backgroundImage); // Set the loaded background image
displayGameElements(elapsedTime);
}
// Code credit to Professor AARON SHERWOOD (Thank you for your help professor)
function displayGameElements(elapsedTime) {
scaleFactor = 1;
smoothfsrVal += (fsrVal - smoothfsrVal) * 0.01;
push();
imageMode(CENTER);
let teachWidth = (teachImageHappy.width / 2) + smoothfsrVal * scaleFactor;
let teachHeight = (teachImageHappy.height / 2) + smoothfsrVal * scaleFactor;
image(teachImageHappy, width / 2, height / 2, teachWidth, teachHeight);
pop();
fill(255);
textStyle(BOLD)
stroke(0)
strokeWeight(4)
text("Connected", 90, 30);
text('Pages = ' + fsrVal, 100, 70 );
textSize(30);
text('Time: ' + elapsedTime.toFixed(2) + 's', width - 150, 30);
}
function displayGameOver() {
stopBarking();
background(backgroundImage);
fill(255);
textSize(27);
text("Game Over", width / 2, height / 2 - 45);
textSize(22);
text("Teacher's Pet :(", width / 2, height / 2 - 5);
//code to indicate which buttons to hide and show
window.restartButton.show();
window.playButton.hide();
window.mainMenuButton.show();
window.instructionsButton.hide();
// Teacher Image scaling and position
let scaledWidth = teachImageProud.width * 0.5;
let scaledHeight = teachImageProud.height * 0.5;
image(teachImageProud, width / 2 + 130, height / 2 - 125, scaledWidth, scaledHeight);
if (!gameOverSoundPlayed && !gameOverSound.isPlaying()) {
gameOverSound.play();
gameOverSoundPlayed = true;
}
if (gameMusic.isPlaying()) {
gameMusic.stop();
}
}
function displayGameWin() {
stopBarking();
background(backgroundImage);
fill(255);
textSize(27);
text("You Got Detention!!!", width / 2, height / 2 - 45);
textSize(22);
// Display the time taken to win
text("Time Taken: " + winTime.toFixed(2) + "s", width / 2, height / 2 - 5);
// Teacher Image scaling and position
let scaledWidth = teachImageMad.width * 0.5;
let scaledHeight = teachImageMad.height * 0.5;
image(teachImageMad, width / 2 + 130, height / 2 - 125, scaledWidth, scaledHeight);
//code to indicate which buttons to hide and show
window.restartButton.show();
window.playButton.hide();
window.mainMenuButton.show();
window.instructionsButton.hide()
if (!winSoundPlayed && !winSound.isPlaying()) {
winSound.play();
winSoundPlayed = true;
}
if (gameMusic.isPlaying()) {
gameMusic.stop();
}
}
function displayClassCrashOutScreen() {
background(backgroundImage);
fill(255);
stroke(0)
strokeWeight(4)
textStyle(BOLD)
textAlign(CENTER);
textSize(27)
text("CLASS CRASH OUT", width / 2, height / 2 - 35);
}
// Play Through Logic (CHATGPT WAS USED)
function startGame() {
gameStarted = true;
gameOver = false;
gameWon = false;
gameStartTime = millis();
gameMusicPlayed = false;
showingInstructions = false;
playDogBark();
}
function restartGame() {
gameStarted = true;
gameOver = false;
gameWon = false;
fsrVal = 0;
smoothfsrVal = 0;
gameStartTime = millis();
window.restartButton.hide();
window.mainMenuButton.hide();
stopBarking();
gameMusicPlayed = false;
winSoundPlayed = false;
gameOverSoundPlayed = false;
playDogBark();
loop();
}
function goToMainMenu() {
stopBarking();
gameStarted = false;
gameOver = false;
gameWon = false;
gameMusic.stop();
gameMusicPlayed = false;
winSoundPlayed = false;
gameOverSoundPlayed = false;
showingInstructions = false;
stopBarking();
loop();
//code to indicate which buttons to hide and show
window.restartButton.hide();
window.mainMenuButton.hide();
window.playButton.show();
window.connectButton.show();
background(backgroundImage);
fill(255);
textStyle(BOLD)
textAlign(CENTER);
textSize(27)
text("CLASS CRASH OUT", width / 2, height / 2 - 35);
}
function displayInstructions() {
background(backgroundImage);
fill(255);
textSize(27);
textAlign(CENTER, CENTER);
text("Your objective: Prank your friend", width / 2, height / 2 -75);
text("Time Limit: 45 seconds", width/2, height/2 -35)
text("Feed the dog 250 HW pages", width/2, height/2)
//code to indicate which buttons to hide and show
window.mainMenuButton.show();
window.playButton.hide();
window.instructionsButton.hide();
window.restartButton.hide();
showingInstructions = true;
}
// Dog bark Logic
function playDogBark() {
dogBarkSound.play();
// Dog barks at random intervals
let nextBarkIn = random(5000, 7500);
barkTimeout = setTimeout(playDogBark, nextBarkIn); // Schedule the next bark
}
function stopBarking() {
clearTimeout(barkTimeout);
}
// 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) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 1) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
fsrVal = int(fromArduino[0]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = 0 + "\n";
writeSerial(sendToArduino);
}
}
Concept:
My final project concept initially centered on creating a controller for my midterm video game project. However, after a discussion with my professor, I was inspired to shift towards a design imbued with deeper thematic meaning and enhanced interactivity. This push led me to thoroughly repackage and rework my midterm project. Through multiple iterations, I developed a concept that stands distinctly apart from its predecessor. In this new version, players engage in a real-world task—feeding a dog—which in turn affects the game by enlarging the teacher on screen. This innovative interaction model is something I am proud to call largely original and distinct from my previous work.”
Include some pictures / video of your project interaction
*Disclaimer had trouble uploading images so I compiled images into a youtube video
How does the implementation work?
In implementing my project concept using Arduino and p5.js, I utilized the lab’s resources to construct a Force Sensitive Resistor (FSR). This involved using Velostat, a folded piece of paper, two strips of copper tape, and ordinary tape. Once assembled, I connected the FSR to the Arduino using crocodile clips attached to jumper cables. For the visual component, I crafted the “dog” from the SparkFun kit box, using three cardboard pieces (two triangles and one rectangle) to form its structure, and added a cartoon dog’s face for a playful touch. The ‘HW’ blocks, integral to the game’s interactivity, were made from wooden blocks wrapped in paper and secured with tape.
Description of interaction design
For the interactivity aspect of my project, under Professor Aaron’s guidance, I established a serial connection enabling the Force Sensitive Resistor (FSR) to communicate with my p5.js sketch. The interface in p5.js features an image of a cartoon teacher that increases in size as the FSR value rises. To address the issue of the image size increasing too rapidly, I introduced a global variable, smoothFsrVal, and applied the formula smoothFsrVal += (fsrVal - smoothFsrVal) * 0.01 to moderate the growth. To ensure the game remained engaging and not overly prolonged, I set a specific FSR value goal of 250, which, when reached, triggers a win state. Additionally, a timer limits the gameplay to 45 seconds, after which a game over state is activated if the goal isn’t met. The p5.js sketch also includes standard interactive elements such as a ‘Connect to Serial’ button, main menu, play, instructions, and restart buttons—all designed with engaging graphics and set against a classroom-themed background
Arduino Code:
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
// Blink them so we can check the wiring
// start the handshake
while (Serial.available() <= 0) {
Serial.println("0");
delay(50);
}
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
int handshakeRead = Serial.parseInt();
if (Serial.read() == '\n') {
int sensor = analogRead(A0);
delay(5);
Serial.println(sensor);
}
}
}
Description of Arduino code:
In the setup function of the Arduino code, serial communication is initiated at 9600 baud to enable data transfer over the USB connection to the p5.js sketch. This setup includes a procedure introduced in class by Professor Aaron called starting a ‘handshake’—a method used to ensure that the connection is established before proceeding. The Arduino sends a zero (‘0’) repeatedly every 50 milliseconds until it receives a response from the p5.js sketch, indicating that the serial connection is ready. In the main loop, the code continuously checks for incoming data from the p5.js sketch. Once data is received, it reads the data to complete the ‘handshake’, ensuring that each transmission begins only after the previous has been fully processed. It then reads the analog value from pin A0, where the Force Sensitive Resistor (FSR) is connected. This sensor value is briefly paused (a delay of 5 milliseconds is introduced for stability), and then sent back over the serial connection to the p5.js sketch, which uses this data to influence the game dynamics, such as adjusting the size of the cartoon teacher’s image based on the FSR readings
Embedded Sketch:
Description of p5.js code:
- Initialization and Preloading: Variables are declared for game state management (like
gameStarted,gameOver,gameWon), user interface elements (buttons), sounds, and images. Thepreload()function loads these resources (images and sounds) to ensure they’re available before the game starts. - Setup Configuration: The
setup()function creates the game canvas and initializes interface elements such as buttons. Each button is positioned and styled, and their visibility is managed based on game states. Notably, the game music’s volume is adjusted, and the canvas’s draw loop is paused until the game starts. - Game State Management: Buttons trigger changes in game states. For example, the ‘Play’ button starts the game and triggers gameplay logic encapsulated within other functions like
startGame(). Buttons like ‘Restart’ and ‘Main Menu’ facilitate game flow by resetting states or navigating the user interface. - Dynamic Content Rendering: The
draw()function acts as the central loop where game logic is continuously checked and updated based on the game’s state. It manages what is displayed on the screen, updates gameplay elements like the timer, and reacts to changes in game state (e.g., transitioning to a win or lose screen). - Game Interactivity and Feedback: Interaction with the physical hardware (FSR value) is integrated into the game logic. The value from the sensor influences the gameplay, affecting visual elements like the teacher’s image size based on the smoothed sensor values. Audio cues are played corresponding to game events like winning or losing, and game music loops during gameplay.
- Auxiliary Functions: Functions like
displayGameOver()anddisplayGameWin()manage the display elements during these states, showing appropriate messages and images, and managing audio playback. Utility functions likestyleButton()apply consistent styling to buttons across the game. - Serial Communication: The
readSerial(data)function handles incoming data from the Arduino. It parses this data to update the force sensor value, which in turn affects the game logic and visuals.
Description of communication between Arduino and p5.js:
If the paragraphs mentioned above do not paint a clear enough picture here is the bullet point representation on how my Final project is communicating between p5.js and Arduino
Part 1:
- Arduino Setup:
- The Arduino initiates serial communication at 9600 baud rate using
Serial.begin(9600);. This sets up the Arduino to send and receive data over the USB connection to the computer where the p5.js script runs. - A handshake mechanism is implemented in the
setup()function where the Arduino continually sends a zero (‘0’) until it receives any serial data from p5.js, ensuring that both sides are ready to communicate before proceeding.
- The Arduino initiates serial communication at 9600 baud rate using
- p5.js Setup:
- In p5.js, the serial connection setup is implied within functions like
setUpSerial(), which would be responsible for establishing this link, although the specific implementation details aren’t provided in the snippet. The script is prepared to handle incoming data through a callback function that processes each line of data received.
- In p5.js, the serial connection setup is implied within functions like
Part 2:
- Data Sending (Arduino to p5.js):
- Inside the
loop()function on the Arduino, there’s a check for any available serial data (Serial.available()). If data is available, it reads the next integer from the serial buffer, which is part of the handshake or command from p5.js. - After the handshake is confirmed (a newline character is detected), the Arduino reads an analog value from pin A0 (connected to the Force Sensitive Resistor) and sends this value back to p5.js using
Serial.println(sensor);.
- Inside the
- Data Receiving and Sending (p5.js to Arduino):
- In p5.js, the received data is handled by the
readSerial(data)function. This function parses incoming serial data to update the force sensor value (fsrVal), which is then used within the game logic to modify game elements, such as the size of the teacher image in the interface. - The script also sends data back to Arduino, likely as part of a continual handshake or control commands, maintaining synchronization between the hardware inputs and the software responses.
- In p5.js, the received data is handled by the
Part 3:
- Game Element Updates: The
fsrValfrom the Arduino directly impacts game dynamics. For example, an increase in the FSR value causes the teacher image to grow in size, visually representing the game’s progress based on real-world actions (like pressing the FSR). - Dynamic Adjustments: The
smoothfsrValvariable in p5.js smooths out the rapid changes in the sensor value to ensure the game’s visual feedback doesn’t appear jittery or overly responsive to noise in sensor readings.
What are some aspects of the project that you’re particularly proud of?
I’m particularly proud of the DIY Force Sensitive Resistor (FSR) sensor that I constructed for this project. Building the primary component of my project from scratch, using only the resources available in the lab and guidance from various YouTube tutorials, was immensely fulfilling. There was no pre-built FSR sensor available that fit my needs, which presented a significant challenge. Tackling this obstacle head-on, I was able to problem-solve and innovate under pressure. This not only enhanced my technical skills but also boosted my confidence in handling and overcoming complex engineering problems on my own. The successful integration of this self-made sensor into the project stands as a testament to the creative and technical prowess that I developed throughout this endeavor.
What are some areas for future improvement?
One of the primary areas for future improvement in my project is the gameplay loop. While it successfully fulfills its basic purpose, it currently lacks sustained entertainment value. Introducing more sound effects and enhanced user feedback could significantly enrich the gaming experience, making it more engaging and dynamic for players. Additionally, the build quality of the interactive controller needs reinforcement. Given that the gameplay involves objects frequently being thrown at the controller, constructing a sturdier framework is essential—especially since the dog’s face component is particularly vulnerable. Another critical area for improvement is the sensitivity of the FSR value. Currently, balancing the sensor’s responsiveness so that it is neither too sensitive nor too unresponsive is a significant challenge. This aspect of the project requires a deeper understanding and more refined coding skills, but I am confident that with time and continued learning, I can develop a more robust and precise response mechanism for a better gameplay experience.