已经给网站增加了该动态背景，现在所有客户端或网页访问，均可以体验新版动态背景。默认动态关闭，需要设置项打开以查看动态效果。

代码开源

NGC13009 / random-background-animator

使用方法

新版页面已经添加动态背景。用户可以点击右下角的设置图标⚙，来调整动态背景的一些设定参数。调整后，再次点击设置图标⚙可以关闭设置面板。

下面依次介绍设置项：

1. 面板位置：面板位置是死的，一些小屏设备不一定能完全看见整个面板，部分内容可能被遮挡，难以配置，不过一般小屏幕设备的性能都比较捉襟见肘，因此不建议进行配置或开启动画。
2. 微调：可以通过鼠标滚轮来微调滚动条。
3. 动画的播放切换：为了低性能设备的体验，默认关闭了实时动画渲染，可以右下角打开设置，然后点击帧数旁边的按钮▶或者⏸启动或停止动态效果。浏览器会记住这个设置。此处也会显示实时帧数。
4. 帧率限制：设定最大限制帧数。无论用户如何设置帧数，实际帧数总是会表示为三个帧数中的最小的那个，这三个帧数分别为设定最大限制帧数，设备性能允许的最大帧数，显示器允许的最大帧数。一般情况下，30Hz已经很流畅，再快的话肉眼看不出来区别但是会更耗电。该帧率限制不会限制网页本身的流畅度，只是背景动画的帧率限制。
5. 色块密度：调整颜色的色块密度或分块大小，该值越大，则一个屏幕中的颜色块越小，或密度越大。
6. 色彩面积占比：调整每种颜色的平均面积占比，越大则屏幕的背景色区域越小。所有色块面积的平均值均相等并基于此数值设定。注意：平均值的计算包含时间在内，单次采样所有颜色面积不一定完全相等，甚至会丢失一些颜色。
7. 湿润模糊程度：调整模糊边沿的平均面积占比。越大则越模糊，同时由于模糊带来的背景面积会越大。
8. 演化速度：调整动画速度，越小则越慢。其实该值和人感知到的速度应该是指数关系，但是系数因人而异，因此我就给了线性直接输入，大家自己看着办吧。
9. 纸张颗粒度密度：该值越大，则纸张上的素描纸颗粒感越密。
10. 纸张颗粒度强度：该值越大，则纸张上的素描纸颗粒感越强。最强时和椒盐噪声一样。
11. 配色方案： 每行一个HEX颜色, 至少2个，否则会覆盖默认值。第一个颜色将作为背景颜色。无论总数多少个，总是会用这些颜色生成一个渐变色带，然后在上面等间隔采样5个颜色作为5种主题色。
12. 保存：配色方案需手动点击下方应用设定来激活，其他设置在动画播放期间都是实时的。
13. 自动保存状态：这些参数会以cookie的形式保存到用户浏览器本地或客户端内，有效期是90天，包括暂停与运行状态，各项配置，颜色参数等。过期后会重置，你也可以通过清除cookie来手动重置。
14. 查看参数：可以显示当前配置参数的具体值，通过点击显示参数按钮。
15. 帧率：可以查看生成帧率，如果设备比较差，那么可以暂停生成以获得更流畅的体验。浏览器会记住你的设定状态。

建议颜色:可以在颜色卡页面查看，或者参考下面的HEX源代码

#f1eccc // 纸黄
#8f99a6 // 灰蓝
#d4cfc2 // 暖灰
#66808c // 深青灰

或者:

#f1eccc // 纸黄
#909597
#cdc6b7
#a1adad
#bfcacb
#d0d0d0
#b9b2a6

或者

#f1f1f1 // 牛奶白
#909597 // 灰色
#cdc6b7 // 米黄色
#a1adad // 青灰色
#bfcacb // 青白色
#d0d0d0 // 高级灰
#b9b2a6 // 深米黄

原理

原理是用webGL调用用户本地GPU来高性能执行着色器。会按分形布朗运动与柏林噪声生成一个标量场（我认为是一座座空间上可以叠加到一起的“山”），之后按照山的等高线赋予颜色深度，按照山的顺序赋予色调。之后，为每个山采样一个“气候”实现随机的湿润模糊。最后，叠加一个素描纸纹理上去。（我觉得目前的纹理看着并不是很像素描纸，后面准备升级下算法）
2025年12月9日

测试页面

点击下面的链接体验纯粹的 limitless 印象派水彩动态背景

limitless 印象派水彩 动态背景

TODO或已知问题

1. （已经完工）升级升级，准备换成网页背景
2. 允许关闭背景（目前暂时未实现，因为canvas与rander的原因还不是那么容易的可以切换）
3. 磨砂素描纸质感目前实现的感觉差强人意
4. 手机等窄屏幕可能不是那么容易的配置参数，因为那个设置窗是固定位置的