洛伦兹吸引子：三个数字转出的蝴蝶翅膀，差一点点结果完全不同

三个数在不断绕圈，差 0.001 的两条轨迹，几秒后就走成了两个世界。这是洛伦兹吸引子给的警告。

这个 App 做什么

• Canvas 投影 3D 轨迹：用四阶龙格-库塔积分画出蝴蝶状洛伦兹吸引子，并自动缓慢旋转。
• 可旋转视角与缩放：鼠标拖动旋转视角，滚轮缩放局部，方便从不同方向观察轨道。
• 参数滑块：sigma、rho、beta 三个参数可调，改动后立即重新积分。
• 蝴蝶效应对比：打开开关后，两条初值仅差 0.001 的轨迹并列跑，并显示分离度实时曲线。
• 界面深色科技感：重置轨迹、重置视角按钮齐备，底部给出初值敏感性与蝴蝶效应说明。

为什么值得看

• 洛伦兹方程看起来只是三个常微分方程，却能把确定性系统和预测困难同时摆到眼前。
• 初值只差 0.001 的两条轨迹从几乎重合到彻底分开，几秒钟就能展示“蝴蝶效应”。
• 3D 轨迹自动旋转、可拖拽，读起来有现场感的东西比静态图更好懂。

进入 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/lorenz 目录下做一个单文件网页应用 index.html：洛伦兹吸引子混沌演示。用 Canvas 投影绘制蝴蝶状 3D 轨迹并自动缓慢旋转，支持鼠标拖动旋转视角、滚轮缩放、sigma/rho/beta 参数滑块、重置轨迹、两条相邻轨迹对比开关；界面深色科技感，标注初值敏感性与蝴蝶效应说明。完成后检测空闲端口，用 python3 -m http.server <空闲端口> --directory /workspace/lorenz 启动并告诉我访问地址。

这轮码道具体做了什么

• 在 /workspace/lorenz 下创建单文件 index.html，把 RK4 积分、透视投影、参数滑块和分离度曲线写入同一个文件。
• 对 HTML 标签和 JS 语法做了双向检查，再检测空闲端口启动服务。
• 修正了 sigma 与 rho 滑块的顺序，使其和洛伦兹方程的书写顺序一致。

代码亮点

1. rk4：用四阶龙格-库塔把微分方程一步一步推进

const lz = (x, y, z) => {
    const s = P.sigma, r = P.rho, b = P.beta;
    return [ s * (y - x), x * (r - z) - y, x * y - b * z ];
};
function rk4(x, y, z, dt) {
    const [k1x, k1y, k1z] = lz(x, y, z);
    const [k2x, k2y, k2z] = lz(x + dt/2*k1x, y + dt/2*k1y, z + dt/2*k1z);
    const [k3x, k3y, k3z] = lz(x + dt/2*k2x, y + dt/2*k2y, z + dt/2*k2z);
    const [k4x, k4y, k4z] = lz(x + dt*k3x,  y + dt*k3y,  z + dt*k3z);
    return [
      x + dt/6 * (k1x + 2*k2x + 2*k3x + k4x),
      y + dt/6 * (k1y + 2*k2y + 2*k3y + k4y),
      z + dt/6 * (k1z + 2*k2z + 2*k3z + k4z)
    ];
}

先写出洛伦兹方程的右端函数，再用四阶龙格-库塔从当前状态推下一步。步长很小、步数很多，轨迹才能稳定画出蝴蝶翅膀；初值差异则会在迭代中持续放大。

验证与踩坑

• 默认轨迹画出两翼，自动旋转时投影平滑，滚轮放大会把局部轨迹放大。
• 打开蝴蝶效应对比后，两条轨迹先重合再分开，分离度曲线呈对数增长。
• rho 滑块从经典 28 改到 40，轨道形态不同，但数值积分仍保持稳定。

本地复现

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

python3 -m http.server 8080 --directory codearts-lorenz-attractor

浏览器访问 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-lorenz-attractor

使用码道体会

• 复杂系统练习里，积分方法比调参更值得先交代。RK4 的增量组合放到一个 dt/6 表达式里，参数变化后不必手改推导逻辑。
• 对初值敏感不是算法 bug，而是混沌动力学的特征；代码里专门用两条轨迹对照，而不是靠文字干讲。

总结

洛伦兹吸引子把三个方程展示成可旋转的蝴蝶翅膀，并用初值差 0.001 的轨迹解释预测难度。后续可以加参数平面图、截面 Poincaré 映射或高分辨录屏。