Emojify

Turn your photos into amazing emoji artwork, automatically!!!

Comment

Inspiration

While scrolling through our Instagram feeds the other day, we came across the following account: https://www.instagram.com/yungjake/. We loved all of his emoji artwork, but were left wondering what our favorite photos would look like in this unique style. As computer science students we knew that we would not be able to recreate these ourselves, so we turned to the next best thing, programming! A flood of inspiration rushed towards us, and thus the idea for Emojify was born.

What it does

Put simply, Emojify allows users to upload images to our service and have them converted to emoji artwork. However, the app is so much more than that and serves to bring people together in a time where we all seem so far apart. Nowadays on social media pretty much all of the trends are based around either scandals or negativity, but Emojify was designed to bring more fun and positivity to anyone’s timeline. Any memory from a meaningful photo, a cherished group memory, or simply a selfie can be given new life via the emojis we all use on a daily basis.

How we built it

Before we started building the project, we designed every portion of the app using the UI Design tool Figma (https://www.figma.com/file/oKKhRKzeCDWIkN6S2oKJXO/Emojify). The frontend for Emojify was built using React and custom CSS. The artwork is created via a POST request to our custom Python backend, containing the Base64 string of the uploaded image. On the backend, the uploaded image is resized into a square image proportional to the preset step and filter size, and then the filter steps across the image, taking the average color under the filter and writing the emoji with the closest average color to a canvas the same size as the as the filtered image. The closest emoji is found by searching an octtree which treats rgb values as coordinates for the average color and returning the emoji stored at the resulting leaf node.

All of the backend code is hosted using Google Cloud’s App Engine and the frontend code is hosted using Vercel. The domain for the site was provided by Domain.com. We would like to give a special thanks to Google and Domain.com for the credits/promotions throughout our hackathon journey.

Challenges we ran into

One aspect that we did not consider at the beginning of this project was how we would be able to calculate which emoji is closest to the color of a given pixel within the uploaded image. We ended up using an octree to recursively divide the color options into octants and quickly discover which was the closest.

Neither of our team members knew very much about image processing, so it was quite the journey learning this new technology, but it was all worth it in the end.

Note: We have a fully functional front-end and a fully functional back-end, however due to some last minute CORS issues we were not able to connect the two. We tried to set up a Cors Proxy Server, but the domain did not resolve in time for this to be functional

Accomplishments that we're proud of

We are proud of how much we got done over this weekend. We both stepped outside of our comfort zones and learned new technologies, struggling along the way, but learning so much at the same time.

What we learned

From a frontend perspective, the UI utilized a lot of animations to give what would traditionally be a static design more personality and fluidity. We were new to CSS animations, so this project gave us a chance to mess around and be creative with those. Additionally, we had never really worked with uploading, storing, and sending Base64 images, which would no doubt be a valuable skill in the future.

Working on the backend, processing the image efficiently led us both to expand our knowledge in algorithms and image processing--given that each emoji selection required searching a 3-d space with 16581375 possibilities 400000+ times in less than a second, choosing the most efficient algorithm possible was critical. In ensuring that the backgrounds of the emojis selected didn’t obscure the picture we were attempting to convey, we learned about background removal and transparency and how that changes when images are stored in a variety of common formats.

Neither of our team members had used Google Cloud App Engine before, which seemed intimidating at first, but was actually very simple and made hosting our backend a breeze.

What's next for Emojify

While working on the project, we proposed the idea of connecting with a print-on-demand fulfilled to enable users to be able to easily purchase t-shirts and other products with their modified photos on them. This allows for users to showcase their favorite photos in a brand new way, leads to revenue generation to fund further development, and can increase the brand awareness of Emojify.

Share this project:

Updates