// Required Fil uploads (Files button in preview toolbar): // names.json // // CDN globals (loaded in index.html): d3, glMatrix, cm, ap function assetUrl(name) { return typeof fil !== "undefined" && fil.url ? fil.url(name) : `assets/${name}`; } const THEME = { sky: "#F6D87B", background: "#ECCC75", mountain1: "#51A9F1", mountain2: "#34619E", mountain3: "#8DC181", }; // --- noise.js --- const PERLIN_YWRAPB = 4; const PERLIN_YWRAP = 1 << PERLIN_YWRAPB; const PERLIN_ZWRAPB = 8; const PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB; const PERLIN_SIZE = 4095; function scaledCosine(i) { return 0.5 * (1.0 - Math.cos(i * Math.PI)); } function noiseSeed(seed) { const m = 4294967296; const a = 1664525; const c = 1013904223; let z = (seed == null ? Math.random() * m : seed) >>> 0; const random = () => { z = (a * z + c) % m; return z / m; }; const perlin = new Array(PERLIN_SIZE + 1); for (let i = 0; i < PERLIN_SIZE + 1; i++) { perlin[i] = random(); } return perlin; } function randomNoise(lo = 0, hi = 1, {octaves = 4, seed = Math.random() * 100000, falloff = 0.5} = {}) { const map = (x) => lo + (hi - lo) * x; const perlin = noiseSeed(seed); const noise = (x, y = 0, z = 0) => { if (x < 0) x = -x; if (y < 0) y = -y; if (z < 0) z = -z; let xi = Math.floor(x); let yi = Math.floor(y); let zi = Math.floor(z); let xf = x - xi; let yf = y - yi; let zf = z - zi; let r = 0; let ampl = 0.5; for (let o = 0; o < octaves; o++) { let of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB); let rxf = scaledCosine(xf); let ryf = scaledCosine(yf); let n1 = perlin[of & PERLIN_SIZE]; n1 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n1); let n2 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE]; n2 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n2); n1 += ryf * (n2 - n1); of += PERLIN_ZWRAP; n2 = perlin[of & PERLIN_SIZE]; n2 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n2); let n3 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE]; n3 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n3); n2 += ryf * (n3 - n2); n1 += scaledCosine(zf) * (n2 - n1); r += n1 * ampl; ampl *= falloff; xi <<= 1; xf *= 2; yi <<= 1; yf *= 2; zi <<= 1; zf *= 2; if (xf >= 1.0) { xi++; xf--; } if (yf >= 1.0) { yi++; yf--; } if (zf >= 1.0) { zi++; zf--; } } return r; }; return (x0 = 0, y0 = 0, z0 = 0) => map(noise(x0, y0, z0)); } // --- gradient.js --- function gradientEqual(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 createGradient(options, svgRoot) { const id = `gradient-${Math.random().toString(36).substr(2, 9)}`; const {stops = []} = options; let defs = d3.select(svgRoot).select("defs#gradient-defs"); if (defs.empty()) { d3.select(svgRoot).append("defs").attr("id", "gradient-defs"); defs = d3.select(svgRoot).select("defs#gradient-defs"); } const radialGradient = defs .append("radialGradient") .attr("id", id) .attr("cx", "50%") .attr("cy", "0%") .attr("r", "100%") .attr("fx", "50%") .attr("fy", "0%"); stops.forEach(({offset, color}) => { radialGradient.append("stop").attr("offset", offset).attr("stop-color", color); }); return id; } function applyGradient(node, options, svgRoot) { if (!svgRoot) { svgRoot = node.closest("svg"); if (!svgRoot) return; } if (node.__gradient__) { const {options: oldO, id: oldId} = node.__gradient__; if (gradientEqual(oldO, options)) return; d3.select(svgRoot).select(`#${oldId}`).remove(); const id = createGradient(options, svgRoot); d3.select(node).attr("fill", `url(#${id})`); node.__gradient__ = {id, options}; } else { const id = createGradient(options, svgRoot); d3.select(node).attr("fill", `url(#${id})`); node.__gradient__ = {id, options}; } } // --- mat.js --- 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}); // --- tree.js --- 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 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(() => ({children: []})); current.children = children; visited.push(...children); currentIndex++; } return data; } function trimDegenerateSegments(code) { const codes = []; let current = null; let i = 0; const isValid = (c) => { const isStartWith1 = c.startsWith("1"); const enoughZeros = +c[0] <= c.slice(1).length; return isStartWith1 || enoughZeros; }; for (i = 0; i < code.length; i++) { const digit = +code[i]; const next = +code[i + 1]; 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 circlePath(r) { const path = d3.path(); path.arc(0, 0, r, 0, Math.PI * 2); return path.toString(); } function ellipsis(text, maxLength) { const chars = Array.from(text); if (chars.length <= maxLength) return text; return chars.slice(0, maxLength).join("") + "..."; } function tree( text, { width = 480, height = width, stroke = "black", grid = false, padding = 20, stamp = true, end = true, strokeWidth = 1.5, stampCellSize = 50, } = {}, ) { 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, treeCode] = trimDegenerateSegments(ascii); const data = toTree(treeCode); const root = d3.hierarchy(data); const range = flowers.length * 10; const middle = treeCode ? 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 initLen = (140 / 480) * width; const baselineY = height * 0.618 + initLen; const context = cm.mat().translate(width / 2, baselineY); function branch(node, len, rotation, angle, roseCount = 0, depth = 1) { context.push(); context.rotate(rotation); paths.push({d: `M0,0L0,${-len}`, transform: context.transform(), depth}); 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); } 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)) 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, depth + 1); } } else { 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(), depth}); } else { const r = len / 12; context.translate(0, -len - r); circles.push({ cx: 0, cy: 0, r, transform: context.transform(), depth, }); } } context.pop(); } branch(root, initLen, 0, 80, 0, 1); let textNode = null; if (stamp) { try { const wordLength = text.split(" ").length; if (wordLength > 4) { throw new Error("Too many words"); } let cellSize = stampCellSize; const stampPadding = 20; let totalLength = wordLength * cellSize + stampPadding * 2; if (totalLength > width / 2) { cellSize = (width / 2 - stampPadding * 2) / wordLength; totalLength = wordLength * cellSize + stampPadding; } else { totalLength -= stampPadding; } const start = end ? width - totalLength : width / 2 + stampPadding; const sw = 1.5; textNode = cm.svg("g", { "data-tree-part": "name", transform: `translate(${start}, ${baselineY - cellSize - 5})`, children: [ ap.text(text, { cellSize, word: {strokeWidth: sw, stroke: "red"}, background: {strokeWidth: sw * 2, stroke: "red"}, }), ], }); } catch { const fontSize = 12; const textPadding = 4; const textContent = ellipsis(text, 14); const textWidth = textContent.length * (fontSize * 0.6); const textHeight = fontSize; const dx = (-20 / 480) * width; const dy = (-55 / 480) * width; textNode = cm.svg("g", { "data-tree-part": "name", children: [ cm.svg("rect", { x: width + dx - textWidth - textPadding, y: height + dy - textHeight - textPadding, width: textWidth + textPadding * 2, height: textHeight + textPadding * 2, fill: "none", stroke: "red", strokeWidth: 1.5, }), cm.svg("text", { textContent: textContent, x: "100%", y: "100%", dx: dx, dy: dy, textAnchor: "end", fill: "red", fontSize: fontSize, fontFamily: "monospace", }), ], }); } } return cm.svg("svg", { width, height, children: [ grid && cm.svg("rect", { x: 0, y: 0, class: "tree-bg", width: width, height: height, stroke, strokeWidth, fill: "transparent", }), cm.svg("g", flowers, { "data-tree-part": "flower", transform: (d, i) => `translate(${flowerX(i)}, ${baselineY})`, children: (d, i) => [ cm.svg("path", { d: `M0,0L0,${-initLen * 0.618}`, stroke: "black", strokeWidth, "data-tree-part": "flower", }), cm.svg("g", { strokeWidth, transform: `translate(0, ${-initLen * 0.618})`, children: [ rose(12, 1, i + 2, { fill: THEME.background, stroke: "black", "data-tree-part": "flower", }), ], }), ], }), treeCode && cm.svg("g", { stroke: "black", strokeWidth, children: [ cm.svg("path", paths, { d: (d) => d.d, transform: (d) => d.transform, "data-tree-part": "branch", "data-depth": (d) => d.depth, }), ], }), treeCode && cm.svg("g", circles, { transform: (d) => d.transform, children: (d) => [ cm.svg("path", { d: circlePath(d.r), fill: THEME.background, stroke: "black", "data-tree-part": "flower", "data-depth": (d) => d.depth, }), ], }), treeCode && cm.svg("g", roses, { transform: (d) => d.transform, children: (d) => [ rose(d.r, d.n, d.d, { fill: THEME.background, stroke: "black", "data-tree-part": "flower", "data-depth": (d) => d.depth, }), ], }), stamp && textNode, ].filter(Boolean), }); } // --- render.js --- const COLORS = { background: () => ({ angle: 90, stops: [ {offset: "0%", color: THEME.sky}, {offset: "30%", color: THEME.background}, {offset: "100%", color: THEME.background}, ], }), mountains: (d) => ({ angle: d.angle, stops: [ {offset: "0%", color: THEME.mountain1}, {offset: `${d.stop1}%`, color: THEME.mountain2}, {offset: `${d.stop2}%`, color: THEME.mountain3}, {offset: "100%", color: THEME.background}, ], }), }; function random(seed) { return d3.randomLcg(seed)(); } function interpolate(a, b, t) { return a + (b - a) * t; } function subdivideMountain(points, depth, maxDepth, roughness, noiseDis, noiseMid) { if (depth >= maxDepth) return points; const newPoints = [points[0]]; for (let i = 0; i < points.length - 1; i++) { const p1 = points[i]; const p2 = points[i + 1]; const t = noiseMid((p1.x + p2.x) / 2); const midX = interpolate(p1.x, p2.x, t); const midY = interpolate(p1.y, p2.y, t); const displacement = roughness * noiseDis(midX) * Math.pow(0.6, depth); const newY = midY - displacement; newPoints.push({x: midX, y: newY}); newPoints.push(p2); } return subdivideMountain(newPoints, depth + 1, maxDepth, roughness, noiseDis, noiseMid); } function generateMountains({ height, startX, endX, seed, baselineY = 0, width = height * 10, minWidth = 1 / 8, maxWidth = 1 / 2, offsetY = 1, paddingX = 3 / 4, }) { const seedHeight = seed; const seedDy = random(seedHeight) * 1500; const seedWidth = random(seedDy) * 100; const seedDetail = random(seedWidth) * 200; const noiseH = randomNoise(0, (height / 8) * 5, {seed: seedHeight}); const noiseW = randomNoise(width * minWidth, width * maxWidth, {seed: seedWidth}); const noiseDy = randomNoise(-height, height, {seed: seedDy}); const noiseStop1 = randomNoise(10, 30, {seed: seedDy}); const noiseStop2 = randomNoise(70, 90, {seed: seedDy}); const noiseDetail = randomNoise(0, height / 6, {seed: seedDetail, octaves: 6, falloff: 0.4}); const noiseRoughness = randomNoise(0.2, 0.3, {seed: seedDetail, octaves: 6, falloff: 0.4}); const noiseMidPoint = randomNoise(0, 1, {seed: seedDetail, octaves: 6, falloff: 0.4}); const noiseGap = randomNoise(0, 1, {seed: seedDetail * 100, octaves: 6, falloff: 0.4}); const primitives = []; function mountain(px, direction) { const addGap = 0.5 < noiseGap(px); const w = noiseW(px); const x = px - random(px) * w * paddingX * direction + direction * addGap * 200 + w * Math.min(0, direction); const y = Math.max(0, height * 0.5 + noiseDy(x) * offsetY) + baselineY; const h = noiseH(x + w / 2); const stop1 = noiseStop1(px); const stop2 = noiseStop2(px); const t = noiseMidPoint(x + w / 2); const basePoints = [ {x, y}, {x: x + w * t, y: y - h}, {x: x + w, y}, ]; const depthFromWidth = Math.floor(Math.log2(Math.max(w / 15, 1))); const depthFromHeight = h > height / 10 ? 1 : 0; const maxDepth = Math.max(2, Math.min(3, depthFromWidth + depthFromHeight)); const roughness = h * noiseRoughness(px); const points = subdivideMountain(basePoints, 0, maxDepth, roughness, noiseDetail, noiseMidPoint); return { points, stop1, stop2, x, y, x2: x + w, y2: y, }; } let px = 0; while (px < endX) { const m = mountain(px, 1); primitives.push(m); px = m.x2; } px = 0; while (startX < px) { const m = mountain(px, -1); primitives.push(m); px = m.x; } return primitives.sort((a, b) => Math.max(a.y, a.y2) - Math.max(b.y, b.y2)); } function findYOnMountain(x, mountains) { for (const mountain of mountains) { const minX = Math.min(mountain.x, mountain.x2); const maxX = Math.max(mountain.x, mountain.x2); if (x >= minX && x <= maxX) { const points = mountain.points; for (let i = 0; i < points.length - 1; i++) { const p1 = points[i]; const p2 = points[i + 1]; const minPX = Math.min(p1.x, p2.x); const maxPX = Math.max(p1.x, p2.x); if (x >= minPX && x <= maxPX && Math.abs(p2.x - p1.x) > 0.001) { const t = (x - p1.x) / (p2.x - p1.x); const y = interpolate(p1.y, p2.y, t); if (y >= 0 && !isNaN(y) && isFinite(y)) { return y; } } } if (Math.abs(x - mountain.x) < 0.001) { const y = mountain.y; if (y >= 0 && !isNaN(y) && isFinite(y)) return y; } if (Math.abs(x - mountain.x2) < 0.001) { const y = mountain.y2; if (y >= 0 && !isNaN(y) && isFinite(y)) return y; } } } return null; } const TREE_DY = 40; const TREE_MIN_Y = 420; const TREE_MAX_Y = 640; const GAP_MIN = 250; const GAP_MAX = 450; function createTreeScaler(height) { const minY = height * (TREE_MIN_Y / 540); const maxY = height * (TREE_MAX_Y / 540); return d3.scaleSqrt().domain([minY, maxY]).range([height * 0.37, height * 0.74]); } function buildMergedRanks(namesData) { return namesData.map((entry, index) => ({ name: entry.name, id: entry.id ?? `archive-${index}`, source: "archive", })); } function gapForSlot(slot, seed) { return GAP_MIN + random(seed * 10000 + slot * 137) * (GAP_MAX - GAP_MIN); } function createSlotX(seed, originX) { const cache = new Map(); function slotX(slot) { if (cache.has(slot)) return cache.get(slot); let x; if (slot === 0) { x = originX; } else if (slot === 1) { x = originX + gapForSlot(1, seed); } else if (slot === 2) { x = originX - gapForSlot(2, seed); } else if (slot % 2 === 1) { x = slotX(slot - 2) + gapForSlot(slot, seed); } else { x = slotX(slot - 2) - gapForSlot(slot, seed); } cache.set(slot, x); return x; } return slotX; } function slotsInRange(startX, endX, seed, originX) { const slotX = createSlotX(seed, originX); const slots = []; if (startX <= originX && originX <= endX) slots.push(0); for (let s = 1; ; s += 2) { const x = slotX(s); if (x > endX) break; slots.push(s); } for (let s = 2; ; s += 2) { const x = slotX(s); if (x < startX) break; slots.push(s); } return slots.sort((a, b) => a - b); } function placeTreeOnMountain({x, name, id, height, mountains, scaleWidth, slot}) { const y = findYOnMountain(x, mountains); if (y === null || y < 0) return null; const py = Math.min(height - 20, y + TREE_DY * (height / 540)); return { x, y: py, width: scaleWidth(py), name, id, slot, }; } function placeMergedTrees({namesData, startX, endX, seed, height, mountains, centerX}) { const ranks = buildMergedRanks(namesData); if (ranks.length === 0) return []; const slotX = createSlotX(seed, centerX); const scaleWidth = createTreeScaler(height); const slots = slotsInRange(startX, endX, seed, centerX); return slots .map((slot) => { const rank = ranks[slot % ranks.length]; return placeTreeOnMountain({ x: slotX(slot), name: rank.name, id: `slot-${slot}-${rank.id}`, height, mountains, scaleWidth, slot, }); }) .filter(Boolean); } function renderLandscape({ width, height, currentX = 0, startX = currentX - width, endX = currentX + width * 2, translateX = 0, scaleX = 1, seed = 10000, namesData = [], } = {}) { const centerX = currentX + width / 2; const state = {startX, endX, translateX, scaleX, currentX, offsetX: 0}; const defaultZoomFilter = (event) => (!event.ctrlKey || event.type === "wheel") && !event.button; const line = d3 .line() .x((d) => d.x) .y((d) => d.y) .curve(d3.curveBundle); const svg = d3 .create("svg:svg") .attr("id", "landscape-svg") .attr("width", width) .attr("height", height) .attr("viewBox", `${currentX} 0 ${width} ${height}`) .style("cursor", "grab"); svg.append("defs").attr("id", "gradient-defs"); const transformGroup = svg.append("g").attr("class", "transform-group"); const bgRect = transformGroup .append("rect") .attr("id", "bg-rect") .attr("x", startX) .attr("width", endX - startX) .attr("height", height) .each(function () { applyGradient(this, COLORS.background(), svg.node()); }); const mountainsGroup = transformGroup.append("g").attr("class", "mountains-group"); const zoomBehavior = d3 .zoom() .scaleExtent([0.15, 1]) .filter(defaultZoomFilter) .on("zoom", (event) => { const {x, k} = event.transform; state.scaleX = k; state.translateX = x; maybeLoad(); update(); }); svg.call(zoomBehavior); const treesGroup = transformGroup.append("g").attr("class", "trees-group"); function maybeLoad() { const rect = bgRect.node(); if (!rect) return; const {x: rx, width: rw} = rect.getBoundingClientRect(); if (-width < rx) state.startX -= width / state.scaleX; if (rx + rw < width * 2) state.endX += width / state.scaleX; } function update() { const {startX, endX, currentX, translateX, offsetX, scaleX} = state; const farMountains = generateMountains({ startX, endX, seed, height: height / 4, baselineY: height * 0.5, }); const closeMountains = generateMountains({ startX, endX, seed: seed * 1000, offsetY: 0, minWidth: 1 / 2, maxWidth: 1.5, height: height / 5, baselineY: height - height / 10, }); const mountains = [...farMountains, ...closeMountains]; const trees = placeMergedTrees({ namesData, startX, endX, seed, height, mountains: closeMountains, centerX, }); svg.attr("width", width).attr("height", height); svg.attr("viewBox", `${currentX + offsetX} 0 ${width} ${height}`); const ty = (height * (1 - scaleX)) / 2; transformGroup.attr("transform", `translate(${translateX}, ${ty}) scale(${scaleX})`); bgRect .attr("x", startX) .attr("width", endX - startX) .attr("height", height); const mountainsPaths = mountainsGroup .selectAll("path") .data(mountains, (d, i) => `${d.x}-${d.y}-${d.points.length}-${i}`); mountainsPaths .enter() .append("path") .merge(mountainsPaths) .attr("d", (d) => line(d.points)) .attr("stroke", "#000") .each(function (d) { applyGradient(this, COLORS.mountains(d), svg.node()); }); mountainsPaths.exit().remove(); const treeGroups = treesGroup.selectAll("g.tree-group").data(trees, (d) => d.id); treeGroups .enter() .append("g") .attr("class", "tree-group") .each(function (d) { const group = this; const treeSvg = tree(d.name, { padding: 0, number: false, line: false, end: false, width: d.width, strokeWidth: 1, }).render(); d3.select(group).append(() => treeSvg); }) .merge(treeGroups) .attr("transform", (d) => { const offset = d.width * 0.91; return `translate(${d.x - d.width / 2}, ${d.y - offset})`; }); treeGroups.exit().remove(); } update(); return { node: svg.node(), destroy() { svg.on(".zoom", null); }, }; } // --- bootstrap --- let currentController = null; let namesData = []; const seed = Date.now() >>> 0; const LANDSCAPE_HEIGHT_RATIO = 0.8; function viewportSize() { return { width: window.innerWidth, height: window.innerHeight * LANDSCAPE_HEIGHT_RATIO, }; } function createAndRender(data) { const container = document.querySelector("#container"); if (currentController?.node) { currentController.destroy(); container.removeChild(currentController.node); } const {width, height} = viewportSize(); currentController = renderLandscape({ width, height, seed, namesData: data, }); container.appendChild(currentController.node); } async function bootstrap() { const response = await fetch(assetUrl("names.json")); namesData = await response.json(); createAndRender(namesData); } bootstrap(); window.addEventListener("resize", () => { if (namesData.length) createAndRender(namesData); });