04. AI + P5.js Visual Music Site

Project Access

Note: The Glitch page may go offline if the server is inactive. Please contact me if the demo becomes unavailable.

Project Description

I created an interactive art website with two pages. On the first page, users upload a music file and enter a prompt. The system uses the Hugging Face AI model to generate an image, which is then pixelated and used as a visual background. On the second page, dynamic visual elements (waveform displays, rhythm bars) react in real-time to the music. The system explores the relationship between sound and imagery through AI and generative design.

Technical Overview

This project combines Node.js (Express) as backend and p5.js for frontend visual interactions. Music files are uploaded and processed using Multer. The server calls the Hugging Face API via Axios to generate imagery. On the frontend, p5.js handles audio FFT and Amplitude analysis. The pixelated background and responsive visual forms are created through custom canvas rendering and color sampling techniques.

Concept and Motivation

Inspired by On Kawara’s Today series, this work asks: “Can AI experience music like a human?” I explore how AI reshapes perception by transforming music into image and rhythm into motion. The work aims to reframe how we sense time and sound through computational methods. It challenges the assumption that sound and visuals must remain separate and reflects on how generative systems engage emotion and cognition.

References

← Back to Home