水波纹最解压的点在于“动一下立刻有回应”。这个网页把整块画布当成一片可触摸的水面点一下会漾出一圈圈涟漪按住滑动会连成一条水痕开启雨滴模式后还有雨点随机落下、各自打出小水花。波纹强度、扩散速度和涟漪颜色都能调右上角实时显示帧率。下面先看成品再讲这个单文件应用是怎么用码道 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()里邻居同时读取旧值才明白如果边算边覆盖同一个数组波会向已经更新过的一侧倾斜。需求里没提双缓冲但它自己按稳定做法写出来了这种不显眼但正确的细节比把按钮调漂亮更有价值。总结水波纹把一个很容易想象的物理现象落到高度场迭代点击产生扰动有限差分负责扩散调色板负责观感。后面可以继续加「石头落下的大水花」「背景渐变」「点击音效」或「波纹定格导出」也可以把高度场接到其它网格类效果上玩法空间不小。水波纹 运行效果对照连续截取的两个运行画面左右分别是平静水面与点击、滑动后的涟漪状态
企业数字化 ERP 产品动态
相关推荐
输入增量式状态空间MPC的Matlab实现与公式解析 最近一段时间，组里做控制算法仿真的同事几乎都在折腾一套东西：模型预测控制（Model Predictive Control，MPC）。以前大家习惯用PID打天下，但凡是遇到多变量耦合、约束明显、并且还有一点点追求最优性的场景&a… · 2026/9/24 23:51:15
滑轨导轨哪个品牌好？2026 终极横评：按结构类型、承重、静音、材质四条硬线选 先搞清楚“滑轨”是什么：滑轨是抽屉的“关节”——全屋 100㎡ 住宅约有 30-50 副滑轨，按日均 20 次开合、一年就是 7 万次以上往复运动。它决定了你每次拉抽屉的顺滑感、关门时的静谧度，以及在厨房、浴室环境中的防锈耐久力。按安装结构主要分… · 2026/9/24 23:51:09
跳棋游戏源代码.zip：解压、运行与AI改造实战指南 简介：这套跳棋游戏源代码是一份基于 C MFC 开发的完整工程，面向想学习 Windows 桌面程序编写、棋类对局逻辑或 MFC 界面编程的开发者。压缩包共 43 个文件，大小约 215KB，包含 9 个头文件、7 个源文件、11 张位图以及光标、图标等界… · 2026/9/24 23:51:09
深度学习新闻分类推荐系统：从TextCNN到个性化推荐 简介：这份基于深度学习的新闻分类推荐系统Python实现源码，是专为课程设计与期末大作业准备的高分项目，下载后无需修改即可运行，适用于需要快速交付完整课题的高校学生。系统涵盖新闻数据预处理、文本分类模型训练、推荐逻辑展示等… · 2026/9/24 23:59:53
汽车电子底层软件开发：AUTOSAR与CAN总线实战解析 1. 这门“汽车电子底层软件开发就业课”到底在教什么？——不是写个LED闪烁就能上岗的很多人看到“汽车电子底层软件开发就业课”这个标题，第一反应是：不就是嵌入式C语言单片机CAN通信？刷几道LeetCode、调通一个STM32 CAN收发例程&… · 2026/9/24 23:59:53
Vim基础操作全攻略：保存退出、模式切换与高频命令实战 1. 项目概述1.1 核心需求解析今天聊聊Vim。写这个题目的原因是：几乎每个后端开发者、运维人员、数据工程师某天都会遇到一个场景——深夜加班，服务器登录界面只有黑底白字，编辑器只有vi/vim，你必须在五分钟内完成一次配置修改并保… · 2026/9/24 23:59:53
Python+CNN车牌识别实战：从数据预处理到模型训练与部署 简介：基于Python与卷积神经网络的车牌识别项目，面向计算机视觉初学者及智能交通开发者，目标是帮助用户掌握从数据预处理、模型构建到实际部署的完整流程。压缩包共25个文件，包含jpg/png图像样本、py训练脚本、md说明文档、dat数据… · 2026/9/24 23:59:53
AI元人文：从工具使用到思维重构的深度探索 最近半年我一直在琢磨一件事：AI元人文到底是什么？说白了，就是“用元视角重新审视人与AI的关系”，也在“探索AI如何反向逼着我们发现自己的思考边界”。标题里的“元探索”，在我看就是一层套一层的追问——当你用AI解决… · 2026/9/24 23:59:53
