We were inspired by the Who's That Pokemon bit that appears right before and after commercial breaks from Pokemon. Our first conversation was a shared interest in the show and the impact it had on us during our childhood. However, we wanted to modify the idea in a way that was unique to us. After talking about it a little more, we came up with the idea of AniMatch.
What it does
AniMatch is a guessing game that incorporates a variety of popular anime characters. The user is given a very blurred image of a random anime character. Furthermore, they are given four options. Over time, the image will become less and less blurred. The objective of the game is to correctly identify the anime character as quickly as they can. The faster the user pinpoints a character, the more points they get. However, the user needs to be careful. One incorrect answer and the game is over.
How we built it
AniMatch is a full-stack web application. The backend is a RESTful API that was built in Flask using the Flask-RESTful and Flask-CORS extensions. Images were processed using a combination of OpenCV and Pillow, applying changes to image saturation and pixelation. The front end was built using REACT.js. Additionally, Axios was used in the frontend to make cleaner calls to the API. The back-end is hosted on PythonAnywhere, and the front-end is hosted on Netlify.
Challenges we ran into
There were a few roadblocks during the production of AniMatch.
- We ran into several bumps when determining how to blur/pixelate our images. Specifically, we were confused as to how to go about doing it, having to pick between local generation, generating the images live, or applying a filter in the front-end Finally, we decided on generating every image locally, and pushing it to our hosting platform. We used a combination of OpenCV and Pillow to achieve the desaturation and pixelated effects.
- Hosting was another problem we faced, as file paths on our hosting platform used a system unfamiliar to us. As an inadvertent result of this, we mastered the
osmodule in Python through experimentation. We also needed to learn how to host the front-end properly, another challenge that we overcame.
- Timer and score logic was another challenge, as it required a relatively confusing implementation of both math and React Hooks.
- For a less serious issue, we had a lot of trouble settling on a name for this project, but we finally settled on Animatch!
Accomplishments that we're proud of
- We're super proud of getting the images scraped and processed automatically, as it required an understanding of both image processing, web scraping, and how the web works in general. It also creates a nice visual effect that can be displayed in the front-end.
- Another big accomplishment was getting both the front-end and back-end properly hosted, as this was a good test of our full-stack abilities.
- As an add-on to the previous point, we were able to seamlessly send images using an efficient file-encoding method that we found out about and learned during this hackathon. Getting this working was huge for us.
What we learned
Vedaant: I learned about image processing using OpenCV and Pillow, learning how to apply filters to the images we used. Additionally, I learned about base64 file encoding, which allowed as to efficiently send images from the back end to the front end. I also improved my git abilities, figuring out how merging and branching works. Something else I found out was how to display GUI elements on WSL, an important task for working in a Linux environment.
Thanussian: First, I learnt about hosting frontend applications using Netlify. Additionally, I developed my knowledge in Flask and became comfortable with Flask-REACTful and Flask-CORS in order to write the API for AniMatch. Finally, I refreshed my knowledge of web scraping in order to collect a dataset of images.
What's next for AniMatch
There are several features that we didn't have enough time to implement, leaving us a lots of things we can add! We're planning on adding even more characters to our system, a stored online leaderboard with the highest scores, and a system to prevent cheating through the use of bots. After that, we'd like to generate revenue from AniMatch, potentially including custom "guess packs" from subscriptions or advertisements.