DuelVision

• 

  Main Page

• 

  Signup Page

• 

  Waiting screen

• 

  Leaderboard

• 

  Statistics Page

• 

  Computer Vision and Hand Tracking. You open your hand, it shoots!

• 

  (In development...)

Inspiration

We were extremely inspired by all the computer vision projects circulating around, and decided to use it to make a very fun duelling 1v1 game.

What it does

You can 1v1 against another player! You can move your arm around to dodge incoming bullets and shoot your own bullets at the opponent with different hand movements!

How we built it

We used MediaPipe to recognise the different hand positions, which the sprite will follow. Also, depending on different hand gestures, recognised by the computer vision AI, the sprite will be able to shoot projectiles, from a certain position. This will be sent to a server via WebSocket, in order to send the information to the other player.

Challenges we ran into

We ran into some problems when communicating between frontend and backend with the Python implementation of MediaPipe, as the connection was too slow. To fix this issue, we reimplemented all of the computer vision with MediaPipe back in JavaScript.

Accomplishments that we're proud of

Using computer vision through MediaPipe to track hand movements and taking these coordinates to make the player move.

What we learned

We learned how to implement MediaPipe in both Python and JavaScript. We also learned how to use WebSocket to send information of the bullet to a server, and then to another player.

Built With

• javascript
• mediapipe
• opencv
• python
• react
• ui-ux