2c:null 2d:["$","title",null,{"children":"Visibility-Based Herding: An Interactive Simulation of Boundary Tracking in Collective Motion | Chuncheng | Observable"}] 32:T78b,# Visibility-Based Herding: An Interactive Simulation of Boundary Tracking in Collective Motion This interactive simulation models a moving herd as a sparse force-coupled particle system and introduces a single autonomous agent that attempts to drive the group toward a designated goal region. Instead of accessing global knowledge of the herd, the agent relies only on its Delaunay neighbors—points that share a triangulation simplex with the agent’s current position. These neighbors approximate the locally visible boundary of the group. At each step, the agent selects an extremal boundary individual using the perpendicular distance to the agent–goal axis. The resulting control law combines two components: a radial term that biases motion relative to the goal direction and a tangential pursuit toward the selected boundary point. When the agent remains outside the convex hull, the Delaunay neighborhood coincides with the visible outer contour, causing the agent to circulate along the perimeter and progressively compress the herd. If the agent enters the interior, the neighborhood topology changes and the controller naturally switches to an escape-like behavior until the boundary is recovered. The simulation illustrates how collective steering can emerge from local geometric information alone. Without computing the global convex hull or tracking every individual, the agent obtains effective group-level control using only triangulation-induced visibility and a minimal geometric feedback rule. ## How to Play 1. Move the mouse into the field to activate the agent. 2. The red point becomes an autonomous predator and moves on its own. 3. The agent will not chase a single sheep; instead it attempts to control the herd by sliding along its boundary. 4. Try to push the herd into a corner or compress it into a tight cluster. 5. Move the mouse out of the field to release the herd and let it disperse. 33:T2fed,chart = { // Specify the dimensions of the chart. const height = (width * 9) / 16; // Map node coord into svg coord const mapScale = form.mapScale, mapX = d3 .scaleLinear() .domain([-width * mapScale, width * mapScale]) .range([0, width]), mapY = d3 .scaleLinear() .domain([-height * mapScale, height * mapScale]) .range([0, height]); // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); // Specify the linkForceStrength const { manyBodyStrengh, linkForceStrength } = form1; // Dynamic variables let mouseActive = false, mouseX = mapX.invert(Math.random() * width), mouseY = mapY.invert(Math.random() * height), lastTickTime, nextTickTime, lastPosition, vv = { x: 0, y: 0 }; // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.map((d) => ({ ...d })); const nodes = data.nodes.map((d) => ({ ...d })); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // 添加背景矩形（作为第一个元素） svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#1e293b") // 背景颜色 .attr("opacity", 1); // 不透明度 const alphaLabel = svg .append("text") .attr("class", "alpha-label") .attr("x", width - 20) // 右下角 .attr("y", height - 20) .attr("text-anchor", "end") .attr("fill", "#666") .attr("font-size", "12px") .attr("font-family", "math") .text("α: 1.000"); const dangerLabel = svg .append("text") .attr("class", "alpha-label") .attr("x", width / 2) // TM .attr("y", 24) .attr("text-anchor", "end") .attr("fill", "#3a3") .attr("font-size", "24px") .attr("font-family", "fantasy") .text("Peace"); const targetCircle = svg .append("circle") .attr("r", 100) .attr( "cx", d3.scaleLinear().domain([-0.1, 1.1]).range([0, width])(Math.random()) ) .attr( "cy", d3.scaleLinear().domain([-0.1, 1.1]).range([0, height])(Math.random()) ) .attr("fill", "#aaa0") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("stroke-dasharray", "10"); const mouseCircle = svg .append("circle") .attr("r", 10) .attr("cx", mapX(mouseX)) .attr("cy", mapY(mouseY)) .attr("fill", "#f00"); // Add a line for each link, and a circle for each node. const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll() .data(links) .join("line") .attr("stroke-width", (d) => Math.sqrt(d.value)); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll() .data(nodes) .join("circle") .attr("r", 3) .attr("fill", (d) => color(d.group)); // Create a simulation with several forces. const simulation = d3 .forceSimulation(nodes) // 添加随机位移力 - 让节点随机移动 // .force("random", randomForce(1)) .force("brownian", createBrownianForce(100)) .force( "link", d3 .forceLink(links) .id((d) => d.id) .strength(linkForceStrength * 0.1) ) .force("mouseRepulsion", mouseRepulsionForce(300, 800)) .force("charge", d3.forceManyBody().strength(manyBodyStrengh)) // .force("center", d3.forceCenter(width / 2, height / 2)) // .force("center", d3.forceCenter(0, 0)) // 添加边界力（将节点保持在画布内） .force("boundary", boundaryForce(width, height, 20)) .on("tick", ticked); // 存储 link force 的引用 let linkForce = simulation.force("link"); // 自定义边界力 function boundaryForce(width, height, padding) { return function (alpha) { let a = 10; for (let node of nodes) { // node.vx = Math.max(-10, Math.min(10, node.vx)); // node.vy = Math.max(-10, Math.min(10, node.vy)); // 边界反弹 // if (mapX(node.x) < padding) node.vx += a; // if (mapX(node.x) > width - padding) node.vx -= a; // if (mapY(node.y) < padding) node.vy += a; // if (mapY(node.y) > height - padding) node.vy -= a; let x = mapX(node.x), y = mapY(node.y); if ((x < padding) & (node.vx < 0)) node.vx *= -1; if ((x > width - padding) & (node.vx > 0)) node.vx *= -1; if ((y < padding) & (node.vy < 0)) node.vy *= -1; if ((y > height - padding) & (node.vy > 0)) node.vy *= -1; } }; } // 自定义随机力 // 直接创建一个满足 d3.force 签名的有记忆的布朗运动函数 function createBrownianForce(temperature = 0.3) { const previousVx = new Map(); const previousVy = new Map(); return function (alpha) { nodes.forEach((node) => { const prevVx = previousVx.get(node) || 0; const prevVy = previousVy.get(node) || 0; const randomFactor = temperature * (0.3 + alpha) * mouseActive ? 0.1 : 1; node.vx = prevVx * 0.8 + (Math.random() - 0.5) * randomFactor; node.vy = prevVy * 0.8 + (Math.random() - 0.5) * randomFactor; previousVx.set(node, node.vx); previousVy.set(node, node.vy); }); }; } function mouseRepulsionForce(strength = -0.3, radius = 80) { svg.on("mousemove", function (event) { // ! Toggle mouse move position if (false) { // Read the mouse position [mouseX, mouseY] = d3.pointer(event, this); // Convert the mouse position into force space mouseX = mapX.invert(mouseX); mouseY = mapY.invert(mouseY); } mouseActive = true; linkForce.strength(linkForceStrength); dangerLabel.text("Danger").attr("fill", "#f00"); if (!event.active) simulation.alphaTarget(0.3).restart(); }); svg.on("mouseleave", () => { mouseActive = false; linkForce.strength(linkForceStrength * 0.1); dangerLabel.text("Peace").attr("fill", "#3a3"); targetCircle .attr( "cx", d3.scaleLinear().domain([-0.2, 1.2]).range([0, width])(Math.random()) ) .attr( "cy", d3.scaleLinear().domain([-0.2, 1.2]).range([0, height])(Math.random()) ); svg.selectAll("g.movingTrace").remove(); if (!event.active) simulation.alphaTarget(0.1).restart(); }); return function (alpha) { if (!mouseActive) return; const currentStrength = strength * alpha; nodes.forEach((node) => { const dx = node.x - mouseX; const dy = node.y - mouseY; const distance = Math.sqrt(dx * dx + dy * dy); // const t = Math.log(distance / radius); if (distance < radius && distance > 0) { const force = currentStrength * (1 - distance / radius); node.vx += (dx / distance) * force; node.vy += (dy / distance) * force; } }); }; } node.append("title").text((d) => d.id); // Add a drag behavior. node.call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); // Set the position attributes of links and nodes each time the simulation ticks. function ticked() { const now = Date.now(), updateDelay = 1000; // milliseconds let boolUpdate = false; if (lastTickTime === undefined) { lastTickTime = now; nextTickTime = lastTickTime + updateDelay; lastPosition = { x: mapX(mouseX), y: mapY(mouseY) }; } const deltaTime = (now - lastTickTime) * 0.001; // 秒 lastTickTime = now; if (lastTickTime > nextTickTime) { boolUpdate = true; nextTickTime = lastTickTime + updateDelay; } // console.log(`时间差: ${deltaTime}s, 帧率: ${1000 / deltaTime}FPS`); let k = linkForce.strength()() / linkForceStrength; let neighbors = findNeighbor([mouseX, mouseY], nodes), cx = mapX.invert(targetCircle.attr("cx")), cy = mapY.invert(targetCircle.attr("cy")), v1, v2; // distance(x1, y1, x2, y2, x, y) let farestNeighborIdx, farestD = -1; neighbors.forEach((i) => { let d = distance(mouseX, mouseY, cx, cy, nodes[i].x, nodes[i].y); if (Math.abs(d) > farestD) { farestNeighborIdx = i; farestD = Math.abs(d); } }); if (mouseActive) { if (boolUpdate) { const speed = form1.controlSpeed, nx = nodes[farestNeighborIdx].x, ny = nodes[farestNeighborIdx].y, k = form1.controlK; // v1: away from center // v2: persuit to farestNeighborIdx v1 = mul(normalize({ x: mouseX - cx, y: mouseY - cy }), 1); v2 = mul(normalize({ x: nx - mouseX, y: ny - mouseY }), k); vv = mul(normalize(add(v1, v2)), speed); } mouseX += vv.x * deltaTime; mouseY += vv.y * deltaTime; if (boolUpdate) { let s = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 1.0) .attr("class", "movingTrace") .selectAll() .data([ { x1: lastPosition.x, y1: lastPosition.y, x2: mapX(mouseX), y2: mapY(mouseY) } ]) .join("line") .attr("stroke-width", 1); s.attr("x1", (d) => d.x1) .attr("y1", (d) => d.y1) .attr("x2", (d) => d.x2) .attr("y2", (d) => d.y2); lastPosition = { x: mapX(mouseX), y: mapY(mouseY) }; } } // Update the mouseCircle position mouseCircle .attr("cx", Math.max(0, Math.min(width, mapX(mouseX)))) .attr("cy", Math.max(0, Math.min(height, mapY(mouseY)))); link .attr("x1", (d) => mapX(d.source.x)) .attr("y1", (d) => mapY(d.source.y)) .attr("x2", (d) => mapX(d.target.x)) .attr("y2", (d) => mapY(d.target.y)) .attr("stroke", (d) => d3.interpolate("#5553", "#555a")(k)); node .attr("cx", (d) => mapX(d.x)) .attr("cy", (d) => mapY(d.y)) .attr("stroke", (d) => { if (mouseActive) { let x = d.x - mapX.invert(targetCircle.attr("cx")), y = d.y - mapY.invert(targetCircle.attr("cy")), r = targetCircle.attr("r") * mapScale * 2; return Math.sqrt(x * x + y * y) < r ? "gray" : "#0000"; } else { return "white"; } return mouseActive ? "#0000" : "white"; }) .attr("fill", (d, i) => { // Mark the farest neigbhor to green if (i === farestNeighborIdx) return "green"; // Mark the neighbors to red if (neighbors.has(i)) return "red"; // Mark the nodes as speed return d3.interpolate( color(d.id), d3.interpolate( "#1e293b", "#fde68a" )(Math.pow(Math.sqrt(d.vx * d.vx + d.vy * d.vy) / 10, 0.5)) )(k); }); // 更新 alpha 值显示（保留3位小数） const alpha = simulation.alpha().toFixed(3); alphaLabel.text(`α: ${alpha}`); } // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }34:[] 30:{"id":"8713176ad9d14257","slug":"visibility-based-herding-an-interactive-simulation","title":"Visibility-Based Herding: An Interactive Simulation of Boundary Tracking in Collective Motion","thumbnail":"4239ad5c0bc5a3696886dce5b3dba7d0210209099f091d2ce3019e3fdf9d4693","access_level":"public","create_time":"$D2026-02-06T13:50:47.919Z","update_time":"$D2026-02-07T14:51:12.861Z","view_time":null,"first_public_time":"$D2026-02-07T14:53:22.939Z","fork":{"id":"44bab3793bc24dbe","slug":"interactive-herd-simulation","title":"Selfish Sheep: Interactive Herd Simulation","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"stars":3,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":648,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Visibility-Based Herding: An Interactive Simulation of Boundary Tracking in Collective Motion","cells":[{"id":1,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"viewof form = Inputs.form({\n nNodes: Inputs.range([50, 300], { label: \"nNodes\", step: 1 }),\n nLinks: Inputs.range([500, 1500], { label: \"nLinks\", step: 1, value: 1000 }),\n mapScale: Inputs.range([2, 5], { label: \"mapScale\", step: 1, value: 3 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof form1 = Inputs.form({\n manyBodyStrengh: Inputs.range([-10, -200], {\n label: \"manyBodyStrengh (Larger abs, larger repel)\",\n step: 1\n }),\n linkForceStrength: Inputs.range([0.001, 0.1], {\n label: \"linkForceStrengh\",\n step: 0.001\n }),\n controlK: Inputs.range([0.9, 3.0], {\n label: \"controlK\",\n step: 0.01,\n value: 1.5\n }),\n controlSpeed: Inputs.range([100, 500], {\n label: \"controlSpeed\",\n step: 1,\n value: 450\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"d3.interpolate(\"#333\", \"#000\")(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"data = {\n let { nNodes, nLinks } = form;\n\n let nodes = [],\n links = [];\n\n let rnd = d3.randomUniform(1);\n\n for (let i = 0; i < nNodes; ++i) {\n nodes.push({ id: i, group: i % 10 });\n }\n\n nodes.map((a, i) => {\n nodes.slice(i).map((b) => {\n if (rnd() < (nLinks / nNodes / nNodes) * 2) {\n links.push({ source: a.id, target: b.id, value: rnd() });\n }\n });\n });\n\n d3.shuffle(links);\n links = links.slice(0, nLinks);\n\n return { nodes, links };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"function normalize(v) {\n const d = Math.sqrt(v.x * v.x + v.y * v.y);\n return { x: v.x / d, y: v.y / d };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"function mul(v, m = 1) {\n return { x: v.x * m, y: v.y * m };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"function add(v1, v2) {\n return { x: v1.x + v2.x, y: v1.y + v2.y };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"function distance(x1, y1, x2, y2, x, y) {\n const ABx = x2 - x1;\n const ABy = y2 - y1;\n\n const APx = x - x1;\n const APy = y - y1;\n\n const cross = Math.abs(ABx * APy - ABy * APx);\n const len = Math.hypot(ABx, ABy);\n\n if (len === 0) {\n // A,B 重合 -> 点到点距离\n return Math.hypot(APx, APy);\n }\n\n return cross / len;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"viewof targetI = Inputs.range([0, 100], { label: \"targetI\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"Plot.plot({\n x: { nice: true },\n y: { nice: true },\n marks: [\n Plot.dot(d, { x: \"x\", y: \"y\" }),\n Plot.dot(\n d.filter((d, i) => neighbors.has(i)),\n { x: \"x\", y: \"y\", fill: \"red\" }\n ),\n Plot.dot(\n d.filter((d, i) => targetI === i),\n { x: \"x\", y: \"y\", stroke: \"red\", r: 10 }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"function findNeighbor(point, nodes) {\n const n = nodes.length,\n data = nodes.map((d) => [d.x, d.y]);\n data.push(point);\n\n const delaunay = d3.Delaunay.from(data),\n { triangles } = delaunay,\n neighbors = [];\n\n let a, b, c;\n for (let i = 0; i < triangles.length; i += 3) {\n a = triangles[i];\n b = triangles[i + 1];\n c = triangles[i + 2];\n if ((n === a) | (n === b) | (n === c)) {\n neighbors.push(a);\n neighbors.push(b);\n neighbors.push(c);\n }\n }\n\n return new Set(neighbors.filter((d) => d !== n));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"neighbors = {\n let { triangles } = delaunay,\n neighbors = [];\n\n let a, b, c;\n for (let i = 0; i < triangles.length; i += 3) {\n a = triangles[i];\n b = triangles[i + 1];\n c = triangles[i + 2];\n if ((targetI === a) | (targetI === b) | (targetI === c)) {\n neighbors.push(a);\n neighbors.push(b);\n neighbors.push(c);\n }\n }\n\n return new Set(neighbors);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"delaunay = d3.Delaunay.from(d.map((d) => [d.x, d.y]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"d = {\n const data = [];\n for (let i = 0; i < 100; ++i) {\n data.push({ i, x: Math.random(), y: Math.random() });\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"