Loading video...

Video Failed to Load

Go Home

I made a giant javascript powered flipdisc display for my office with kelly. Here is a little bit about flipdisc displays, and how to make your own! - a thread 🧵

138,567 views • 2 years ago •via X (Twitter)

10 Comments

Kath Korevec's profile picture
Kath Korevec2 years ago

Flipdisc displays are incredibly high readable screens that use electromagnetic pulses to flip a small disc between two colors. They support a high frame rate, near limitless lifespan, and make the most pleasant sound when they flip.

Kath Korevec's profile picture
Kath Korevec2 years ago

For the driver we use node-serialport to send each frame over an RS485 bus. We use three RS485 usb devices to support a high frame rate with low-latency.

Kath Korevec's profile picture
Kath Korevec2 years ago

We wanted to use web technologies for rendering. That means gl/canvas in node. Paired with Three.js, Pixi.js, Matter.js, and GSAP, you have really powerful tools for drawing graphics - and no client needed. It can all be done server-side!

Kath Korevec's profile picture
Kath Korevec2 years ago

It was important to use interactions with the display. By utilizing @google's MediaPipe library, we support gesture, pose, and image segmentation. We also have support for triggering voice commands via Whisper.cpp.

Kath Korevec's profile picture
Kath Korevec2 years ago

We designed the scenes around a super tiny 4x5 pixel font, and use a combination of Floyd Steinberg and Bayer Ordered Dithering to display images.

Kath Korevec's profile picture
Kath Korevec2 years ago

To put it all together, we paired it with an iPhone app to control our display. You can play or pause a scene animation, manage your queue, or even draw in real-time right on the screen. Check it out on the app store

Kath Korevec's profile picture
Kath Korevec2 years ago

If you're interested in learning more - check out the full build log on assembling the boards, creating the software, and designing the visualizations. Feel free to ping me or @korevec if you have any questions!

Kath Korevec's profile picture
Kath Korevec2 years ago

Next up: designing a multi-modal AI wall built with @google gemini.

aizk ✡️'s profile picture
aizk ✡️2 years ago

@korevec It's missing something

bdougie on the internet's profile picture
bdougie on the internet2 years ago

@korevec This is really cool. Nice work!

Related Videos