CPU Piano

Inspiration

We were curious whether a computer could create its own music using nothing but its internal activity. Since every machine runs different processes at different times, we wondered if streaming CPU data could be transformed into a unique, ever-changing soundtrack—essentially letting each computer “compose” its own song.

What it does

Our program generates music in real time by analyzing live CPU process data. Different metrics—such as usage spikes, process counts, or priority levels—are mapped to pitch. The result is a constantly evolving piece of music that reflects what the computer is doing at any given moment. Beyond the music generation, we've integrated interactive algorithm visualizations including sorting animations, binary trees, collision simulations, fractals, and Collatz sequences.

How we built it

Backend (Python):

Built a WebSocket server using aiohttp that continuously monitors CPU metrics using psutil
Streams live CPU usage data to connected clients at regular intervals
Implements workload generation for testing (Twinkle Twinkle Little Star performance demo)

Frontend (React + Vite):

Created a real-time dashboard displaying current CPU metrics and historical trends
Implemented SVG-based graph rendering for CPU history visualization
Built a sheet music display that dynamically represents the current note being "played" based on CPU data
Integrated multiple sorting/algorithm visualizations: -> Insertion Sort with 30 bars using clean, fast animation inspired by "The Sound of Sorting" -> Binary Tree visualization with progressive growth animation -> Collision Physics simulation -> Fractal rendering -> Collatz Conjecture visualization
Used Tailwind CSS for responsive, gradient-free UI design

Challenges we ran into

Real-time data synchronization - Ensuring smooth, lag-free updates between Python backend and React frontend required careful WebSocket connection management and state handling
Audio-visual synchronization - Mapping CPU metrics to musical notes while keeping the visualization in sync proved tricky with varying frame rates
Performance optimization - Running multiple animated visualizations simultaneously required optimizing canvas rendering and frame skipping strategies

Accomplishments that we're proud of

We successfully created a real-time music generation system that transforms abstract system metrics into audible art. We also are proud to have implemented high-performance canvas-based algorithm visualizations to what the CPU is processing.