Kappa Cloud

• 

• 

  LUL

• 

Inspiration

The inspiration was to have a word cloud-type picture just with twitch emotes

What it does

We connect to a twitch chat, and then in real time, we would make a "cloud"-like picture that shows all the emotes the chat is typing in. The more the chat types in a certain emote, the bigger it will appear on the webpage.

How we built it

We connected to the twitch chat server via a third party library that implemented the twitch api. From there we parsed the incoming twitch messages into just the emotes and kept track of how many times each emote was being typed. We then "weighed" the emote by taking how many times the emote was being typed, and divided that by how many total unique emotes there have been. Then based on the weight, we decided on how big each emote would be represented; the higher the weight the bigger the emote graphic. All of these emotes are in a queue, so that we can also implement a "decay" system; after a 30 second window, the emotes start to decay and we start popping these emotes off of the queue and add new ones. To actually draw the emotes to the page, we just go through the css api.

Challenges we ran into

One of the biggest challenges was to actually implement the "cloud"-like setup on the webpage, in order for this to happen (even with a third party library), we would have to implement our own algorithm that would be able to rearrange our emotes extremely quickly, because our emotes are constantly growing and shrinking because of the real-time aspect of this program. Another challenge was trying to make this app an actual twitch extension, unfortunately half of our team was not able to get the docker application working for the actual testing of our potential extension.

Accomplishments that we're proud of

Being able to do a "image cloud" like system in real time instead of just having variables to input

What we learned

What's next for Kappa Cloud

Make it an actual twitch extension Implement an algorithm to make the display truly "word cloud"-like possible implement a physics system for the emotes

Built With

• css
• css3
• html
• javascript