Fair Rock-Paper-Scissors

It's rock-paper-scissors hosted on a website against a computer using computer vision, that will give you the worst win rate of all time.

Comment

Inspiration

We wanted to make a website that utilized an open source framework for computer vision called MediaPipe by Google. After much deliberation, we settled on making a simple game of rock-paper-scissors featuring MediaPipe's Gesture Recognition solution.

What it does

Upon landing on the website, there is one panel on the left where live feed of the user is continuously displayed. The panel on the right will display pictures of our team signing rock, paper or scissors and the picture displayed is chosen by the computer based on what the user signs to the camera. However, your opponent is the best rock-paper-scissors player to have ever existed.

How we built it

MediaPipe is the backbone of how our game works. It's an open source framework easily made accessible by Google, and we used its Gesture Recognition solution. This solution has already been pre-trained (using Google's ML Fairness standards) to recognize 20 positions in the hand which include the wrist, fingertips and all the joints in the hand. The foundation of our detection algorithm was starter code provided by LintangWisesa on GitHub, we then added the conditional features that produce an output triggered by the input processed through the Gesture Recognition. We were able to build a user-friendly front-end using HTML and CSS, and then connected it with the back-end that was developed with JavaScript and the guidance of ChatGPT. Our website uses the weekend's free domain name provided by the GoDaddy registry.

Challenges we ran into

We spent a great deal of time learning about the MediaPipe framework, and then figuring out how to make it compatible to our goals. One particular struggle was getting the computer to detect our hand gestures and produce the desired output, due to the extent of our knowledge concerning web development being introductory-level.

Accomplishments that we're proud of

We're proud of developing our first website using a framework that felt foreign at the beginning of the project to feeling familiar by the end of the project.

What we learned

We learned a lot of techniques that improved our HTML and CSS and how to connect the front-end to the back-end of our website developed with JavaScript.

Built With

Share this project:

Updates