Category: Spring 2024 – Aaron (Section 001)

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:

1. Initialization and Preloading: Variables are declared for game state management (like gameStarted, gameOver, gameWon), user interface elements (buttons), sounds, and images. The preload() function loads these resources (images and sounds) to ensure they’re available before the game starts.
2. 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.
3. 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.
4. 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).
5. 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.
6. Auxiliary Functions: Functions like displayGameOver() and displayGameWin() manage the display elements during these states, showing appropriate messages and images, and managing audio playback. Utility functions like styleButton() apply consistent styling to buttons across the game.
7. 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:

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.
2. 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.

Part 2:

1. 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);.
2. 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.

Part 3:

• Game Element Updates: The fsrVal from 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 smoothfsrVal variable 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.

Strengths of the Project

Users understood the relationship between their actions and the game responses well. This was particularly true for tasks involving direct interactions like pressing buttons.

• Engagement with Tasks: The distance sensing tasks were well-received, as participants found them to be intuitive and fun.
• Sensor Integration: The integration of the potentiometer within the game mechanics worked smoothly, providing a satisfying challenge to the players.

Areas for Improvement

• Animation Speed: There was a noticeable slowdown in animation frames as the game progressed, which affected the overall experience. This issue needs to be addressed to ensure smooth gameplay.
• Keypad Usage: Although the Adafruit Trellis keypad was a central component of the game, many users needed additional instructions to use it effectively.

Enhancements and Future Steps

To make the game more user-friendly and engaging, here are some steps I plan to take based on the feedback:

• Clarify Sensor Usage: Simplify the riddles associated with sensors or provide clearer, step-by-step tutorials that guide the users on how to interact with the game.
• Improve Animations: Optimize the code to ensure that animation frames run smoothly throughout the game, enhancing the visual feedback that is crucial for interactive gameplay.

Video for 1st user test/feedback

Video for 2nd user test/feedback

For my project, I did 9 user test in total, with the people who did not know about my game at all. The procedure is such that I invite them, I start the p5js sketch, set up the camera and let them work out without saying anything.

Gladly, out of 9 subjects, only 2 needed instructions from me, and others at one point were able to figure out the entire experience withotu instruction. The average play time/ or time needed for them to enjoy the experience without needing instructions is 3 minutes. Below are 3 sessions of the user testing.

The only parts where I needed to explain for the 2 users are (1) the user did not read the instructions on the screen and did not know they have to touch the castle and (2) The user did not connect to the right serial port.

In general, this is the feedbacks I get for improvement suggestion.

1. Cover the breadboard of the castle with a ladder texture to make the design more consistent and hide the electronics.
2. I need to be more specific in telling which serial port to choose (now I only say usbmodem).
3. Take out all the debugging functionalities I made for myself in the actual game.
4. Tell the people to stand up and play (It is more comfortable than sitting down).
5. Sometimes the bullet hit the enemy, but the enemy  did not die (I need to adjust the collider radius).
6. Some users did not get the full background story, so probably have a mini comic printed out so that whoever interested can read.

Special Thanks

Special Thanks to Guglielmo Fonda, Aditya Pandhare, Aneeka Paul, Megan Marzolf, Salma Mansour, Sashank Neupane, Lingfen Ren, Lexie and Nastassja for testing my project.

The journey of transforming a concept into a tangible, functional reality is an exhilarating experience, with challenges and discoveries at every turn. The most enjoyable part of this adventure for me was definitely the user-testing phase of my final project. It’s one thing to nurture an idea in your mind or sketch it on paper, but watching real people interact with your creation adds a layer of excitement and invaluable insights.

A significant hurdle I faced was with the servos intended to be a key component of the project. Despite my efforts, I struggled immensely with integrating and programming them. The complexity proved to be beyond the scope of what could be managed within the time and resource constraints of the project I had to make the difficult decision to pivot and remove the servos entirely from the project. This decision, though tough, was necessary to maintain the project’s viability and ensure a smoother user experience.

Pivoting away from using servos forced me to rethink and simplify the design, focusing on what was most essential and functional. This redesign, though less complex, brought its own set of challenges and learning opportunities.

The insights gained from user-testing were invaluable. Observing how users interacted with the revised version of the project without the servos helped me understand the practicality and user-friendliness of my design. The feedback was instrumental in shaping the final tweaks:

Timer needs to be bigger: Users found the timer too small, highlighting the need for a more visible and accessible design. (Alongside that I believe I will increase the size of all text)
Add instructions page: User suggested that there be an instructions page to clarify the objective
Fix dog barking glitch: Dog barking would play over itself causing an awkward sound (potential solution is to increase the delay time between sounds

Through user testing, I improved the look of the device itself by covering the wire with insulated heat-shrinkable tubes so that it doesn’t get caught up by anything over the user’s hand. Also, an issue that was resolved after more testing was that, for some odd reason, the code kept looping over the positioning of the UFO, making it glitch after a while of playing the game.

Video of the problem:

After the improvements:

After playing once or twice, people can understand the concept, which made me realize that I needed to create an info tab to finalize the project.

For user testing, I asked two of my friends to come in and try interacting with my piece. I have so far managed to bring everything together: 1) construct the box that would come to enclose the Arduino and whose surface would act as a canvas for the sketch to be projected on, 2) make the butterfly body out of printed laminated paper and attach the wings to the servos, 3) secure the butterfly atop the surface, and 4) attach two wires, shaped like butterfly antennas, beneath the wings to convey touch signals to the p5 sketch and activate the animation and the butterfly flutters. I knew that upon seeing the piece, users might not get the intuition to touch the butterfly. They also might shy away from touching it, out of fear of ruining the butterfly’s delicate structure, or assume that some other automatic process would have to trigger the movement of the piece. To counter that, I will be displaying a name next to my piece that indicates, but does not outright reveal, that a touch signal is necessary. I have not yet settled on a name, but have told my two friends that it would be called “catch a butterfly” or “pet a butterfly” and they immediately figured out that they had to use their hands in some way. I placed the antennas facing them so that they were more likely to come into contact with them and I was glad that they did end up placing their touch close enough to the wires for the signal to be captured.

They both loved seeing the butterfly in action, but gave the following feedback, which was mainly focused on the sketch itself:

1. add different colors to the butterflies in the sketch
2. experiment with different movement paths for the projected butterflies (inward movement from outside the sketch bounds or having multiple center points for their emergence, for example) or smoothen/slow down their movement.

I expected the feedback I got from them, as I have been planning to implement those two features after I had the basic version of the project implemented. I will be working on that over the next couple of days, as well as decorating the surface some more (adding flowers to cover the base of the servos and on different parts of the surface).

The project is well on its way, and I have some updates for all of you!

First of all, let’s start with the good things, and that is that the boat structure has been successfully 3d printed and is waterproof. Yaay. The arduino as well as all the batteries and breadboard fit comfortably on the structure so the sizing was correct (for the most part).

There is a few things I need to tackle which I realized during the user testing. Firstly, the fan that I have is not strong enough to move the boat, I will need to find, or make a bigger and better one. The boats construction also needs some styrofoam on the bottom since the boat is too heavy to float, as seen in the video below.

Over the next two days I want to solve the problem with the floating and the movement on the boat so I can leave the controls for the last day.

Hopefully everything works out fine!

As I was conducting user testing for my game, an actual storm was hitting Abu Dhabi, echoing the storm scenario in my game and making the experience feel all the more relatable.

I enlisted my sister to test the game without any prior instructions, which was a great decision as the game proved to be intuitive—she knew immediately that she needed to press the button. However, since I haven’t yet built the controller box, I had to hold it for her. For the wooden block, I explained that she should imagine it as a car moving on the screen.

To my surprise, she played better than I did! It was really enjoyable to watch my game perform exactly as intended. She managed to figure everything out smoothly; the only hiccup was the wooden block. If it had actually looked like a car, I wouldn’t have needed to explain anything. I also handled connecting to the serial port since she wasn’t familiar with it. For the actual exhibition, I’ll provide short written instructions for the connection to assist anyone if I’m not around.

Area for improvement:

The game runs smoothly overall, but the collision detection between the hail and the car is glitchy. Sometimes it triggers a game over even when it shouldn’t, which is quite frustrating. I plan to resolve this issue before the exhibition for sure.

 

 

Here’s my video of user testing:

So till now I incorporated one rose out of 4/5 I’m planning to show. It’s working fine with one so I’m hoping it’d be able to detect all of the roses lighting up and flowers blooming along with it. I’m also hoping to incorporate sound with each rose and have all the samples ready – just have to put it in the code (hope that’d be easy).

Reading Response:

“Design Meets Disability” delves into a provocative reevaluation of how design interacts with disability, challenging the traditional ethos that design for disability should aim for invisibility and discretion. This text argues that such designs, exemplified by the Eameses’ leg splints and contemporary medical devices, need not shy away from aesthetics in pursuit of functionality. Instead, it suggests that these designs can embrace both, much like eyeglasses have evolved from mere medical necessity to fashion statements.

The core thesis of the book seems to be a call to shift perceptions—away from designing disability aids that blend in, towards creating products that stand out, empowering users and making a statement. This reflects a broader cultural shift in how disability and aids are perceived, a move from viewing them as merely corrective devices to seeing them as integral parts of one’s identity that can express personal style.

The examples of Hearwear and the work of designers like Sam Hecht and Ross Lovegrove underscore the potential for medical devices to be both functional and fashionable. The discussion extends to prosthetics, where figures like Aimee Mullins have not only redefined performance through innovative designs but have also challenged the very aesthetics of disability. Mullins, by using prosthetics that are visually striking, shifts the narrative from loss to empowerment.

The text critically engages with the notion of universal design and its practical applications. It reflects on the complexity inherent in designing products that are universally accessible yet simple and intuitive to use, a challenge that echoes through the design community.

“Design Meets Disability” advocates for a design philosophy that respects both function and fashion, which can transform products for disability into symbols of identity and empowerment. This approach doesn’t just serve the disabled community but enriches our cultural fabric, advocating for inclusivity and diversity in design practices. This reading fosters a deeper appreciation for the intersections between design, technology, and social values, urging us to reconsider our approach to disability not as a deficit to be concealed but as an aspect of human diversity to be celebrated.