7 ms·
Show HN: A webcam made out of HTML checkboxes
- runnr_az 5y agoGreat / stupid project… nice work!
- bryanbraun 5y agoSome 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.
- jdorfman 5y agoThis is brilliant. Amazing work. It even caught my ceiling fan running in the background.
- kevincox 5y agoYou 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?
- bryanbraun 5y agoI wrote up some notes about it here: https://github.com/bryanbraun/checkboxland/tree/master/src#performance 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.
- dafoex 5y agoThis 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
- bryanbraun 5y agoYeah, the boxes are bit brighter by default in Safari, so that's the browser I tend to use for screenshots and video.
- oksurewhynot 5y agoI 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.
- themodelplumber 5y agoRecurse Center for Rendering Stuff into a Checkbox Grid, 1 Checkbox Drive, etc.
- Technetium 5y agoThere's no way to change camera input. Shame I couldn't try this demo.
- xg15 5y ago"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!)
- deleted 5y ago[deleted]
- easton_s 5y agogold star my friend!
- ushakov 5y agothe demo was exactly what i expected when i've read the title
- henryackerman 5y agoNice! I have one question though: _why?_
- kirubakaran 5y agoWhy not?
- postalrat 5y agoDid you see it working?
- AquiGorka 5y agoOh wow. My hat is off for you. Don't bother with the why's! Doing this for fun should be a good enough reason!
- ElijahLynn 5y agoThe latency on this is really low, meaning good! Well done!
- brundolf 5y agoReminds me of: https://youtu.be/zh8MiNzKkiA https://youtu.be/zh8MiNzKkiA
- jcun4128 5y agoNo 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
- andrethegiant 5y agohttps://github.com/bryanbraun/checkboxland https://github.com/bryanbraun/checkboxland
- javawizard 5y agoThis is great! It would be better if it dithered though.
- amelius 5y agoDithering is quite a tough problem, especially video.
- cpitman 5y agoI 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!
- evv 5y agoHah, this is like a video with contentEditable = true
- JBiserkov 5y agohttps://www.bryanbraun.com/checkboxland/ https://www.bryanbraun.com/checkboxland/
- togaen 5y agoDoesn’t work for me on iPhone.
- samdg 5y agoA colleague of mine created the EmojiVision app for iOS: https://apps.apple.com/us/app/emojivision/id1472824315 https://apps.apple.com/us/app/emojivision/id1472824315 It's similar, but with different sets of emojis and variable fidelity. Very interesting results!
- simlevesque 5y agoGotta love the "back to CheckboxLand" link
- AdamJacobMuller 5y agoYour were so preoccupied with whether or not you could, you didn't stop to think if you should. No, but, seriously this is hilarious.
- diskzero 5y agoWhat a complete waste of time. I love it!!!
- superasn 5y agoI think if you hide the video and just show the checkboxes it will be freaky cool.. still is though.
- wilg 5y agoyou made a whole page of checkboxes that i can't check AUUUUGHHH
- frosted-flakes 5y agoI could check the ones on the bottom row.
- julioc 5y agoCheckout the new CSS property `accent-color`, which allows you to customize checkbox colors - https://web.dev/accent-color/ https://web.dev/accent-color/ - https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color https://developer.mozilla.org/en-US/docs/Web/CSS/accent-colo...
- rnoorda 5y agoLove this! Your site sounded familiar, and I realized you're the guy with the After Dark screensavers. Thanks for doing interesting things.
- schmappel 5y agoLink for the lazy: https://www.bryanbraun.com/after-dark-css/ https://www.bryanbraun.com/after-dark-css/
- thih9 5y agoFeature request: I wish it had a demo that doesn’t require granting camera access. Maybe a short sample video or gif?
- bryanbraun 5y agoThis is what I used for testing... it you try it with a bunch of different videos: https://www.bryanbraun.com/checkboxland/docs/demos/video-test/ https://www.bryanbraun.com/checkboxland/docs/demos/video-tes...