31:[] 2f:{"title":"Animated Bit Field Patterns","cells":[{"id":0,"value":"md`# Animated Bit Field Patterns`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"tweet(\"1378106731386040322\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`A few of the interesting variations mentioned in the thread:\n\n\\`\\`\\`\n(x ^ y) % z (Alien art)\n(x | y) % z (Sierpinski triangles)\n(x * y) & z (Circular patterns)\n(x ^ y) < z (Steps)\n(x * z) % y (Beams)\n\\`\\`\\`\n\nMany other combinations/orders of operations are interesting, too. Amazing the amount of variation from just changing these few things!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"/*\nHere's the original code from the tweet. The uncommented version was suggested by @fil and is much faster. Thank you!\nchart = {\n const c = DOM.context2d(w, h);\n for (let x = 0; x < nx; x++) {\n for (let y = 0; y < ny; y++) {\n if (func(x, y)) {\n c.fillRect(x*s, y*s, s, s);\n }\n }\n }\n return c.canvas;\n}\n*/ \nchart = {\n const c = DOM.context2d(w, h);\n \n c.fillRect(0, 0, w, h);\n const imData = c.getImageData(0, 0, nx, ny), {data} = imData;\n for (let x = 0; x < nx; x++) {\n for (let y = 0; y < ny; y++) {\n if (!func(x, y)) {\n let a = 4 * (x + y * nx);\n data[a++] = data[a++] = data[a++] = 255;\n }\n }\n }\n c.putImageData(imData, 0, 0);\n c.imageSmoothingEnabled = false;\n c.drawImage(c.canvas, 0, 0, nx, ny, 0, 0, w, h);\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"func = choice(z)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"viewof choice = {\n const value = z => (x, y) => (x ^ y) < z;\n return Radio(\n new Map([\n [html`Alien art

(x ^ y) % z`, z => (x, y) => (x ^ y) % z],\n      [\n        html`Sierpinski triangles (x | y) % z`,\n        z => (x, y) => (x | y) % z\n      ],\n      [html`Circular patterns (x * y) & z`, z => (x, y) => (x * y) & z],\n      [html`Steps (x ^ y) < z`, value],\n      [html`Beams (x * z) % y`, z => (x, y) => (x * z) % y]\n    ]),\n    { value }\n  );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof z = Player(Array.from({length: 513}, (_,i) => i), {value: 9, step: 1, label: \"z\", loop: true, alternate: true, delay: 32 , speedFactor: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof s = Range([1, 6], {step: 1, label: \"Square Size\", value: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"w = Math.min(width, 512)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"nx = Math.ceil(w / s)","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"ny = Math.ceil(h / s);","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"import {Range, Radio} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"import {Player} from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import {style as faStyle} from \"@airbornemint/fontawesome\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}