Pong Remix (Gestural Interface)
Gestural Interface Design, Game Design
This is an old student project — but a fun solo learning experience as my first time designing completely in code (Processing) and designing for a non-traditional, gestural interface!
This was a solo student project for a UCLA Design|Media Arts course on Interactive Digital Design. The task was to remake the game of Pong and add a twist to it, using the Processing (Java-based) programming language, in 2 weeks.
I wanted to make the classic arcade game feel actually fun and engaging again. Looking at the available selection of user input methods, I wasn’t convinced that forcing two players to scrunch up awkwardly around a keyboard would achieve that goal.
That led me to wonder how I could leverage the webcam instead: After combing through Processing’s readily-available image processing capabilities, I thus explored the idea of a gestural interface that could be controlled by just the flash on a mobile device. Utilizing a phone’s flash had the benefit of being extremely accessible to any smartphone owner, without needing any special hardware OR software to jump in the game.
I achieved this by having a player’s “cursor” follow the brightest pixel on that player’s half of the screen, which would be the phone light most of the time.
My first rodeo with designing a gestural interface was both fun and challenging, and below are some key lessons I learned throughout the process.
Once I successfully got the core game mechanics working, quick user testing revealed that players wouldn’t know how far away to stand from the screen If they were too far away, they couldn’t reach all corners of the screen; too close, then the blurred glare from their phone light would cause their cursor to jump around frantically.
To solve this, in the pre-game “tutorial”, I simply added a face outline for them try to place their head in, accompanied with light textual instructions. This felt like a universally understandable and intuitive solution for normalizing the distance between users and the screen:
The “twist” I added a game: hovering over the pong ball long enough would “level up” your paddle and increase its width, making it easer to defend your side. This added a level of competitive complexity to the game, and it was interesting to observe different playing styles emerge:
Determining the appropriate method of user interaction was a tricky balancing act between feeling natural vs. avoiding false positives. I went with an “on-hover” interaction that would confirm a user action when held in place for long enough (as measured by a radial progress bar/timer).
I initially tried triggering the countdown only when the user cursor was fully encapsulated in the UI button, because doing so would make it less sensitive to false positives (e.g., moving their phone across the screen) and would thus strongly signal user intent…
…However, prototyping the idea revealed that the cursor (constantly jumping around to the brightest pixel) wasn’t always still enough to hold the cursor in such an exact position. This led to two adjustments:
- The interaction countdown trigger was changed to when boundaries simply overlapped. To counter-balance the resulting increase in risk of false positives, I increased the countdown duration necessary to confirm a user action.
- I implemented a smoothing function to make the cursor jitter around less.
After considering other ways that I could build on the unique “webcam” element of the game, I choreographed a “snapshot” sequence that was carefully-timed to capture player reactions after winning/losing a game. That picture would then be saved for them to share on social media. This was a fun reminder that making a game feel fun and delightful doesn’t happen from core game mechanics alone — it involves considering the entire experience!
Making a game feel fun and delightful doesn’t happen from core game mechanics alone — it involves considering the entire experience!
It was awesome to see my friends get so into the game during user testing — jumping around, swinging their arms, and even deviously flashing their phone on the opponent’s screen to sabotage them.
I’d love to revisit this one day and think of what the next-gen version of this could be!
