VibeCanvas: Code With Emotion

VibeCanvas turns emotion into generative music and visuals — a playful, expressive coding experience powered by feeling, not syntax.

Comment

Inspiration

VibeCanvas was inspired by the idea that coding doesn't have to be confined to syntax and logic — it can also be a deeply emotional and creative process. We wanted to build a tool where feelings drive creation, allowing anyone to express themselves through generative art and music without needing programming skills. The intersection of AI, emotion recognition, and creative coding fascinated us and sparked this project.

What it does

VibeCanvas transforms your selected mood into a dynamic experience by generating ambient music and abstract visuals in real-time. Using a simple dropdown for emotions like Joy, Calm, Sad, Energetic, and Mysterious, the app crafts harmonious soundscapes and accompanying visuals that respond instantly. The integrated piano roll visually represents the music notes being played, connecting audio and visual elements in a unified flow.

How we built it

We built VibeCanvas with React and TailwindCSS for a responsive, polished UI. For music generation, we used Tone.js to synthesize ambient sounds tied to the selected emotion. Visuals were created with p5.js to render real-time, abstract animations reflecting mood. We ensured robust asynchronous audio initialization and added a piano roll using canvas to display notes. We also included Jest and React Testing Library tests to verify music playback, audio setup, and emotion responsiveness.

Challenges we ran into

The biggest challenge was handling asynchronous audio node initialization properly to prevent silent failures or crashes when starting music. Synchronizing the piano roll visuals with the generative audio required precise timing. Additionally, balancing an aesthetically pleasing UI with performance constraints on different devices took careful iteration.

Accomplishments that we're proud of

We're proud to have created a fully functional, visually stunning app that truly reacts to emotional input in real time. The piano roll feature adds an engaging layer of interaction that connects music and visuals intuitively. Writing comprehensive unit tests for a creative generative app was also a rewarding challenge that sets this project apart.

What we learned

We learned the importance of carefully managing asynchronous code in React for audio-heavy applications and the power of combining multiple creative libraries seamlessly. Testing generative and multimedia code can be tricky, but building testable modules improved code quality and confidence.

What's next for VibeCanvas: Code With Emotion

We plan to integrate live webcam and microphone inputs for real-time emotion detection and expand the emotion set. Adding user-customizable sound palettes and collaborative jam sessions is another exciting direction. Ultimately, we want VibeCanvas to become an accessible tool for artists, educators, and anyone curious about expressive computing.

Built With

  • framer-motion
  • jest
  • p5.js
  • react
  • react-testing-library
  • tailwindcss
  • tone.js
  • vercel
Share this project:

Updates