Emoti – Visualising our Emotions

If you missed the updates recently, we’re currently running a 12-month programme for creative young people called Raspberry Pi Creative Technologists.

We have a Google+ community for the group to post ideas, share interesting links and ask each other for help and we hoped they would also use it to arrange to meet up outside of the organised field trips: within the first month, one of them found the Art Hackathon and suggested they go along and take part. Three of them went along and teamed up with some others. Yasmin wrote a full account of the hack…

I’ve always heard about how awesome Hackathons could be; they’re a chance to surround yourself with intelligent people who share the same interest, come up with inspiring ideas together and become engrossed in a project, with everyone chipping in to turn concept into reality over one weekend.

But I’m going to be perfectly honest with you here; however awesome this sounds, I can’t help but feel a tad intimidated by it all. There’s still so much I feel I have yet to learn and I always worry about how much of an asset (or a nuisance) I would be.

IMG_1048

So when I saw an opportunity to go to an Art Hackathon, which aspired to mix teams with different skill sets and types, I knew that I had to attend, and I’m so glad I did! With the Hackathon holding presentations by many talented people including Joel Lewis, Di Mainstone and Nick Rothwell, as well tables full of various tech and art supplies, there were no limitations to the amount of creativity that we could muster!

Yasmin and Milton

Yasmin and Milton

All of this inspired a creation that managed to win 2nd Place for Peoples Choice, and I can proudly say that I was a part of its development:

Emoti – Visualising our Emotions

Emoti shows the emotional state of the world through combined visual colours and audio, resulting in a beautifully chaotic representation of the emotional state of the world – or at least the twitterverse.

Using Twitter Widgets, our team was able to pull certain keywords from tweets being posted in real time and assign them to different emotion types, which meant being able to have constantly updated data on how people were feeling on twitter through these emotion-related keywords. The emotions we assigned them to were: Happy, Sad, Surprised, Afraid and Angry.

From this data we then created a simple HTML web-page with 5 divs, or blocks, of colour relating to the different emotion states. These would constantly change width depending on the data that was being collected from the tweets to give a visual representation of how many people were tweeting under each emotion:

  • Green = Happy
  • Blue = Sad
  • Yellow = Surprised
  • Pink = Afraid
  • Red = Angry

To make this experience of witnessing how the world feels and how frequently these emotions change more immersive, these visual representations are also accompanied with audio. We chose five audio tracks, one to depict each emotion, adding them into the web-page using the HTML5 audio tag, and adjusted their volume depending on the emotion-based twitter data with some JavaScript wizardry. This ended up with the clashing music types seemingly battling against each other, reflecting how hectic the live emotion states were and how rapidly they would change at random; one moment showing solely happiness, the next ultimate anger.

The Hackathon Effect

The Hackathon Effect

This was an Art Hackathon don’t forget, so, of course we had to present this data in a beautiful and intriguing way. What’s more intriguing than creating the illusion of 3D colour-changing ripples?!

For this effect, the designers in our team laser cut clear plastic to create the individual ripples and slotted them into a black board. I decided this would be the perfect opportunity to whip out my Raspberry Pi! We ran the web-page through the Pi and hooked it up to the HDMIPi, allowing a bright screen for our structure to be placed onto, so that the moving coloured blocks from below would shine onto the clear plastic and give the illusion of a 3D object.

Finally, the structure was put together in a dark, enclosed space, and the end product came to life, completely exceeding my expectations! Colours danced gracefully across the ripples, making us forget that there was even a web-page below. It was easy to get lost in the entrancing movement of pattern that the object seemed to create. As soon as you immerse yourself in the full experience, with audio as well as these entrancing visuals, it becomes a little overwhelming. Watching the colours is one thing, but hearing the clashes of audio really brings the message across that this is how people from around the world are feeling right now.

It’s both a marvel and a mess all at the same time; both beautiful and chaotic. Just like the emotions we feel and the complexity behind them.

Yes, it’s open source! Find the (somewhat messy) code here: https://github.com/itomblack/emotion-twitter

What I Gained…

Aside from the obvious: an awesome project, a better understanding of how to work in a team and improved coding skills, I managed to come away from the Hackathon feeling much more positive about what I, as an individual, can achieve. I may not be have been the most skilled coder in the room but I was still able to have meaningful input on the project, both creatively and through my development skills, which leaves me wondering what I was so worried about in the first place!

As well as this I’m so grateful to have had the pleasure of meeting many creative and genuinely lovely people. It was so interesting to see all of the various projects that everyone had made, each one entirely unique and fascinating in its own right.

Thank you to the people behind the Art Hackathon event and those intelligent folk within the Emoti Dream Team who helped bring it to life:

P.S. This is my very first blog, how am I doing? Let me know! (If you want to… No pressure…)