2c:null 2d:["$","title",null,{"children":"Animated Bit Field Patterns | Fati CHEN | Observable"}] 32:[] 30:{"id":"1bfc2be9fbac07f4","slug":"animated-bit-field-patterns","title":"Animated Bit Field Patterns","thumbnail":"6f89fd7e569f5065eda2622d02e5baf2643569d09049efbf3e0a9ca39b472d11","access_level":"public","create_time":"$D2021-04-04T15:41:40.729Z","update_time":"$D2021-04-04T16:21:29.825Z","view_time":null,"first_public_time":"$D2021-04-04T16:21:36.230Z","has_unpublished_edits":null,"fork":{"id":"51d2a1af879de091","slug":"bit-field-patterns","title":"Bit Field Patterns","owner":{"id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer"}},"stars":2,"starred":false,"owner":{"type":"team","id":"ffbcf8ce47e293f4","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":"starter_2024"},"version":386,"publish_version":386,"role":null,"authored":false,"authors":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null}],"members":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Animated Bit Field Patterns","cells":[{"id":0,"value":"md`# Animated Bit Field Patterns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"tweet(\"1378106731386040322\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"func = choice(z)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof s = Range([1, 6], {step: 1, label: \"Square Size\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"w = Math.min(width, 512)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"nx = Math.ceil(w / s)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"ny = Math.ceil(h / s);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"import {Range, Radio} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"import {Player} from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"import {style as faStyle} from \"@airbornemint/fontawesome\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}}
31:"$30:body"