水波纹最解压的点在于“动一下立刻有回应”。这个网页把整块画布当成一片可触摸的水面点一下会漾出一圈圈涟漪按住滑动会连成一条水痕开启雨滴模式后还有雨点随机落下、各自打出小水花。波纹强度、扩散速度和涟漪颜色都能调右上角实时显示帧率。下面先看成品再讲这个单文件应用是怎么用码道 WebUI 生成并部署出来的。为什么值得看它没有用大量 DOM 元素去做圆圈动画而是把水面看成一块高度场每个网格单元存一个数值水波就是数值在相邻单元间来回扩散。这样点击、滑动、雨滴都只是在对应位置“压”一下画面自然跟着物理规则漾开双缓冲高度场bufA和bufB来回交换保证每一步同时更新不串帧。点击与滑动点按产生空心涟漪滑动按步长插值连成一条连续水痕。雨滴模式开关一开雨滴随机下落落到水面上的位置调splash()打水花。三个可调参数波纹强度、扩散速度、涟漪颜色都实时生效。60 fps 显示右上角按秒统计刷新率方便看设备跑得顺不顺。任务描述在码道 WebUI 输入框粘贴以下需求回车发送我仍然只说清楚最终效果。它这轮的动作是 - 新建项目目录并写入单文件 index.html后续调整数组大小和调色板把性能与观感补齐。 - 提取内嵌 JavaScript 跑 node --check 语法检查确认没有语法错误。 - 探测空闲端口这轮是 3000用 python3 -m http.server 起服务curl 自检 HTTP 200 后给出内部预览地址。 - 最后把功能清单、文件位置和访问地址一起写回对话预览地址就在对话末尾。码道实际做了什么开发一个“水波纹模拟器”网页应用深色平静水面铺满窗口点击或滑动水面会实时荡起涟漪支持触摸操作提供波纹强度、扩散速度和涟漪颜色三个调节项内置雨滴模式开启后雨点随机落下并溅起水花右上角显示实时帧率画面流畅、色彩治愈单个 index.html 即开即玩。完成后自动部署成可访问的网页应用并把访问地址写出来。1. 点击和雨滴共用同一个扰动函数点按用的是空心涟漪能量集中在圆环上滑动和雨滴用的是实心扰动两种波形都从同一个splash()出来只是幅度函数不同functionsplash(cx,cy,radius,strength,hollow){varx0Math.round(cx),y0Math.round(cy);varr2radius*radius;for(vardy-radius;dyradius;dy){varyy0dy;varrowy*W;for(vardx-radius;dxradius;dx){vard2dx*dxdy*dy;if(d2r2)continue;varxx0dx;vardistd20?0:Math.sqrt(d2);varamp;if(hollow){ampMath.max(0,1-Math.abs(dist-radius*0.55)*2.6);}else{ampMath.cos(dist/radius*Math.PI*0.80.3);if(amp0)amp0;}cur[rowx]clampAdd(cur[rowx],-strength*amp,-600,600);}}}2. 高度场用有限差分推进一次只算一步水波的核心是让每个点向四周扩散。step()取上下左右四个邻居的平均值乘一个扩散系数再减去当前值双缓冲在这里决定“新值与旧值互不干扰”v(sp[i-iw]sp[iiw]sp[i-1]sp[i1])*0.25*d-si[i];v*damp;if(v600)v600;elseif(v-600)v-600;si[i]v;每一步之后交换prev和cur所以下一次迭代读到的就是刚更新完的高度场。3. 滑动不是一条线而是拆成很多小水花如果拖动距离长了只打一个点水痕会断断续续。代码按鼠标移动距离计算步数沿路径均匀插值把一次滑动拆成连续多个splash()vardxx-lastPt.x,dyy-lastPt.y;vardistMath.sqrt(dx*dxdy*dy);varstepsMath.max(1,Math.ceil(dist/3));for(vars1;ssteps;s){varpxlastPt.xdx*s/steps;varpylastPt.ydy*s/steps;splash(px,py,2params.strength*3.5,42*params.strength,false);}验证与踩坑生成结束后打开对话里的内部预览地址页面标题是「水波纹模拟器」点击画面确实会漾开涟漪。分别截下初始平静水面和点击后的画面两个文件内容不同扰动强度不同涟漪半径也不同。踩坑物理网格的分辨率会影响画质与流畅度。生成时会根据窗口面积在 24000 到 130000 个单元之间自适应选择 CELL屏幕越小 CELL 越小、细节越密。扩散速度调高后fDenom 4 / (1.35 params.speed * 1.25)会变小单步更新更“硬”拉满后水波会比较躁喜欢柔和感的话默认 60% 最舒服。本地复现项目是单文件index.html没有第三方依赖。把文件保存到本地后用浏览器直接打开就能玩如果希望通过本地 HTTP 服务访问cdcodearts-water-ripple python3-mhttp.server8080# 然后打开 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-water-ripple准备环境进入 AI 开发者空间本文用码道 WebUI 版演示。先进入 AI 开发者空间并选择体验版不需要本地安装浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用跳到华为云登录页登录一次后浏览器会话可复用弹窗「临时凭证自动配置」→ 点击同意沙箱自动创建进入主界面后等左侧菜单加载出来找到CodeArts点它右侧的浏览器图标就打开了码道 WebUI 对话窗口。开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 CodeArtshttps://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz使用码道体会最直观的收获是「高度场」这个抽象它把二维水面压缩成一个个数值波纹、雨滴和渲染三层逻辑拆得很开。尤其是双缓冲一开始没太理解为什么需要两份数组看到step()里邻居同时读取旧值才明白如果边算边覆盖同一个数组波会向已经更新过的一侧倾斜。需求里没提双缓冲但它自己按稳定做法写出来了这种不显眼但正确的细节比把按钮调漂亮更有价值。总结水波纹把一个很容易想象的物理现象落到高度场迭代点击产生扰动有限差分负责扩散调色板负责观感。后面可以继续加「石头落下的大水花」「背景渐变」「点击音效」或「波纹定格导出」也可以把高度场接到其它网格类效果上玩法空间不小。水波纹 运行效果对照连续截取的两个运行画面左右分别是平静水面与点击、滑动后的涟漪状态