Some 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.
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?
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
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.
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
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!
42 comments
[ 2.2 ms ] story [ 120 ms ] threadIn short: only updating when needed, minimizing the number of DOM queries, and avoiding costly CSS layouts.
(Just kidding, that's awesome!)
Would think title should say "webcam video output" or something
There is the minified demo.js
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!
It's similar, but with different sets of emojis and variable fidelity. Very interesting results!
No, but, seriously this is hilarious.
- https://web.dev/accent-color/ - https://developer.mozilla.org/en-US/docs/Web/CSS/accent-colo...