Swamp Snek

Inspiration

Once upon a time, in a swamp in Gainsville, three young boy-os set out on a mission: To find the best SwampSnek of them all. To do this, a game was invented, but this was no ordinary game.

We wanted to build a game that was highly accessible. This means no installations, no plugins, and not even an internet connection.

What it does

SwampSnek is a motion-controlled browser game that lets the user play a game of Tron simply by moving their hand around. Are you ready to climb the ranks?

How we built it

SwampSnek implements Tracking.js, a computer vision library that processes everything on the client side rather than server side like OpenCV allowing us to have computer vision on the web. We built the website using Javascript, HTML5, and CSS3 and created the Tron game in Javascript as well. We used Tracking.js to keep track of a certain color from the user's camera, with the user having the same color token to use as a "controller" and as they moved the token they could control the game.

The coordinates we got from the webcam were then mapped to certain actions in the game (up, down, left, right). This involved splitting up the webcam feed into different sectors and ensuring that one gesture wasn't mixed up with another.

Challenges we ran into

The biggest challenge we ran into was deciding whether to process the computer vision on the front or backend. We started out processing the fingertip data on the backend using opencv4js but ran into trouble with node and a few installation bugs. This was especially problematic because all of us were new to Javascript.

We then switched all the processing to the frontend using tracking.js. This also included switching from tracking fingertips to tracking colors. This enabled us to have a game directly running on the browser!

Accomplishments that we are proud of

We're extremely happy that we actually built a really fun game. Initially, we had our doubts on how complete our game would be considering everyone's experience with JS, but we picked up JS faster than any of us expected. We started out just playing around with fingertip tracking and color tracking but ended up with a fully functional game. Our team really wanted to work on a pure JavaScript project, and we feel that SwampSnek is a good culmination of our goal starting out.

Another thing we're really happy with is the lack of external requirements to play SwampSnek. All you need is a modern browser (if that) and a webcam to become the best snake in the swamp.

What we learned

This was the first major project in Javascript for all of us, so it was an interesting crash course for us that included a lot of google searching and frustrated sighs. But in the end, we're extremely happy with what we've learned and now are looking forward to completing future Javascript projects much faster.

What's next for SwampSnek

We have many aspects that we want to build upon with this project. The first of which would be to further develop the detection system to recognize fingertips rather than color to improve accuracy and avoid confusion with other colors in the background. With this addition, we could make the game more accessible and with fewer complications in the environment.

Built With

• css3
• html5
• javascript
• tracking.js