这个时钟把“看时间”变成一场微型演出数字不是印刷体而是由一千多颗发光粒子飞过去拼成的 5×7 点阵。每到整秒所有粒子会先散开成星尘再一边抖动一边重新聚成下一个时间粒子颜色、数量和拖尾都能调还可以切 12/24 小时制。下面先看成品再讲这个单文件应用是怎么用码道 WebUI 生成并部署出来的。为什么值得看它把数字当成 5×7 的点阵用粒子当“像素”每位数字的黑色格子就是一个目标点粒子朝最近的目标点做弹簧式归位。整秒变化时旧的数字布局目标被替换成新布局同时给每颗粒子一个向外散射的速度就有了“散开再聚拢”的节奏点阵字形0 到 9 和冒号都写在FONT里每行 5/6 位二进制字符串。弹簧物理目标点吸引力k 0.021、阻尼damp 0.9再加正弦抖动粒子不会死板。整秒重聚只要时间标签变化就respawn(true)先 scatter 再飞向新目标。1200 粒子可调滑块直接改变目标数量拖动时实时增减。6 套主题霓虹绿、冰晶蓝、星云紫、熔岩橙、月光金再加一套旋转色相幻彩。任务描述在码道 WebUI 输入框粘贴以下需求回车发送我仍只说明最终效果。它这轮的动作是 - 新建项目目录并写入单文件 index.html随后补齐字形布局、粒子弹簧和主题切换逻辑。 - 提取内嵌 JavaScript 跑 node --check 语法检查确认没有语法错误。 - 探测空闲端口这轮是 3000用 python3 -m http.server 起服务curl 自检 HTTP 200 后给出内部预览地址。 - 最后把功能清单、文件位置和访问地址一起写回对话预览地址就在对话末尾。码道实际做了什么开发一个“粒子时钟”网页应用深色夜空背景用大量发光粒子实时拼出当前时间每秒钟数字散去再重新聚合粒子颜色、数量和拖尾效果可调节支持 24 小时制和 12 小时制的 AM/PM 显示提供多套配色主题界面简洁美观单个 index.html 即开即玩。完成后自动部署成可访问的网页应用并把访问地址写出来。1. 数字不是画出来的是 5×7 点阵FONT里每个数字是 7 行字符串字符为1的位置记成目标点buildLayout()遍历当前时间字符串把每位的点阵坐标摊到整块画布上constFONT{0:[01110,10001,10011,10101,11001,10001,01110],1:[00100,01100,00100,00100,00100,00100,01110],::[00,10,10,00,10,10,00]};functionbuildLayout(){cellMath.min(W*0.88/42,H*0.52/7);gridWidthcalcWidth();gridTop(H-7*cell)/2;// 遍历 timeStr把每个 1 的网格坐标压入 pts}每个目标点再叠加每颗粒子自己随机的jx / jy这样聚拢后不是死死的正方形而是有颗粒感的数字。2. 粒子靠弹簧逼近不写缓动函数draw()里每帧只朝目标点拉一下再乘阻尼、叠加两个相位不同的正弦扰动。效果天然带一点呼吸感constk0.021,damp0.9;for(constpofparticles){if(themeIdxRAINBOW){p.hue(p.hue0.45)%360;p.rgbhsvToRgb(p.hue,0.92,0.98);}p.vx(p.tx-p.x)*k;p.vy(p.ty-p.y)*k;p.vx*damp;p.vy*damp;p.xp.vx;p.yp.vy;p.xMath.sin(time*0.0011p.seed*7.3)*0.14;p.yMath.cos(time*0.0009p.seed*5.1)*0.14;}3. 整秒“散星尘”来自一次散射主循环只在时间字符串变化时触发替换避免每秒都重建数组functionframe(time){ttime;constlabelgetTimeLabel();if(label!lastLabel){lastLabellabel;respawn(true);}draw(time);requestAnimationFrame(frame);}respawn(true)会重新计算目标点并调scatter(forceByCount())给每颗粒子一个随机方向的初速度于是整秒数字先是炸开再被弹簧拉回。验证与踩坑生成结束后打开对话里的内部预览地址页面标题是「Particle Clock · 粒子时钟」数字确实由粒子拼成。截取两个不同秒数的画面两个文件内容不同目标点阵已经变化粒子位置也处于不同状态。踩坑粒子数量拉到 1200 时每颗要画两圈光晕外加亮点低端设备会有压力右下角个数调到 400 以下会明显顺畅。从代码看k 0.021决定“追目标”的快慢越大越快贴上去但越像坚硬机械damp 0.9尽量别改否则秒针散开后很难收敛回字形。本地复现项目是单文件index.html没有第三方依赖。把文件保存到本地后用浏览器直接打开就能玩如果希望通过本地 HTTP 服务访问cdcodearts-particle-clock 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-particle-clock准备环境进入 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使用码道体会最实用的还是「点阵 弹簧」这套思路。以前想画数字会想到 Canvas 字体但字体不好控制发光感点阵把显示层和粒子运动彻底分开改个字符串就能换图案。它甚至把冒号也当成字形处理AM/PM则用普通fillText单独画在旁边没有强行塞进粒子系统。这种“该用文本时用文本该用粒子时用粒子”的分寸读代码时很舒服。总结粒子时钟把时间显示拆成三件事字形点阵给出目标弹簧物理让粒子动起来整秒变更触发一次散射。后面可以继续加「倒计时」「自定义点阵文字」「保存 GIF」或「点击屏幕召唤一波粒子」核心循环都不用大改。粒子时钟 运行效果对照连续截取的两个运行画面左右分别是不同秒数、粒子处于不同聚散状态的对比 粒子时钟：秒针一抖就散成星尘，看时间也上头
这个时钟把“看时间”变成一场微型演出数字不是印刷体而是由一千多颗发光粒子飞过去拼成的 5×7 点阵。每到整秒所有粒子会先散开成星尘再一边抖动一边重新聚成下一个时间粒子颜色、数量和拖尾都能调还可以切 12/24 小时制。下面先看成品再讲这个单文件应用是怎么用码道 WebUI 生成并部署出来的。为什么值得看它把数字当成 5×7 的点阵用粒子当“像素”每位数字的黑色格子就是一个目标点粒子朝最近的目标点做弹簧式归位。整秒变化时旧的数字布局目标被替换成新布局同时给每颗粒子一个向外散射的速度就有了“散开再聚拢”的节奏点阵字形0 到 9 和冒号都写在FONT里每行 5/6 位二进制字符串。弹簧物理目标点吸引力k 0.021、阻尼damp 0.9再加正弦抖动粒子不会死板。整秒重聚只要时间标签变化就respawn(true)先 scatter 再飞向新目标。1200 粒子可调滑块直接改变目标数量拖动时实时增减。6 套主题霓虹绿、冰晶蓝、星云紫、熔岩橙、月光金再加一套旋转色相幻彩。任务描述在码道 WebUI 输入框粘贴以下需求回车发送我仍只说明最终效果。它这轮的动作是 - 新建项目目录并写入单文件 index.html随后补齐字形布局、粒子弹簧和主题切换逻辑。 - 提取内嵌 JavaScript 跑 node --check 语法检查确认没有语法错误。 - 探测空闲端口这轮是 3000用 python3 -m http.server 起服务curl 自检 HTTP 200 后给出内部预览地址。 - 最后把功能清单、文件位置和访问地址一起写回对话预览地址就在对话末尾。码道实际做了什么开发一个“粒子时钟”网页应用深色夜空背景用大量发光粒子实时拼出当前时间每秒钟数字散去再重新聚合粒子颜色、数量和拖尾效果可调节支持 24 小时制和 12 小时制的 AM/PM 显示提供多套配色主题界面简洁美观单个 index.html 即开即玩。完成后自动部署成可访问的网页应用并把访问地址写出来。1. 数字不是画出来的是 5×7 点阵FONT里每个数字是 7 行字符串字符为1的位置记成目标点buildLayout()遍历当前时间字符串把每位的点阵坐标摊到整块画布上constFONT{0:[01110,10001,10011,10101,11001,10001,01110],1:[00100,01100,00100,00100,00100,00100,01110],::[00,10,10,00,10,10,00]};functionbuildLayout(){cellMath.min(W*0.88/42,H*0.52/7);gridWidthcalcWidth();gridTop(H-7*cell)/2;// 遍历 timeStr把每个 1 的网格坐标压入 pts}每个目标点再叠加每颗粒子自己随机的jx / jy这样聚拢后不是死死的正方形而是有颗粒感的数字。2. 粒子靠弹簧逼近不写缓动函数draw()里每帧只朝目标点拉一下再乘阻尼、叠加两个相位不同的正弦扰动。效果天然带一点呼吸感constk0.021,damp0.9;for(constpofparticles){if(themeIdxRAINBOW){p.hue(p.hue0.45)%360;p.rgbhsvToRgb(p.hue,0.92,0.98);}p.vx(p.tx-p.x)*k;p.vy(p.ty-p.y)*k;p.vx*damp;p.vy*damp;p.xp.vx;p.yp.vy;p.xMath.sin(time*0.0011p.seed*7.3)*0.14;p.yMath.cos(time*0.0009p.seed*5.1)*0.14;}3. 整秒“散星尘”来自一次散射主循环只在时间字符串变化时触发替换避免每秒都重建数组functionframe(time){ttime;constlabelgetTimeLabel();if(label!lastLabel){lastLabellabel;respawn(true);}draw(time);requestAnimationFrame(frame);}respawn(true)会重新计算目标点并调scatter(forceByCount())给每颗粒子一个随机方向的初速度于是整秒数字先是炸开再被弹簧拉回。验证与踩坑生成结束后打开对话里的内部预览地址页面标题是「Particle Clock · 粒子时钟」数字确实由粒子拼成。截取两个不同秒数的画面两个文件内容不同目标点阵已经变化粒子位置也处于不同状态。踩坑粒子数量拉到 1200 时每颗要画两圈光晕外加亮点低端设备会有压力右下角个数调到 400 以下会明显顺畅。从代码看k 0.021决定“追目标”的快慢越大越快贴上去但越像坚硬机械damp 0.9尽量别改否则秒针散开后很难收敛回字形。本地复现项目是单文件index.html没有第三方依赖。把文件保存到本地后用浏览器直接打开就能玩如果希望通过本地 HTTP 服务访问cdcodearts-particle-clock 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-particle-clock准备环境进入 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使用码道体会最实用的还是「点阵 弹簧」这套思路。以前想画数字会想到 Canvas 字体但字体不好控制发光感点阵把显示层和粒子运动彻底分开改个字符串就能换图案。它甚至把冒号也当成字形处理AM/PM则用普通fillText单独画在旁边没有强行塞进粒子系统。这种“该用文本时用文本该用粒子时用粒子”的分寸读代码时很舒服。总结粒子时钟把时间显示拆成三件事字形点阵给出目标弹簧物理让粒子动起来整秒变更触发一次散射。后面可以继续加「倒计时」「自定义点阵文字」「保存 GIF」或「点击屏幕召唤一波粒子」核心循环都不用大改。粒子时钟 运行效果对照连续截取的两个运行画面左右分别是不同秒数、粒子处于不同聚散状态的对比