Concept
Well, so I wanted to create something that would bring words to life based on their emotional weight. The idea came to me while I was writing an essay and then I was just thinking about how certain words just hit differently; like how “thunder” feels more intense than “whisper,” for example. So I built this visualization that reads emotion data from a CSV file and animates words according to their intensity levels. Each word gets its own personality through movement – high-intensity words explode across the screen in chaotic circles, medium-intensity ones flow like waves, and gentle words just float peacefully. The colors and sizes change too, so you can literally see and feel the emotion in each word. Every 3 seconds it switches to a new word automatically, but you can also hit the spacebar to jump ahead if you’re impatient (like me).
Highlight of the code I’m proud of
The part that really clicked for me was figuring out how to make each letter move independently while still keeping the word readable. At first, all my letters were just clumped together or flying off in random directions, but then I realized I needed to treat each letter as its own little character with its own animation offset.
// Animate each letter individually
for(let i = 0; i < word.length; i++) {
let x, y, size;
if(intensity >= 80) {
// High energy - explosive circular movement
let angle = time * speed + i * PI/3;
let radius = sin(time * 6 + i) * intensity * 0.5;
x = cos(angle) * radius * 0.4 + i * 40 - (word.length * 20);
y = sin(angle) * radius * 0.3;
size = 45 + sin(time * 8 + i) * energy * 15;
}
// ... more animation types
}
Using i * PI/3 and i * 0.6 as offsets made each letter follow the same pattern but at slightly different phases, so they stay connected as a word but each one has its own rhythm.
I’m also pretty happy with how I handled the CSV parsing. I decided to do it manually instead of using a library.
// Parse CSV manually - split into lines then extract values
const lines = csvText.trim().split('\n');
const headers = lines[0].split(',');
// Process each data row (skip header row)
for (let i = 1; i < lines.length; i++) {
const values = lines[i].split(',');
csvData.push({
word: values[0],
intensity: parseInt(values[1]),
color: [
parseInt(values[2]), // red
parseInt(values[3]), // green
parseInt(values[4]) // blue
]
});
}
Sketch
The visualization cycles through emotional words automatically, or press spacebar to advance manually.
Future Improvements
There are definitely some things I want to tackle next. First, I’d love to add sound. Another idea is to let users upload their own word lists or even type in words manually to see how the system interprets them. Right now it’s limited to my CSV file, but it would be cool to make it more interactive. I also want to experiment with particle effects – maybe letters could leave trails or break apart into smaller pieces for really explosive words.
The color system could be smarter too. Right now I’m manually assigning colors, but it would be interesting to generate them automatically based on the word’s emotional category or intensity. Maybe cooler colors for calm words and warmer ones for energetic words, or even colors that shift gradually as the intensity changes.