[HN Gopher] I keep making things out of checkboxes
___________________________________________________________________
I keep making things out of checkboxes
Author : vortex_ape
Score : 630 points
Date : 2021-10-11 08:18 UTC (14 hours ago)
(HTM) web link (www.bryanbraun.com)
(TXT) w3m dump (www.bryanbraun.com)
| Lio wrote:
| 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.
| skeletron wrote:
| Why checkboxes though? There are perfectly good ordinary pixels
| to do all this with.
| da39a3ee wrote:
| 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.
| akarki15 wrote:
| why not i guess? :P
| wbobeirne wrote:
| 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.
| mzs wrote:
| neat: https://matthewrayfield.com/goodies/inspect-this-snake/
| nunodonato wrote:
| where's Conway's game of life? :)
| _def wrote:
| https://github.com/bryanbraun/checkboxland/tree/main/docs/de...
| oli-g wrote:
| Alternatively, it's also already hosted online:
|
| https://www.bryanbraun.com/checkboxland/docs/demos/game-
| of-l...
| furypt wrote:
| This is so funny!
| kangalioo wrote:
| 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
| relaxing wrote:
| See also the Monome (and myriad clones.)
| mkr-hn wrote:
| 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.
| oldsecondhand wrote:
| Novation Components?
| mkr-hn wrote:
| 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.
| yunruse wrote:
| The sheer simplicity of this idea - a 1-bit grid, which you can
| interact with in real-time - echoes that of Pico-8 [1], a fantasy
| console with strict limits such that you're not overwhelmed with
| ideas, but instead given bounds to play with. Its limits keep it
| realistic: you can do immensely wondrous things with the console,
| but its graphic and music style are limited, and as such it
| provides much more of an incentive to make a game - it's far less
| overwhelming, and you can concentrate on fun. But also, it offers
| a challenge! As you begin to hit the limits, you come up with
| clever tricks to save space, and because the computer isn't
| blisteringly fast, you're pushing yourself as much as you are the
| computer.
|
| [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
| QuadmasterXLII wrote:
| 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
| tetha wrote:
| 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.
| rozab wrote:
| 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?
| myfonj wrote:
| https://tixy.land/ maybe?
| (https://twitter.com/aemkei/status/1323399877611708416)
|
| (16 x 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
| rozab wrote:
| Yep that's the one! I guess I imagined the social stuff, or
| was conflating with shadertoy
| bluescrn wrote:
| 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)
| mirekrusin wrote:
| Rgb checkboxes?
| tiborsaas wrote:
| It's possible with the hue rotation CSS filter:
|
| https://developer.mozilla.org/en-US/docs/Web/CSS/filter-
| func...()
| bryanbraun wrote:
| Also the new CSS accent-color property.
|
| My coworker hacked together a demo that's pretty wild:
| https://twitter.com/nathanAlan/status/1436145205019922440
| tiborsaas wrote:
| Oh neat, I didn't know about this property.
| durmonski wrote:
| WoW :D Amazing!
| [deleted]
| tombert wrote:
| 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.
| ant6n wrote:
| 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...
| tombert wrote:
| 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.
| smitty1e wrote:
| 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...
| colejohnson66 wrote:
| 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...
| bscphil wrote:
| 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...
| bryanbraun wrote:
| Good callout... I updated the post to link this one.
| mrspeaker wrote:
| 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/
| mkr-hn wrote:
| 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.
| tambourine_man wrote:
| I get a blank screen...
| arrow7000 wrote:
| Me too, but then I'm on Android.
| tambourine_man wrote:
| Mac Safari, iPhone Safari, desktop Chrome...
| bryanbraun wrote:
| 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
| beardyw wrote:
| It's a tick infestation.
| runnr_az wrote:
| The best projects are when someone talented uses their
| considerable abilities on something really really pointless.
| scop wrote:
| 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.
| quercusa wrote:
| Great little book; truly counter-cultural.
| Tepix wrote:
| Neat!
|
| Next step: Variable size checkboxes. Something you can't do with
| ordinary pixels.
| jcims wrote:
| Checkboxes made out of checkboxes
| usrusr wrote:
| 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.
| _jstreet wrote:
| The sidebar of checkboxland[1] has a checkbox made out of
| checkboxes.
|
| [1]: https://www.bryanbraun.com/checkboxland/
| Tepix wrote:
| Also, morse code using checkboxes.
| ionwake wrote:
| Awesome
| jhncls wrote:
| 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
| alok-g wrote:
| Nice!
|
| You may checkout my this work: :-)
|
| https://github.com/amzn/computer-vision-basics-in-microsoft-...
|
| https://news.ycombinator.com/item?id=22357374
| fredley wrote:
| I feel like there needs to be a way to control system volume made
| out of e.g. a webcam checkbox filter.
| xrd wrote:
| Is there a CSS file I can drop in to change them to radio buttons
| somehow?
| ed312 wrote:
| 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
| residualmind wrote:
| Finally something useful!
| evanb wrote:
| 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.
| bryanbraun wrote:
| Good catch. I posted an issue:
| https://github.com/bryanbraun/checkboxland/issues/16
| saevarom wrote:
| But only the first and then every fourth :)
| agumonkey wrote:
| next, adapt https://www.a1k0n.net/2011/07/20/donut-math.html
| NHQ wrote:
| 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.
| shrubby wrote:
| This was cool. Definitely going to use it somewhere.
| tantalor wrote:
| Reminds me Rozin's mechanical mirrors.
|
| https://www.youtube.com/watch?v=kV8v2GKC8WA
| bryanbraun wrote:
| This is giving me ideas. Thanks for sharing!
| RoryH wrote:
| Make things out of Checkboxes... check!
| bartread wrote:
| 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.
| yetanother-1 wrote:
| Good idea, but do we have to destroy our browsers?
| mkr-hn wrote:
| It's the only way to save them.
| goldenkey wrote:
| And chew bubble game and kick ass. And my browser's local
| storage is all out of gum ;-)
| IgorPartola wrote:
| I wonder if radio boxes would be better pixels for DOOM.
| OneLeggedCat wrote:
| 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.
| lifthrasiir wrote:
| 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.
| ateng wrote:
| Running Doom to hackers is the equivalent of Turing
| completeness proof to theoretical computer scientists.
| Andrex wrote:
| 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?"
| hatch_q wrote:
| Doom in task manager -
| https://www.youtube.com/watch?v=hSoCmAoIMOU
| Arrath wrote:
| Wow
| hanniabu wrote:
| It's doom not wow
| [deleted]
| Decabytes wrote:
| 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
| Arrath wrote:
| Thanks! Pretty interesting watch.
| geoduck14 wrote:
| 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?
| yawaworht1978 wrote:
| 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?
| seoulmetro wrote:
| 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?
| mcintyre1994 wrote:
| His library is here: https://github.com/bryanbraun/checkboxland
| - seems super readable from a quick look!
| amelius wrote:
| Try making Conway's Game of Life.
|
| And with the ability to check/uncheck the boxes and influence the
| course of the simulation.
| TimTheTinker wrote:
| Why not switch to canvas rendering though?
| alserio wrote:
| Because then he would need to implement the checkboxes in a
| canvas, when there's a good implementation already available
| in the browser
| colejohnson66 wrote:
| The point isn't to be logical. It's simply because it _could_
| be done.
| strken wrote:
| Funnily enough, he's already done it:
| https://www.bryanbraun.com/checkboxland/
| rudian wrote:
| Welcome to Reddit, but for nerds.
|
| Interesting posts get lost, and this hits the first place.
| seoulmetro wrote:
| I'm surprised this got so much praise. It's cool and quirky but
| it doesn't seem like anything special. I guess the truth is, HN
| really wants to be Reddit.
|
| Impressive? Interesting? Wonderful? Not to me at least. And I'm
| struggling with why it is to anyone else, but that's on me.
| lardolan wrote:
| How could I downvote this?
| Kiro wrote:
| You need more karma.
| mypastself wrote:
| 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.
| Swiffy0 wrote:
| I mean with the way the world is going, who knows if someone
| will get offended by the Apple logo and wants the option to
| customise it to their liking
| Kiro wrote:
| Why are people downvoting this? Not only is it a funny comment.
| It's also true.
| Smar wrote:
| But where is checkers!
| nathancahill wrote:
| Not sure why he's worried about not being marketable, he checks
| all the boxes.
| DonHopkins wrote:
| He's worried people will get ticked off at him, and think he's
| two tacos short of a combo box.
| bryanrasmussen wrote:
| maybe he's just worried employers are looking for someone who
| can think outside the checkbox.
| roland35 wrote:
| Well, he also is unchecking all the boxes too
| kamilgrudzien wrote:
| This made me angry enough to upvote
| em3rgent0rdr wrote:
| serious question: what is the performance of using checkboxes
| compared to other methods of rendering in a browser?
| em3rgent0rdr wrote:
| my first guess is that these checkboxes might be faster than
| painting to a canvas.
| wheybags wrote:
| 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.
| simmo9000 wrote:
| Adding colour would be a great way to waste even more time on
| this epic idea...
___________________________________________________________________
(page generated 2021-10-11 23:01 UTC)