const BACKGROUND_COLOR = "#FEFAF1"; const HERSHEY_FONTS = { "futural": { "name": "Sans 1-stroke", "chars": [ { "d": "M5,1 L5,15 M5,20 L4,21 5,22 6,21 5,20", "o": 5 }, { "d": "M4,1 L4,8 M12,1 L12,8", "o": 8 }, { "d": "M11,-3 L4,29 M17,-3 L10,29 M4,10 L18,10 M3,16 L17,16", "o": 11 }, { "d": "M8,-3 L8,26 M12,-3 L12,26 M17,4 L15,2 12,1 8,1 5,2 3,4 3,6 4,8 5,9 7,10 13,12 15,13 16,14 17,16 17,19 15,21 12,22 8,22 5,21 3,19", "o": 10 }, { "d": "M21,1 L3,22 M8,1 L10,3 10,5 9,7 7,8 5,8 3,6 3,4 4,2 6,1 8,1 10,2 13,3 16,3 19,2 21,1 M17,15 L15,16 14,18 14,20 16,22 18,22 20,21 21,19 21,17 19,15 17,15", "o": 12 }, { "d": "M23,10 L23,9 22,8 21,8 20,9 19,11 17,16 15,19 13,21 11,22 7,22 5,21 4,20 3,18 3,16 4,14 5,13 12,9 13,8 14,6 14,4 13,2 11,1 9,2 8,4 8,6 9,9 11,12 16,19 18,21 20,22 22,22 23,21 23,20", "o": 13 }, { "d": "M5,3 L4,2 5,1 6,2 6,4 5,6 4,7", "o": 5 }, { "d": "M11,-3 L9,-1 7,2 5,6 4,11 4,15 5,20 7,24 9,27 11,29", "o": 7 }, { "d": "M3,-3 L5,-1 7,2 9,6 10,11 10,15 9,20 7,24 5,27 3,29", "o": 7 }, { "d": "M8,7 L8,19 M3,10 L13,16 M13,10 L3,16", "o": 8 }, { "d": "M13,4 L13,22 M4,13 L22,13", "o": 13 }, { "d": "M5,18 L4,19 3,18 4,17 5,18 5,20 3,22", "o": 4 }, { "d": "M4,13 L22,13", "o": 13 }, { "d": "M4,17 L3,18 4,19 5,18 4,17", "o": 4 }, { "d": "M20,-3 L2,29", "o": 11 }, { "d": "M9,1 L6,2 4,5 3,10 3,13 4,18 6,21 9,22 11,22 14,21 16,18 17,13 17,10 16,5 14,2 11,1 9,1", "o": 10 }, { "d": "M6,5 L8,4 11,1 11,22", "o": 10 }, { "d": "M4,6 L4,5 5,3 6,2 8,1 12,1 14,2 15,3 16,5 16,7 15,9 13,12 3,22 17,22", "o": 10 }, { "d": "M5,1 L16,1 10,9 13,9 15,10 16,11 17,14 17,16 16,19 14,21 11,22 8,22 5,21 4,20 3,18", "o": 10 }, { "d": "M13,1 L3,15 18,15 M13,1 L13,22", "o": 10 }, { "d": "M15,1 L5,1 4,10 5,9 8,8 11,8 14,9 16,11 17,14 17,16 16,19 14,21 11,22 8,22 5,21 4,20 3,18", "o": 10 }, { "d": "M16,4 L15,2 12,1 10,1 7,2 5,5 4,10 4,15 5,19 7,21 10,22 11,22 14,21 16,19 17,16 17,15 16,12 14,10 11,9 10,9 7,10 5,12 4,15", "o": 10 }, { "d": "M17,1 L7,22 M3,1 L17,1", "o": 10 }, { "d": "M8,1 L5,2 4,4 4,6 5,8 7,9 11,10 14,11 16,13 17,15 17,18 16,20 15,21 12,22 8,22 5,21 4,20 3,18 3,15 4,13 6,11 9,10 13,9 15,8 16,6 16,4 15,2 12,1 8,1", "o": 10 }, { "d": "M16,8 L15,11 13,13 10,14 9,14 6,13 4,11 3,8 3,7 4,4 6,2 9,1 10,1 13,2 15,4 16,8 16,13 15,18 13,21 10,22 8,22 5,21 4,19", "o": 10 }, { "d": "M4,10 L3,11 4,12 5,11 4,10 M4,17 L3,18 4,19 5,18 4,17", "o": 4 }, { "d": "M4,10 L3,11 4,12 5,11 4,10 M5,18 L4,19 3,18 4,17 5,18 5,20 3,22", "o": 4 }, { "d": "M20,4 L4,13 20,22", "o": 12 }, { "d": "M4,10 L22,10 M4,16 L22,16", "o": 13 }, { "d": "M4,4 L20,13 4,22", "o": 12 }, { "d": "M3,6 L3,5 4,3 5,2 7,1 11,1 13,2 14,3 15,5 15,7 14,9 13,10 9,12 9,15 M9,20 L8,21 9,22 10,21 9,20", "o": 9 }, { "d": "M18,9 L17,7 15,6 12,6 10,7 9,8 8,11 8,14 9,16 11,17 14,17 16,16 17,14 M12,6 L10,8 9,11 9,14 10,16 11,17 M18,6 L17,14 17,16 19,17 21,17 23,15 24,12 24,10 23,7 22,5 20,3 18,2 15,1 12,1 9,2 7,3 5,5 4,7 3,10 3,13 4,16 5,18 7,20 9,21 12,22 15,22 18,21 20,20 21,19 M19,6 L18,14 18,16 19,17", "o": 14 }, { "d": "M9,1 L1,22 M9,1 L17,22 M4,15 L14,15", "o": 9 }, { "d": "M4,1 L4,22 M4,1 L13,1 16,2 17,3 18,5 18,7 17,9 16,10 13,11 M4,11 L13,11 16,12 17,13 18,15 18,18 17,20 16,21 13,22 4,22", "o": 10 }, { "d": "M18,6 L17,4 15,2 13,1 9,1 7,2 5,4 4,6 3,9 3,14 4,17 5,19 7,21 9,22 13,22 15,21 17,19 18,17", "o": 11 }, { "d": "M4,1 L4,22 M4,1 L11,1 14,2 16,4 17,6 18,9 18,14 17,17 16,19 14,21 11,22 4,22", "o": 10 }, { "d": "M4,1 L4,22 M4,1 L17,1 M4,11 L12,11 M4,22 L17,22", "o": 9 }, { "d": "M4,1 L4,22 M4,1 L17,1 M4,11 L12,11", "o": 8 }, { "d": "M18,6 L17,4 15,2 13,1 9,1 7,2 5,4 4,6 3,9 3,14 4,17 5,19 7,21 9,22 13,22 15,21 17,19 18,17 18,14 M13,14 L18,14", "o": 11 }, { "d": "M4,1 L4,22 M18,1 L18,22 M4,11 L18,11", "o": 11 }, { "d": "M4,1 L4,22", "o": 4 }, { "d": "M12,1 L12,17 11,20 10,21 8,22 6,22 4,21 3,20 2,17 2,15", "o": 8 }, { "d": "M4,1 L4,22 M18,1 L4,15 M9,10 L18,22", "o": 10 }, { "d": "M4,1 L4,22 M4,22 L16,22", "o": 7 }, { "d": "M4,1 L4,22 M4,1 L12,22 M20,1 L12,22 M20,1 L20,22", "o": 12 }, { "d": "M4,1 L4,22 M4,1 L18,22 M18,1 L18,22", "o": 11 }, { "d": "M9,1 L7,2 5,4 4,6 3,9 3,14 4,17 5,19 7,21 9,22 13,22 15,21 17,19 18,17 19,14 19,9 18,6 17,4 15,2 13,1 9,1", "o": 11 }, { "d": "M4,1 L4,22 M4,1 L13,1 16,2 17,3 18,5 18,8 17,10 16,11 13,12 4,12", "o": 10 }, { "d": "M9,1 L7,2 5,4 4,6 3,9 3,14 4,17 5,19 7,21 9,22 13,22 15,21 17,19 18,17 19,14 19,9 18,6 17,4 15,2 13,1 9,1 M12,18 L18,24", "o": 11 }, { "d": "M4,1 L4,22 M4,1 L13,1 16,2 17,3 18,5 18,7 17,9 16,10 13,11 4,11 M11,11 L18,22", "o": 10 }, { "d": "M17,4 L15,2 12,1 8,1 5,2 3,4 3,6 4,8 5,9 7,10 13,12 15,13 16,14 17,16 17,19 15,21 12,22 8,22 5,21 3,19", "o": 10 }, { "d": "M8,1 L8,22 M1,1 L15,1", "o": 8 }, { "d": "M4,1 L4,16 5,19 7,21 10,22 12,22 15,21 17,19 18,16 18,1", "o": 11 }, { "d": "M1,1 L9,22 M17,1 L9,22", "o": 9 }, { "d": "M2,1 L7,22 M12,1 L7,22 M12,1 L17,22 M22,1 L17,22", "o": 12 }, { "d": "M3,1 L17,22 M17,1 L3,22", "o": 10 }, { "d": "M1,1 L9,11 9,22 M17,1 L9,11", "o": 9 }, { "d": "M17,1 L3,22 M3,1 L17,1 M3,22 L17,22", "o": 10 }, { "d": "M4,-3 L4,29 M5,-3 L5,29 M4,-3 L11,-3 M4,29 L11,29", "o": 7 }, { "d": "M0,1 L14,25", "o": 7 }, { "d": "M9,-3 L9,29 M10,-3 L10,29 M3,-3 L10,-3 M3,29 L10,29", "o": 7 }, { "d": "M8,-1 L0,13 M8,-1 L16,13", "o": 8 }, { "d": "M0,29 L18,29", "o": 9 }, { "d": "M5,6 L3,8 3,10 4,11 5,10 4,9 3,10", "o": 4 }, { "d": "M15,8 L15,22 M15,11 L13,9 11,8 8,8 6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19", "o": 10 }, { "d": "M4,1 L4,22 M4,11 L6,9 8,8 11,8 13,9 15,11 16,14 16,16 15,19 13,21 11,22 8,22 6,21 4,19", "o": 9 }, { "d": "M15,11 L13,9 11,8 8,8 6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19", "o": 9 }, { "d": "M15,1 L15,22 M15,11 L13,9 11,8 8,8 6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19", "o": 10 }, { "d": "M3,14 L15,14 15,12 14,10 13,9 11,8 8,8 6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19", "o": 9 }, { "d": "M10,1 L8,1 6,2 5,5 5,22 M2,8 L9,8", "o": 7 }, { "d": "M15,8 L15,24 14,27 13,28 11,29 8,29 6,28 M15,11 L13,9 11,8 8,8 6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19", "o": 10 }, { "d": "M4,1 L4,22 M4,12 L7,9 9,8 12,8 14,9 15,12 15,22", "o": 10 }, { "d": "M3,1 L4,2 5,1 4,0 3,1 M4,8 L4,22", "o": 4 }, { "d": "M5,1 L6,2 7,1 6,0 5,1 M6,8 L6,25 5,28 3,29 1,29", "o": 5 }, { "d": "M4,1 L4,22 M14,8 L4,18 M8,14 L15,22", "o": 8 }, { "d": "M4,1 L4,22", "o": 4 }, { "d": "M4,8 L4,22 M4,12 L7,9 9,8 12,8 14,9 15,12 15,22 M15,12 L18,9 20,8 23,8 25,9 26,12 26,22", "o": 15 }, { "d": "M4,8 L4,22 M4,12 L7,9 9,8 12,8 14,9 15,12 15,22", "o": 10 }, { "d": "M8,8 L6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19 16,16 16,14 15,11 13,9 11,8 8,8", "o": 10 }, { "d": "M4,8 L4,29 M4,11 L6,9 8,8 11,8 13,9 15,11 16,14 16,16 15,19 13,21 11,22 8,22 6,21 4,19", "o": 9 }, { "d": "M15,8 L15,29 M15,11 L13,9 11,8 8,8 6,9 4,11 3,14 3,16 4,19 6,21 8,22 11,22 13,21 15,19", "o": 10 }, { "d": "M4,8 L4,22 M4,14 L5,11 7,9 9,8 12,8", "o": 6 }, { "d": "M14,11 L13,9 10,8 7,8 4,9 3,11 4,13 6,14 11,15 13,16 14,18 14,19 13,21 10,22 7,22 4,21 3,19", "o": 9 }, { "d": "M5,1 L5,18 6,21 8,22 10,22 M2,8 L9,8", "o": 7 }, { "d": "M4,8 L4,18 5,21 7,22 10,22 12,21 15,18 M15,8 L15,22", "o": 10 }, { "d": "M2,8 L8,22 M14,8 L8,22", "o": 8 }, { "d": "M3,8 L7,22 M11,8 L7,22 M11,8 L15,22 M19,8 L15,22", "o": 11 }, { "d": "M3,8 L14,22 M14,8 L3,22", "o": 9 }, { "d": "M2,8 L8,22 M14,8 L8,22 6,26 4,28 2,29 1,29", "o": 8 }, { "d": "M14,8 L3,22 M3,8 L14,8 M3,22 L14,22", "o": 9 }, { "d": "M9,-3 L7,-2 6,-1 5,1 5,3 6,5 7,6 8,8 8,10 6,12 M7,-2 L6,0 6,2 7,4 8,5 9,7 9,9 8,11 4,13 8,15 9,17 9,19 8,21 7,22 6,24 6,26 7,28 M6,14 L8,16 8,18 7,20 6,21 5,23 5,25 6,27 7,28 9,29", "o": 7 }, { "d": "M4,-3 L4,29", "o": 4 }, { "d": "M5,-3 L7,-2 8,-1 9,1 9,3 8,5 7,6 6,8 6,10 8,12 M7,-2 L8,0 8,2 7,4 6,5 5,7 5,9 6,11 10,13 6,15 5,17 5,19 6,21 7,22 8,24 8,26 7,28 M8,14 L6,16 6,18 7,20 8,21 9,23 9,25 8,27 7,28 5,29", "o": 7 }, { "d": "M3,16 L3,14 4,11 6,10 8,10 10,11 14,14 16,15 18,15 20,14 21,12 M3,14 L4,12 6,11 8,11 10,12 14,15 16,16 18,16 20,15 21,12 21,10", "o": 12 }, { "d": "M0,1 L0,22 1,22 1,1 2,1 2,22 3,22 3,1 4,1 4,22 5,22 5,1 6,1 6,22 7,22 7,1 8,1 8,22 9,22 9,1 10,1 10,22 11,22 11,1 12,1 12,22 13,22 13,1 14,1 14,22 15,22 15,1 16,1 16,22", "o": 8 } ] } } function createMat() { const { mat2d, vec2 } = glMatrix; const stack = [mat2d.create()]; const lastof = (a) => a[a.length - 1]; return { translate(x, y) { const last = lastof(stack); mat2d.translate(last, last, vec2.fromValues(x, y)); return this; }, rotate(angle) { const last = lastof(stack); mat2d.rotate(last, last, angle * (Math.PI / 180)); return this; }, push() { const last = lastof(stack); stack.push(mat2d.clone(last)); return this; }, pop() { stack.pop(); return this; }, transform() { const last = lastof(stack) ?? mat2d.create(); return `matrix(${last[0]} ${last[1]} ${last[2]} ${last[3]} ${last[4]} ${last[5]})`; }, }; } const cm = Object.assign({}, window.cm, { mat: createMat }); function findReminder(string) { let uniqueRemainders; const substring = string.substring(1, string.length); const isSame = (s, r) => { const codes = s.split("").map((c) => c.charCodeAt(0)); const remainders = codes.map((code) => code % r); uniqueRemainders = new Set(remainders); return uniqueRemainders.size > 1; }; let r = 2; // If the string is too short, stacking in one direction is OK. while (!isSame(substring, r) && r < 10 && string.length > 3) { r++; } return [r, Array.from(uniqueRemainders)[0]]; } function flexLayout(string, x, y, x1, y1, {padding = 0.05} = {}) { const cellSize = Math.min(x1 - x, y1 - y); const p = cellSize * padding; const cells = [{x, y, x1, y1, ch: string[0]}]; const n = string.length; const [r, d] = findReminder(string); const next = (code) => code % r === d; let i = 1; const constrain = (cell) => { cell.x = Math.min(Math.max(x, cell.x), x1); cell.y = Math.min(Math.max(y, cell.y), y1); cell.x1 = Math.min(Math.max(x, cell.x1), x1); cell.y1 = Math.min(Math.max(y, cell.y1), y1); }; 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 : remain <= 4 ? 0.33 : 0.25; 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}; constrain(cell0); constrain(cell1); 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}; constrain(cell0); constrain(cell1); cells.pop(); cells.push(cell0, cell1); } i++; } return cells; } const fonts = HERSHEY_FONTS; const LAYOUTS = { flex: flexLayout, }; function hersheyPoints(key, ch) { const idx = (ch) => ch.charCodeAt(0) - 33; const font = fonts[key]["chars"]; const path = ch === " " ? "M8,0" : font[idx(ch)]["d"]; const plines = []; let current = []; let mode = ""; for (let t of path.split(" ")) { if (t[0] === "M" || t[0] === "L") ((mode = t[0]), (t = t.slice(1))); const coords = t.split(",").map(Number); if (mode === "M" && current.length > 0) { plines.push(current); current = []; } current.push(coords); } plines.push(current); return plines; } function packWord({string, x, y, width, height, layout, cursive = false, font = "futural"}) { const {type, ...options} = layout; const pack = LAYOUTS[type]; if (!pack) throw new Error(`Unknown layout: ${type}`); const cells = pack(string, x, y, width, height, options); const pointsof = (ch) => hersheyPoints(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}; } function apackText( content, { cellSize = 80, cellWidth = cellSize, cellHeight = cellSize, curve = d3.curveCatmullRom, padding = 0.1, cursive = false, layout = {}, font = "futural", word = {}, grid = false, background = {}, style = {}, } = {}, ) { if (word) word = Object.assign({fill: "transparent", stroke: "black", strokeWidth: 2}, word); if (grid) grid = Object.assign({stroke: "#eee", fill: "none"}, grid); if (background) background = Object.assign({fill: "transparent"}, background); layout = Object.assign({type: "flex"}, layout); const words = content.split(" ").filter(Boolean); const line = d3 .line() .curve(curve) .x((d) => d[0]) .y((d) => d[1]); const min = Math.min(cellHeight, cellWidth); const data = words.map((d) => packWord({ string: d, x: min * padding, y: min * padding, width: cellWidth * (1 - padding), height: cellHeight * (1 - padding), padding: min * padding * 0.5, layout, font, cursive, }), ); const width = words.length * cellWidth; const height = cellHeight; const root = cm.svg("svg", { width, height, styleBackground: "white", ...style, children: [ background && cm.svg("rect", {x: 0, y: 0, width, height, ...background}), grid && cm.svg("g", data, { transform: (_, i) => `translate(${cellWidth * 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), ...grid, }), ], }), word && cm.svg("g", data, { transform: (_, i) => `translate(${cellWidth * i},0)`, children: ({paths}) => [ cm.svg("g", paths, { transform: (d) => `translate(${d.x},${d.y})`, children: (d) => [cm.svg("path", d.points, {d: line, ...word})], }), ], }), ].filter(Boolean), }); return root; } function reduceDenominator(numerator, denominator) { const rec = (a, b) => (b ? rec(b, a % b) : a); return denominator / rec(numerator, denominator); } function rose(r, n, d, options = {}) { const k = n / d; const m = reduceDenominator(n, d); const points = []; for (let a = 0; a < Math.PI * 2 * m + 0.02; a += 0.02) { const r1 = r * Math.cos(k * a); const x = r1 * Math.cos(a); const y = r1 * Math.sin(a); points.push([x, y]); } return cm.svg("path", { d: d3.line().curve(d3.curveCatmullRom)(points), ...options, }); } function ellipsis(text, maxLength) { const chars = Array.from(text); if (chars.length <= maxLength) return text; return chars.slice(0, maxLength).join("") + "..."; } function circlePath(r) { const path = d3.path(); path.arc(0, 0, r, 0, Math.PI * 2); return path.toString(); } function hachureCirclePath() { return ""; } function parsePathPoints(path) { const plines = []; let current = []; let mode = ""; for (let t of path.split(" ")) { if (t[0] === "M" || t[0] === "L") (mode = t[0]), (t = t.slice(1)); const coords = t.split(",").map(Number); if (mode === "M" && current.length > 0) { plines.push(current); current = []; } current.push(coords); } plines.push(current); return plines; } function pathWidth(number, points) { const minX = Math.min(...points.flatMap((line) => line.map(([x]) => x))); const maxX = Math.max(...points.flatMap((line) => line.map(([x]) => x))); const offset = number === "1" ? 7 : 3; return maxX - minX + offset; } function pathNumber(number) { const idx = (ch) => ch.charCodeAt(0) - 33; const font = fonts.futural["chars"]; const scale = 0.5; const pathPLines = (n) => { const raw = font[idx(n + "")]["d"]; const plines = parsePathPoints(raw); const scaledPlines = plines.map((line) => line.map(([x, y]) => [x * scale, y * scale])); return scaledPlines; }; const path = (n) => { const plines = pathPLines(n); let d = ""; for (const line of plines) { d += `M${line[0][0]},${line[0][1]}`; for (const [x, y] of line.slice(1)) { d += `L${x},${y}`; } } return d; }; const numbers = String(number).split(""); const translateX = new Array(numbers.length).fill(0); for (let i = 1; i < numbers.length; i++) { const n = numbers[i - 1]; translateX[i] = translateX[i - 1] + pathWidth(n, pathPLines(n)); } const totalWidth = translateX[numbers.length - 1]; return cm.svg("g", { transform: `translate(${-totalWidth}, 0)`, children: [ cm.svg("path", String(number).split(""), { d: (n) => path(n), transform: (_, i) => `translate(${translateX[i]}, 0)`, }), ], }); } function toTree(codes) { const data = { children: [], }; const visited = [data]; let currentIndex = 0; while (currentIndex < codes.length && visited.length > 0) { const code = +codes[currentIndex]; const current = visited.shift(); const children = d3.range(code).map((i) => ({children: []})); current.children = children; visited.push(...children); currentIndex++; } return data; } // example: 101103111 -> [['10', '1', '10'], '3111'] // example: 2030 -> ['20', '30'] // example: 1103045 -> ['1', '10', '30', '45'] function trimDegenerateSegments(code) { const codes = []; let current = null; let i = 0; const isValid = (current) => { const isStartWith1 = current.startsWith("1"); const enoughZeros = +current[0] <= current.slice(1).length; return isStartWith1 || enoughZeros; }; for (i = 0; i < code.length; i++) { const digit = +code[i]; const next = +code[i + 1]; // A degenerate segment is a segment starting with 1 or // with trailing 0 which 0 count is getter than or equal to the first digit. const isDegenerateSegment = digit === 1 || next === 0; if (!current && !isDegenerateSegment) break; else if (!current && isDegenerateSegment) current = "" + digit; else if (digit === 0) current += "" + digit; else { if (isValid(current)) { codes.push(current); current = isDegenerateSegment ? "" + digit : null; if (!current) break; } else { i = i - current.length; current = null; break; } } } if (current) { if (isValid(current)) codes.push(current); else i = i - current.length; } return [codes, code.slice(i)]; } function createTree( text, { stroke = "black", grid = false, padding = 20, number = true, stamp = true, count = false, line = true, end = true, plot = false, strokeWidth = 1.5, } = {}, ) { const width = 480; const height = 480; text = text.trim(); const ascii = text .split("") .map((code) => code.charCodeAt(0)) .join(""); const randomLcg = d3.randomUniform.source(d3.randomLcg(+ascii))(); function random(min, max) { return min + (max - min) * randomLcg(); } function randomInt(min, max) { return Math.floor(random(min, max)); } const [flowers, tree] = trimDegenerateSegments(ascii); const data = toTree(tree); const root = d3.hierarchy(data); const range = flowers.length * 10; const middle = tree ? width * 0.25 : width / 2; const flowerX = d3 .scalePoint() .domain(flowers.map((_, i) => i)) .range([middle - range, middle + range]); const roses = []; const paths = []; const circles = []; const numbers = []; const initLen = 140; const baselineY = height * 0.618 + initLen; const context = cm.mat().translate(width / 2, baselineY); branch(root, initLen, 0, 80); function branch(node, len, rotation, angle, roseCount = 0) { context.push(); context.rotate(rotation); paths.push({d: `M0,0L0,${-len}`, transform: context.transform()}); if (node.children) { context.translate(0, -len); len *= 0.618; const children = node.children; const leaves = children.map((d) => d.leaves().length); const stacked = []; let sum = 0; for (const length of leaves) { sum += length; stacked.push(sum); } if (count) { numbers.push({ count: node.children.length, transform: context.transform(), }); } const scaleAngle = d3.scaleLinear().domain([0, sum]).range([-angle, angle]); const n = children.length; let mergeCount = -1; let startIndex = -1; let endIndex = -1; if (n > 2 && node.children.every((d) => !d.children) && !count) mergeCount = randomInt(3, Math.min(n, 10)); if (mergeCount > 0) { startIndex = randomInt(0, n - mergeCount); endIndex = startIndex + mergeCount - 1; } for (let i = 0; i < n; i++) { if (i >= startIndex && i < endIndex) continue; const isMerge = i === endIndex; let prevIndex = isMerge ? startIndex : i - 1; const child = children[i]; const childRotation = scaleAngle(stacked[i]); const prevRotation = stacked[prevIndex] ? scaleAngle(stacked[prevIndex]) : -angle; const diff = childRotation - prevRotation; branch(child, len, (childRotation + prevRotation) / 2, Math.min(80, diff), isMerge ? mergeCount : 0); } } else { // [n, d] const roseByCount = { 3: [3, 1], 4: [4, 2], 5: [5, 3], 6: [3, 2], 7: [7, 3], 8: [4, 2], 9: [3, 2], }; if (roseCount > 0) { const [n, d] = roseByCount[roseCount]; const r = Math.sqrt(roseCount * len); context.translate(0, -len); roses.push({r, n, d, transform: context.transform()}); } else { const r = len / 12; context.translate(0, -len - r); len *= 0.67; circles.push({ cx: 0, cy: 0, r, transform: context.transform(), }); } } context.pop(); } let textNode = null; let longMessage = false; try { const wordLength = text.split(" ").length; if (wordLength > 4) { throw new Error("Too many words"); } let cellSize = 80; const padding = 20; let totalLength = wordLength * cellSize + padding * 2; if (totalLength > width / 2) { cellSize = (width / 2 - padding * 2) / wordLength; totalLength = wordLength * cellSize + padding; } else { totalLength -= padding; } const start = end ? width - totalLength : width / 2 + padding; textNode = cm.svg("g", { transform: `translate(${start}, ${baselineY - cellSize - 5})`, children: [apackText(text, {cellSize, word: {strokeWidth: 1.5}})], }); } catch (e) { longMessage = true; textNode = cm.svg("text", { textContent: ellipsis(text, 18), x: "100%", y: "100%", dy: "-55", dx: "-20", textAnchor: "end", fill: "black", fontSize: 16, fontFamily: "monospace", }); } const svg = cm.svg("svg", { width, height, styleBackground: BACKGROUND_COLOR, children: [ grid && cm.svg("rect", { x: 0, y: 0, class: "tree-bg", width: width, height: height, stroke, strokeWidth, fill: "transparent", }), cm.svg("g", flowers, { transform: (d, i) => `translate(${flowerX(i)}, ${baselineY})`, children: (d, i) => [ cm.svg("path", { d: `M0,0L0,${-initLen * 0.618}`, stroke: "black", strokeWidth, }), cm.svg("g", { strokeWidth, transform: `translate(0, ${-initLen * 0.618})`, children: [ rose(12, 1, i + 2, { fill: BACKGROUND_COLOR, stroke: "black", }), ], }), ], }), tree && cm.svg("g", { stroke: "black", strokeWidth, children: [ cm.svg("path", paths, { d: (d) => d.d, transform: (d) => d.transform, }), ], }), tree && cm.svg("g", circles, { transform: (d) => d.transform, children: (d) => [ plot && cm.svg("path", { d: hachureCirclePath(d.r), strokeWidth, fill: "transparent", stroke: "black", }), cm.svg("path", { d: circlePath(d.r), fill: plot ? "transparent" : "black", stroke: "black", }), ].filter(Boolean), }), tree && cm.svg("g", roses, { transform: (d) => d.transform, children: (d) => [ rose(d.r, d.n, d.d, { fill: BACKGROUND_COLOR, stroke: "black", }), ], }), stamp && (plot ? (longMessage ? null : textNode) : textNode), count && cm.svg("g", numbers, { transform: (d) => d.transform, children: (d) => [ cm.svg("circle", { cx: 0, cy: 0, r: 14, fill: "black", }), cm.svg("text", { textContent: d.count, fill: "white", fontSize: 20, textAnchor: "middle", dy: "0.4em", }), ], }), line && cm.svg("path", { d: `M${padding},${baselineY}L${width - padding},${baselineY}`, stroke: "black", strokeWidth, }), number && (plot ? cm.svg("g", { transform: "translate(448, 448)", stroke: "black", strokeWidth, fill: "transparent", children: [pathNumber(ellipsis(ascii, 40))], }) : cm.svg("text", { id: "ascii", textContent: ellipsis(ascii, 58), x: "100%", y: "100%", dy: "-26", dx: "-20", textAnchor: "end", fill: "black", fontSize: 12, fontFamily: "monospace", })), ].filter(Boolean), }); return svg; } function downloadSVG(name, svg) { const svgData = new XMLSerializer().serializeToString(svg); const blob = new Blob([svgData], { type: "image/svg+xml" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = name + ".svg"; a.click(); URL.revokeObjectURL(url); } function downloadPNG(name, svg) { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); const svgData = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); const reader = new FileReader(); reader.onload = (e) => { img.src = e.target.result; }; reader.readAsDataURL(svgBlob); img.onload = () => { const dpr = window.devicePixelRatio || 1; canvas.width = img.width * dpr; canvas.height = img.height * dpr; ctx.scale(dpr, dpr); ctx.drawImage(img, 0, 0, img.width, img.height); const a = document.createElement("a"); a.href = canvas.toDataURL("image/png"); a.download = name + ".png"; a.click(); }; } function measureText(text, { fontSize = "16px", fontFamily = "monospace" } = {}) { const span = document.createElement("span"); span.style.cssText = "position:absolute;visibility:hidden;white-space:pre"; span.style.fontSize = fontSize; span.style.fontFamily = fontFamily; span.textContent = text; document.body.appendChild(span); const rect = span.getBoundingClientRect(); document.body.removeChild(span); return { width: rect.width, height: rect.height }; } function downloadFilename(base) { const now = new Date(); const pad = (n) => String(n).padStart(2, "0"); return base + "-" + now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate()) + "-" + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds()); } const PLACEHOLDER = "Type your name..."; const DEFAULT_TEXT = "Name To Tree"; const input = document.getElementById("name-input"); const treeHost = document.getElementById("tree"); const downloadPng = document.getElementById("download-png"); const downloadSvg = document.getElementById("download-svg"); const hint = document.getElementById("hint"); const inputStyle = { fontSize: "16px", fontFamily: 'ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace' }; function setDownloadEnabled(enabled) { downloadPng.disabled = !enabled; downloadSvg.disabled = !enabled; } function updateInputWidth(value) { const maxWidth = Math.min(320, window.innerWidth - 48); const text = value.length ? value : PLACEHOLDER; const { width } = measureText(text, inputStyle); input.style.width = Math.min(width + 20, maxWidth) + "px"; } function renderTree(text) { treeHost.innerHTML = ""; const treeText = text.trim() || DEFAULT_TEXT; const node = createTree(treeText, { grid: false, stamp: true, number: true }).render(); node.setAttribute("viewBox", "0 0 480 480"); node.style.width = "100%"; node.style.height = "100%"; treeHost.appendChild(node); } function renderDownloadTree(text, options) { const svg = createTree(text.trim(), { grid: false, ...options }).render(); svg.setAttribute("viewBox", "0 0 480 480"); return svg; } input.addEventListener("input", () => { const value = input.value; updateInputWidth(value); renderTree(value); const hasText = !!value.trim(); setDownloadEnabled(hasText); hint.classList.toggle("visible", hasText); }); document.getElementById("download-png").addEventListener("click", () => { const text = input.value.trim(); if (!text) return; const svg = renderDownloadTree(text, { number: true, stamp: true }); downloadPNG(downloadFilename(text), svg); }); document.getElementById("download-svg").addEventListener("click", () => { const text = input.value.trim(); if (!text) return; const svg = renderDownloadTree(text, { number: true, stamp: true }); downloadSVG(downloadFilename(text), svg); }); updateInputWidth(""); setDownloadEnabled(false); renderTree(""); input.focus();