p5js link

Based on the class example that replys to input, I wanted to build a tool that translates how people feel into colors and shapes. This project focuses on text-based emotion reflection—users type how they feel, and the system visualizes that feeling as a floating geometric form on a timeline.

f9b00ca74af09e0c0f7c1b97b144926d.mp4

In the first version, I used the Gemini API as a chatbot that returned long textual summaries of emotion, but the results were inconsistent and hard to visualize.

To fix this, I redefined the system prompt to force strict JSON output, limiting Gemini’s reply to four key attributes:

{
  "label": "sad",
  "intensity": 0.68,
  "valence": -0.6,
  "arousal": 0.4
}

Each field directly controls part of the drawing:

• Label → color hue and shape (e.g., joy = yellow star, calm = blue circle)
• Intensity → size of the shape
• Valence → vertical position (positive = higher)
• Arousal → saturation (calm = muted, stressed = vivid)

Logic

1. The user types a sentence describing their mood.
2. The text is sent to Gemini 2.0 Flash with a JSON-return prompt.
3. The response is parsed and added to a local dataset stored in localStorage.
4. Each entry is drawn as one symbol on a canvas:
   • X-axis = time
   • Y-axis = emotional valence
   • Color/Saturation/Size = emotional attributes
5. Hovering shows a tooltip with details (label, intensity, raw text).