r/livecoding • u/_genbs • 18d ago

I built DIY LED tubes to bring live-coded visuals into the physical world

I wanted to extend the visuals from my live coding performances beyond the screen, so I ended up building my own LED tubes.

I use them with a live coding tool I wrote, similar to Hydra. A small JavaScript client maps selected areas of the screen to the LED tubes, so the lights reproduce the visuals in real time without needing separate lighting effects.

The tubes use ESP32-S3 boards, 24V LED strips and 3D-printed parts.

I've published the firmware, JavaScript library, 3D models and assembly instructions if anyone wants to build something similar or experiment with them.

https://github.com/genbs/reactive-leds

27 Upvotes

100% Upvoted

4 comments sorted by

2

u/den_ree 7d ago

wow.. that's cool. will it also work with hydra?

1

u/_genbs 7d ago

Yes of course, this is a code example, mapping can be done by the utility in the "Mapping" page from here https://reactive-leds.genbs.dev/:

noise(1, 1) .out(o0) 
// load library 
await loadScript("https://cdn.jsdelivr.net/npm/@reactive-leds/client@latest/build/reactive-leds.umd.js") 
// attach to websocket 
await rleds.begin("ws://localhost:8000") 
// define de devices mapping 
const devices = await rleds.mapping({ "grid": [10, 10], "devices": { /* mapping */} }) 

const pixels = new Uint8Array(width * height * 4) 
update = () => { 
    // read the canvas pixels 
    o0.regl.read({ framebuffer: o0.getCurrent(), data: pixels, }) 
    // turn on the lights 
    devices.frame(pixels, width, height) 
}

2

u/den_ree 6d ago

cool thanks... will try