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 your browser.

Currently, Lume is a private project meant for personal use.

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.

examples

status

As mentioned, Lume is a private project, and is not open for outside use or contributions. This is mainly because Lume is not stable enough to be used by non-developers.

To run Lume currently, you need direct access to the code (which is not public), and have the knowledge to run it locally — using npm, setting up enviornmental variables.

Ideally, Lume would be ported to Electron or some other JavaScript framework that would allow it to be ran as a standalone application, but my priorites are focused on adding new layouts (and other projects).

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.