Emoji Party using HTML5 Canvas and requestAnimationFrame

I’ve been planning on having this feature for a long time now, even before I rewrote this whole app last December. It's finally here!! 

What do you mean emoji party Gwe? Check out the embedded CodePen pen below. I decided to recreate it in CodePen for demo purposes and as a challenge as well. The difference with the one on my repository to this was the use of vanilla javascript instead of Typescript and Angular. 

You can play around with it by changing the emojis and the total count of items (CodePen automatically saves and reruns the code)! That's how I took screenshots as examples that I added at the lower part of this blog post. If it did not work the first time as expected, you can always click the CodePen button at the bottom right that says Rerun.

Inspiration

So on our birthdays, Twitter never fails to surprise us with birthday balloons 🎈. Such a simple idea and yet very impactful. (TODO: Screenshot that feature on my actual birthday and add the image here)

Messenger has something similar too when we use a sticker with a heart ❤️. Multiple hearts of differing sizes goes up our screen. We can even play with those using the touch! I don’t think that feature is still in the app though. It is now more subtle as compared to how it was. 

Idea

The idea really came to me one time I was thinking about how companies change their entire branding on special occasions, specially on holidays. I wanted something like that on my website that is also somehow automated. 

Let's call it the events feature and here's what I wanted for it:

• a list of events that are based on individual dates (with the help of Day.js)
• random but pre selected emoji based on the event flying up the screen. (Another goal is to set a theme to represent the event)
• UI section to show up for information of the said event or things I want to say.
• a custom cursor (emoji) related to the event for additional sparkles ✨. 

Actual implementation

When I had the idea, I attempted to try it out asap. After a day of little progress, I went back to my normal life and forgot  all about it 👻. My thoughts weren’t as clear at the time. 

Now that I think I had more than a year sitting on the idea, I finally decided to try again. Also, my birthday is just a few months away! The perfect date for this feature.

HTML5 Canvas and requestAnimationFrame

Ahh, the stars of this show ⭐️⭐️⭐️⭐️⭐️!

I have experience working on HTML5 Canvas and requestAnimationFrame from my previous company. I had created 2 canvases to visualize data which are also heavy with user interaction. Those were my 2 favorite projects! This (emoji party) can all be just because I wanted to work on something like this again 🤷🏻‍♀️.

Now what I need this time is simpler. It’s literally just emojis flying on the screen.  What it was in a nutshell was:

• a list of emojis with
  • random speed
  • random width/height
• requestAnimationFrame to loop the data/repaint the animation when browser is ready

Why requestAnimationFrame? I could also just iterate the functions with the default loop to paint it. But with that approach, the browser will either hang from the infinite loop or will use heavy CPU usage making it hard to use the application. Using requestAnimationFrame is the perfect solution for a smooth + light animation.

It was all trial and error. It looked so bad before it got to look decent. It was so bad in the beginning that my boyfriend and I were laughing at it. Really, I only wish I took videos during that process so that you can laugh at it too 🙊. I even had doubts then if I could actually make it work

In the end it was all about getting the numbers right. Did I already tell you Math was my only favorite subject in school? Maybe this is why I really enjoy working with canvas. It is all about advance animation and yet it works with so many numbers 😍. 

Examples

One major plus points for me is how the the mood changes based on the emojis selected! Can't wait to really lay out the events and be creative with displaying the emoji party ✨.

(generated output using heart emojis)

(generated output using neutral + travel emojis)

(generated output using candies and sparkles and things that spark joy emojis, okay I may have went overboard for this example 👻)

(generated output using ocean related emojis)

 Future improvements

• fix bugs
• interactive emojis!
• improve the current emoji sizes (some turned out way too small)
• list of events called from an API (currently manual)
• try out a confetti like approach with the animation
  • I may or may not have initially called this feature confetti in the beginning to only find out it does not describe it well 😇

---

Come back for my birthday (March 6) to see flying emojis again and let me know what you think!

View on Codepen