Quantified Humanists - Assignment 3: Mood Visualizations

02 25 2019

Assignment 3: Mood Visualizations, Link to Assignment


This assignment came with two distinct challenges. The first was to create a unique visualization using p5.js that would receive data inputs quantifying an aspect of a users mood or feelings and then turn that data into an interesting and informative graphic. The second challenge was to build a website and database framework to allow for the storage and display of a series of these visualizations within the browser.

I started by building the p5 sketch independently of the web app. Through a somewhat coincidental realization during a conversation with Joey I learned it was possible for these visualizations to be animated, and I was determined to use that to my advantage. I also had worked through a few of the lessons in Dan Shiffman’s Nature of Code course and was interested in making use of p5 vector notation. And on the data side, what was most interesting to me was keeping track of not just my mood, but the specific aspects of my life that influence that mood, good or bad. Considering the possibilities for gravity simulation using p5 vectors, I came to this idea of representing the factors of my mood “orbiting” around a center point.

Implementing this was fairly straight-forward using the knowledge I had from Shiffman’s course, and it just required some tweaking of the parameters to keep the '“mood objects” in orbit. What I found with this first version was that even with distinct colors, the orbs felt too random, so I connected each of the four moods to their respective circles with lines which not only created slightly more cohesion of the data being represented but also just made it look way cooler. The objects then are sized based on how high (or positive) the mood rating is, and the strength of the gravity is also proportional to that number meaning the more positive the mood, the faster the orbs move.

I then moved to developing the website itself. I did a bit of a hybrid of using Joey’s template and building the site from scratch using his tutorial. With his help and the help of a couple of classmates I worked through setting up a Mongoose database and using Feathers to set up a basic app. But from that point I then moved over to adapting his template to fit my design and data points.

Screen Shot 2019-02-25 at 12.12.48 PM.png

I only really ran into one snag initially during this process, and it was while turning my p5 sketch into a sketch object. As far as i could tell there was something about the scope that prevented me from drawing shapes within a class that I had designated within the sketch object. So instead I just moved that particular function into the main draw function which made the code a bit messier but worked just fine.

Screen Shot 2019-02-24 at 9.40.34 PM.png

It was at this final stage of testing the fully functioning website that I learned that it was in fact not fully functioning. When I go to the admin page where data is input, all the sliders work correctly, but upon clicking on the submit button, I get a 400 error. All of my research seems to indicate that this is a result of some sort of formatting mismatch between the data being sent and the database, but no matter how much digging I have done in my code and online I have not been able to solve this issue. As a temporary workaround I used a curl command to send data directly to the database which allows me to see the results of my visualizations, but I am hoping to eventually get to the bottom of this issue.