Introduction: Mood in Motion

By

This project is created as a course assignment at the California State University, Long Beach; taught by Behnaz Farahi: DESN 586 Human Experience and Embodied Interactions Studio.


This concept is about creating captivating web screens that can change to fit the mood of the user. The goal of this concept is to create a collection of categorized moods that can be represented by a list of imputable synonyms.


A visual representation of your mood can benefit you in several ways:

  • Self-awareness: Creating a visual representation of your mood allows you to become more self-aware. It helps you recognize and acknowledge your emotions, which is the first step towards managing them effectively.
  • Clarity: By representing your mood visually, you can gain clarity and insight into your emotional state.
  • Communication: A visual representation of your mood can also be helpful when communicating with others. Sometimes, it can be difficult to put our emotions into words, but a visual representation can make it easier for others to understand how we're feeling.
  • Monitoring progress: A visual representation of your mood over time can help you track your progress in managing your emotions. It can show you how your mood has changed over time and help you identify patterns in your emotional state.

This application can be used as therapy for users and possibly institutions.

Supplies

P5.js is an open-source JavaScript library where I will be coding the interactive and creative graphics allowing users to express their moods creativity through programming.

Step 1: Ideate

Initial Concepts:

  • Digital Journaling Application
  • Mood Instillation

Notes:

  • How to make an Interactive Digital Journal
  • Should I represent mood or combat specified moods?
  • Model emotion based on keywords assigned

Ideas:

  • Use gradients as base a for a screen

Step 2: User Experience Flow

Step 3: Research

Questions:

  • What can shapes mean in accordance with mood?
  • What can a screen depict?
  • What do certain colors represent?
  • How does the shape influence a mood?

Color Therapy:

Colors have mental and emotional effects on sighted people.

Sources:

Step 4: Case Study

"Gradients in motion design help capture our current emotional spectrum"

-Danyelle C Overbo


While reading this article, I stumbled upon a great example of what a mood screen can depict. This Adobe article discusses how gradients in motion design can evoke different emotions and create visual interest. The use of gradients can create depth, texture, and highlight movement in design. The article provides examples of how gradients can be used in motion design to create specific moods or feelings, such as calmness or excitement.

https://blog.adobe.com/en/publish/2021/08/17/gradients-in-motion-design-offer-range-of-possibilities-match-our-current-emotional-spectrum

Step 5: Mood Board

Representing different moods using color and shape in motion can be a creative and effective way to convey emotions visually.


For example:

Representing Calm: Cool colors such as blue or green and soft, flowing shapes like circles or waves. The motion can be slow and fluid, depicting a sense of relaxation.

Representing Sad: Muted, desaturated colors such as grey or blue and shapes that are drooping or slumping. The motion can be slow and sluggish, reflecting a sense of melancholy and heaviness.

Representing Angry: Mold, intense colors such as red or black, and use sharp, angular shapes like triangles or jagged lines. The motion can be fast and jerky, conveying a sense of tension and agitation.


Step 6: Code Conceptualization

The main moods intended for depiction are six basic emotions Happy, Fear, Sad, Calm, Anger, Excited

Moods currently in the works Isolation, Centered, Excited, Calm, Confused, Happy, Energetic, Fear, Disconnected, Grounded, Peace


Helpful Tools:

https://p5js.org/reference/

Step 7: Code Text Box

Users will input one word describing how they feel into a text box.

Step 8: Altering Text Box Function

Text box function has been altered and tested with the word "happy" and an input.

The biggest challenge will be altering the mechanism to change after imputed mood to fit a custom screen.


Helpful Tools

https://www.yourowncodes.com/html-css-user-defined-background-gradient-color-text-list-box/

Step 9: Code Testing, Motion Inputs

Apply research and color theory to align with code and edit code aspects like shape to align with specified moods.

Credited Code Sources

Step 10: Installation Demo Concept

Materials:

  • Room Space
  • Laptop
  • Projector
  • Test Subject
  • Mood Cards

Step 11: Mood Cards

Step 12: Installation Visual Key

Step 13: Mood Screens

Step 14: Installation

Step 15: Application Concept

Users will have access to daily, weekly, and monthly averages as a result of the data gathered over time. Users can assess tendencies they want to modify with the use of the suggested guides in order to establish healthy goals and uphold a positive outlook each day.

With this digital mood journal application, a user would ideally be able to record their daily moods. Following that, users could track and evaluate their mood on a weekly basis while also getting advice on how to deal with a bad mood or maintain a good one.