2b:null 2c:["$","title",null,{"children":"APack: Alphabet Packing Writing System | Bairui Su | Observable"}] 31:Tbf2,{ const node1 = rows( [ html`

${"Rachel Shin" .split(" ") .map((d) => pack({ sentence: d, background: "red", stroke: "white", grid: false }) )}

`, html`

${"Julia Xu" .split(" ") .map((d) => pack({ sentence: d, background: "red", stroke: "white", grid: false }) )}

`, html`

${["Jack"].map((d) => pack({ sentence: d, background: "red", stroke: "white", grid: false, width: 160, height: 80, options: { shuffle: true } }) )}

${["B.", "Du"].map((d) => pack({ sentence: d, background: "red", stroke: "white", grid: false, options: { shuffle: true } }) )}

`, html`

${"Sai Ram Ved Vijapurapu" .split(" ") .map((d) => pack({ sentence: d, background: "red", stroke: "white", grid: false }) )}

` ], { padding: 30, labels: [ "Rachel Shin", "Julia Xu", "Jack B. Du", "Sai Ram Ved Vijapurapu" ] } ); const node2 = rows( [ pack({ background: "red", stroke: "white", sentence: "APack", grid: false, size: 100, padding: 0.1, background: "black", style: { strokeWidth: 3 } }), pack({ background: "red", stroke: "white", sentence: "Weiyulu", grid: false, size: 100, padding: 0.1, background: "black", style: { strokeWidth: 3 }, backgroundStyle: { gradient: { angle: 30, stops: [ { offset: "0%", color: "orange" }, { offset: `40%`, color: "red" }, { offset: `60%`, color: "red" }, { offset: "100%", color: "purple" } ] } } }), pack({ background: "red", stroke: "white", sentence: "Bairui", grid: false, size: 100, style: { strokeWidth: 3 }, backgroundStyle: { gradient: { angle: 30, stops: [ { offset: "0%", color: "#34619E" }, { offset: `30%`, color: "#34619E" }, { offset: `80%`, color: "#8DC181" }, { offset: "100%", color: "#ECCC75" } ] } } }) ], { padding: 10, labels: ["APack", "Weiyulu", "Bairui"] } ); return html`

${node1}

`; }32:T4ee,rows( [ pack({ background: "red", stroke: "white", sentence: "APack", grid: false, size: 100, padding: 0.1, background: "black", style: { strokeWidth: 3 } }), pack({ background: "red", stroke: "white", sentence: "Weiyulu", grid: false, size: 100, padding: 0.1, background: "black", style: { strokeWidth: 3 }, backgroundStyle: { gradient: { angle: 30, stops: [ { offset: "0%", color: "orange" }, { offset: `40%`, color: "red" }, { offset: `60%`, color: "red" }, { offset: "100%", color: "purple" } ] } } }), pack({ background: "red", stroke: "white", sentence: "Bairui", grid: false, size: 100, style: { strokeWidth: 3 }, backgroundStyle: { gradient: { angle: 30, stops: [ { offset: "0%", color: "#34619E" }, { offset: `30%`, color: "#34619E" }, { offset: `80%`, color: "#8DC181" }, { offset: "100%", color: "#ECCC75" } ] } } }) ], { padding: 10, labels: ["APack", "Weiyulu", "Bairui"] } )33:Tbce,function pack({ sentence = "This is a beautiful day", size = 80, width = size, height = size, layout = flex, padding = 0.1, curve = d3.curveCatmullRom, cursiveEach = false, cursive = false, grid = true, word = true, fill = "transparent", stroke = "red", strokeWidth = 2, background = "transparent", renderer = new cm.Renderer(), tree = false, rough = false, font = "futural", style = {}, options = {}, svgStyle = {}, backgroundStyle = false } = {}) { if (tree) { layout = treemap; options = { tile: d3.treemapBinary }; } if (rough) renderer = cm.rough(); const words = sentence.split(" "); const line = d3 .line() .curve(curve) .x((d) => d[0]) .y((d) => d[1]); const min = Math.min(height, width); const data = words.map((d) => packWord({ string: d, x: min * padding, y: min * padding, width: width * (1 - padding), height: height * (1 - padding), padding: min * padding * 0.5, layout, options, cursive: cursive || cursiveEach, font }) ); let groups = data; if (cursive) { const points = data.flatMap(({ paths }, i) => { const x = size * i; const y = 0; const points = paths.flatMap((d) => d.points); for (const list of points) { for (const point of list) { point[0] += x; point[1] += y; } } return points; }); groups = [{ paths: [{ points: [points.flat()], x: 0, y: 0 }] }]; } const app = cm.app({ width: words.length * width, height: height, renderer, styleBackground: background, ...svgStyle, use: { gradient: cm.gradient }, draw: [ backgroundStyle && cm.svg("rect", { x: 0, y: 0, width, height, ...backgroundStyle }), grid && cm.svg("g", data, { transform: (_, i) => `translate(${width * i},0)`, children: ({ cells }) => [ cm.svg("rect", cells, { x: (d) => d.x, y: (d) => d.y, width: (d) => Math.max(1, d.x1 - d.x), height: (d) => Math.max(1, d.y1 - d.y), stroke: "#eee", fill: "none" }) ] }), word && cm.svg("g", groups, { transform: (_, i) => `translate(${width * i},0)`, children: ({ paths }) => [ cm.svg("g", paths, { transform: (d) => `translate(${d.x},${d.y})`, children: (d) => { return [ cm.svg("path", d.points, { d: line, stroke, fill, strokeWidth: strokeWidth, fillWeight: 1, hachureGap: 2, ...style }) ]; } }) ] }) ].filter(Boolean) }); return app.render(); }34:T4b9,function packWord({ string, x, y, size, width = size, height = size, layout, padding, options, cursive, font = "futural" }) { const cells = layout(string, x, y, width, height, padding, options); const pointsof = (ch) => points(font, ch); const scaled = cells.map((d) => { const points = pointsof(d.ch); const flatten = points.flat(); const domainX = d3.extent(flatten, (d) => d[0]); const domainY = d3.extent(flatten, (d) => d[1]); const { x, y, x1, y1 } = d; const w = x1 - x; const h = y1 - y; const sx = d3.scaleLinear(domainX, [0, w]); const sy = d3.scaleLinear(domainY, [0, h]); for (const list of points) { for (const point of list) { point[0] = sx(point[0]); point[1] = sy(point[1]); } } return { ...d, points }; }); let paths = scaled; if (cursive) { const P = scaled.flatMap((d) => { const { x, y, points } = d; for (const list of points) { for (const point of list) { point[0] += x; point[1] += y; } } return points; }); paths = [{ ...scaled[0], points: [P.flat()], x: 0, y: 0 }]; } return { cells, paths }; }35:T446,function flex(string, x, y, x1, y1, padding = 0, options = {}) { const { shuffle = false } = options; const cells = [{ x, y, x1, y1, ch: string[0] }]; const n = string.length; const p = padding / 2; const seed = d3.sum(string.split(""), (d) => d.charCodeAt(0)); const random = d3.randomUniform.source(d3.randomLcg(seed))(); const next = shuffle ? () => random() > 0.5 : (code) => code % 2; let i = 1; while (cells.length < n && i < n) { const char = string[i]; const code = string.charCodeAt(i); const { x, y, x1, y1, ch } = cells[i - 1]; const w = x1 - x; const h = y1 - y; const remain = n - i; const t = remain <= 1 ? 0.5 : 0.33; if (next(code)) { const cell0 = { x, y, x1: x + w * t - p, y1, ch }; const cell1 = { x: x + w * t + p, y, x1, y1, ch: char }; cells.pop(); cells.push(cell0, cell1); } else { const cell0 = { x, y, x1, y1: y + h * t - p, ch }; const cell1 = { x, y: y + h * t + p, x1, y1, ch: char }; cells.pop(); cells.push(cell0, cell1); } i++; } return cells; }36:T8b4,gradient = { const svg = _cm.svg; function calculateGradientPoints(angle) { const rad = (angle * Math.PI) / 180; const cx = 0.5; const cy = 0.5; const dx = Math.cos(rad) * 0.5; const dy = Math.sin(rad) * 0.5; const x1 = (cx - dx) * 100; const y1 = (cy - dy) * 100; const x2 = (cx + dx) * 100; const y2 = (cy + dy) * 100; return { x1: `${x1}%`, y1: `${y1}%`, x2: `${x2}%`, y2: `${y2}%` }; } function equal(a, b) { if (!a || !b) return false; if (a.angle !== b.angle) return false; const { stops: stopsA } = a; const { stops: stopsB } = b; if (stopsA.length !== stopsB.length) return false; for (let i = 0; i < stopsA.length; i++) { const stopA = stopsA[i]; const stopB = stopsB[i]; if (stopA.offset !== stopB.offset || stopA.color !== stopB.color) return false; } return true; } function uid() { return Math.random().toString(36).substr(2, 9); } function createGradient(options) { const id = uid(); const { angle = 0, stops = [] } = options; return [ id, svg("linearGradient", { id, ...calculateGradientPoints(angle), children: stops.map(({ offset, color }) => svg("stop", { offset, "stop-color": color }) ) }).node() ]; } return function (node, options, context) { const root = context.root(); // const root = container.querySelector("svg"); // if (!root) return; if (node.__gradient__) { const { options: oldO, node: oldN } = node.__gradient__; if (equal(oldO, options)) return; const [id, linerGradient] = createGradient(options); node.setAttribute("fill", `url(#${id})`); oldN.replaceWith(linerGradient); node.__gradient__ = { node: linerGradient, options }; } else { let defs = root.querySelector("#cm-gradient-defs"); if (!defs) root.appendChild( (defs = svg("defs", { id: "cm-gradient-defs" }).node()) ); const [id, linerGradient] = createGradient(options); defs.appendChild(linerGradient); node.setAttribute("fill", `url(#${id})`); node.__gradient__ = { node: linerGradient, options }; } }; }37:[{"id":"b3ca3cf38bd091d284e0cb16166781c153730838459c620841b919ad313582d2b7ea9220fee3465bf9945c4747c0ccf30018b4be0c87abf987d93b3cae84c27c","href":"https://static.observableusercontent.com/files/b3ca3cf38bd091d284e0cb16166781c153730838459c620841b919ad313582d2b7ea9220fee3465bf9945c4747c0ccf30018b4be0c87abf987d93b3cae84c27c","name":"hersheytext.json","type":"application/json","lastModified":1743554945288.667,"size":476882},{"id":"94a18514fae0bccfdeb3f592219775fd838049b70044fe39d747a8dfb01115dcb86fc136d0cfdb12af61e8cfca64f6d3ba78dac926da410de9fc1861027795eb","href":"https://static.observableusercontent.com/files/94a18514fae0bccfdeb3f592219775fd838049b70044fe39d747a8dfb01115dcb86fc136d0cfdb12af61e8cfca64f6d3ba78dac926da410de9fc1861027795eb","name":"rough.esm.js","type":"application/javascript","lastModified":1743621959870.796,"size":27748}] 2f:{"id":"3d4704d5b7d5ac6f","slug":null,"title":"APack: Alphabet Packing Writing System","thumbnail":"a72710ad1e32dcdc28bfde72a3c115f82d173e545cf20537d8bb1a491660c98f","access_level":"public","create_time":"$D2025-04-01T23:41:52.763Z","update_time":"$D2025-12-17T14:46:04.244Z","view_time":null,"first_public_time":"$D2025-04-12T13:53:55.987Z","has_unpublished_edits":null,"fork":{"id":"7b4e552feea11ed3","slug":null,"title":"Charming Starter","owner":{"id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":1563,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}],"members":[{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"editor"},{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"APack: Alphabet Packing Writing System","cells":[{"id":0,"value":"

Charming › Gallery

\n\n# APack: Alphabet Packing Writing System \n\n> APack is [open-sourced](https://github.com/pearmini/apack) and is lived at [apack.bairui.dev](https://apack.bairui.dev/).\n\nEnglish and Chinese have different writing systems. In English or Latin scripts, letters are pre-defined and arranged in sequences. While in Chinese, characters do not follow a strict left-to-right structure but instead are spatially arranged using strokes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1457,"value":"html`

Hello你好

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"What if we write English in a Chinese-style manner, arranging the letters of a word spatially into a single character? This notebook proposes a _Alphabet Packing Writing System_ called _APack_ for rendering alphabets recursively based on [Hershey fonts](https://github.com/kamalmostafa/hershey-fonts ).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":825,"value":"## A Word\n\nLet's get started with a single word \"hello\". Firstly, I divided the space recursively into rectangles based some pre-defined rules. Then, we render each letter as a set of paths defined by Hershey fonts. Notably, the path will fill each rectangle. For example, to render \"hello\" into a grid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1182,"value":"rows(\n [\n html`hello`,\n pack({ sentence: \"hello\", word: false }),\n pack({ sentence: \"hello\" }),\n pack({ sentence: \"hello\", grid: false })\n ],\n { padding: 15 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"## A sentence","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1499,"value":"After that, I try to render a sentence: \"This is a beautiful day\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1208,"value":"pack()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"## Treemap Layouts\n\nThis reminds me a visualization method called [Treemp](https://observablehq.com/@d3/treemap/2). So I tried different treemap layouts to see results. Treemap layouts divide space into equal rectangles in this case, making the letter sizes appear more uniform than before, but less \"Chinese\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1210,"value":"cols(\n [\n pack(),\n pack({ layout: treemap, options: { tile: d3.treemapBinary } }),\n pack({ layout: treemap, options: { tile: d3.treemapSquarify } }),\n pack({ layout: treemap, options: { tile: d3.treemapSlice } }),\n pack({ layout: treemap, options: { tile: d3.treemapDice } })\n ],\n {\n labels: [\n \"Flex\",\n \"Treemap Binary\",\n \"Treemap Squarify\",\n \"Treemap Slice\",\n \"Treemap Dice\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"## Cursive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1247,"value":"cols(\n [\n pack({ cursiveEach: true }),\n pack({ cursive: true }),\n pack({\n layout: treemap,\n cursiveEach: true,\n options: { tile: d3.treemapBinary }\n }),\n pack({\n layout: treemap,\n cursiveEach: true,\n cursive: true,\n options: { tile: d3.treemapBinary }\n })\n ],\n {\n labels: [\n \"Cursive Word\",\n \"Cursive Line\",\n \"Treemp Cusrive Word\",\n \"Treemap Cursive Line\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"## Filling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1266,"value":"cols(\n [\n pack({ fill: \"red\" }),\n pack({ fill: \"red\", cursiveEach: true }),\n pack({ fill: \"red\", cursiveEach: true, cursive: true }),\n pack({\n fill: \"red\",\n layout: treemap,\n cursiveEach: true,\n cursive: true,\n options: { tile: d3.treemapBinary }\n })\n ],\n {\n labels: [\n \"Fill\",\n \"Fill Cursive Word\",\n \"Fill Cursive Line\",\n \"Treemap Fill Cursive\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"## Sketchy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"cols(\n [\n pack({\n renderer: cm.rough()\n }),\n pack({\n fill: \"red\",\n renderer: cm.rough()\n }),\n pack({\n cursiveEach: true,\n fill: \"red\",\n renderer: cm.rough()\n }),\n pack({\n cursiveEach: true,\n cursive: true,\n fill: \"red\",\n renderer: cm.rough()\n })\n ],\n {\n labels: [\n \"Sketchy\",\n \"Sketchy Fill\",\n \"Sketchy Cursive Word\",\n \"Sketchy Curisve Line\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"## Application","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":985,"value":"### Stamp","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"### Logo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":932,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"### Wallpaper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1051,"value":"pack({\n background: \"#F1BB4D\",\n stroke: \"#492577\",\n sentence: \"Good\",\n width,\n height: width * 0.618,\n grid: false,\n font: \"astrology\",\n strokeWidth: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"### Writing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":863,"value":"poem = `Where the mind is without fear and the head is held high ;\nWhere knowledge is free ;\nWhere the world has not been broken up into fragments\nBy narrow domestic walls ;\nWhere words come out from the depth of truth ;\nWhere tireless striving stretches its arms towards perfection ;\nWhere the clear stream of reason has not lost its way\nInto the dreary desert sand of dead habit ;\nWhere the mind is led forward by thee\nInto ever widening thought and action\nInto that heaven of freedom, my Father, let my country awake.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"viewof fontOp = Inputs.select(Object.keys(hersheytext), {\n label: \"Font\",\n value: \"futural\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"viewof cursiveOp = Inputs.radio([\"None\", \"Word\", \"Line\"], {\n label: \"Cursive\",\n value: \"None\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"viewof fillOp = Inputs.radio([\"Yes\", \"No\"], { label: \"Fill\", value: \"No\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"viewof treeOp = Inputs.radio([\"Yes\", \"No\"], { label: \"Treeamp\", value: \"No\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"viewof roughOp = Inputs.radio([\"Yes\", \"No\"], { label: \"Rough\", value: \"No\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"writing({\n font: fontOp,\n tree: treeOp === \"Yes\",\n rough: roughOp === \"Yes\",\n cursiveEach: cursiveOp === \"Word\",\n cursive: cursiveOp === \"Line\",\n ...(fillOp === \"Yes\" && { fill: \"white\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"rows([writing({ scale: 0.5 }), writing({ scale: 0.5, font: \"astrology\" })], {\n padding: 20,\n labels: [\"Futural\", \"Astrology\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"rows(\n [\n writing({ scale: 0.5, font: \"symbolic\", tree: true }),\n writing({ scale: 0.5, cursiveEach: true })\n ],\n {\n padding: 20,\n labels: [\"Symolic\", \"Cursive\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"rows(\n [\n writing({ scale: 0.5, cursiveEach: true, fill: \"white\" }),\n writing({ scale: 0.5, cursive: true, fill: \"white\", rough: true })\n ],\n {\n padding: 10,\n labels: [\"Filled\", \"Sketchy\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"function treemap(\n string,\n x = 0,\n y = 0,\n x1 = 50,\n y1 = 50,\n padding = 0,\n { tile = d3.treemapBinary } = {}\n) {\n const data = {\n name: \"pack\",\n children: string.split(\"\").map((d) => ({ name: d, value: 1 }))\n };\n\n const tree = d3\n .hierarchy(data)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value);\n\n const treemap = d3\n .treemap()\n .tile(tile)\n .size([x1 - x, y1 - y])\n .paddingInner(padding);\n\n const root = treemap(tree);\n\n const cells = root.leaves().map((d) => {\n return {\n x: d.x0 + x,\n x1: d.x1 + x,\n y: d.y0 + y,\n y1: d.y1 + y,\n ch: d.data.name\n };\n });\n\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"function points(key, ch) {\n const idx = (ch) => ch.charCodeAt(0) - 33;\n const font = hersheytext[key][\"chars\"];\n const path = ch === \" \" ? \"M8,0\" : font[idx(ch)][\"d\"];\n const plines = [];\n let current = [];\n let mode = \"\";\n for (let t of path.split(\" \")) {\n if (t[0] === \"M\" || t[0] === \"L\") (mode = t[0]), (t = t.slice(1));\n const coords = t.split(\",\").map(Number);\n if (mode === \"M\" && current.length > 0) {\n plines.push(current);\n current = [];\n }\n current.push(coords);\n }\n plines.push(current);\n return plines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1385,"value":"function writing({ scale = 1, ...options } = {}) {\n let maxWidth = -Infinity;\n const node = html`

${poem\n .split(\"\\n\")\n .map((d) => {\n const svg = pack({\n sentence: d,\n grid: false,\n background: \"black\",\n stroke: \"white\",\n svgStyle: { styleHeight: \"100%\" },\n ...options\n });\n const width = svg.getAttribute(\"width\");\n const height = svg.getAttribute(\"height\");\n\n svg.setAttribute(\"viewBox\", [0, 0, width, height]);\n const sw = width * scale;\n const sh = height * scale;\n maxWidth = Math.max(maxWidth, sw);\n svg.setAttribute(\"width\", sw);\n svg.setAttribute(\"height\", sh);\n return html`

${svg}

`;\n })}

\n`;\n node.style.width = maxWidth + \"px\";\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"hersheytext = FileAttachment(\"hersheytext.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"_cm = require(\"charmingjs@0.0.16\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"cm = ({ ..._cm, rough, gradient })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"function rows(doms, { padding = 0, labels = [] } = {}) {\n return html`

${doms.map(\n (d, i) =>\n html`

${d} ${\n labels[i] ?? \"\"\n }

`\n )}

${doms.map(\n (d, i) =>\n html`

${d} ${\n labels[i] ?? \"\"\n }

`\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"function rough() {\n return new RoughRenderer();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"RoughRenderer = {\n const roughSvg = roughjs.default.svg(_cm.svg(\"svg\").node());\n\n function changed(oldAttrs, newAttrs) {\n return Object.keys(newAttrs).some((key) => oldAttrs[key] !== newAttrs[key]);\n }\n\n return class extends _cm.Renderer {\n create(tag) {\n if (tag !== \"svg:path\") return super.create(tag);\n const node = super.create(\"svg:g\");\n node.__rough__ = true;\n return node;\n }\n attrs(node, attrs) {\n if (!node.__rough__) return super.attrs(node, attrs);\n const { d, transform, ...rest } = attrs;\n node.setAttribute(\"transform\", transform);\n if (changed(node.__attrs__ || {}, rest)) {\n const g = roughSvg.path(d, rest);\n node.innerHTML = \"\";\n node.append(g);\n }\n node.__attrs__ = rest;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"roughjs = import(await FileAttachment(\"rough.esm.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"