鸟群涌现：三行规则跑起来，整群鸟自己会聚、会散、会躲障碍

没人给鸟群发指令，它却会聚、会散、会绕开障碍。秘密只有三条作用于邻居的规则。

这个 App 做什么

• 三条规则自动飞行：每只鸟只依据视野内的邻居计算分离、对齐、聚合，宏观队形自然涌现。
• 可以干预场景：左键点击放置吸引点，按住拖拽创建或移动障碍物。
• 参数一屏可调：鸟数量、视野范围、分离权重、对齐权重、聚合权重滑块都可见。
• 跟随鼠标开关：打开后光标位置化作移动吸引点，鸟群会追着走。
• 界面深色科技感：规则开关旁直接标注三条规则解释，用户可以逐个关掉观察变化。

为什么值得看

• 鸟群没有中央指挥，每只鸟只和视野内的邻居互动，宏观队形却自然涌现，很适合看“去中心化”是怎么发生的。
• 视野和权重正好对应经典 flocking 模型里的核心参数，调一下就能看出不同的群聚程度。
• 障碍物交互让鸟群不只是飘，还给观察者一个直接干预入口。

进入 AI 开发者空间

本文用码道 WebUI 版演示，不装任何本地软件，浏览器就能用。先打开：

https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz

进入后选择「体验版」，首次使用会跳到华为云登录页，扫码登录一次，之后浏览器会话会复用；再按提示点击「同意」，让临时凭据自动配置并创建沙箱。

进入 AI 开发者空间主界面后，等左侧菜单加载出来，找到 CodeArts 并点击右侧的浏览器图标，打开码道 WebUI 对话窗口。

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

准备环境：进入 CodeArts

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

浏览器打开 CodeArts 后，按提示开通体验版，再回到上一步的 AI 开发者空间进入码道 WebUI。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

请在 /workspace/boids 目录下做一个单文件网页应用 index.html：鸟群涌现模拟器。画布上生成彩色三角小鸟，用分离、对齐、聚合三条规则自动飞行，鼠标可拖动障碍物或点击吸引点，支持鸟数量、视野范围、分离权重、对齐权重、聚合权重滑块和跟随鼠标开关，界面深色科技感，并标注三条规则解释。完成后检测空闲端口，用 python3 -m http.server <空闲端口> --directory /workspace/boids 启动并告诉我访问地址。

这轮码道具体做了什么

• 在 /workspace/boids 下生成单文件 index.html，用 Canvas 渲染随机三角形小鸟和星空背景。
• 预先检测空闲端口并启动静态服务，返回 URL 供浏览器预览。
• 规则开关让三条力分别暂停，形成可观察的对照实验。

代码亮点

1. step：在一个循环里同时算分离、对齐、聚合

function step(dt) {
  const vision2 = P.vision * P.vision;
  const sep2 = SEP_R * SEP_R;
  const dts = Math.min(dt, 2.5);
  for (const b of birds) {
    let ax = 0, ay = 0;
    let avgX = 0, avgY = 0, avgVX = 0, avgVY = 0, n = 0;
    for (const o of birds) {
      if (o === b) continue;
      const dx = o.x - b.x, dy = o.y - b.y;
      const d2 = dx * dx + dy * dy;
      if (d2 > vision2 || d2 < 0.0001) continue;
      n++;
      if (P.useSep && d2 < sep2) {
        const d = Math.sqrt(d2) || 1;
        const f = (SEP_R - d) / SEP_R;
        ax -= (dx / d) * f;
        ay -= (dy / d) * f;
      }
      avgX += o.x; avgY += o.y;
      avgVX += o.vx; avgVY += o.vy;
    }
    if (n > 0) {
      if (P.useCoh) {
        ax += (avgX / n - b.x) * 0.012 * P.coh;
        ay += (avgY / n - b.y) * 0.012 * P.coh;
      }
      if (P.useAli) {
        ax += (avgVX / n - b.vx) * 0.045 * P.ali;
        ay += (avgVY / n - b.vy) * 0.045 * P.ali;
      }
    }
  }
}

遍历每只鸟的邻居，近距离推进分离力，同时累积邻居中心与平均速度，分别用系数加到聚合与对齐力上。外圈还有边界反弹和障碍物躲让，保证鸟群不会飞出画面。

验证与踩坑

• 默认 200 只鸟自动结成大小不等的小群，遇到放置的障碍物会绕开。
• 把鸟数量滑到 50 只，画面更分散；拖出障碍物后鸟群在两侧重新聚合。

• 跟随鼠标开关打开后，鸟群明显向光标方向聚拢，分离规则仍能保持个体间距。

本地复现

这是单文件 index.html，没有第三方依赖。保存到本地后双击用浏览器打开，或起一个本地静态服务：

python3 -m http.server 8080 --directory codearts-boids-flock

浏览器访问 http://127.0.0.1:8080 即可。

生成页面和截图已同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本期目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-boids-flock

使用码道体会

• 一套规则、几个权重，结果不是参数表而是可见的运动场。把“视野”单拿出来最容易理解：鸟只看得到局部，所以没有统一调度也能成队。
• 实时调参让涌现变成可重复的实验，比预烘焙的粒子动画更有可讲性。

总结

Boids 的三条邻里规则解释了局部信息如何产生全局秩序。下一步可以改成跨蝙蝠避障、捕食者与猎物，或用 WebSocket 让多个窗口共享同一群鸟。