Visualizing Moods in the Digital World

The Ask: Build a visual or physical object or experience that connects with the digital world.

As we near the end of this year long, accelerated Masters program we’re all a little stressed to say the least. Our solution? An interactive mood map and display. Our approach? My classmates Jim and Matt came up with the concept: an interactive mood map that responds to user input and visually displays the information. Ultimately we decided to incorporate two different buttons- a blue button that corresponds with the emotion “not stressed” and a red button that corresponds with the emotion “stressed.” My classmate Sarah and I addressed the data visualization side of the mood map and developed how the information would be displayed.

After doing some preliminary research Sarah and I determined that we wanted to use colored circles to represent the information. We sketched a few initial ideas below and then jumped into p5js.

After looking for inspiration, we found this example project to serve as a starting point. I really the randomness in size of the circles being moved, how they entered the window and how they interacted with each other. From there we decided to use red for the dots generated by the “stressed” button and blue for the circles generated by the “not stressed” button.

First we experimented with randomizing the colors of the circles. Initially, we planned to have the “stressed” and “not stressed” circles generate in a range of blues and reds.

This is how we changed the code we used as a starting point. First we created an array variable to hold the hex values for the red and blue. Then we stored the red and blue hex values in a local variable within the mouseClicked() and keyPressed() functions (place holders we used for the “stressed” and “not stressed” buttons. The third step was to pass those local variables when calling the addNewParticle function by putting the variable name inside the parenthesis where the function is called. Then we needed to tell the addNewParticle function to accept the variable by putting the variable name inside the parenthesis where the function is defined. Next we needed to push the color values to the hex value array. The final step- change the fill color to the current loop index within the hex values array before drawing the ellipse.

See our finished project below or view the project code here.