2d:null 2e:["$","title",null,{"children":"chocolate matter | Max Bo | Observable"}] 33:[] 31:{"id":"d74427a657de2b4e","slug":"chocolate-matter","title":"chocolate matter","thumbnail":"d6014a8bb32ce4d35c559a946855a191e341ea54ab4c604dbc20273d02921513","access_level":"public","create_time":"$D2022-03-20T08:24:43.648Z","update_time":"$D2024-05-06T07:13:12.786Z","view_time":null,"first_public_time":"$D2022-04-02T04:37:49.783Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"cc48459e4293f942","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":"starter_2024"},"version":432,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null}],"members":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2cfc47277eb1ab6a","slug":"art","title":"Art","owner":{"id":"cc48459e4293f942","login":"mjbo","name":"Max Bo"}},"type":"notebook","body":{"title":"chocolate matter","cells":[{"id":0,"value":"# chocolate matter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"*a few small automata experiments inspired by [Julian Hespenheide](https://www.instagram.com/julian_hespenheide/) and [ertdfgcvb](https://twitter.com/andreasgysin).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"third.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"second.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"// The height of the artwork we are generating\nHEIGHT = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// The number of tiles along each edge of the artwork\nTILES = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"// Each tile will be this px wide\nTILE_HEIGHT = HEIGHT / TILES","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"CHAR_SET = \"⋰/:_◜◠+*`=?!¬░█▄▀▀▁▂▃▄▅▆▇█▰▱▖▗▘▙▚▛▜▝▞▟═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬■□▢▣▤▥▦▧▨▩▪▫▬▭▮▯▰▱○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◢◣◤◥◦◧◨◩◪◫◬◭◮◯◰◱◲◳◴◵◶◷◸◹◺◻◼◿░▒▓█▄▀!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxy░▒▓▔▕▖▗▘▙▚▛▜▝▞▟×✕✖⨉⨯.\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## Assessing character weight","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"FONT_SIZE = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"/**\n * Given a canvas context and a character, draws the character on the canvas,\n * and then measures how many pixels were painted black.\n */\nfunction measureCharacterWeight(char) {\n const context = DOM.context2d(TILE_HEIGHT, TILE_HEIGHT);\n // Set the font size\n context.font = `${FONT_SIZE}px monospace`;\n\n // Draw the character\n context.fillText(char, 0, 12);\n\n // Find the width of each monospace character in pixels\n const charWidth = (FONT_SIZE, context.measureText(\"A\").width);\n\n // Get the raw pixel data\n // This is a Uint8ClampedArray representing a one-dimensional array\n // containing the data in the RGBA order, with integer values between 0\n // and 255 (inclusive).\n const pixels = context.getImageData(0, 0, TILE_HEIGHT, TILE_HEIGHT).data;\n\n // For each chunk of 4 values, count the pixels that are not transarent\n let weight = 0;\n for (let i = 0; i < pixels.length; i += 4) {\n if (pixels[i + 3] !== 0) {\n weight++;\n }\n }\n\n // Return the number of black pixels\n return weight;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"measureCharacterWeight(\"A\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"CHAR_TO_WEIGHT = Object.fromEntries(\n [...CHAR_SET]\n .map((char) => [char, measureCharacterWeight(char)])\n .sort((a, b) => a[1] - b[1])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"first = DOM.context2d(HEIGHT, HEIGHT)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"first.canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"(first.font = `40px monospace`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"{\n // Clear the canvas\n first.clearRect(0, 0, HEIGHT, HEIGHT);\n // Subdivide the canvas into tiles. For each tile, draw a character from\n // CHAR_TO_WEIGHT, in ascending order of weight.\n for (let x = 0; x < TILES; x++) {\n for (let y = 0; y < TILES; y++) {\n const chars = Object.keys(CHAR_TO_WEIGHT);\n const char = chars[(y * TILES + x) % chars.length];\n first.fillText(char, x * TILE_HEIGHT, y * TILE_HEIGHT);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"import { rule } from \"@mjbo/orcinus\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"(second.font = `30px monospace`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"second = DOM.context2d(HEIGHT, HEIGHT)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"offset = {\n let i = 0;\n while (true) {\n await Promises.delay(100);\n yield i++ % 255;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"offset2 = {\n let i = 0;\n while (true) {\n await Promises.delay(1000);\n yield i++ % 255;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"{\n // Clear the canvas\n second.clearRect(0, 0, HEIGHT, HEIGHT);\n // Subdivide the canvas into tiles. For each tile, draw a character from\n // CHAR_TO_WEIGHT, in ascending order of weight.\n for (let x = 0; x < TILES; x++) {\n for (let y = 0; y < TILES; y++) {\n if (!rules[y][x]) {\n continue;\n }\n\n const chars = CHAR_SET;\n const char = chars[(y * TILES + x + offset) % chars.length];\n second.fillText(char, x * TILE_HEIGHT, y * TILE_HEIGHT);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"rules = [...rule(offset2, TILES, TILES)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"CHARACTER_SETS = {\n const RAMP = \"▁▂▃▄▅▆▇█\";\n const SQUARES = \"■□▢▣▤▥▦▧▨▩▪▫◻◼◨\";\n const CAPS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n const LOWERS = \"abcdefghijklmnopqrstuvwxy\";\n const EDGES = \"═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬\";\n const NUMS = \"0123456789\";\n const SYMBOLS = \"⋰/:_◜◠+*`=?!¬!#$%&'()*+,-./:;<=>?@[\\\\]^_`\";\n const RECTANGLES = \"░█▄▀▀▰▱▖▗▘▙▚▛▜▝▞▟░▒▓█▄▀░▒▓▔▕▖▗▘▙▚▛▜▝▞▟\";\n const CIRCLES = \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\";\n const CROSSES = \"×✕✖⨉⨯\";\n const BARS = \"▬▭▮▯▰▱\";\n const TRIANGLES = \"◢◣◤◥◧◩◪◫◬◭◮◰◱◲◳◸◹◺◿\";\n\n return [\n RAMP,\n SQUARES,\n //CAPS,\n //LOWERS,\n EDGES,\n // NUMS,\n // SYMBOLS,\n RECTANGLES,\n CIRCLES,\n CROSSES,\n BARS,\n TRIANGLES\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"/**\n * Given a 2D array, and a pair of coordinates, get all the neighbours of the\n * coordinates.\n */\nfunction neighbours(grid, x, y) {\n return [\n [x - 1, y - 1],\n [x, y - 1],\n [x + 1, y - 1],\n [x - 1, y],\n [x, y],\n [x + 1, y],\n [x - 1, y + 1],\n [x, y + 1],\n [x + 1, y + 1]\n ].filter(\n ([x, y]) => x >= 0 && y >= 0 && x < grid.length && y < grid[0].length\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"grid = Array(TILES)\n .fill(null)\n .map(() => Array(TILES).fill(\" \"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"function seed(grid) {\n for (let x = 0; x < grid.length; x++) {\n for (let y = 0; y < grid[0].length; y++) {\n if (Math.random() > 0.99) {\n grid[x][y] = _.sample(_.sample(CHARACTER_SETS));\n }\n }\n }\n\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"seed(grid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"function transition(characters) {\n const sets = CHARACTER_SETS.filter((set) => {\n const count = characters.reduce((acc, char) => {\n if (set.includes(char)) acc++;\n return acc;\n }, 0);\n return count === 1;\n });\n\n if (sets.length === 0) {\n return \" \";\n }\n\n return _.sample(_.sample(sets));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"function step(grid) {\n const newGrid = Array(TILES)\n .fill(null)\n .map(() => Array(TILES).fill(\" \"));\n\n for (let x = 0; x < grid.length; x++) {\n for (let y = 0; y < grid[0].length; y++) {\n const ns = neighbours(grid, x, y);\n const characters = ns.map((n) => grid[n[0]][n[1]]);\n newGrid[x][y] = transition(characters);\n }\n }\n\n return newGrid;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"frame = {\n let g = grid;\n while (true) {\n await Promises.delay(50);\n g = seed(step(grid));\n yield g;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"(third.font = `20px monospace`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"third = DOM.context2d(HEIGHT, HEIGHT)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"{\n // Clear the canvas\n third.clearRect(0, 0, HEIGHT, HEIGHT);\n // Subdivide the canvas into tiles. For each tile, draw a character from\n // CHAR_TO_WEIGHT, in ascending order of weight.\n for (let x = 0; x < TILES; x++) {\n for (let y = 0; y < TILES; y++) {\n third.fillText(frame[y][x], x * TILE_HEIGHT, y * TILE_HEIGHT);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"