字符锦鲤池
ASCII Pond,stqfdyr,2026 年

正在布展…
它是怎么做的
- 第 1 步每条鱼是一根约 20 节的「脊柱」链,头部按转向速度前进,后续节点用距离约束跟随,形成自然摆尾。
- 第 2 步固定 120Hz 的模拟步长与渲染帧率解耦,保证不同设备上游动速度一致。
- 第 3 步画布被切成字符网格,按每格覆盖的鱼身密度/朝向挑选字符写入。
- 第 4 步鱼有「性格」状态机(巡游、觅食、受惊),鼠标与鱼食作为吸引/排斥源。
- 第 5 步读取 DOM 元素包围盒作为避让区,并尊重 prefers-reduced-motion。
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Represent each creature as a chain of N points where the head steers toward a target with limited turn rate and each following point is pulled to a fixed distance from its predecessor. Run the simulation at a fixed timestep with an accumulator so speed is frame-rate independent. Each frame, clear a 2D grid of cells sized to a monospace glyph, rasterise body segments into the grid with a width that tapers along the spine, and map coverage plus local direction to a small glyph ramp. Add pointer and click handlers that spawn attractor points, and query getBoundingClientRect of content blocks to build repulsion zones and an opacity mask. Draw the grid with fillText on a single canvas sitting behind the content with pointer-events: none.
档案
能不能拿来用
原作以 MIT (bundled Geist Mono font: SIL OFL 1.1) 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。
性能开销
视觉强度
实现难度
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Opened the GitHub repo page (README: koi, 20-segment spines, 120Hz sim, MIT) and confirmed licence via gh api (MIT, created 2026-10-26); fetched the live demo (HTTP 200, title 'ASCII Pond').


