落水信 Dissolving Script

一个使用 p5.js 与原生 JavaScript 制作的网页交互艺术原型。用户在纸面上输入文字，文字会像落入水中的信一样逐渐淡去、晕开、扩散，最终只留下被水墨浸润过的痕迹。

作品关注的不是稳定的文字展示，而是文字从“可读的语义”重新退回到“墨、水、纸和时间”的过程。

在线与本地运行

这个项目不需要后端，也不需要构建工具。

直接打开：

index.html

如果浏览器对本地字体或资源有限制，也可以在项目目录启动一个静态服务器：

python3 -m http.server 4173

然后访问：

http://127.0.0.1:4173/

主要功能

• 纸面内实时输入，文字直接出现在宣纸上。
• 支持横排与竖排输入。
• 支持“落水的信”模式，切换到带红色竖格的信笺纸。
• 文字会从输入开始平滑淡出，并在原位置留下水痕与残墨。
• 墨迹扩散基于文字笔画遮罩，而不是简单的圆形或随机粒子。
• 普通宣纸模式与“落水的信”模式各自保存独立的文字、纸面和墨迹状态。
• 支持清空、截图和 WebM 录制。

操作说明

• 落水的信 / 返回宣纸：切换普通宣纸与信笺模式。
• 切换竖排 / 信笺竖排：切换普通模式下的书写方向；信笺模式固定为竖排。
• 清空：让当前纸面上的文字、墨迹和水痕在 2 秒内平滑淡出。
• 截图：保存当前纸面为 PNG。
• 开始录制 / 停止录制：录制当前画布动画并导出 WebM。

字体

项目默认使用本地字体文件：

assets/fonts/汇迹正楷.ttf

如需替换为自己的中文书法字体，可以将字体文件放入：

assets/fonts/

然后在 style.css 和 script.js 中同步修改字体文件名或字体族名称。

关键文件

• index.html：页面结构与资源入口。
• style.css：整体界面、纸面、按钮、背景与字体样式。
• script.js：p5.js 主画布、墨迹模拟、截图与录制逻辑。
• editor-model.js：文字输入、字符模型与排版状态。
• scene-model.js：普通宣纸与信笺模式的独立场景状态。
• assets/images/：页面背景与信笺纸资源。
• assets/fonts/：书法字体资源。

技术结构

墨迹系统将画面拆分为多个概念层：

• paper：纸张底色、纤维纹理与吸水性。
• water：湿度层，控制墨能否继续扩散。
• ink：仍在流动的浅墨与灰色水痕。
• deposit：沉积在纸纤维中的较深墨迹。
• velocity：由噪声、纸张纤维方向和局部湿度共同形成的流动方向。

输入文字时，程序会先生成隐藏文字遮罩，再从真实字体笔画区域注入水、墨和沉积层，使扩散从笔画本身开始发生。

调整参数

主要视觉参数集中在 script.js 的 config 中。常用调整方向：

• 扩散速度：查找 diffusion、velocity、spread、water 相关参数。
• 字体淡出速度：查找 readableFadeDuration。
• 粒子或模拟上限：查找 maxParticles、simulationResolution 等参数。
• 纸面尺寸与布局：查找普通模式与 qiaopi / 信笺模式对应的 layout profile。

建议每次只调整一组参数，并在普通模式与“落水的信”模式下都测试一次。

浏览器兼容

推荐使用最新版 Chrome、Edge 或 Safari。录制功能依赖：

HTMLCanvasElement.captureStream()
MediaRecorder

如果浏览器不支持这些 API，截图仍可正常使用。

项目状态

这是一个实验视觉原型，重点是“文字被水墨带走”的视觉机制与交互体验。后续可以继续扩展：

• 更高分辨率的 WebGL ping-pong framebuffer 模拟。
• 更细腻的纸纤维方向场。
• 更多纸张、信件或档案模式。
• 可调参数面板与导出预设。