Show HN: A webcam made out of HTML checkboxes (opens in new tab)

(bryanbraun.com)

202 pointsbryanbraun4y ago41 comments

41 comments

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.

themodelplumber4y ago

Recurse Center for Rendering Stuff into a Checkbox Grid, 1 Checkbox Drive, etc.

oksurewhynot4y ago

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.

Technetium4y ago

There's no way to change camera input. Shame I couldn't try this demo.

dafoex4y ago

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

bryanbraunOP4y ago

Yeah, the boxes are bit brighter by default in Safari, so that's the browser I tend to use for screenshots and video.

kevincox4y ago

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?

bryanbraunOP4y ago

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.

jdorfman4y ago

This is brilliant. Amazing work. It even caught my ceiling fan running in the background.

xg154y 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!)

1 more reply

superasn4y ago

I think if you hide the video and just show the checkboxes it will be freaky cool.. still is though.

thih94y ago

Feature request: I wish it had a demo that doesn’t require granting camera access. Maybe a short sample video or gif?

bryanbraunOP4y ago

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...

AquiGorka4y ago

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!

ushakov4y ago

the demo was exactly what i expected when i've read the title

e_y_4y ago

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.

0des4y ago

a rare pleasure from a bygone era..

julioc4y ago

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...

brundolf4y ago

Reminds me of: https://youtu.be/zh8MiNzKkiA

samdg4y ago

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!

evv4y ago

Hah, this is like a video with contentEditable = true

runnr_az4y ago

Great / stupid project… nice work!

JBiserkov4y ago

https://www.bryanbraun.com/checkboxland/

rnoorda4y ago

Love this! Your site sounded familiar, and I realized you're the guy with the After Dark screensavers. Thanks for doing interesting things.

schmappel4y ago

Link for the lazy: https://www.bryanbraun.com/after-dark-css/

diskzero4y ago

What a complete waste of time. I love it!!!

jcun41284y ago

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

andrethegiant4y ago

https://github.com/bryanbraun/checkboxland

javawizard4y ago

This is great! It would be better if it dithered though.

cpitman4y ago

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!

amelius4y ago

Dithering is quite a tough problem, especially video.

AdamJacobMuller4y ago

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.

wilg4y ago

you made a whole page of checkboxes that i can't check AUUUUGHHH

frosted-flakes4y ago

I could check the ones on the bottom row.

ElijahLynn4y ago

The latency on this is really low, meaning good! Well done!

simlevesque4y ago

Gotta love the "back to CheckboxLand" link

henryackerman4y ago

Nice! I have one question though: _why?_

kirubakaran4y ago

Why not?

postalrat4y ago

Did you see it working?

togaen4y ago

Doesn’t work for me on iPhone.

easton_s4y ago

gold star my friend!

j / k navigate · click thread line to collapse

41 comments

bryanbraunOP4y ago

themodelplumber4y ago

Recurse Center for Rendering Stuff into a Checkbox Grid, 1 Checkbox Drive, etc.

oksurewhynot4y ago

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.

Technetium4y ago

There's no way to change camera input. Shame I couldn't try this demo.

dafoex4y ago

bryanbraunOP4y ago

Yeah, the boxes are bit brighter by default in Safari, so that's the browser I tend to use for screenshots and video.

kevincox4y ago

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?

bryanbraunOP4y ago

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.

jdorfman4y ago

This is brilliant. Amazing work. It even caught my ceiling fan running in the background.

xg154y 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!)

1 more reply

superasn4y ago

I think if you hide the video and just show the checkboxes it will be freaky cool.. still is though.

thih94y ago

Feature request: I wish it had a demo that doesn’t require granting camera access. Maybe a short sample video or gif?

bryanbraunOP4y ago

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...

AquiGorka4y ago

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!

ushakov4y ago

the demo was exactly what i expected when i've read the title

e_y_4y ago

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.

0des4y ago

a rare pleasure from a bygone era..

julioc4y ago

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...

brundolf4y ago

Reminds me of: https://youtu.be/zh8MiNzKkiA

samdg4y ago

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!

evv4y ago

Hah, this is like a video with contentEditable = true

runnr_az4y ago

Great / stupid project… nice work!

JBiserkov4y ago

https://www.bryanbraun.com/checkboxland/

rnoorda4y ago

Love this! Your site sounded familiar, and I realized you're the guy with the After Dark screensavers. Thanks for doing interesting things.

schmappel4y ago

Link for the lazy: https://www.bryanbraun.com/after-dark-css/

diskzero4y ago

What a complete waste of time. I love it!!!

jcun41284y ago

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

andrethegiant4y ago

https://github.com/bryanbraun/checkboxland

javawizard4y ago

This is great! It would be better if it dithered though.

cpitman4y ago

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!

amelius4y ago

Dithering is quite a tough problem, especially video.

AdamJacobMuller4y ago

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.

wilg4y ago

you made a whole page of checkboxes that i can't check AUUUUGHHH

frosted-flakes4y ago

I could check the ones on the bottom row.

ElijahLynn4y ago

The latency on this is really low, meaning good! Well done!

simlevesque4y ago