Inspiration

There are a lot of photos of our friend Will. Lots.

So being perfectly normal computer scientists/engineers, we decided to put these to good use by using as training data for generating emoji fonts.

Don't worry we asked him first :D

What it does

On our website, you can upload a photo album, wait a few moments for the server to generate the response, and then get redirected to a page that shows you a newly-generated TTF font with all the emojis replaced with the faces from that photo album.

How we built it

We broke the work down into parts:

  • Translating an emoji into a photo from the album
  • Cropping the image to the correct aspect ratio
  • Removing the background
  • Creating a website

Challenges we ran into

  • Background removal. Much harder than it looks for some reason :P
  • Hijacking the google noto fonts scripts to work for us

Accomplishments that we're proud of

  • It works!
  • The "clustering" algorithm we use for selecting the best picture for a given emoji works really nicely and returns mostly reasonable results

What we learned

  • The Azure API stuff is very handy
  • The unicode spec is very very interesting, specifically the parts about emoji handling. What may appear as a single emoji character can actually be combinations of codepoints. Also all emoji data is available in text files that are easily parsable!
  • TTF fonts don't have a builtin way to handle emoji colours. So, there are a number of different extensions to handle it - the scripts we were using did it the Google way, so that means that our emoji fonts aren't particularly portable :(
  • There are some great pictures of Will

What's next for Willmojis

Making the website look prettier :P

Sample server output

classify 'MVIMG_20191116_184859.jpg'
classify 'MVIMG_20191116_184846.jpg'
classify 'MVIMG_20191116_184844.jpg'
classify 'MVIMG_20191116_184918.jpg'
classify 'MVIMG_20191116_184925.jpg'
classify 'MVIMG_20191117_025511.jpg'
classify 'MVIMG_20191116_184849.jpg'
classify 'MVIMG_20191116_184841.jpg'
classify 'MVIMG_20191116_184923.jpg'
classify 'MVIMG_20191116_184843.jpg'
loading dnn...
seperate bg 'MVIMG_20191116_184918.jpg'...
seperate bg 'MVIMG_20191116_184925.jpg'...
seperate bg 'MVIMG_20191117_025511.jpg'...
seperate bg 'MVIMG_20191116_184849.jpg'...
seperate bg 'MVIMG_20191116_184843.jpg'...
seperate bg 'MVIMG_20191116_184844.jpg'...
seperate bg 'MVIMG_20191116_184859.jpg'...
seperate bg 'MVIMG_20191116_184846.jpg'...
add img for codepoint 1f600
add img for codepoint 1f602
add img for codepoint 1f642
add img for codepoint 1f609
add img for codepoint 1f60a
add img for codepoint 1f910
add img for codepoint 1f928
add img for codepoint 1f610
add img for codepoint 1f60f
add img for codepoint 1f612
add img for codepoint 1f924
add img for codepoint 1f615
add img for codepoint 1f61f
add img for codepoint 1f62f
add img for codepoint 1f632
add img for codepoint 1f627
add img for codepoint 1f628
add img for codepoint 1f622
add img for codepoint 1f62d
add img for codepoint 1f631
add img for codepoint 1f61e
add img for codepoint 1f629
add img for codepoint 1f971
copy imgs...
build font...

Built With

Share this project:
×

Updates