MINDFUL MOOD SPACE
Write, visualize, self-talk, reflect in a 3D Interface.

ROLE
Designer
Developer
Researcher
SKILLS
WebGL / GLSL
Three.js
Data Visualisation
TYPE
Personal
DATE
Sep, 2021 - May, 2022

/01 about

Mindful Mood Space is a web-based interactive diary writing and visualization tool based on a psychological approach, providing a therapeutic and artistic experience. This project aims to create an interactive emotion-diary writing experience with real-time generative animation as metaphor and a 3D storage space for all the visualization of emotion-data for retrieval, exploration, reflection, and discovery of patterns of myself.

Through this project, I hope to help myself improve my ability to deal with emotions and get a better understanding of myself. I also hope to inspire an audience to be more aware of an intentional and healthy way of treating their thoughts and emotions, and what they can do to take care of their inner world in a mindful way.

joy + trust + anticipation
anger + disgust + fear
depressed + insecure
Interactive data visualization in 3D space

/02 experience

Experience Flow

The final prototype is a web-based application that allows me to use therapeutic writing combined with real-time generative visuals to track my feelings and thoughts and retrieve to explore my diary data through visualization of feelings in 3D interface. The experience is both therapeutic and artistic, helping with the discovery of the positive experiences and acceptance of negative emotions.

/03 core features

Generative visual representation of emotions

In the user flow, the visualization of emotions is generated and brought into view in real-time after words about emotions are typed into the user interface. To create these visuals, I developed an emotive form design taxonomy that breaks down my unconscious understanding and emotive perception of different colors, shapes and motion pattern into various quantitative design attributes which are then integrated into the Emotive Generator Component of the whole system. The system computes the quantitative attributes of the input and then generates a visual entities of emotions whose form reflects the feelings.

Generated Visual of Mixed Emotions

Real-time generative feedback with visual metaphor

The visual entities of inner feelings are generated and brought into view in real-time after words are typed. The animation feedback is used as a narrator to message metaphors about what is happening inside our mind and body and the healthy attitude we had better hold towards our emotions and thoughts. The emotion wheel is used as reference for describing feelings.

Describing feelings with Emotion Wheel
Real-time animation feedback - Thoughts as Bubbles

As a intended user, I can then manipulate the resulting visual form by modifying the parameters to better reflect the feelings, and then store this self-dialogic data in the data gallery for retrieval, exploration, reflection, and discovery of patterns of myself.

Real-time animation feedback

3-D interactive data visualization

This is a space that stores all the data of previous journaling that is visualized as colorful spheres. This 3D space can be seen as a space of the user’s inner world that holds all the visualized entities of feelings that have their own name. As the user I can interact with the spheres in the space and the user interfaceto explore my data and discover myself.

/04 implementation

System Development Process and Challenges

The biggest challenge for me is to develop the system from scratch and keeping larger amounts of code organized. Facing this challenge, I learned from other people’s projects on github about how the system is structured and how the code is organized.This is the process I used to address the challenges:

1. Case study. I learned from other people’s projects on github about how the system is structured and how the code is organized. With the help of the concept of visual programming and C4 Model, which stands for Context, Container, Component, Code, I created layer diagram and mapped the code operation logic of their project.

2. Adjusted the visual programming diagram/layer diagram according to my own needs. Defined the context, container and component of my system.

3. Set up the project. Created code files/modules based on the layer diagram. Commented the code to separate the code sections.

4. Filled out code sections with actual code.

Programming diagram / layer diagram

discover more projects