I keep making things out of checkboxes(bryanbraun.com)
bryanbraun.com
I keep making things out of checkboxes
https://www.bryanbraun.com/2021/09/21/i-keep-making-things-out-of-checkboxes/
115 comments
You’re almost describing TI Basic, which is how I got in to programming in middle school. Of course, TI Basic had the additional advantage that I could mess with it during school, before laptops were common in classrooms
The original post also reminded me very much of QBasic. A major charm was how easy it was to just get some graphics on the screen. Some tiny resolutions, functions for a circle, a pixel, a line and a rectangle and you can do stuff from there. I very much remember making simple animations like the author has shown in QBasic.
And that's also why I think environments like QBasic, TI Basic or - more modern - godot, Game Maker Studio and such are very valuable. They allow kids to start programming with something simple and fun.
And that's also why I think environments like QBasic, TI Basic or - more modern - godot, Game Maker Studio and such are very valuable. They allow kids to start programming with something simple and fun.
I'm struggling to find any of them now, bit I think there's many sites that provide a toy and interface similar to what you describe.
One in particular, I recall, provided a grid of colourable dots and a minimal language to program them in. There were social features to browse demos people had written. Anyone remember what it's called?
One in particular, I recall, provided a grid of colourable dots and a minimal language to program them in. There were social features to browse demos people had written. Anyone remember what it's called?
https://tixy.land/ maybe?
(https://twitter.com/aemkei/status/1323399877611708416)
(16 × 16 grid of dots governed by a "shader-like" (?) function getting time, order, column and row indices arguments; negative values red, positive white, zero proximity shrinks.)
Not sure about those "social features", though you can just share the URL with your creating
(16 × 16 grid of dots governed by a "shader-like" (?) function getting time, order, column and row indices arguments; negative values red, positive white, zero proximity shrinks.)
Not sure about those "social features", though you can just share the URL with your creating
Yep that's the one! I guess I imagined the social stuff, or was conflating with shadertoy
There's ShaderToy, that works with actual pixels and shader code, but allows some fun effects to be made with very little code: https://www.shadertoy.com/view/4ljGD1 (and some really crazy raymarching stuff to be done by those with serious math/shader skills)
This is a bit tangential, but I've been completely impressed by a ton of the Bad Apple "ports" to various platforms (particularly the Sega Genesis and the Atari 2600). It's amazing how the simple choice of making a mostly-binary music video has made a song popular in hacker culture.
In the linked video set, the game boy original one is fake, but the game boy color one seems legit (probably helped a lot by the hdma that allows copying tile data into vram during hblank).
Theres an old japanese page that seems to explain how it works: http://web.archive.org/web/20121128095253/www.geocities.jp/s...
Theres an old japanese page that seems to explain how it works: http://web.archive.org/web/20121128095253/www.geocities.jp/s...
Ugh, my naive brain didn't even consider things being faked. I know the Sega Genesis one works in an emulator (I don't have a physical Sega Genesis anymore so I can't try it on an everdrive or anything), but I haven't actually tried the Atari one in any capacity, so that one could be BS.
I remember someone had made an early iPhone game out of UI elements (around 2009 ish?). I thought it was such a cool idea, and spent a bunch of time messing around with "ui-elements-as-graphics". My favourite thing I came up with was sine-wave scrollbars: https://www.mrspeaker.net/dev/sinescrollbars/
Very clever!
It kind of reminds me of this pattern I saw that someone made out of range sliders (though not as animated): https://codepen.io/xdesro/pen/dyRNqqY
It kind of reminds me of this pattern I saw that someone made out of range sliders (though not as animated): https://codepen.io/xdesro/pen/dyRNqqY
Castle of the Winds' characters, items, and monsters were made entirely out of Windows icons. You could crack it open in a resource editor and change most things. There's probably a lot more of these between your example and mine. Someone should make a list.
I get a blank screen…
Me too, but then I'm on Android.
If you enjoy this kind of (ab)use of browser elements, I highly suggest the works of Matthew Rayfield: https://matthewrayfield.com/. Popup trombone is a work of art.
Try making Conway's Game of Life.
And with the ability to check/uncheck the boxes and influence the course of the simulation.
And with the ability to check/uncheck the boxes and influence the course of the simulation.
Funnily enough, he's already done it: https://www.bryanbraun.com/checkboxland/
Why not switch to canvas rendering though?
Because then he would need to implement the checkboxes in a canvas, when there's a good implementation already available in the browser
The point isn’t to be logical. It’s simply because it could be done.
The best projects are when someone talented uses their considerable abilities on something really really pointless.
Your comment reminds me of a little gem of a book, Leisure The Basis of Culture by philosopher Josef Pieper.
> The act of worship creates a store of real wealth that cannot be consumed by the workaday world. It sets up an area where calculation is thrown to the winds and goods are deliberately squandered, where usefulness is forgotten and generosity reigns. Such wastefulness is, we repeat, true wealth; the wealth of the festival time.
> The act of worship creates a store of real wealth that cannot be consumed by the workaday world. It sets up an area where calculation is thrown to the winds and goods are deliberately squandered, where usefulness is forgotten and generosity reigns. Such wastefulness is, we repeat, true wealth; the wealth of the festival time.
Great little book; truly counter-cultural.
Unix itself was born in order to play a game, so yes.
Heck, today every BSD ships with BSD games in base.
Heck, today every BSD ships with BSD games in base.
I just left this comment directly on the article:
I don't think you can really say you've exhaused this until you can run DOOM rendered with checkboxes. You might need to get into checkbox dithering with multiple checkboxes to give you a few different fill levels, and use really small checkboxes, so you get both the resolution and can actually see what you're shooting at.
I know: I'm a bastard.
I don't think you can really say you've exhaused this until you can run DOOM rendered with checkboxes. You might need to get into checkbox dithering with multiple checkboxes to give you a few different fill levels, and use really small checkboxes, so you get both the resolution and can actually see what you're shooting at.
I know: I'm a bastard.
Doom in task manager - https://www.youtube.com/watch?v=hSoCmAoIMOU
Who does this? I mean... who has the talent, time, and inclination? Is this what happens when startups IPO and nerds retire and have too much free time?
Wow
If you are interested in how to hack the task manager, Dave Plummer did a video on it yesterday[1]. Turns out you can fake cores on the task manager to get the resolution you need, so you don't need a Dual Socket Epyc CPU.
[1]https://www.youtube.com/watch?v=oKQ1X_4JCn0
[1]https://www.youtube.com/watch?v=oKQ1X_4JCn0
Thanks! Pretty interesting watch.
Running Doom to hackers is the equivalent of Turing completeness proof to theoretical computer scientists.
It's so widespread, Masahiro Sakurai (Nintendo/SORA) even made mention of it in the latest Smash Bros. presentation.
https://youtu.be/L-q6Gz_4Yqc?t=160
"I heard it can run on any computer. Is that right?"
https://youtu.be/L-q6Gz_4Yqc?t=160
"I heard it can run on any computer. Is that right?"
Given it is interactive, he should instead make a virtual touch screen that is connected to the actual hardware that runs a WebAssembly implementation of DOOM in a modern web browser.
Andrew Healey just took a pass at this and did a great write-up about it here:
https://healeycodes.com/doom-rendered-via-checkboxes
It looks decent but dithering would be nice so I created an issue for it here: https://github.com/bryanbraun/checkboxland/issues/20
https://healeycodes.com/doom-rendered-via-checkboxes
It looks decent but dithering would be nice so I created an issue for it here: https://github.com/bryanbraun/checkboxland/issues/20
I think something like this (1-bit-color, might be extremely hard to have Doom not look like mush) might also benefit from a local contrast filter (like the clarity slider in Photoshop). That filter would increase the visibility of line pairs that may have otherwise been rendered as the same color. Maybe you could then not need as much dithering or multiple checkboxes.
I wonder if radio boxes would be better pixels for DOOM.
Good idea, but do we have to destroy our browsers?
Not sure why he's worried about not being marketable, he checks all the boxes.
maybe he's just worried employers are looking for someone who can think outside the checkbox.
He's worried people will get ticked off at him, and think he's two tacos short of a combo box.
Well, he also is unchecking all the boxes too
This made me angry enough to upvote
In a similar undertaking, Inigo Quilez (of Shadertoy fame) once created an animation using the cells of a spreadsheet [0] as pixels.
[0] https://youtu.be/JnCkF62gkOY
[0] https://youtu.be/JnCkF62gkOY
Nice!
You may checkout my this work: :-)
https://github.com/amzn/computer-vision-basics-in-microsoft-...
https://news.ycombinator.com/item?id=22357374
You may checkout my this work: :-)
https://github.com/amzn/computer-vision-basics-in-microsoft-...
https://news.ycombinator.com/item?id=22357374
The author might have fun with novation launchpads :D A 9x9 matrix of pressable, programmatically lightable RGB buttons
While intended for music production, people have used it for interactive lightshows or games
While intended for music production, people have used it for interactive lightshows or games
There's a free tool that integrates with Ableton Live to make these easier to set up. I can't remember the name and Google is (as usual) useless for finding it, but I do remember it wasn't updated for Live 11 last I checked. Maybe someone else will be able to name it.
Novation Components?
That lets you assemble views from a handful of pre-fab components. What I'm thinking of is a full pad controller light show suite. Components doesn't have anything like that.
See also the Monome (and myriad clones.)
Unless I missed them, a bunch of the demos aren't linked directly in the page. Here's Bad Apple: https://www.bryanbraun.com/checkboxland/docs/demos/bad-apple...
Good callout... I updated the post to link this one.
It's a tick infestation.
Reminds me Rozin's mechanical mirrors.
https://www.youtube.com/watch?v=kV8v2GKC8WA
https://www.youtube.com/watch?v=kV8v2GKC8WA
This is giving me ideas. Thanks for sharing!
I too keep making things out of checkboxes and radio buttons; increasingly my tool-like UIs are dominated by variations on the label/input CSS trick. Naturally, that is what I thought the article was about; but everything the author does can be done equally simplistically with canvas, webGL, divs, text; the demos are more about the parsing of the input than the display technique.
This strongly reminds me of The Glass Bead Game (Das Glasperlenspiel) by Herman Hesse[1]. The idea of simplifying and restricting the creative space into a grid, but then assigning abstract value to the grid (e.g. game of life, minesweeper) seems to be a persistent meme in computers.
[1] https://en.wikipedia.org/wiki/The_Glass_Bead_Game
[1] https://en.wikipedia.org/wiki/The_Glass_Bead_Game
[deleted]
In case the author sees this: when I click in the last row of the laser demo, the 'beam' never gets started---the box just sits there, checked.
Good catch. I posted an issue: https://github.com/bryanbraun/checkboxland/issues/16
But only the first and then every fourth :)
I'm immediately seeing the possibility of turning checkboxes into registers and RAM and rolling out Knuth's MMIX from TAOCP[1]. I mean, if you're going nuts. . .
[1] https://en.m.wikipedia.org/wiki/The_Art_of_Computer_Programm...
[1] https://en.m.wikipedia.org/wiki/The_Art_of_Computer_Programm...
Consay’s Game of Life is Turing Complete. Could use Golly’s engine and render using checkboxes. Has anyone implemented MMIX in CGOL?
https://www.bryanbraun.com/checkboxland/docs/demos/game-of-l...
https://www.bryanbraun.com/checkboxland/docs/demos/game-of-l...
I feel like there needs to be a way to control system volume made out of e.g. a webcam checkbox filter.
If you could visualize a series of these getting smaller and smaller til the point they are indistinguishable from pixels, a la Powers of 10 video, it could be a really fun teaching / learning tool as to how far our modern displays have come.
This is very impressive, especially the video with 3d effect.
Can we check the repos?
Did you use libraries or did you create a library for this?
I would love to see a slider as well, maybe with similar effects like transitions in PowerPoint.
Is this all Js rendered or does it use html and css?
Did you use libraries or did you create a library for this?
I would love to see a slider as well, maybe with similar effects like transitions in PowerPoint.
Is this all Js rendered or does it use html and css?
His library is here: https://github.com/bryanbraun/checkboxland - seems super readable from a quick look!
I'm not sure what makes this impressive. I can get that it's cool and quirky, but at no point does it make me wonder or think that it's impressive. Would we say the same thing about a bunch of over-enlarged pixels?
If you're interested in this sort of thing, check out the TMDC or Text-Mode Demo Competition were it's the same idea but 80x50 text instead of textboxes. Hasn't really been run in a while, but it's a really fun exercise.
Adding colour would be a great way to waste even more time on this epic idea...
Neat!
Next step: Variable size checkboxes. Something you can't do with ordinary pixels.
Next step: Variable size checkboxes. Something you can't do with ordinary pixels.
Checkboxes made out of checkboxes
The sidebar of checkboxland[1] has a checkbox made out of checkboxes.
[1]: https://www.bryanbraun.com/checkboxland/
[1]: https://www.bryanbraun.com/checkboxland/
That's the second obvious omission from the article, other than the Conway's which is in the playground link.
Checkbox made out of checkboxes should then be put into an animation loop, zooming out to single chexel.
Checkbox made out of checkboxes should then be put into an animation loop, zooming out to single chexel.
Also, morse code using checkboxes.
Ah this is just wonderful!
I love this kind of experimental noodling with no real purpose except fun.
I wonder what other form elements can be pushed into weird usages?
I'd guess radio buttons and select boxes with ASCII in could be next.
I love this kind of experimental noodling with no real purpose except fun.
I wonder what other form elements can be pushed into weird usages?
I'd guess radio buttons and select boxes with ASCII in could be next.
Finally something useful!
where's Conway's game of life? :)
Alternatively, it's also already hosted online:
https://www.bryanbraun.com/checkboxland/docs/demos/game-of-l...
https://www.bryanbraun.com/checkboxland/docs/demos/game-of-l...
serious question: what is the performance of using checkboxes compared to other methods of rendering in a browser?
my first guess is that these checkboxes might be faster than painting to a canvas.
I would really, really hope not. Certainly raw rendering using the underlying graphics api would be faster. If the canvas api adds more overhead than the entire stack of tech required to render a HTML native widget, then something has gone seriously wrong.
Rgb checkboxes?
It's possible with the hue rotation CSS filter:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...()
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...()
Also the new CSS accent-color property.
My coworker hacked together a demo that's pretty wild: https://twitter.com/nathanAlan/status/1436145205019922440
My coworker hacked together a demo that's pretty wild: https://twitter.com/nathanAlan/status/1436145205019922440
Oh neat, I didn't know about this property.
Why checkboxes though? There are perfectly good ordinary pixels to do all this with.
woosh!
I can never work out whether there's an in-joke on HN where everyone pretends that they don't have a sense of humor, or whether the truth is a less favorable statement about the HN community. HN is great, but this thread is an example of where it doesn't do so well, since TFA is inherently humorous, and it's not possible to respond to it from an entirely humorless position.
I can never work out whether there's an in-joke on HN where everyone pretends that they don't have a sense of humor, or whether the truth is a less favorable statement about the HN community. HN is great, but this thread is an example of where it doesn't do so well, since TFA is inherently humorous, and it's not possible to respond to it from an entirely humorless position.
why not i guess? :P
Is there a CSS file I can drop in to change them to radio buttons somehow?
can confirm, website checks out.. sorry the pun was right there. i had to check it off my list.. i won’t go any further with this, or else i’ll have to get checked into a facility.. ok i am done.
[deleted]
This was cool. Definitely going to use it somewhere.
Make things out of Checkboxes... check!
But where is checkers!
This is so funny!
WoW :D Amazing!
Awesome
rudian(3)
This may be like one of those great 19th century discoveries in math and physics for which there were no real-world use cases at the time, but were applied decades later with world-changing consequences.
Some day, Apple logo made out of nothing but checkboxes might just save the world.
Some day, Apple logo made out of nothing but checkboxes might just save the world.
[1]: https://www.lexaloffle.com/pico-8.php
But this checkbox playground would be, in my eyes, an even better virtual console - reduced to the bare minimum of what you could make into a game that can be enjoyed. Provide a nice interface such that the user only has to write the game code, provide events to hook into - start(), frame() and click(x, y) - and this would be an immensely satisfying console to immediately get to work on, as rather than worry about graphics and audio, you're free to get right into making it fun.
...also, it'd be an excellent framework for teaching kids how to code! :D