2b:null 2c:["$","title",null,{"children":"Bridson's v.s. Improved Algorithm for Poisson Disc sampling | X.B. Workspace | Observable"}] 31:T102b,chart = { // 创建主容器（flex布局，左右并排） const container = html`

`; // 创建两个卡片的标题，直接获得 span 的引用 const leftCountSpan = html`0`; const leftCandidatesSpan = html`0`; const leftTitle = html`

经典算法 (k=${k1}) - 共生成 ${leftCountSpan} 点/候选 ${leftCandidatesSpan} 点

`; const rightCountSpan = html`0`; const rightCandidatesSpan = html`0`; const rightTitle = html`

改进算法 (k=${k2}) - 共生成 ${rightCountSpan} 点/候选 ${rightCandidatesSpan} 点

`; // 创建两个SVG（使用 Observable 的 DOM.svg 工具） const leftSvg = d3.select(DOM.svg(width, height)); const rightSvg = d3.select(DOM.svg(width, height)); // 组装卡片 const leftCard = html`

`; leftCard.appendChild(leftTitle); leftCard.appendChild(leftSvg.node()); const rightCard = html`

`; rightCard.appendChild(rightTitle); rightCard.appendChild(rightSvg.node()); // 将卡片放入主容器 container.appendChild(leftCard); container.appendChild(rightCard); // 获取两个生成器实例 const leftGen = BridsonPoissonDiscSampler(width, height, radius); const rightGen = ImprovedBridsonPoissonDiscSampler(width, height, radius); // 计数器 let leftCount = 0; let rightCount = 0; // 辅助函数：根据事件更新SVG（与原代码逻辑一致，但ID加上前缀避免冲突） function applyEvent(svg, prefix, event, countSpan, candidatesSpan) { // 更新候选点计数（每个事件都包含 candidates 字段） if (event.candidates !== undefined) { candidatesSpan.textContent = event.candidates; } if (event.adds !== undefined) { countSpan.textContent = event.adds; } if (event.add) { // 添加连线（如果有父节点） if (event.parent) { svg.insert("line", "circle") .attr("x1", event.parent[0]) .attr("y1", event.parent[1]) .attr("x2", event.add[0]) .attr("y2", event.add[1]) .attr("stroke", "#999"); } // 添加圆点 svg.append("circle") .attr("id", `${prefix}-${event.add.map(Math.round).join("-")}`) .attr("r", 0) .attr("cx", event.add[0]) .attr("cy", event.add[1]) .transition() .ease(d3.easeLinear) .attr("r", 3) .transition() .attr("fill", "#f00"); } else if (event.remove) { // 移除圆点（通过ID查找并改变样式） svg.select(`#${prefix}-${event.remove.map(Math.round).join("-")}`) .transition() .ease(d3.easeLinear) .attr("fill", "#999") .attr("r", 2); // 注意：remove 事件不改变计数器（点仍然存在，只是变灰） } } // 动画循环：两个生成器同步步进，直到都结束 replay; // 确保可重播 let leftDone = false; let rightDone = false; while (!leftDone || !rightDone) { // 分别取下一个事件（如果生成器未结束） let leftEvent = null; let rightEvent = null; if (!leftDone) { const {value, done} = leftGen.next(); leftDone = done; leftEvent = value; } if (!rightDone) { const {value, done} = rightGen.next(); rightDone = done; rightEvent = value; } // 更新左侧SVG if (leftEvent) applyEvent(leftSvg, "left", leftEvent, leftCountSpan, leftCandidatesSpan); // 更新右侧SVG if (rightEvent) applyEvent(rightSvg, "right", rightEvent, rightCountSpan, rightCandidatesSpan); // 返回当前容器节点（触发动画帧） yield container; } // 循环结束后返回最终容器 return container; }32:T984,function* BridsonPoissonDiscSampler(width, height, radius) { const k = k1; // maximum number of samples before rejection const radius2 = radius * radius; const radius2_3 = 3 * radius2; const cellSize = radius * Math.SQRT1_2; const gridWidth = Math.ceil(width / cellSize); const gridHeight = Math.ceil(height / cellSize); const grid = new Array(gridWidth * gridHeight); const queue = []; let candidatesTested = 1; let adds = 1; // Pick the first sample. yield {add: sample(width / 2 + Math.random() * radius, height / 2 + Math.random() * radius, null), candidates: candidatesTested, adds: adds}; // Pick a random existing sample from the queue. pick: while (queue.length) { const i = Math.random() * queue.length | 0; const parent = queue[i]; // Make a new candidate between [radius, 2 * radius] from the existing sample. for (let j = 0; j < k; ++j) { candidatesTested++; const a = 2 * Math.PI * Math.random(); const r = Math.sqrt(Math.random() * radius2_3 + radius2); const x = parent[0] + r * Math.cos(a); const y = parent[1] + r * Math.sin(a); // Accept candidates that are inside the allowed extent // and farther than 2 * radius to all existing samples. if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) { adds++; yield {add: sample(x, y), parent, candidates: candidatesTested, adds: adds}; continue pick; } } // If none of k candidates were accepted, remove it from the queue. const r = queue.pop(); if (i < queue.length) queue[i] = r; yield {remove: parent, candidates: candidatesTested, adds: adds}; } function far(x, y) { const i = x / cellSize | 0; const j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (let j = j0; j < j1; ++j) { const o = j * gridWidth; for (let i = i0; i < i1; ++i) { const s = grid[o + i]; if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y, parent) { const s = grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]; queue.push(s); return s; } }33:T1d54,chart2 = { replay; const k = k1 const radius2 = radius * radius const R = 3 * radius2 const cellSize = radius * Math.SQRT1_2 const gridWidth = Math.ceil(width / cellSize) const gridHeight = Math.ceil(height / cellSize) const grid = new Array(gridWidth * gridHeight) const queue = [] // 定义顶部边距（可根据需要调整） const paddingTop = 30; // 新增计数器 let generatedPoints = 0; // 累计生成的点数 let candidateAttempts = 1; // 累计候选尝试次数 const arcEmptyAnnulus = d3.arc() .innerRadius(radius) .outerRadius(radius) .startAngle(0) .endAngle(2*Math.PI) const arcAnnulus = d3.arc() .innerRadius(radius) .outerRadius(2*radius) .startAngle(0) .endAngle(2*Math.PI) const svg = d3.create("svg") .attr("width",width) .attr("height",height + paddingTop) // 定义裁剪区域（原始画布大小） svg.append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0); // 主容器，所有图形元素整体下移 const mainGroup = svg.append("g") .attr("transform", `translate(0, ${paddingTop})`) .attr("clip-path", "url(#clip)"); const gExclusion = mainGroup.append("g") const gGrid = mainGroup.append("g") const gridPath = d3.range(cellSize,width,cellSize) .map(x => `M${Math.round(x)},0V${height}`).join("") + d3.range(cellSize,height,cellSize) .map(y => `M0,${Math.round(y)}H${width}`).join("") gGrid.append("path") .attr("d", gridPath) .attr("stroke", "#000") .attr("stroke-opacity", 0.15) .attr("shape-rendering", "crispEdges") // 新增：显示计数器的文本元素（置于顶层） const counterText = svg.append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .attr("font-family", "sans-serif") .text(`经典算法 (k=${k}) - 共生成 0 点/候选 0 点`); // 更新计数器的函数 function updateCounter() { counterText.text(`经典算法 (k=${k}) - 共生成 ${generatedPoints} 点/候选 ${candidateAttempts} 点`); } const searchAnnulus = mainGroup.append("path") .attr("fill", "black") .attr("fill-opacity", 0.25) .attr("stroke", "black") .attr("stroke-width", "1.5px") const gConnection = mainGroup.append("g") const gSample = mainGroup.append("g") const gCandidate = mainGroup.append("g") sample(Math.random() * width, Math.random() * height) d3.timeout(function selectActive() { const i = Math.random() * queue.length | 0; const s = queue[i]; let j = 0; gCandidate.style("opacity", null); gConnection.style("opacity", null); searchAnnulus.style("opacity", null) .style("stroke-opacity", 0) .attr("transform", `translate(${s[0]},${s[1]})`) .attr("d", arcEmptyAnnulus) .transition() .attr("d", arcAnnulus) .style("stroke-opacity", 1) .on("end", generateCandidate); const sampleActive = gSample.selectAll("circle") .filter(function(d) { return d === s; }); function generateCandidate() { // 每次生成候选点，尝试次数+1并更新显示 candidateAttempts++; updateCounter(); if (++j > k) return rejectActive(); const a = 2 * Math.PI * Math.random(); const r = Math.sqrt(Math.random() * R + radius2); const x = s[0] + r * Math.cos(a); const y = s[1] + r * Math.sin(a); // Reject candidates that are outside the allowed extent. if (0 > x || x >= width || 0 > y || y >= height) return generateCandidate(); // If this is an acceptable candidate, create a new sample; // otherwise, generate a new candidate. gCandidate.append("circle") .attr("fill", "#fff") .attr("stroke", "#000") .attr("stroke-width", "1.5px") .attr("r", 1e-6) .attr("cx", x) .attr("cy", y) .transition() .attr("r", 3.75) .on("end", far(x, y) ? acceptCandidate : generateCandidate); function acceptCandidate() { removeCandidates().on("end", queue.length ? selectActive : null); sample(x, y); } } function rejectActive() { queue[i] = queue[queue.length - 1]; queue.pop(); removeCandidates().on("end", queue.length ? selectActive : null); sampleActive.attr("fill", "#000") .attr("stroke", "#000");; } function removeCandidates() { gCandidate.transition() .style("opacity", 0) .selectAll("circle") .remove(); gConnection.transition() .style("opacity", 0) .selectAll("line") .remove(); return searchAnnulus.transition() .style("opacity", 0); } }, 250) function far(x, y) { let i = x / cellSize | 0; let j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (j = j0; j < j1; ++j) { const o = j * gridWidth; for (i = i0; i < i1; ++i) { const s = grid[o + i] if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < radius2) { gConnection.append("line") .attr("stroke", "black") .attr("stroke-width", "1.5px") .attr("x1", x) .attr("y1", y) .attr("x2", x) .attr("y2", y) .transition() .attr("x2", s[0]) .attr("y2", s[1]); return false; } } } } return true; } function sample(x, y) { // 新增点，生成点数+1并更新计数器 generatedPoints++; updateCounter(); var s = [x, y]; gExclusion.append("circle") .attr("fill", "#ccc") .attr("r", 1e-6) .attr("cx", x) .attr("cy", y) .transition() .attr("r", radius); gSample.append("circle") .datum(s) .attr("class", "sample--active") .attr("fill","#f00") .attr("stroke","#f00") .attr("stroke-width", "2px") .attr("cx", x) .attr("cy", y) .attr("r", 1e-6) .transition() .attr("r", 3); queue.push(s); grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s; return s; } return svg.node() }34:T8fe,function* ImprovedBridsonPoissonDiscSampler(width, height, radius) { const k = k2; // maximum number of samples before rejection const radius2 = radius * radius; const cellSize = radius * Math.SQRT1_2; const gridWidth = Math.ceil(width / cellSize); const gridHeight = Math.ceil(height / cellSize); const grid = new Array(gridWidth * gridHeight); const queue = []; let candidatesTested = 1; let adds = 1; // Pick the first sample. yield {add: sample(width / 2 , height / 2, null), candidates: candidatesTested, adds: adds}; // Pick a random existing sample from the queue. pick: while (queue.length) { const i = Math.random() * queue.length | 0; const parent = queue[i]; const seed = Math.random(); const epsilon = 0.0000001; // Make a new candidate. for (let j = 0; j < k; ++j) { candidatesTested++; const a = 2 * Math.PI * (seed + 1.0*j/k); const r = radius + epsilon; const x = parent[0] + r * Math.cos(a); const y = parent[1] + r * Math.sin(a); // Accept candidates that are inside the allowed extent // and farther than 2 * radius to all existing samples. if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) { adds++; yield {add: sample(x, y), parent, candidates: candidatesTested, adds: adds}; continue pick; } } // If none of k candidates were accepted, remove it from the queue. const r = queue.pop(); if (i < queue.length) queue[i] = r; yield {remove: parent, candidates: candidatesTested, adds: adds}; } function far(x, y) { const i = x / cellSize | 0; const j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (let j = j0; j < j1; ++j) { const o = j * gridWidth; for (let i = i0; i < i1; ++i) { const s = grid[o + i]; if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y, parent) { const s = grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]; queue.push(s); return s; } }35:T1c4c,chart3 = { replay; const k = k2 const radius2 = radius * radius const epsilon = 0.0000001; const cellSize = radius * Math.SQRT1_2 const gridWidth = Math.ceil(width / cellSize) const gridHeight = Math.ceil(height / cellSize) const grid = new Array(gridWidth * gridHeight) const queue = [] // 定义顶部边距（可根据需要调整） const paddingTop = 30; // 新增计数器 let generatedPoints = 0; // 累计生成的点数 let candidateAttempts = 1; // 累计候选尝试次数 const arcAnnulus = d3.arc() .innerRadius(0) .outerRadius(radius + epsilon) .startAngle(0) .endAngle(2*Math.PI) const svg = d3.create("svg") .attr("width",width) .attr("height",height + paddingTop) // 定义裁剪区域（原始画布大小） svg.append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0); // 主容器，所有图形元素整体下移 const mainGroup = svg.append("g") .attr("transform", `translate(0, ${paddingTop})`) .attr("clip-path", "url(#clip)"); const gExclusion = mainGroup.append("g") const gGrid = mainGroup.append("g") const gridPath = d3.range(cellSize,width,cellSize) .map(x => `M${Math.round(x)},0V${height}`).join("") + d3.range(cellSize,height,cellSize) .map(y => `M0,${Math.round(y)}H${width}`).join("") gGrid.append("path") .attr("d", gridPath) .attr("stroke", "#000") .attr("stroke-opacity", 0.15) .attr("shape-rendering", "crispEdges") // 新增：显示计数器的文本元素（置于顶层） const counterText = svg.append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .attr("font-family", "sans-serif") .text(`改进算法 (k=${k}) - 共生成 0 点/候选 0 点`); // 更新计数器的函数 function updateCounter() { counterText.text(`改进算法 (k=${k}) - 共生成 ${generatedPoints} 点/候选 ${candidateAttempts} 点`); } const searchAnnulus = mainGroup.append("path") .attr("fill", "black") .attr("fill-opacity", 0.25) .attr("stroke", "black") .attr("stroke-width", "1.5px") const gConnection = mainGroup.append("g") const gSample = mainGroup.append("g") const gCandidate = mainGroup.append("g") sample(width / 2 , height / 2) d3.timeout(function selectActive() { const i = Math.random() * queue.length | 0; const s = queue[i]; let j = 0; const seed = Math.random(); gCandidate.style("opacity", null); gConnection.style("opacity", null); searchAnnulus.style("opacity", null) .style("stroke-opacity", 0) .attr("transform", `translate(${s[0]},${s[1]})`) .transition() .attr("d", arcAnnulus) .style("stroke-opacity", 1) .on("end", generateCandidate); const sampleActive = gSample.selectAll("circle") .filter(function(d) { return d === s; }); function generateCandidate() { // 每次生成候选点，尝试次数+1并更新显示 candidateAttempts++; updateCounter(); if (++j > k) return rejectActive(); const a = 2 * Math.PI * (seed + 1.0 * j / k); const r = radius + epsilon; const x = s[0] + r * Math.cos(a); const y = s[1] + r * Math.sin(a); // Reject candidates that are outside the allowed extent. if (0 > x || x >= width || 0 > y || y >= height) return generateCandidate(); // If this is an acceptable candidate, create a new sample; // otherwise, generate a new candidate. gCandidate.append("circle") .attr("fill", "#fff") .attr("stroke", "#000") .attr("stroke-width", "1.5px") .attr("r", 1e-6) .attr("cx", x) .attr("cy", y) .transition() .attr("r", 3.75) .on("end", far(x, y) ? acceptCandidate : generateCandidate); function acceptCandidate() { removeCandidates().on("end", queue.length ? selectActive : null); sample(x, y); } } function rejectActive() { queue[i] = queue[queue.length - 1]; queue.pop(); removeCandidates().on("end", queue.length ? selectActive : null); sampleActive.attr("fill", "#000") .attr("stroke", "#000");; } function removeCandidates() { gCandidate.transition() .style("opacity", 0) .selectAll("circle") .remove(); gConnection.transition() .style("opacity", 0) .selectAll("line") .remove(); return searchAnnulus.transition() .style("opacity", 0); } }, 250) function far(x, y) { let i = x / cellSize | 0; let j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (j = j0; j < j1; ++j) { const o = j * gridWidth; for (i = i0; i < i1; ++i) { const s = grid[o + i] if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < radius2) { gConnection.append("line") .attr("stroke", "black") .attr("stroke-width", "1.5px") .attr("x1", x) .attr("y1", y) .attr("x2", x) .attr("y2", y) .transition() .attr("x2", s[0]) .attr("y2", s[1]); return false; } } } } return true; } function sample(x, y) { // 新增点，生成点数+1并更新计数器 generatedPoints++; updateCounter(); var s = [x, y]; gExclusion.append("circle") .attr("fill", "#ccc") .attr("r", 1e-6) .attr("cx", x) .attr("cy", y) .transition() .attr("r", radius); gSample.append("circle") .datum(s) .attr("class", "sample--active") .attr("fill","#f00") .attr("stroke","#f00") .attr("stroke-width", "2px") .attr("cx", x) .attr("cy", y) .attr("r", 1e-6) .transition() .attr("r", 3); queue.push(s); grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s; return s; } return svg.node() }36:[] 2f:{"id":"30191672c32182cd","slug":null,"title":"Bridson's v.s. Improved Algorithm for Poisson Disc sampling","thumbnail":"9e96871a3304f6cf58535e38e52e4964cf2d3b60a5d334db3258884ae0143c63","access_level":"public","create_time":"$D2026-03-09T11:11:25.046Z","update_time":"$D2026-03-13T12:22:10.720Z","view_time":null,"first_public_time":"$D2026-03-09T11:11:25.046Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"189a68e88fe366bd","login":"x-b-workspace","name":"X.B. Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a95188709ffcb422fcc635f47420feb25f69fd7305881a42b4a9907e87d2aaf0","tier":"starter_2024","bio":""},"version":428,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc82b550d8112553","login":"xiongbiao","name":"XiongBiao","avatar_url":"https://avatars-next.observableusercontent.com/caf2b8f3d51ea1f56efa20730077b94beb57622ab029080cdb84a9ad89ac467d","tier":null,"bio":""}],"members":[{"type":"team","id":"189a68e88fe366bd","login":"x-b-workspace","name":"X.B. Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a95188709ffcb422fcc635f47420feb25f69fd7305881a42b4a9907e87d2aaf0","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fc82b550d8112553","login":"xiongbiao","name":"XiongBiao","avatar_url":"https://avatars-next.observableusercontent.com/caf2b8f3d51ea1f56efa20730077b94beb57622ab029080cdb84a9ad89ac467d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"7475f6cf2b719359","slug":"algorithm","title":"Algorithm","owner":{"id":"189a68e88fe366bd","login":"x-b-workspace","name":"X.B. Workspace"}},"type":"notebook","body":{"titling":"auto","title":"Bridson's v.s. Improved Algorithm for Poisson Disc sampling","cells":[{"id":0,"value":"# Bridson's v.s. Improved Algorithm for Poisson Disc sampling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof radius = Inputs.range([10, 100], {value: 20, step: 1, label: \"点对之间最小距离\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof k1 = Inputs.range([3, 1000], {value: 30, step: 1, label: \"经典Bridson算法k值\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof k2 = Inputs.range([3, 1000], {value: 4, step: 1, label: \"改进Bridson算法k值\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"t = {\n // 使用 performance.now() 获得更高精度（毫秒级，带小数）\n const start = performance.now();\n \n // 获取生成器\n const sampler = BridsonPoissonDiscSampler(width, height, radius);\n \n // 遍历所有事件，驱动生成器执行\n for (const event of sampler) {\n // 不需要处理事件，只是让生成器继续\n }\n \n const end = performance.now();\n\n const start2 = performance.now();\n const sampler2 = ImprovedBridsonPoissonDiscSampler(width, height, radius);\n for (const event of sampler2) {}\n const end2 = performance.now();\n \n return {经典算法耗时: (end - start)/1000,\n 改进算法耗时: (end2 - start2)/1000}; // 返回毫秒数\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"chart4 = {\n\n // 创建主容器（flex布局，左右并排）\n const container = html`

`;\n\n // 组装卡片\n const leftCard = html`

`;\n leftCard.appendChild(chart2);\n\n const rightCard = html`

`;\n rightCard.appendChild(chart3);\n\n // 将卡片放入主容器\n container.appendChild(leftCard);\n container.appendChild(rightCard);\n\n // 动画循环：两个生成器同步步进，直到都结束\n replay; // 确保可重播\n\n // 循环结束后返回最终容器\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"---\n# 附录","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"## Mike Bostock实现的[Bridson算法](https://observablehq.com/@mbostock/poisson-disc-distribution)：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"## 算法动画参考Mike Bostock的[实现](https://gist.github.com/mbostock/dbb02448b0f93e4c82c3)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## [Martin Roberts](https://extremelearning.com.au/an-improved-version-of-bridsons-algorithm-n-for-poisson-disc-sampling/)实现的[改进Bridson算法](https://observablehq.com/@techsparx/an-improvement-on-bridsons-algorithm-for-poisson-disc-samp/2)：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"