User Testing:

To conduct user testing, I had Moeez and Sanjana play my game in its initial state, and they provided me with valuable feedback, which I incorporated into my project. Initially, my game required the user to wait for the flower to reach the bottom of the screen and overlap with the corresponding flower image at the bottom. Sanjana suggested changing the game concept to flower catching and increasing the speed, which I agreed to as it adds excitement. I also initially made my game with a fixed speed throughout but Moeez recommended starting with a slower speed and gradually increasing it to allow users to get accustomed to it. To further enhance the user experience, I plan to add on-screen messages, such as “wrong flower pressed” and “good job!” to make the game more interactive.

Video:

https://youtube.com/shorts/7kJ7MyrLNME

Project: Petals and Harmony

Concept

My project aims to provide a simple and engaging activity for elderly individuals who may face difficulty attending physiotherapy sessions. The game is nature-themed and involves a flower-catching game set in a forest or garden, accompanied by a calming fairyland-like musical background. This relaxing environment is designed to calm the nerves, similar to a physiotherapy session.

As the game progresses, flowers appear one at a time from a distance and move closer to the player, creating an enjoyable challenge that encourages individuals to exercise their hand-eye coordination and mobility.

Implementation

For my project, I utilized four pressure sensors as analog sensors to capture input from the user’s four fingers. The sensors provided data within a range of 0 to 1023. However, to ensure that a “press” was distinguished from a mere touch, I set a threshold range for the boolean values. If the sensor reading exceeded 500, the boolean value was set to true.

I created four boolean variables, one for each sensor. These variables were set to true when the sensor reading was above 500, and false otherwise. Only when the user pressed the correct pressure sensor, the moving flower appeared and the next flower appeared on the screen.

To create a realistic flower movement effect, I attempted to simulate the appearance of flowers approaching from afar. At first, I considered having the flowers move in four rows, similar to piano tiles. However, I found that manipulating the size and movement angle of the flowers was more effective in achieving the desired effect. With this approach, I was able to create the impression that the flowers were coming closer from a distance.

This is the code that helps me achieve this effect:

angle = radians(126);
image(img,start_x,start_y,size,size);
start_x += speed * cos(angle);
start_y += speed * sin(angle);
size = map(start_y, 466, height, 10, 110);

I calculated the specific angle value to each flower, allowing me to manipulate the x and y coordinates independently. To adjust the size of the flowers, I utilized the map function. Specifically, when the value of the start_y coordinate (the y-coordinate of the flower) was 466, the size of the flower was set to 10. Similarly, when the y-coordinate reached the end of the canvas (i.e., height), the size of the flower was set to 110 using the same ratio.

My p5.js project features a main page that showcases the game’s title along with a slogan, as well as two buttons: “Start” and “Instructions.” The instructions section provides a comprehensive guide on how to play the game and includes information on how missed flowers will be displayed at the end of the game. Once the user has gone through the instructions, they can then proceed to start the game.

In the top left corner of the game’s interface, there is a fullscreen button that allows the user to enter or exit fullscreen mode. Since my game is in a vertical orientation, I centered the printing of the game’s background images, while covering the rest of the canvas with a plain colored background.

Arduino Code:

const int pressureSensor0 = A0;
const int pressureSensor1 = A1;
const int pressureSensor2 = A2;
const int pressureSensor3 = A3;
// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  pinMode(pressureSensor0, INPUT);
  pinMode(pressureSensor1, INPUT);
  pinMode(pressureSensor2, INPUT);
  pinMode(pressureSensor3, INPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  int sensorValue0 = analogRead(pressureSensor0);
  int sensorValue1 = analogRead(pressureSensor1);
  int sensorValue2 = analogRead(pressureSensor2);
  int sensorValue3 = analogRead(pressureSensor3);

  // print out the value you read:
  //Serial.print("(");
  Serial.print(sensorValue0);
  Serial.print(", ");
  Serial.print(sensorValue1);
  Serial.print(", ");
  Serial.print(sensorValue2);
  Serial.print(", ");
  Serial.println(sensorValue3);
  //Serial.println(")");

}

P5js Implementation:

Areas I am particularly proud of

I am incredibly proud of creating my first interactive game. In the past, I had made games, but they were never as engaging as this one, which uses a glove to take input from the user. This gave a whole new level of interactivity to the project, making it more engaging and immersive. It reminded me of our in-class discussions, where we talked about the importance of direct input from the user. By using not just visual but touch senses to control the success of the game, I was able to create a unique experience for the player. It was exciting to see my vision come to life and to be able to share it with others. I learned a lot during the process, and I’m looking forward to continuing to explore the possibilities of interactive game development in the future.

Future Improvements

In the future to make the game more engaging and interactive, I am considering adding a multiplayer mode. This would provide an opportunity for players, particularly older individuals, to play with their friends rather than playing alone. I believe that a multiplayer game would instill feelings of healthy competition, making the gameplay even more exciting and encouraging players to keep coming back to the game.

While searching for ideas, the music glove for hand therapy caught my attention, which inspired me to recreate my own version using Arduino and Processing. With the knowledge gained in class about music and sound production, Arduino switches, and creating interactive screens using P5js, I plan to create an interactive musical glove that allows users to control sound production and play music through hand gestures. This would also encourage hand movement

A few years ago, my grandfather suffered from a paralysis attack after which one side of his body lost the ability to move. Despite the challenges he faced, he was able to restore his mobility through physiotherapy and exercise. Considering this, I believe that an accessible hand glove could be immensely valuable for elderly individuals with blood pressure-related conditions. Such a device could provide a portable and convenient means of conducting regular physiotherapy sessions within the comfort of one’s own home.

Processing

Similar to piano tiles I will make a screen on p5js which will randomly ask the user to make different hand poses and click the button on different finger tips. The button should be clicked within the time and when the corresponding button is overlapping with the moving tile. The number of hits will be recorded on screen along with the total time of the hand therapy session. A specific note will be played for each hand pose to allow the glove to produce a specific tune/ melody during the session.

Arduino

I am planning to use regular buttons stuck on the tips of the four fingers and operating them with the use of thumb. Alternatively, I may opt for a more convenient sensor such as a pressure sensor that can be easily integrated onto the glove while ensuring user comfort. Upon pressing the buttons, the switch state will be relayed to the processing system, which will remove the corresponding tile. If the user presses the wrong button, an error message will be displayed on the screen. If the user is slow to press the button, a message stating “slightly late” will appear. Successful hits will be met with encouraging messages displayed on the screen.

For this assignment, I created a switch by attaching a pair of scissors to two wires. To improve the conductivity of one wire, I attached a copper foil to it to increase its surface area. I set up a circuit with two LEDs arranged in parallel to ensure they have the same level of brightness.

.

Concept:

Introducing my latest creation – a memory card game with a unique twist! As one of the most popular games enjoyed by people of all ages in various forms, I wanted to put my own spin on it by incorporating a theme that I feel passionately about – food. The result is a game that is both fun and engaging and adds a personal touch that sets it apart from other versions.

I aim to showcase Pakistani Cuisine through this game, which shares similarities with cuisines from neighboring countries such as Nepal, India, and Sri Lanka. The increasing globalization has led to a rise in the popularity and recognition of desi food. Through this memory game, I hope to introduce players to lesser-known dishes that they may not have come across before. As a result, the unique names of these dishes will stay with them for a long time.

Final Outcome:

Game Code:

Following is the code for the game:

let numMatches = 0; //to see if all matches found and game ends
let numTries = 0; //counter to keep track of counts
let delayStartFC;
//10 card image variables
let card1;
let card2 ;
let card3;
let card4;
let card5;
let card6;
let card7;
let card8;
let card9;
let card10;
//array variables for image of cards and tiles etc
let faces = [];
let flippedTiles = []; 
let tiles = [];
let selected = [];
let possibleFaces;
let startgame;
//variables for images and sounds
let backgroundImage;
let instructionsImage;
let endImage;
let mymusic;
let flipsound;
let clicksound;
let flipSide;
let gameState; //to enter different stages: instructions, game, end
let NUM_COLS = 4;
let NUM_ROWS = 5;
function preload() 
{
  //loading all images and sounds
  flipSide = loadImage("back.jpg");
  card1 = loadImage("card1.jpg");
  card2 = loadImage("card2.jpg");
  card3 = loadImage("card3.jpg");
  card4 = loadImage("card4.jpg");
  card5 = loadImage("card5.jpg");
  card6 = loadImage("card6.jpg");
  card7 =  loadImage("card7.jpg");
  card8 = loadImage("card8.jpg");
  card9 =  loadImage("card9.jpg");
  card10 = loadImage("card10.jpg");
  startgame = loadImage ("startgame.png");
  backgroundImage = loadImage ("game.png");
  instructionsImage = loadImage("instructions.png")
  endImage = loadImage("end.jpg");
  mymusic = loadSound('Baisara-Beera-Kalpana-Patowary-Papon (mp3cut.net).mp3');
  flipsound = loadSound ('Card-flip-sound-effect-1.mp3');
  clicksound = loadSound('mixkit-game-click-1114.wav');
}

function setup() 
{
  // Set up canvas and other initialization tasks
  createCanvas(600, 700);
  gameState = 'start';
  mymusic.loop(); //stays on throughout
  frameRate(120);
}

class Tile 
{
     constructor(x, y, face) 
    {
      this.x = x;
      this.y = y;
      this.size = 100;
      this.face = face;
      this.isFaceUp = false;
      this.isMatch = false;
    }
    draw ()
    {
      //draws back if not face up otherwise the image of food
      if (this.isFaceUp)  
          image(this.face, this.x, this.y, this.size, this.size);
      else 
          image(flipSide, this.x, this.y, this.size, this.size);
      
      //black outline of the tiles
      stroke(0);
      strokeWeight(3);
      noFill();
      rect(this.x, this.y, this.size, this.size,5);
    }
  
    isUnderMouse(x,y)
    {
      //checks if when clicked the tile is under the mouse
        return x >= this.x && x <= this.x + this.size  && y >= this.y && y <= this.y + this.size;
    }
}
//function to randomly shuffle the array of tiles with 2 copies each
function shuffleArray(array) 
{
    let counter = array.length;
    // while there are elements in the array
    while (counter > 0) 
    {
        //selecting a random index
        let index = Math.floor(Math.random() * counter);
        // decrementing counter
        counter--;
        //swap last element with it
        var temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }
}
function draw() 
{
  if (gameState == 'start')
  {  
        //displaying image for background of game
        image(startgame, 0,0,600,700); 
        //start button
        let c = color('#FF69B4'); 
        fill(c);
        noStroke();
        circle(302.5, 350, 112);
        fill('black');
        textSize(20);
        textStyle(BOLD);
        text('Start', 280, 355);
  } 
  else if (gameState == 'instructions')
  {
    //instruction page is an image I made from canva
    image(instructionsImage,0,0,600,700);
  }
  else if (gameState == 'beingSet')
  {
    //this is just done once when the start button is clicked 
    faces = [card1, card2, card3, 
             card4, card5, card6, 
             card7, card8, card9, 
             card10]; //storing all images into array
    // making an array of 2 cards and then randomising
    possibleFaces = faces.slice(0);
    for (let i = 0; i < (NUM_COLS * NUM_ROWS) / 2; i++) 
    {
        // Randomly pick one from the array of remaining faces
        var randomInd = floor(random(possibleFaces.length));
        var face = possibleFaces[randomInd];
        // Push twice onto array
        selected.push(face);
        selected.push(face);
        // Remove from array
        possibleFaces.splice(randomInd, 1);
    }
    shuffleArray(selected); //shuffling the array
    
    // Creating a Tile object for each card
    for (var i = 0; i < NUM_COLS; i++) 
    {
        for (var j = 0; j < NUM_ROWS; j++) 
        {
            var tileX = (i * 100) + 55+ (i*30);
            var tileY = (j * 100) + 70 +(j*17);
            var tileFace = selected.pop();
            tiles.push(new Tile(tileX, tileY, tileFace));
        }
    }
        // Changing the game state to 'playing'
    gameState = 'playing';
  }
  else if (gameState == 'playing') 
  {
    // Displaying the background image
    image(backgroundImage, 0,0,600,700);
    // Checking if enough time has passed since the last card flip
    if (delayStartFC && (frameCount - delayStartFC) > 25) 
    {
        // Hiding the flipped cards that are not matches
        for (let i = 0; i < tiles.length; i++) 
        {
          if (!tiles[i].isMatch) 
              tiles[i].isFaceUp = false;
        }
// Resetting the flippedTiles array and delayStartFC variable
        flippedTiles = [];
        delayStartFC = null;
     }
    
    // Drawing each tile on the canvas
    for (let j = 0; j < tiles.length; j++) 
        tiles[j].draw();
   
    // Checking if the game is over
    if (numMatches == tiles.length/2)
        gameState = 'end';
} 
  else if (gameState == 'end')
  {
    image(endImage, 0,0,600,700);
    let c = color('#d90166');
    fill(c);
    noStroke();
    //play again button
    circle(302.5, 350, 112);
    fill('black');
    textSize(15);
    textStyle(BOLD);
    text('Play Again', 266, 355);
    textSize(20);
    //diplaying the tries as a score for game
    text("You found them all in " + numTries + " tries!", 146,488);
    } 
  
mouseClicked = function() 
{ 
  if(gameState == 'start')
    {
      //checking ditance between click and start button 
      let distance = dist(mouseX, mouseY, 302.5, 350);
      if (distance < 112/2) 
        {
          //play click sound
          clicksound.play();
           gameState = 'beingSet';
        }
    // checking distance between click and instructions button
      if (mouseX>220 && mouseX<380 && mouseY>500 && mouseY<540)
        {
          clicksound.play();
          gameState = 'instructions';
        }
    }
  else if (gameState == 'playing')
  {    
    //loop through all the tiles
    for (let i = 0; i < tiles.length; i++) 
      {
          let tile = tiles[i];
          if (tile.isUnderMouse(mouseX, mouseY)) 
          {
  // Check if the tile can be flipped (only if less than 2 tiles are flipped and the tile is not already face-up)
              if (flippedTiles.length < 2 && !tile.isFaceUp) 
              {
                  tile.isFaceUp = true;
                  flipsound.play();
                  flippedTiles.push(tile); //adds to flippedtiles array
                  if (flippedTiles.length === 2) 
                  {
                      numTries++; //increments the tries counter
                      if (flippedTiles[0].face === flippedTiles[1].face) //if they match
                      {
                          flippedTiles[0].isMatch = true;
                          flippedTiles[1].isMatch = true;
                          flippedTiles.length = 0; //empties flipped array because match found
                          numMatches++;
                      }
                      delayStartFC = frameCount;
                  }
              } 
          }
      }
  }
  else if (gameState == 'instructions')
    {
      //clicking the startgame button
      if (mouseX > 149 && mouseX < 449 &&
      mouseY > 600 && mouseY < 615)
        {
          clicksound.play();
          gameState = 'beingSet';
        }
    }
  else if (gameState == 'end')
    {
      //clicking restart button 
      let distance = dist(mouseX, mouseY, 302.5, 350);
      if (distance < 112/2) 
        {
          clicksound.play();
         gameState = 'start';
        }
    }
};
}

Process:

Initially, I developed a tile class and successfully displayed the tiles on the screen using the draw function in my program. Although the game was functional, I encountered challenges when attempting to change the game state from the starting page to the playing and end pages. To overcome this hurdle, I referred to the coding examples provided by Professor Mang for changing the game state. However, I had to modify my code to make it compatible with the “if-else” loops used to change the game state. I eventually decided to categorize my game states further and added a new category called “beingSet”, which is only called once before the game begins.

During my coding process, I encountered another obstacle while creating cards for my game using Canva. Initially, the cards included an image, the name of the dish, and a brief description. However, due to the limited dimensions of my game’s canvas, the description on the cards was difficult to read, and it also compromised the visibility of the dish’s name. As a result, I had to recreate all the cards without the description. Despite my efforts, I was disappointed that I could not include the descriptions on the cards.

previously made cards:

final card: 

I just solved another issue in my game a few minutes ago by adding a single line of code:

frameRate(120);

This line of code significantly improved the performance of my game. Previously, as the game progressed towards the end, it would slow down. However, with the addition of this line of code, my game’s speed increased, making it more challenging and an actual test of memory for the players. Nevertheless, I need to investigate why the cards take longer to flip over towards the end, despite the game starting at a normal speed.

Future Improvements:

While I am immensely proud of my game, there is always room for improvement. One area that could be enhanced is by adding a menu with the description of every dish. This could be introduced as an introductory section, where players click on a button and are taken to a menu with forward and back buttons to navigate through an array of images. This would give players the opportunity to familiarize themselves with the dishes, the details of the dish, and the corresponding images before they start playing. This would not only enhance the players’ overall gaming experience but also provide a fun and interactive way to learn about Pakistani cuisine.

Idea:

Thinking of what to make for my mid-term project I decided on the memory card game which I used to play a lot as a child.

The game consists of picture cards in pairs shuffled randomly and the player clicks to flip one card at a time trying to find all the pairs in as few clicks as possible. The game will continue as long as the player finds all the pairs. I will include a timer alongside and use it as a way to give ranks to the player in the end and also keep a record of the highest score in an array which would compare the time to other times the game was played and a record time would be marked as the highest score. The game will constitute 2 levels. The beginner level will have 6 pairs while the intermediate level will have 10 pairs of cards to match.

For sound I will implement the card flip sound and a light background music to get the player in a cheery mood during the game. Moreover, I will also include a glow or light shake when the mouse hovers over the card yet to be chosen. The theme of my card is animated dinosaurs and these are a few card images I’ll be using for my game.

I am still working on my code, specifically on the card class which includes variables like, position of the card on the canvas, isFlipped boolean value, isMatched, the width and height of each image and the image variable to store the card image.

Overview

Since I have past experience working with CSV files,  I decided to utilize them again for this assignment. After careful consideration, I chose to create a bar graph, or more specifically, a histogram, as it is an effective way to visualize and compare data. Despite the CSV file containing multiple variables, I found it more appropriate to focus solely on the weight of the fish (which serves as the y-axis variable for my bar chart) in order to ensure a clear and concise representation of the data, rather than presenting a cluttered array of variables. I loaded the lines in the CSV file into the array of strings as taught in class and then continued to make separate arrays for storing the names and weights of the fish from the specific rows in the CSV file.

The Data file I chose had a total of 161 fish data but I limited it to 10 fish being represented at a time which were randomly chosen and changed to another set of 10 randomly chosen fish from the data file with the help of a mouse click.

Final Output

Concluding Remarks

I am happy to incorporate more animation into this assignment compared to my previous ones. Additionally, I also added a water bubbling sound effect to enhance the interactivity of the project. However, I am aware that there is room for improvement in terms of the accuracy of the data representation. Specifically, I believe I could provide more detail regarding the weight unit and markings on the y-axis to create a more precise depiction of the data, rather than solely relying on the height of the bars.