https://bradleycarey.com/tags/checkboxes/ Recent content in Checkboxes on bradleycarey.com Hugo en Wed, 18 Mar 2026 00:17:57 -0400 https://bradleycarey.com/posts/checkbox-images-and-video/ Tue, 17 Mar 2026 10:15:00 -0500 https://bradleycarey.com/posts/checkbox-images-and-video/ <p>These two demos are the only ones in the series that process external input. One takes images, one takes live video. They&rsquo;re also the only ones where a canvas element sneaks into the pipeline. The output still goes entirely to checkboxes; the canvas is just the fastest way to sample pixel data from a source that the browser won&rsquo;t otherwise let you read directly.</p> <p>The underlying algorithm in both cases is the same: <a href="https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering" class="external-link" target="_blank" rel="noopener">Floyd-Steinberg error diffusion</a>.</p> https://bradleycarey.com/posts/checkbox-games/ Mon, 16 Mar 2026 21:00:00 -0500 https://bradleycarey.com/posts/checkbox-games/ <p>Games are an interesting stress test for the 1-bit constraint. A simulation can skip frames and still look fine. A game can&rsquo;t. Input latency matters, collision detection matters, and the player is paying close attention in a way that they aren&rsquo;t when watching a visual effect. If the game loop is wrong, you notice immediately.</p> <p>Both of these work. Unironically.</p> <h2 id="pong-interactive"> <strong><a href="https://bradleycarey.com/checkboxes/pong.html" >Pong</a></strong> <em>(interactive)</em> <a class="heading-link" href="#pong-interactive"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>Two players. Left paddle: W and S. Right paddle: up and down arrow keys.</p> https://bradleycarey.com/posts/checkbox-visual-effects/ Mon, 16 Mar 2026 10:30:00 -0500 https://bradleycarey.com/posts/checkbox-visual-effects/ <p>Every effect here is the same underlying structure: for each checkbox, compute a number, threshold it to on/off. The interesting part is what function you use to compute the number. Pure math, no textures, no precomputed lookup tables, just trig per cell per frame.</p> <div style="margin:1.5rem 0"> <div id="spiral-grid" style="display:grid;width:fit-content;line-height:0"></div> <script> (function() { var COLS = 52, ROWS = 20; var g = document.getElementById('spiral-grid'); g.style.gridTemplateColumns = 'repeat(' + COLS + ', auto)'; var frag = document.createDocumentFragment(); for (var i = 0; i < COLS * ROWS; i++) { var cb = document.createElement('input'); cb.type = 'checkbox'; cb.style.pointerEvents = 'none'; cb.style.cursor = 'default'; frag.appendChild(cb); } g.appendChild(frag); var cbs = Array.from(g.querySelectorAll('input')); var cx = COLS / 2, cy = ROWS / 2, t = 0; function tick() { t += 0.03; for (var r = 0; r < ROWS; r++) { for (var c = 0; c < COLS; c++) { var dx = c - cx, dy = (r - cy) * 1.6; var dist = Math.sqrt(dx * dx + dy * dy); var angle = Math.atan2(dy, dx); cbs[r * COLS + c].checked = Math.sin(angle * 3 + Math.log(dist + 1) * 4 - t * 3) > 0; } } requestAnimationFrame(tick); } tick(); })(); </script> </div> <h2 id="spirals"> <strong><a href="https://bradleycarey.com/checkboxes/spirals.html" >Spirals</a></strong> <a class="heading-link" href="#spirals"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>Four modes that cycle automatically:</p> https://bradleycarey.com/posts/checkbox-simulations/ Sun, 15 Mar 2026 19:45:00 -0500 https://bradleycarey.com/posts/checkbox-simulations/ <p>The 1-bit constraint is most interesting when you stack it against a system with real state. These four demos are simulations. They evolve by rules, and the checkboxes just report what happened. The display isn&rsquo;t the computation; it&rsquo;s the readout.</p> <h2 id="slime-mold-simulation-interactive"> <strong><a href="https://bradleycarey.com/checkboxes/slime-mold-simulation.html" >Slime Mold Simulation</a></strong> <em>(interactive)</em> <a class="heading-link" href="#slime-mold-simulation-interactive"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p><a href="https://en.wikipedia.org/wiki/Physarum_polycephalum" class="external-link" target="_blank" rel="noopener">Physarum polycephalum</a> is a slime mold that navigated mazes, solved the shortest path between oat flakes, and independently approximated the Tokyo subway network. It has no brain, no neurons, no central coordination. Researchers at Hokkaido University published <a href="https://doi.org/10.1126/science.1177894" class="external-link" target="_blank" rel="noopener">a paper about it in Science in 2010</a> and everyone was appropriately unsettled.</p> https://bradleycarey.com/posts/checkbox-canvas/ Sun, 15 Mar 2026 12:00:00 -0500 https://bradleycarey.com/posts/checkbox-canvas/ <div id="cb-hero"> <style> #cb-hero { margin: 1.5rem 0; } #cb-hero-grid { display: grid; width: fit-content; line-height: 0; } #cb-hero-grid input { pointer-events: none; cursor: default; } </style> <div id="cb-hero-grid"></div> <script> (function() { const COLS = 24, ROWS = 8; const g = document.getElementById('cb-hero-grid'); g.style.gridTemplateColumns = `repeat(${COLS}, auto)`; const frag = document.createDocumentFragment(); for (let i = 0; i < COLS * ROWS; i++) { const cb = document.createElement('input'); cb.type = 'checkbox'; frag.appendChild(cb); } g.appendChild(frag); const cbs = Array.from(g.querySelectorAll('input')); let t = 0; function tick() { t += 0.07; for (let c = 0; c < COLS; c++) { const h = Math.round((ROWS - 1) * (0.5 + 0.45 * Math.sin(t + c * 0.55))); for (let r = 0; r < ROWS; r++) { cbs[r * COLS + c].checked = (ROWS - 1 - r) <= h; } } requestAnimationFrame(tick); } tick(); })(); </script> </div> <p>At some point I asked myself: how bad of an idea is it to use HTML checkboxes as pixels?</p>