Floating IM Words – Josie & Mari

For this project, we both thought it would be interesting to identify the most common words found in our class blog and make a visual representation out of that data. Initially, we were going to make our program analyze a series of text pages from the blog and identify by itself the words that were most commonly found. However, after copy-pasting pages of text into a word count program, we noticed that this approach would not end up in the best of results, since the most common words ended up being prepositions like “of”, “and”, “or”, etc. Therefore, to make the outcome more interesting, we decided to run three pages of text from the blog into the program and manually select words we thought were the most appropriate.

Once the idea was established, we decided to divide our roles to make the collaboration easier. Mari started with the code – making the main logic, reading and using the csv file, making the float movement, and Josie polished and added the final interactive and visual elements – setting the visuals for the texts, their actions (varying opacities) and the on-hover & on-click logic.

We experienced a variety of difficulties in creating the project. Some were about concept/look: we originally wanted to add an on click effect to each specific word, but found that it was not easy for the user to chase down a moving word with their mouse and click on it. Additionally, we thought that making the words collide into each other would be interesting/look great, but when we actually implemented it the project just looked messy and dysfunctional. Other difficulties were in writing the actual code: it was very difficult to determine the exact area each word takes up on the screen in order to detect when a) the words overlap, b) the words hit the sides of the screen, and c) when the mouse is on the word. However, we eventually figured out a way through Processing to determine a text’s height, and once we figured that out, we used the text’s height and width to determine its area/location on the screen. Despite these difficulties, it was a really fun project to do – both because we got to work with data, work with a partner, and work with material from the class blog. We loved seeing what words people continuously use in their posts – they are all about innovation, technology, people, etc. If we expanded the project, we would probably want to analyze more than the more recent two pages of the blog in order to get better, more representative data.

Here is a sample gif of the result:

The original is in full screen (1280 x 720) resolution

Here are screen shots demonstrating the different colors (that the user chooses by clicking on the screen):

RED

YELLOW

BLUE

GREEN

PURPLE

Final code here