Show HN: A webcam made out of HTML checkboxes
bryanbraun.comSome background: a little while ago I built a library called "Checkboxland" at the Recurse Center for rendering stuff into a checkbox grid. I recently made an update that lets it render arbitrary images and video. The video feature supports HTML MediaStream, which is what powers the webcam demo.
Recurse Center for Rendering Stuff into a Checkbox Grid, 1 Checkbox Drive, etc.
I was there for this! I actually use this as an example of a perfect mini-batch project to anyone who's skeptical of what they can get done in a week.
There's no way to change camera input. Shame I couldn't try this demo.
This is really fun! I'm not sure of the practicality (particularly with the QR demo, my boxes don't turn bright blue like yours apparently do, so its pretty invisible to a scanner) but if it looks cool then that's reason enough in itself
Yeah, the boxes are bit brighter by default in Safari, so that's the browser I tend to use for screenshots and video.
You hint in the docs that you make some efforts to render efficiently. Are there any write-ups on the optimizations or it is just as simple as updating only when needed?
I wrote up some notes about it here: https://github.com/bryanbraun/checkboxland/tree/master/src#p...
In short: only updating when needed, minimizing the number of DOM queries, and avoiding costly CSS layouts.
This is brilliant. Amazing work. It even caught my ceiling fan running in the background.
"Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should."
(Just kidding, that's awesome!)
I think if you hide the video and just show the checkboxes it will be freaky cool.. still is though.
Feature request: I wish it had a demo that doesn’t require granting camera access. Maybe a short sample video or gif?
This is what I used for testing... it you try it with a bunch of different videos: https://www.bryanbraun.com/checkboxland/docs/demos/video-tes...
Oh wow. My hat is off for you. Don't bother with the why's! Doing this for fun should be a good enough reason!
the demo was exactly what i expected when i've read the title
To nitpick a bit, my first thought was "how do HTML checkboxes detect light"? It'd be more accurate to call it a checkbox video renderer that uses a webcam as input.
a rare pleasure from a bygone era..
Checkout the new CSS property `accent-color`, which allows you to customize checkbox colors
- https://web.dev/accent-color/ - https://developer.mozilla.org/en-US/docs/Web/CSS/accent-colo...
Reminds me of: https://youtu.be/zh8MiNzKkiA
A colleague of mine created the EmojiVision app for iOS: https://apps.apple.com/us/app/emojivision/id1472824315
It's similar, but with different sets of emojis and variable fidelity. Very interesting results!
Hah, this is like a video with contentEditable = true
Great / stupid project… nice work!
Love this! Your site sounded familiar, and I realized you're the guy with the After Dark screensavers. Thanks for doing interesting things.
Link for the lazy: https://www.bryanbraun.com/after-dark-css/
What a complete waste of time. I love it!!!
No repo? Curious on a high level how it works, averages nearby pixels or something, or just makes the video really low resolution and each large block is a checkbox?
Would think title should say "webcam video output" or something
There is the minified demo.js
This is great! It would be better if it dithered though.
I took a stab at a basic Floyd-Steinberg dither, but at the low resolution and with even really subtle video camera noise, the result was not great.
Until I took my glasses off... with just a bit of blur, the effect is pretty cool. Probably doesn't make sense to push a feature though that only works when you squint at it!
Dithering is quite a tough problem, especially video.
Your were so preoccupied with whether or not you could, you didn't stop to think if you should.
No, but, seriously this is hilarious.
you made a whole page of checkboxes that i can't check AUUUUGHHH
I could check the ones on the bottom row.
The latency on this is really low, meaning good! Well done!
Gotta love the "back to CheckboxLand" link
Nice! I have one question though: _why?_
Why not?
Did you see it working?
Doesn’t work for me on iPhone.
gold star my friend!