极光：把流动夜空装进浏览器，随手调出治愈配色

极光最吸引人的是“怎么动都不会看腻”。这个网页用五层不断流动的光带拼出夜空：每层都有自己的高度、幅度、半宽和速度，互相叠加后就像真的极光在缓慢呼吸。六套治愈配色一键切换，也可以自定义主色，让次要颜色自动和谐搭配；下面还有两层山脉剪影和一闪一闪的星点。流动速度和光弧透明度都能滑条调节。下面先看成品，再讲这个单文件应用是怎么用码道 WebUI 生成并部署出来的。

为什么值得看

这个效果没有用视频或贴图，而是逐像素算出来的：先定义 5 层极光带，每一列用分形噪声算出中线高度和宽度，再对每行做垂直衰减，最后把低分辨率离屏画布拉大，叠到夜空上。因为核心是噪声函数，所以无论窗口多大都能流畅重绘：

• 5 层光带：每层不同的 baseY、amp、bandW 和 speedV，错开后才有纵深。
• 治愈配色：翡翠梦境、冰川之蓝、梦幻紫罗、樱落春夜、鎏金极光、精灵森林 6 套，再配一个自定义主色。
• 主次色自动搭配：主色选好后，通过 HSL 插值自动生成整条光带的渐变查找表。
• 风景陪衬：两层山脉剪影由噪声折线生成，星点随机分布，让极光不悬浮在光秃秃的背景里。
• 性能技巧：极光在更低分辨率的离屏画布上计算，再放大回主画布，手机也不会卡。

任务描述

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

我还是只说明最终效果。它这轮的动作是：

- 新建项目目录并写入单文件 `index.html`，随后补光带层、色调映射和离屏渲染细节。
- 提取内嵌 JavaScript 跑 `node --check` 语法检查，确认没有语法错误。
- 探测空闲端口（这轮是 3000），用 `python3 -m http.server` 起服务，`curl` 自检 HTTP 200 后给出内部预览地址。
- 最后把功能清单、文件位置和访问地址一起写回对话，预览地址就在对话末尾。

码道实际做了什么

开发一个“极光之夜”网页应用：深蓝夜空背景，极光由多层流动光带组成并持续缓慢变化；提供多套治愈配色主题并支持自定义极光主色、次要颜色自动和谐搭配；提供流动速度和光弧透明度调节；下方加入两层山脉剪影和闪烁星星；界面简洁美观，单个 index.html 即开即玩。完成后自动部署成可访问的网页应用，并把访问地址写出来。

1. 极光的“随机感”来自两段噪声

每层光带不是预置波形，而是 hash 生成随机种子，valueNoise 把相邻整点插值成连续曲线，fbm 再叠多次频率翻倍的噪声，出柔和的层次：

function hash(x, seed) {
  const s = Math.sin(x * 127.1 + seed * 311.7) * 43758.5453;
  return s - Math.floor(s);
}
function valueNoise(x, seed) {
  const i = Math.floor(x), f = x - i;
  const u = f * f * (3 - 2 * f);
  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;
}
function fbm(x, oct, seed) {
  let s = 0, amp = 0.5, f = 1;
  for (let o = 0; o < oct; o++) {
    s += valueNoise(x * f, seed + o * 17.13) * amp;
    f *= 2; amp *= 0.5;
  }
  return s;
}

2. 先算中线，再逐像素补光带

renderAurora(t) 先把每一列的中线高度、半宽和水平包络算进一个 Float32Array，然后只在中线附近一小段垂直区间内做双高斯式衰减。这样比整屏逐像素调 fbm 便宜得多：

const yc = (b.baseY - 0.02 + (n1 - 0.5) * 2 * b.amp) * Hd;
const hw = b.bandW * (0.55 + 0.9 * n2) * bandH;
const vf = 1 - d * d;
const vk = vf * vf * (1.05 - 0.15 * d * d);
const k = vk * cols[c4 + 3];
if (k <= 0.01) continue;

3. 离屏低清渲染，再柔和放大

逐像素计算如果直接在主画布全分辨率跑，窗口一大就吃力。这里把光带画到低分辨率离屏画布，再用平滑采样放大回主画布，既有光晕过渡，也保住帧率：

offCtx.putImageData(offImg, 0, 0);
ctx.save();
ctx.globalCompositeOperation = 'lighter';
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(offCanvas, 0, 0, W, H);
ctx.restore();

验证与踩坑

生成结束后打开对话里的内部预览地址，页面标题是「Aurora Night · 极光之夜」，光带确实在缓慢流动。

• 隔几秒连截两张画面，两个文件内容不同：光带中线形态由时间项 t0 驱动，画面一直保持缓慢变化。
• 踩坑：极光颜色是叠加出来的，截图时必须等第一帧渲染完成；如果页面刚出现就截，可能只有背景和山脉，显得发灰。
• 从代码看，opacity 和每层 alpha 会相乘，拉太高容易过曝发白，默认 90% 的“淡雅”档位最稳。

本地复现

项目是单文件 index.html，没有第三方依赖。把文件保存到本地后用浏览器直接打开就能玩；如果希望通过本地 HTTP 服务访问：

cd codearts-aurora-sky
python3 -m http.server 8080
# 然后打开 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-aurora-sky

准备环境：进入 AI 开发者空间

本文用码道 WebUI 版演示。先进入 AI 开发者空间并选择体验版，不需要本地安装：

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用跳到华为云登录页，登录一次后浏览器会话可复用
4. 弹窗「临时凭证自动配置」→ 点击 同意，沙箱自动创建

进入主界面后，等左侧菜单加载出来，找到 CodeArts，点它右侧的浏览器图标，就打开了码道 WebUI 对话窗口。

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

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

使用码道体会

比较惊喜的是它把「颜色」当成一个完整的查找表来设计。用户只选一个主色，它用 HSL 转回来算主→次渐变的 256 项 LUT，五层光带都从这个表里取色，所以整幅极光永远是同一个色调体系，不会乱。这比我平时用 linear-gradient() 拼 CSS 颜色扎实。另外离屏低分辨率渲染也很实用：先算再放大，锐度损失在光带这种柔和场景里几乎看不出来。

总结

极光把“治愈感”落到两个技术点上：多层 fbm 造出不重复的流动形态，离屏 LUT 统一色调。后面可以继续加快慢两级速度、自动昼夜循环，或让鼠标移动影响光带方向和亮度，也可以提供「一键生成治愈壁纸」的高分辨率导出。

极光 运行效果对照

连续截取的两个运行画面，左右分别是不同时刻的流动光带与山脉剪影：