Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 yıl önce •via X (Twitter)

10 Yorum

Kath Korevec profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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 profil fotoğrafı
Kath Korevec2 yıl önce

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

aizk ✡️ profil fotoğrafı
aizk ✡️2 yıl önce

@korevec It's missing something

bdougie on the internet profil fotoğrafı
bdougie on the internet2 yıl önce

@korevec This is really cool. Nice work!

Benzer Videolar