Now Reading
I preserve making issues out of checkboxes | Bryan Braun

I preserve making issues out of checkboxes | Bryan Braun

2024-02-28 21:34:10

One thing occurred earlier this 12 months the place I obtained on a run making checkbox animations and simply couldn’t cease.

A little bit of background: again in pre-pandemic 2020, I went to the Recurse Center for per week and constructed Checkboxland, a JavaScript library that allows you to show textual content and animations on a checkbox grid. It was a enjoyable little mission. I made some demos, blogged about it, and finally put it on the shelf the place I didn’t contact it for a couple of 12 months.

Ultimately, I used to be feeling determined for a enjoyable coding diversion so I picked it again up once more. I wished to strive making higher and extra complicated animations so I began constructing a ripple impact, and obtained hooked.

Mathematical Animations

A ripple animation made with html checkboxes.
The ripple animation. See my write-up about ripples for extra particulars.

Constructing the ripple pressured me to dig into some animation math. I quickly realized that I might use related strategies to construct different animations, together with these ones:

A spiral animation made with html checkboxes

A pinwheel animation made with html checkboxes

A checkerboard animation made with html checkboxes

At any time when I’d present somebody an animation like this, they’d typically attempt to click on the checkboxes to see what would occur. This by no means did something—the animation would simply override their clicks.

That was fairly disappointing, so I wished to strive making animations that responded to clicks.

Interactive Animations

A laser animation made with html checkboxes.
A “laser” animation. Try it here.
A pulse animation made with html checkboxes.
A “pulse” animation. Try it here.

The extra interactive demos I made, the extra concepts I had. I might make video games! Snake, Pong, Tetris!

However earlier than I obtained too far down that path, one other thought caught maintain in my thoughts. If I might show any picture, then I wouldn’t need to undergo the laborious strategy of defining each checkbox manually or arising with an algorithm for the scene I wished.


Changing pictures appeared tough so I sat on the concept for whereas till I got here throughout this excellent article on converting images into ASCII text. A short time later I used to be changing pictures:

The Nike logo displayed side-by-side with an html checkbox version

The Apple logo displayed side-by-side with an html checkbox version

I quickly realized that changing pictures will get you 90% of the way in which to changing video in order that grew to become my subsequent activity.


A video animation displayed side-by-side with an html checkbox version.
An mp4 video (left) powering a checkbox animation (proper). Try other videos (or upload your own) here.

Quickly I had prolonged the Checkboxland API so I might load any video (like ones from giphy) and immediately generate a checkbox model. Now checkbox animations had been trivial.

This additionally meant I might show webcam knowledge, which obtained a number of consideration on Twitter once I shared it:

See Also

Lastly, my co-worker Reed instructed me a couple of problem the place folks attempt to play the animated video “Dangerous Apple” on varied obscure computing environments (see a bunch of examples here). It sounded enjoyable so I went forward and put collectively a youtube video for that.

Play the in-browser version here.

This complete course of has been enjoyable however I actually should cease.

I obtained nerd sniped, onerous. Certain it’s innocent enjoyable, however I’m beginning to really feel responsible spending months tinkering on these items once I’ve obtained the instruments and expertise to place truly helpful stuff into the world. I feel like Superman, utilizing his powers to fry an egg.

Plus, if I preserve doing this then I’m going to finish up often called “the checkbox man.” That’s not precisely marketable however I suppose it could possibly be worse.

Fortuitously, it seems like I’m beginning to exhaust the attention-grabbing issues I might construct on this format. In some unspecified time in the future it’s like “dude, we get it, you can also make something with checkboxes.” I nonetheless have a number of lingering concepts although… possibly it’s like a managed forest hearth and I ought to simply let myself preserve making these items till it burns itself out.

Source Link

What's Your Reaction?
In Love
Not Sure
View Comments (0)

Leave a Reply

Your email address will not be published.

2022 Blinking Robots.
WordPress by Doejo

Scroll To Top