The inspiration for FaceIT started during our ideation process. While we brainstormed ideas for a project, we had a look at Hack Western's hacker pack for project ideas. We took the idea of a "text to emoji translator" and thought of a "face to emoji translator." This would be a way to make your own emojis using your face and facial expression to text your friends. Then we had the idea of turning it into an online multiplayer party game like Skribbl.io, and we decided to go for it!
What it does
FaceIT is a multiplayer browser game where players are given an emoji and everyone tries to make that face and take a photo of themselves. Then, all the players will be able to view each other's photos for a limited time. Everyone's faces will be converted into custom emojis! The players will then guess which player each emoji belongs to.
How we converted a photo to emoji
We used Google Cloud's face detection API to get points from different facial features, drew curves that connected those points into an eye, mouth, or nose, and then put the result over a yellow, round emoji head.
What it looks like:
Challenges we ran into
- Trying to implement the photo carousel design from Figma.
- Attempting to implement multiplayer lobbies without direct usage of WebSockets
Accomplishments that we're proud of
- First hackathon for most of us :D
- Generating funny custom emojis from real faces.
- Learning how to draw curves using points in Python.
- Displaying to users their emoji-fied faces
What we learned
- The importance of prioritizing tasks and functionality as we had spent a lot of time on.
- Teamwork and collaboration!
- How to prototype with Figma.
What's next for FaceIT
- Finish our game by implementing guessing faces, taking a photo from camera, scoring and scoreboard.
- Use our face-to-emoji feature to allow users to create and download their own emojis, separate from the game.