Show HN: A webcam made out of HTML checkboxes

Show HN: A webcam made out of HTML checkboxes(bryanbraun.com)

202 points by bryanbraun 4 years ago | 41 comments

bryanbraun 4 years ago |

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.

themodelplumber 4 years ago | |

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

oksurewhynot 4 years 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.

Technetium 4 years ago | |

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

dafoex 4 years 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

bryanbraun 4 years ago | | |

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

kevincox 4 years 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?

bryanbraun 4 years 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.

jdorfman 4 years ago | |

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

xg15 4 years 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!)

superasn 4 years ago |

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

thih9 4 years ago |

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

bryanbraun 4 years 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...

AquiGorka 4 years 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!

ushakov 4 years ago |

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

e_y_ 4 years 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.

0des 4 years ago | |

a rare pleasure from a bygone era..

julioc 4 years 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...

brundolf 4 years ago |

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

samdg 4 years 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!

evv 4 years ago |

Hah, this is like a video with contentEditable = true

runnr_az 4 years ago |

Great / stupid project… nice work!

JBiserkov 4 years ago |

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

rnoorda 4 years ago |

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

schmappel 4 years ago | |

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

diskzero 4 years ago |

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

jcun4128 4 years 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

andrethegiant 4 years ago | |

https://github.com/bryanbraun/checkboxland

javawizard 4 years ago |

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

cpitman 4 years 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!

amelius 4 years ago | |

Dithering is quite a tough problem, especially video.

AdamJacobMuller 4 years 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.

wilg 4 years ago |

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

frosted-flakes 4 years ago | |

I could check the ones on the bottom row.

ElijahLynn 4 years ago |

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

simlevesque 4 years ago |

Gotta love the "back to CheckboxLand" link

henryackerman 4 years ago |

Nice! I have one question though: _why?_

kirubakaran 4 years ago | |

Why not?

postalrat 4 years ago | |

Did you see it working?

togaen 4 years ago |

Doesn’t work for me on iPhone.

easton_s 4 years ago |

gold star my friend!