Project 2 Documentation
In this project, I decided to create a game controller for a fruit catching game. With my bunny as the main character, the person interacting with the game can control the horizontal position of the bunny through turning the potentiometer or pressing on the left and right arrow keys on the computer to catch the falling fruits. As the bunny catches the fruits, the corresponding LEDs (red for apple, yellow for banana, green for grape, blue for blueberry) light up accordingly. The game also has a total of 3 stages, with the amount of fruits falling (falling rate) increasing in each stage. As a score of 60 is reached, the 4 LEDs light up and flash all together to indicate the end of the game.
List of Materials Used
For circuit: Full size breadboard x 1; Arduino Nano V3.0 x 1; LEDs x 4 (red, yellow, green, blue); 220 ohms resistors x 4 (for LEDs); potentiometer x 1; wires
For project housing: 4mm foam board; 2mm foam board, acrylic paint; thin markers; poster paper; miniature bunny; styrofoam glue; double-sided tape
Circuit
I started out by visualizing the circuit and breadboard digitally in Fritzing, and updated the breadboard after making adjustments and working on the code. Bellow is the final visualization of my circuit:
Code
I started out by creating the assets (background, fruits, bunny) for my game, then worked on coding my game in p5js. I faced minor issues while trying to code the slicing of fruits and the playing of some sound files, but was able to troubleshoot and get the to work about figuring out the issue. After getting the main structure of the p5js game code working, I then added in the serial part of the code to get the game to connect with my Arduino and circuit. I was able to layout my code through applying the concepts learned through the serial input and output labs.
Here is the link to my final p5js code for my game (contains the serial connection part so only works when connected to my circuit breadboard and Arduino code due to its default control setting is being mapped to the potentiometer).
Bellow is the final Arduino code for my circuit:
Building My Circuit
Setup of 4 LEDs:
Adding in potentiometer, repositioning the components, and organizing wires:
Testing My Circuit with Code
Controlling bunny movement with left and right arrow keys on computer:
The movement of the bunny in the video above is controlled by the left and right arrow keys on my computer, and the LEDs of the corresponding color to the fruits lights up if the bunny catches the fruit. As the user reaches a score of 60, the LEDS lights up and flashes all together to indicate the end of the game.
Controlling bunny with potentiometer:
Instead of with the computer arrow keys, the photos and video above show the LEDs of the corresponding color to the fruits lighting up as the bunny movement is being controlled by my potentiometer.
Challenge Faced – Incorporating a Physical Slider
Originally, I wanted to implement my APDS-9960 color and gesture sensor to my game controller to allow the users to interact with a physical slider instead of using the arrow keys or the potentiometer. I planned on creating a slider with a gradient color that can be moved around left and right over the top of this sensor to control the movement of my bunny on the screen. However, I struggled to get my sensor to work in past week’s lab and thus wasn’t able to execute this idea. As a result, despite not being able to successfully get this sensor to work and incorporate a physical slider, I started out with controlling the bunny using arrow keys, and ended up using the potentiometer instead to add in a physical layer of interaction with my game controller along with the LEDs lighting up. I also kept the code for controlling the bunny with the computer keys in my p5js sketch to allow both ways of interaction to happen easily by commenting out a part or another and switching between to two ways of controlling.
Project Housing
Building an outer box: Similar to my previous project, I decided to build an outer box for my game controller using foam board since its the material I have access to and able to use with the limited tools I have around me. As I hope to keep my game controller as small as possible for it to feel like a handheld object, I measured my breadboard and height of my Arduino Nano and build the height of the sides of my box according to this measurement. For the center with the potentiometer and LEDs, the height is slightly lower to allow the hand controlling of the potentiometer knob thus making my game controller a slight U shape. I also tried to get measurements of the placement of both the LEDs and the potentiometer as accurately as possible ad poked holes for them respectively on the lid.
Painting my box: I used acrylic paint to cover the foam boards in yellow as I feel that this color works well with the colors in my game screen and also gives a bright and lively feeling. I then decorated the lid with thin markers.
Putting it together: I mainly combined the painted foam boards with styrofoam glue and tried to make my game controller box look fairly polished. I added more decorations to the controller with fruits I cut using poster paper, and added a mini box/lid to hide my potentiometer. I also wrapped and extended the turning knob of my potentiometer to allow it to be more easily controllable.
Final Project Presentation
I added a bunny on top of the potentiometer to better connect the visual theme of my controller and digital game.
In addition to the outer box, I created a back frame which my game screen can fit into, and placed the game controller in front of it. Personally, I am fairly happy with the setup this way as I think it resembles those arcade game machines and feels like a mini version of those.
The first video bellow shows me controlling the game with the potentiometer, and the second video shows me controlling the game with my computer arrow keys:
Overall, I wanted to create a setup that the bunny on screen can be easily controlled by both the potentiometer or the left and right computer arrow keys. I focused on trying to embed the circuit into my game controller through hiding the breadboard and Arduino underneath and only have the LEDs and potentiometer popping out. Despite not ending up incorporating a physical slider, I tried to make my game controller interaction feel a little more engaging and interesting through the visual design of the game and assets, mapping of the LEDs to the corresponding fruit color, and adding in the interaction with the potentiometer.
Stephanie's ITP Blog 