Lume

return to home page

Lume is a MIDI-based audio visualizer that renders graphics in real time. It's powered by p5.js, an open-source graphics library that allows it to run directly on a browser.

showcase

how does it work?

At the core of Lume's rendering system is the Graphic, a component that has the code needed to draw a visual onto the page. Graphic components are directly responsible for rendering themselves via their draw() function.

The reactive part of Lume — what allows it to respond to MIDI data — is done with a DynamicGraphic, a component that is given realtime information on a MIDI file as it's being played back, such as the list of currently held notes, and how long it's been since the file has started playing.

Each frame, Lume processes the raw information from its MIDI player into a format understandable by Graphic components, gives each of them the information they need, and calls all of their draw() functions.

status

Lume is a private project, and is not open for outside use or contributions. This is partially because Lume is not actually an application, but a website that I run locally.

I have made attempts to turn Lume into a fully-fleged desktop application, but gave up due to lack of time, plus focus on other projects. I have considered making a real-time Lume player that can read MIDI inputs directly from the user, but that also ended up being out of my scope.

development history

Lume is a project that was inspired by a few things, but the root of it was from a Japanese music producer that goes by symmez. He posted a tweet that showed a little of the behind the scenes of his videos— specifically his audio visualizers:

translation: Visualizing code in p5.js practice

I thought it was pretty cool, especially the fact it was running directly on the browser. Plus, I’ve always wanted to work on a TypeScript project, so I thought it was a quick project I could work on.

Soon enough (as with many of my projects), it eventually became much bigger than I initially intended.

Other inspirations include ALMAMPlayer, and Synesthesia.