模型速度对比
5 个模型 · 百模竞速 · TOKRACE · 分享快照
分享与嵌入
社交平台直接发布；GitHub/README 使用 Markdown 或 Badge。
[](/zh-CN/r/qoFPuWraAJ)
写一个单文件 HTML（只输出完整代码，不要解释），用原生 Canvas 实现一滴黑色墨水滴入一杯清水后扩散的动画。墨水入水瞬间应向外绽放出湍流、翻涌的羽状墨团——分形的卷须不断弯曲、分叉地铺开，并缓慢消散成淡淡的云雾。要用真实的流体运动（平流与扩散），而不是简单放大的圆。墨水要有密度变化：深而浓的内核、丝缕状半透明的边缘。顶部柔和打光。60fps，不要使用外部库。
复跑这次评测完整复跑会带走标题、备注、Prompt 和模型；Prompt 复跑只复用任务文本。
显示
🏁 实时竞速思考 / 输出 token速度 t/s · 基准 300
Kimi 月之暗面-high-think-budget
🏁
20345
⚡213 t/s
阶跃星辰
🏁
17718
155 t/s
智谱 GLM-5.1
🏁
15629
—
智谱 GLM-5.2
🏁
14422
—
Kimi 月之暗面
🏁
8192
—
🏁 本轮结算
🏆 最快
Kimi 月之暗面-high-think-budget
213 tok/s
💰 最省
阶跃星辰
≈$0.020
⭐ 综合推荐
阶跃星辰
最便宜
阶跃星辰🥉
step-3.7-flash
用户要求用原生Canvas实现墨水滴入清水的扩散动画，具体要求：
1. 单文件HTML，只输出完整代码，不要解释
2. 原生Canvas，不用外部库
3. 黑色墨水滴入清水后扩散
4. 墨水入水瞬间向外绽放出湍流、翻涌的羽状墨团
5. 分形的卷须不断弯曲、分叉地铺开
6. 缓慢消散成淡淡的云雾
7. 真实的流体运动（平流与扩散），不是简单放大的圆
8. 墨水密度变化：深而浓的内核、丝缕状半透明的边缘
9. 顶部柔和打光
10. 60fps
11. 不要使用外部库
我将使用基于网格的流体模拟（简化版Navier-Stokes）来实现这个效果。核心思路：
- 使用基于网格的流体模拟（密度场和速度场）
- 墨水滴入作为初始的密度注入和速度脉冲
- 使用平流（advection）和扩散（diffusion）
- 为了分形卷须效果，可以使用多尺度细节或程序化生成的初始条件
- 顶部打光可以通过渐变或后处理来实现
让我设计一个完整的实现：
1. 使用稳定的流体模拟（使用Jos Stam的稳定流体方法）
2. 密度场代表墨水浓度
3. 速度场代表流动
4. 初始时墨水滴入在画布中央
5. 添加湍流细节使卷须分叉
6. 渲染时根据密度值绘制不同透明度
7. 顶部打光
让我简化但保持视觉效果良好的实现：
- 使用一个较小的网格进行流体模拟
- 然后将结果渲染到Canvas上
- 使用密度场来控制渲染
- 添加一些粒子或直接在密度场上进行渲染
实际上，让我使用一个更直观但视觉效果出色的方法：
- 使用速度场和密度场
- 流体模拟使用FDT方法
- 渲染时使用带噪点的密度图来模拟卷须
- 使用双线性插值进行平流
让我写一个完整的实现：
网格大小：大约128x128或更低，以保证60fps
Canvas大小：可以设置为窗口大小或固定大小
关键步骤：
1. 初始化密度和速度场
2. 墨水滴入：在特定位置注入高密度和速度脉冲
3. 每帧：
- 添加外力（可选，增加湍流）
- 平流密度和速度
- 扩散密度和速度
- 投影速度场（保持不可压缩性）
- 渲染密度场
对于分形卷须效果，我可以在渲染时使用多层密度或者添加一些高频细节。也可以使用多个不同大小的墨水源来模拟分叉。
实际上，为了让卷须看起来像分形的，我可以在初始注入时使用多个小区域，或者使用一些噪声来扰动速度场，创造出细小的丝缕。
让我使用以下方法：
- 主密度场：较大尺度
- 噪声场：用于扰动，创造卷须
- 速度场：驱动平流
- 多个注入点：模拟分叉
我会创建一个完整的、视觉上令人信服的实现。
让我重新设计：
网格分辨率：使用约200x200的网格（平衡性能和视觉质量）
实际上，对于60fps，128x128可能更安全。让我使用一个合适的大小。
实际上，让我使用更大的画布但较低的模拟分辨率，然后用插值渲染。
好的，让我开始编写代码。我会使用Jos Stam的稳定流体算法。
关键组件：
- 密度场 (density) - 表示墨水浓度
- 速度场 (u, v) - x和y方向速度
- 平流步骤
- 扩散步骤
- 投影步骤
- 源项（墨水滴入）
为了获得分形卷须效果，我会：
- 在初始注入时使用多个小区域
- 添加高频噪声到速度场
- 使用多个时间尺度的扩散
- 在渲染时使用非线性映射使边缘更丝缕
关于顶部打光：我可以在渲染密度后，在顶部添加一个柔和的亮光效果（径向渐变或线性渐变模拟顶部光源）。
让我也添加一些粒子来增强卷须的视觉效果。不过用户主要要求是流体模拟，让我先做好流体模拟。
实际上，对于分形卷须，一个更好的方法可能是使用多个不同大小和位置的密度源，并让它们在流体中被拉伸。另外，在速度场中添加涡旋和噪声会产生非常自然的卷须。
让我也加入一些程序化噪声来驱动初始湍流。
好的，让我开始编写完整的HTML文件。
我会特别注意：
1. 流体模拟的正确性
2. 60fps的性能
3. 视觉质量
4. 密度场的丝缕状渲染
对于渲染，我会直接将密度场渲染到canvas上，使用亮度/透明度来显示墨水。对于丝缕状边缘，我可以使用阈值处理或使用两个不同的密度层（一个快速扩散，一个慢速）来创造纹理。
实际上，让我简化渲染：使用密度场直接映射到canvas像素，深色核心高密度，边缘半透明。通过调节扩散参数，可以控制丝缕的形成。
为了增强分形卷须，我会在初始注入时使用一些随机的次级注入点，并添加涡旋噪声。
另外，我可以在密度场上应用一些高频噪声（在渲染时）来增加纹理细节。
好的，开始写代码。我会把整个模拟放在一个自包含的HTML中。
网格尺寸：让我使用大约150x150的模拟网格，canvas可以更大（比如800x600或窗口大小），通过插值渲染。
实际上对于性能，150x150=22500个单元格，每帧需要处理，在60fps下应该还可以。让我使用更小的网格比如128x128，然后canvas使用CSS缩放或直接渲染。
让我使用canvas 800x600，模拟网格128x96或类似比例，然后使用imageData进行双线性插值渲染。
或者更简单：canvas直接使用模拟网格的大小（比如512x512或更小），然后用CSS缩放。这样可以直接用imageData写入像素。
实际上，让我使用以下方案：
- 模拟网格：256x256（对于60fps可能有点大）
- 或者使用160x120，然后canvas渲染时使用imageData缩放
- Canvas分辨率：800x600
让我使用160x120的模拟网格，在800x600的canvas上渲染，使用简单的最近邻或双线性插值。
实际上对于这个应用，让我使用200x200的模拟网格，canvas也是200x200（然后用CSS拉伸到更大尺寸）。这样imageData操作在40000个单元格上，应该可以在60fps内完成。
好的，让我确定具体参数：
- 模拟网格：200x200
- Canvas：400x400（显示尺寸可以是800x800通过CSS）
- 实际上直接让canvas 400x400，CSS放大到合适大小
不，让我让canvas适应窗口大小，但模拟网格保持固定大小。使用imageData渲染模拟网格到canvas，canvas可以比模拟网格大。
好的，我现在开始编写代码。我会特别注意以下几点：
1. 使用imageData进行快速像素操作
2. 双线性插值用于渲染缩放
3. 稳定的流体模拟
4. 顶部打光效果
实际上，为了简单和性能，让我让canvas大小等于模拟网格大小，然后用CSS将其缩放到屏幕大小。这样渲染就是直接写入imageData，不需要插值。
Canvas物理大小：256x256（或类似）
CSS显示大小：可以设置更大
256x256 = 65536像素，每帧处理这么多像素在现代硬件上应该可以60fps。流体模拟部分也在这个网格上进行。
实际上让我使用300x300或200x200。200x200=40000，更安全。
好的，让我最终确定：
- 模拟网格：200x200
- Canvas物理分辨率：200x200
- Canvas CSS分辨率：根据需要（比如800x600）
- 使用imageData直接写入
流体模拟细节：
- 使用交替方向隐式（ADI）或简单的前向欧拉+扩散
- Jos Stam的稳定流体方法使用前向欧拉+扩散+投影，使用隐式扩散（高斯-赛德尔迭代）
- 这保证了稳定性
让我使用简化但有效的方法：
- 平流：使用半拉格朗日方法（半隐式平流）
- 扩散：使用隐式扩散（迭代求解）
- 投影：使用雅可比迭代求解压力泊松方程
这是标准的稳定流体方法。
现在，对于初始条件：
- 在中央注入墨水（密度=1）
- 初始速度场：可以有一些向外的脉冲，或者让重力/浮力驱动（墨水滴入后下沉或上升）
- 实际上墨水密度比水大，所以会下沉。但用户描述的是"扩散"，所以可以是墨水滴入后向四周扩散
为了获得"羽状墨团"和"湍流翻涌"的效果：
- 初始速度脉冲：从注入点向四周扩散的速度
- 添加一些涡旋
- 多个次级注入点
- 高频噪声驱动
让我在注入时创建一个初始的径向速度场（向外），这样墨水会先向外绽放。
对于分形卷须，我会：
1. 使用多个注入点（在主要注入点周围散布一些较小的）
2. 在速度场中添加噪声
3. 使用不同的扩散率
另外，为了增加湍流细节，我可以在模拟中添加一些随机的小尺度涡旋。
好的，我现在开始编写完整代码。我会包含：
1. 流体模拟类
2. 密度场管理
3. 渲染器
4. 顶部打光
5. 60fps循环
关于顶部打光：我可以在渲染时，在canvas的上部区域叠加一个径向渐变或线性渐变，模拟从顶部照射的光。这会使得墨水的顶部边缘更亮，产生立体感。
对于密度渲染，我会：
- 将密度值映射为灰度（黑色墨水）
- 边缘处添加一些透明度
- 顶部打光通过调整渲染来实现
让我也考虑墨水在水中的行为：墨水密度高，会先形成一个云团，然后扩散。扩散过程应该看起来自然。
好的，编写代码。我会特别注意模拟的稳定性。
关于网格的边界条件：我使用neumann边界条件（零梯度），即边界上的值与相邻单元格相同。这样墨水不会从边界流出。
对于平流，使用半拉格朗日方法（反向平流）：
- 对于每个网格点，找到回溯到上一帧的源点位置
- 在源点位置进行双线性插值获取值
对于扩散，使用隐式方法：
- 使用高斯-赛德尔迭代求解线性系统
对于投影，求解压力泊松方程，然后修正速度场使其无散度。
好的，这些是标准的。让我开始编写代码。
实际上，为了性能，我会简化一些。对于200x200的网格：
- 平流：每个单元格需要找到源点，进行双线性插值 - 40000次插值
- 扩散：每次迭代需要遍历所有单元格
- 投影：每次迭代需要遍历所有单元格
高斯-赛德尔迭代通常需要4-10次迭代才能收敛。对于200x200的网格，这意味着每次模拟步骤需要多次遍历整个网格。
在60fps下，每帧有约16.7ms的时间。对于200x200=40000个单元格，每次遍历需要访问40000个值。在JavaScript中，这大约是每遍历1ms左右（取决于具体操作）。如果有5次迭代，每次模拟步骤约5-10ms。加上平流和渲染，总共约15-20ms，接近16.7ms的限制。
让我使用150x150或120x120来确保60fps。或者使用更少的迭代次数。
实际上，让我测试一下：对于150x150=22500个单元格，3-4次迭代应该可以在60fps内完成。
好的，让我使用大约140x140的模拟网格。不，让我使用奇数/质数之类的... 实际上让我使用160x120或类似。不过为了简单，我使用正方形网格，比如150x150。
好的，我现在开始编写完整的HTML代码。
另外，关于"顶部柔和打光"，我可以在渲染完成后，在canvas上使用径向渐变或线性渐变来添加光效。例如在顶部1/3区域添加一个柔和的白色渐变，模拟从上方打下的光。
对于丝缕状边缘，我可以在渲染密度时使用一些技巧：
- 使用密度场的梯度来改变透明度
- 或者使用两个密度层（一个快速扩散，一个慢速），快速扩散的层提供边缘的丝缕感
实际上，一个简单有效的方法是：在密度渲染时，对于高密度区域显示为不透明黑色，中等密度显示为半透明（带有一些透明度变化），低密度显示为非常透明的灰色。通过调整阈值和平滑度，可以获得丝缕效果。
更好的方法是使用多个密度源并在不同时间注入，这样不同团块以不同速度扩散，自然形成丝缕。
好的，我现在集中精力编写代码。我会尽量详细地实现。
另外，关于"分形的卷须不断弯曲、分叉地铺开"，这可以通过在速度场中添加小尺度涡旋来实现。我可以在速度场上叠加一些基于位置的旋转噪声，在初始阶段和随时间逐渐添加。
对于湍流，我还可以使用curl噪声（旋度噪声）来驱动速度场，这样可以产生自然的涡旋结构。
Curl noise是一个很好的选择：给定一个标量噪声场，计算其旋度来获得无散度的速度场。这样可以持续产生涡旋。
在2D中，给定噪声场ψ(x,y)，旋度为：
- u = ∂ψ/∂y
- v = -∂ψ/∂x
这样得到的速度场自动满足无散度条件，非常适合用于驱动流体。
我可以在模拟中加入curl noise作为外力，持续为系统提供能量，维持湍流。
好的，让我实现这些。
关于噪声，我需要在代码中实现一个简单的噪声函数。我可以使用简单的值噪声或使用预计算的噪声纹理。为了简单，我使用一个基于哈希的噪声函数。
实际上，让我使用一个简单的2D噪声函数（基于正弦的伪随机噪声），或者使用更简单的curl noise实现。
对于持续的湍流，我可以在每个模拟步骤中向速度场添加小的curl噪声分量。
好的，让我开始编写代码。这将是一个比较长的实现。
我需要特别注意数组操作。在JavaScript中，使用一维数组来表示二维场是常见的做法。
数组索引：对于NxM的网格，索引(i, j)对应i*M+j。
好的，开始写代码：
```javascript
// 模拟参数
const N = 150; // 网格分辨率
const M = 150;
const size = N * M;
const dt = 0.1; // 时间步长
const diffusion = 0.0001; // 扩散系数
const viscosity = 0.0001; // 粘性系数
const curlStrength = 0.5; // 涡旋强度
```
关于时间步长，我需要确保稳定性。对于平流-扩散方程，CFL条件要求dt < dx/max(|u|,|v|)。对于我们的系统，速度通常在0-1之间（单位/步），dx=1（归一化），所以dt=0.1应该是安全的。
好的，现在让我考虑渲染。我将使用canvas的imageData来渲染密度场。对于每个像素（对应模拟网格的一个单元格），密度值决定了颜色。墨水是黑色的，所以：
- 高密度：纯黑（#000000）
- 中密度：深灰（带有一些透明度）
- 低密度：非常淡的灰色（几乎透明）
在imageData中，每个像素有RGBA四个通道。对于深色墨水：
- R, G, B 都接近0
- A（alpha）根据密度变化：高密度时alpha接近1，低密度时alpha接近0
对于"丝缕状半透明的边缘"，我可以使用密度的非线性映射，使得边缘的透明度更低，而有一些纹理。
另外，为了增强卷须效果，我可以在渲染时对密度场应用一些锐化或纹理化处理。
关于顶部打光，我可以在渲染密度后，在canvas上叠加一个从顶部向下的渐变。这个渐变从顶部的白色（半透明）逐渐过渡到底部的透明。这会模拟从上方照射的光线在墨水顶部产生的柔和亮光。
在代码中，我可以在写入imageData后，对像素进行后处理，或者在canvas上使用额外的绘制操作。
实际上，更简单的方法是在渲染密度时，对于每个像素，根据其y坐标（顶部位置）来调整亮度。顶部像素稍微亮一些，模拟光照。
好的，我现在开始写完整的HTML代码。
还有一个重要的事情：墨水滴入的时机。我将在页面加载后延迟一点时间（比如0.5-1秒），然后在中央注入墨水。之后墨水会扩散并逐渐消散。
墨水消散：密度会自然扩散并衰减（可以被边界吸收或自然衰减）。为了让墨水最终消散，我可以添加一个衰减项，或者让墨水扩散到边界后被吸收。
对于边界吸收，我可以使用吸收边界条件，在边界处设置密度为0（或快速衰减）。这样墨水扩散到边界后会被"吸收"并消散。
实际上，标准的neumann边界（零梯度）意味着密度在边界处保持，不会消散。为了让墨水消散，我可以在密度场中添加一个小的衰减（乘以0.999之类的），或者使用吸收边界条件。
对于自然消散效果，使用衰减因子是最简单的。我可以在每个时间步将密度乘以0.999或类似的值。
好的，现在让我也考虑初始条件的具体设置：
- 在canvas中央（模拟网格中央）注入墨水
- 初始密度：在中央3x3或5x5的区域内设置为1.0
- 初始速度：向外径向脉冲（模拟水滴冲击）
- 同时添加几个较小的次级注入点（偏移位置），以创造分叉的初始结构
对于速度场的径向脉冲，速度方向是从中心指向外，大小随距离中心的位置变化。近中心处速度更大。
实际上，对于墨水滴入水中的效果，通常墨水会：
1. 先形成一个向下的流动（因为密度大）
2. 然后在底部扩散
3. 同时有一些上涌
但用户描述的是"向外绽放"和"翻涌的羽状墨团"，所以更强调水平扩散和湍流。让我设置初始速度主要是向外径向的。
另外，为了让卷须更丰富，我会在初始时刻向速度场添加一些涡旋（使用curl noise）。
好的，现在代码会很长。让我组织好结构。
实际上，我还想加入一个有趣的特性：在注入后，墨水的形态会自然地分叉和扭曲，创造出类似分形的结构。这主要通过：
1. 初始速度场的剪切不稳定性
2. Curl noise驱动的涡旋
3. 不同尺度的扩散
这些因素共同作用会产生自然的卷须。
好的，开始编写代码。我会特别注意性能优化。
对于图像渲染，我使用canvas的ImageData，直接操作像素数组。对于200x200的网格，有40000个像素。每个像素4字节（RGBA），总共160KB的imageData。每帧写入160KB在现代浏览器中很快。
对于双线性插值（如果canvas比网格大），我需要在渲染时进行。但如果canvas等于网格大小，就不需要。让我设置canvas等于模拟网格大小（200x200），然后用CSS将其放大显示。这样渲染就是直接写入，不需要插值。
Canvas的CSS尺寸可以设置为例如600x600或更大，利用浏览器的平滑缩放。
好的，最终计划：
- 模拟网格：200x200
- Canvas物理像素：200x200
- Canvas CSS尺寸：由窗口大小决定（保持纵横比）
- 使用imageData直接写入
让我也加入窗口大小调整的处理。
现在，关于"顶部柔和打光"的具体实现：在渲染密度后，我可以在canvas上叠加一个径向或线性渐变。最简单的方法是在imageData渲染完成后，再使用canvas的2D API绘制一个半透明的渐变矩形。
或者更好的方法：在渲染密度时，根据每个像素的y坐标调整其亮度。对于y坐标较小（靠近顶部）的像素，可以让它们稍微亮一些（减少黑色程度），模拟顶部光照。
实际上，对于墨水的顶部打光，意味着光线从上方照射，墨水的上部会反射一些光（虽然墨水是黑色的，但边缘处会有微妙的亮度变化）。我可以通过在密度渲染时，对边缘像素（低密度区域）和顶部像素应用一个亮度提升来实现。
更具体地说：
- 对于高密度核心（密度>0.7）：保持几乎纯黑，alpha接近1
- 对于中密度边缘（0.3-0.7）：显示为半透明，有一些亮度变化
- 对于低密度丝缕（0.05-0.3）：非常透明，带有一些纹理
- 顶部像素在相同密度下稍微亮一些
在imageData中，这意味着：
- 对于
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>墨水扩散</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1a1a1a;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;font-family:sans-serif}
canvas{background:#e8e4e0;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,0.5);max-width:92vmin;max-height:92vmin;image-rendering:auto}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
(() => {
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
// 模拟网格分辨率
const N = 180;
const M = 180;
const size = N * M;
const dt = 0.12;
const diffusionCoeff = 0.00015;
const viscosityCoeff = 0.00008;
const curlBaseStrength = 0.35;
const densityDecay = 0.9985;
const maxDensity = 1.0;
const INJECT_START = 50;
const INJECT_DURATION = 28;
// 创建Float32Array场
const density = new Float32Array(size);
const u = new Float32Array(size); // x速度
const v = new Float32Array(size); // y速度
const densityNew = new Float32Array(size);
const uNew = new Float32Array(size);
const vNew = new Float32Array(size);
// 用于扩散和投影的临时数组
const diffWork = new Float32Array(size);
const diffWork2 = new Float32Array(size);
const pressure = new Float32Array(size);
// Canvas设置
canvas.width = N;
canvas.height = M;
const imageData = ctx.createImageData(N, M);
const pixels = imageData.data;
// 背景色（水）
const bgR = 232, bgG = 235, bgB = 239;
let frameCount = 0;
let lastTime = performance.now();
let fpsAccum = 0;
let fpsFrames = 0;
// 工具函数
const IX = (i, j) => i * M + j;
const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
const lerp = (a, b, t) => a + (b - a) * t;
// 噪声函数（用于curl noise）
function noise2D(x, y) {
const n = Math.sin(x * 1.17 + y * 0.83) * Math.cos(y * 1.31 - x * 0.67) * 0.55
+ Math.sin(x * 0.71 - y * 1.03) * Math.cos(y * 0.59 + x * 1.21) * 0.35
+ Math.cos(x * 1.53 + y * 1.47) * Math.sin(y * 0.37 - x * 0.91) * 0.25;
return n;
}
function getCurl(x, y, time, strength) {
const scale = 0.04;
const eps = 1.2;
const sx = x * scale;
const sy = y * scale;
const t = time * 0.25;
const np = noise2D(sx + eps, sy + t);
const nm = noise2D(sx - eps, sy + t);
const nq = noise2D(sx, sy + eps + t);
const nr = noise2D(sx, sy - eps + t);
const dndx = (np - nm) / (2 * eps * scale);
const dndy = (nq - nr) / (2 * eps * scale);
return { u: dndy * strength, v: -dndx * strength };
}
// 添加外力（curl noise + 阻尼）
function addForces(time) {
const elapsed = frameCount - INJECT_START;
const injectActive = frameCount >= INJECT_START && frameCount < INJECT_START + INJECT_DURATION;
let curlStr = curlBaseStrength;
// 注入后curl noise强度衰减
if (elapsed > 0) {
curlStr *= Math.exp(-elapsed * 0.006);
}
curlStr = Math.max(curlStr, 0.02);
for (let i = 1; i < N - 1; i++) {
for (let j = 1; j < M - 1; j++) {
const idx = IX(i, j);
const curl = getCurl(i, j, time, curlStr);
u[idx] += curl.u * dt;
v[idx] += curl.v * dt;
// 微小阻尼
u[idx] *= 0.9992;
v[idx] *= 0.9992;
}
}
}
// 平流步骤（半拉格朗日）
function advect(field, fieldNew, uField, vField, dtStep) {
for (let i = 1; i < N - 1; i++) {
for (let j = 1; j < M - 1; j++) {
const idx = IX(i, j);
const uVal = uField[idx];
const vVal = vField[idx];
// 回溯位置
let srcX = i - uVal * dtStep;
let srcY = j - vVal * dtStep;
// Clamp到边界内
srcX = clamp(srcX, 0.5, N - 1.5);
srcY = clamp(srcY, 0.5, M - 1.5);
const i0 = Math.floor(srcX);
const j0 = Math.floor(srcY);
const i1 = i0 + 1;
const j1 = j0 + 1;
const fx = srcX - i0;
const fy = srcY - j0;
// 双线性插值
const v00 = field[IX(Math.min(i0, N - 1), Math.min(j0, M - 1))];
const v10 = field[IX(Math.min(i1, N - 1), Math.min(j0, M - 1))];
const v01 = field[IX(Math.min(i0, N - 1), Math.min(j1, M - 1))];
const v11 = field[IX(Math.min(i1, N - 1), Math.min(j1, M - 1))];
const v0 = lerp(v00, v10, fx);
const v1 = lerp(v01, v11, fx);
fieldNew[idx] = lerp(v0, v1, fy);
}
}
}
// 扩散步骤（隐式，高斯-赛德尔迭代）
function diffuse(field, fieldNew, diffCoeff, iterations) {
const a = diffCoeff * dt;
const denom = 1 + 4 * a;
// 复制当前场
diffWork.set(field);
for (let iter = 0; iter < iterations; iter++) {
for (let i = 1; i < N - 1; i++) {
for (let j = 1; j < M - 1; j++) {
const idx = IX(i, j);
const neighbors = diffWork[IX(i - 1, j)] + diffWork[IX(i + 1, j)]
+ diffWork[IX(i, j - 1)] + diffWork[IX(i, j + 1)];
fieldNew[idx] = (diffWork[idx] + a * neighbors) / denom;
}
}
diffWork.set(fieldNew);
}
}
// 投影步骤（求解压力泊松方程，使速度场无散度）
function project(uField, vField, iterations) {
const Nx = N;
const Ny = M;
const scale = 0.5 / (Nx + Ny - 2); // 缩放因子
// 初始化压力
pressure.fill(0);
// 计算散度
for (let i = 1; i < Nx - 1; i++) {
for (let j = 1; j < Ny - 1; j++) {
const idx = IX(i, j);
const div = (uField[IX(i + 1, j)] - uField[IX(i - 1, j)]
+ vField[IX(i, j + 1)] - vField[IX(i, j - 1)]) * 0.5;
diffWork[idx] = div;
}
}
// 雅可比迭代求解压力
for (let iter = 0; iter < iterations; iter++) {
for (let i = 1; i < Nx - 1; i++) {
for (let j = 1; j < Ny - 1; j++) {
const idx = IX(i, j);
const neighbors = pressure[IX(i - 1, j)] + pressure[IX(i + 1, j)]
+ pressure[IX(i, j - 1)] + pressure[IX(i, j + 1)];
pressure[idx] = (neighbors - diffWork[idx]) * 0.25;
}
}
}
// 从速度场中减去压力梯度
for (let i = 2; i < Nx - 2; i++) {
for (let j = 2; j < Ny - 2; j++) {
const idx = IX(i, j);
uField[idx] -= (pressure[IX(i + 1, j)] - pressure[IX(i - 1, j)]) * 0.5;
vField[idx] -= (pressure[IX(i, j + 1)] - pressure[IX(i, j - 1)]) * 0.5;
}
}
}
// 注入墨水
function injectInk() {
const cx = N / 2;
const cy = M / 2;
const injectProgress = (frameCount - INJECT_START) / INJECT_DURATION;
const intensity = Math.sin(injectProgress * Math.PI); // 先增后减
// 主注入点（高斯分布）
const mainSigma = 3.5;
const mainRadius = 6;
for (let di = -mainRadius; di <= mainRadius; di++) {
for (let dj = -mainRadius; dj <= mainRadius; dj++) {
const gi = Math.round(cx + di);
const gj = Math.round(cy + dj);
if (gi < 1 || gi >= N - 1 || gj < 1 || gj >= M - 1) continue;
const dist2 = di * di + dj * dj;
const weight = Math.exp(-dist2 / (2 * mainSigma * mainSigma));
const addDens = weight * 0.7 * intensity;
const idx = IX(gi, gj);
density[idx] = Math.min(maxDensity, density[idx] + addDens);
// 添加径向速度脉冲
const dist = Math.sqrt(dist2) + 0.1;
const speed = weight * 2.8 * intensity;
u[idx] += (di / dist) * speed;
v[idx] += (dj / dist) * speed;
}
}
// 次级注入点（创造分叉的羽状结构）
const numSecondary = 8;
const secRadius = 7;
const secSigma = 2.2;
for (let s = 0; s < numSecondary; s++) {
const angle = (s / numSecondary) * Math.PI * 2 + 0.3;
const sx = cx + Math.cos(angle) * secRadius;
const sy = cy + Math.sin(angle) * secRadius;
const gi = Math.round(sx);
const gj = Math.round(sy);
if (gi < 1 || gi >= N - 1 || gj < 1 || gj >= M - 1) continue;
const secWeight = 0.45 * intensity;
// 在次级点周围注入
const secR = 3;
for (let di = -secR; di <= secR; di++) {
for (let dj = -secR; dj <= secR; dj++) {
const ti = gi + di;
const tj = gj + dj;
if (ti < 1 || ti >= N - 1 || tj < 1 || tj >= M - 1) continue;
const d2 = di * di + dj * dj;
const w = Math.exp(-d2 / (2 * secSigma * secSigma));
density[IX(ti, tj)] = Math.min(maxDensity, density[IX(ti, tj)] + w * secWeight);
}
}
}
// 微小的随机注入点（增加分形细节）
const numMicro = 12;
for (let s = 0; s < numMicro; s++) {
const angle = Math.random() * Math.PI * 2;
const dist = 3 + Math.random() * 5;
const mx = cx + Math.cos(angle) * dist;
const my = cy + Math.sin(angle) * dist;
const gi = Math.round(mx);
const gj = Math.round(my);
if (gi < 1 || gi >= N - 1 || gj < 1 || gj >= M - 1) continue;
const microW = 0.25 * intensity * (0.5 + Math.random() * 0.5);
const microR = 2;
for (let di = -microR; di <= microR; di++) {
for (let dj = -microR; dj <= microR; dj++) {
const ti = gi + di;
const tj = gj + dj;
if (ti < 1 || ti >= N - 1 || tj < 1 || tj >= M - 1) continue;
density[IX(ti, tj)] = Math.min(maxDensity, density[IX(ti, tj)] + microW);
}
}
}
}
// 渲染密度场到canvas
function renderDensity() {
for (let i = 0; i < N; i++) {
for (let j = 0; j < M; j++) {
const idx = IX(i, j);
const dens = density[idx];
const pixIdx = idx * 4;
// 归一化y位置用于顶部打光
const ny = i / (N - 1); // 0=顶部, 1=底部
const topLightFactor = Math.pow(Math.max(0, 1.0 - ny), 2.5) * 0.45;
if (dens < 0.005) {
// 背景水
pixels[pixIdx] = bgR;
pixels[pixIdx + 1] = bgG;
pixels[pixIdx + 2] = bgB;
pixels[pixIdx + 3] = 255;
} else {
// 墨水密度映射
// 使用多段映射创造丝缕状边缘
let alpha, r, g, b;
if (dens > 0.55) {
// 浓密内核：接近纯黑
const t = (dens - 0.55) / 0.45;
alpha = 0.82 + t * 0.18;
r = 4 + t * 2;
g = 5 + t * 2;
b = 7 + t * 3;
} else if (dens > 0.18) {
// 中等密度：深灰，有透明度变化
const t = (dens - 0.18) / 0.37;
alpha = 0.25 + t * 0.57;
r = 28 - t * 20;
g = 30 - t * 22;
b = 34 - t * 24;
} else if (dens > 0.04) {
// 丝缕边缘：半透明，带有纹理
const t = (dens - 0.04) / 0.14;
alpha = 0.04 + t * 0.21;
r = 90 - t * 55;
g = 95 - t * 58;
b = 102 - t * 62;
// 添加一些不规则性（模拟丝缕）
const noise = Math.sin(i * 0.7 + j * 1.3) * Math.cos(j * 0.9 - i * 0.5) * 0.5 + 0.5;
alpha *= (0.7 + noise * 0.3);
r += noise * 15;
g += noise * 15;
b += noise * 16;
} else {
// 极淡云雾
const t = dens / 0.04;
alpha = 0.01 + t * 0.03;
r = 140 + t * 40;
g = 145 + t * 42;
b = 152 + t * 45;
}
// 顶部打光
r += topLightFactor * 38;
g += topLightFactor * 40;
b += topLightFactor * 45;
// 裁剪
r = clamp(Math.round(r), 0, 255);
g = clamp(Math.round(g), 0, 255);
b = clamp(Math.round(b), 0, 255);
alpha = clamp(Math.round(alpha * 255), 0, 255);
pixels[pixIdx] = r;
pixels[pixIdx + 1] = g;
pixels[pixIdx + 2] = b;
pixels[pixIdx + 3] = alpha;
}
}
}
ctx.putImageData(imageData, 0, 0);
// 叠加顶部柔光（使用canvas渐变）
const glowGrad = ctx.createLinearGradient(0, 0, 0, N * 0.6);
glowGrad.addColorStop(0, 'rgba(255,255,255,0.18)');
glowGrad.addColorStop(0.35, 'rgba(255,255,255,0.07)');
glowGrad.addColorStop(0.7, 'rgba(255,255,255,0.01)');
glowGrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = glowGrad;
ctx.fillRect(0, 0, N, N);
// 微弱的径向顶部光
const radGrad = ctx.createRadialGradient(N * 0.5, -N * 0.1, N * 0.05, N * 0.5, N * 0.25, N * 0.7);
radGrad.addColorStop(0, 'rgba(255,252,248,0.13)');
radGrad.addColorStop(0.5, 'rgba(255,250,245,0.04)');
radGrad.addColorStop(1, 'rgba(255,248,240,0)');
ctx.fillStyle = radGrad;
ctx.fillRect(0, 0, N, N);
}
// 主模拟步骤
function simulateStep() {
// 注入墨水
if (frameCount >= INJECT_START && frameCount < INJECT_START + INJECT_DURATION) {
injectInk();
}
// 添加外力
const time = frameCount * dt;
addForces(time);
// 平流速度场
advect(u, uNew, u, v, dt);
advect(v, vNew, u, v, dt);
u.set(uNew);
v.set(vNew);
// 平流密度场
advect(density, densityNew, u, v, dt);
density.set(densityNew);
// 扩散速度场
diffuse(u, uNew, viscosityCoeff, 3);
diffuse(v, vNew, viscosityCoeff, 3);
u.set(uNew);
v.set(vNew);
// 扩散密度场
diffuse(density, densityNew, diffusionCoeff, 3);
density.set(densityNew);
// 投影速度场
project(u, v, 4);
// 密度衰减（消散）
for (let i = 0; i < size; i++) {
density[i] *= densityDecay;
// 边界吸收
const row = Math.floor(i / M);
const col = i % M;
if (row <= 2 || row >= N - 3 || col <= 2 || col >= M - 3) {
density[i] *= 0.96;
}
}
// 速度边界阻尼
for (let i = 0; i < N; i++) {
for (let j = 0; j < M; j++) {
const idx = IX(i, j);
if (i <= 1 || i >= N - 2 || j <= 1 || j >= M - 2) {
u[idx] *= 0.92;
v[idx] *= 0.92;
}
}
}
// 裁剪密度和速度
for (let i = 0; i < size; i++) {
density[i] = clamp(density[i], 0, maxDensity);
u[i] = clamp(u[i], -5, 5);
v[i] = clamp(v[i], -5, 5);
}
}
// 动画循环
function animate(timestamp) {
requestAnimationFrame(animate);
// 限制帧率在约60fps
const elapsed = timestamp - lastTime;
if (elapsed < 14.5) return; // 约60fps
lastTime = timestamp;
frameCount++;
simulateStep();
renderDensity();
// FPS监控
fpsAccum += elapsed;
fpsFrames++;
if (fpsAccum > 500) {
const fps = Math.round(fpsFrames / (fpsAccum / 1000));
fpsFrames = 0;
fpsAccum = 0;
// 可选：更新标题显示FPS
// document.title = `墨水扩散 - ${fps} FPS`;
}
}
// 响应式Canvas尺寸
function resizeCanvas() {
const maxSize = Math.min(window.innerWidth * 0.92, window.innerHeight * 0.92);
const displaySize = Math.min(maxSize, 600);
canvas.style.width = displaySize + 'px';
canvas.style.height = displaySize + 'px';
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 启动动画
requestAnimationFrame(animate);
})();
</script>
</body>
</html>
1.31s
首Token
122
思考TPS
107s · ≈13,064 tok
155
输出TPS
29.9s · ≈4,654 tok
17,718
总Tokens（官方）
输入 130
总用时 139s · 平均 129 tok/s · 峰值 210 tok/s · 成本 ≈¥0.144
Kimi 月之暗面🥈
kimi-for-coding
We need answer user request: write a single-file HTML, only complete code, no explanation. Implement native Canvas animation of black ink drop into clear water diffusion. Needs fluid motion (advection and diffusion), not simple expanding circle. Ink density variation: deep dense core, wispy semi-transparent edges. Top soft lighting. 60fps, no external libs.
We have to produce full HTML code only, no explanation. Need ensure code is self-contained, uses Canvas 2D or WebGL? User said native Canvas; could use 2D. Realistic fluid simulation via grid-based Navier-Stokes? We can implement a CPU fluid solver on a grid using canvas pixel manipulation. Need advection, diffusion, projection for incompressible flow, and ink density advected by velocity, diffuse, maybe dissipate. Also render with density variation, lighting from top.
Given constraints: single file, no external libs, 60fps. CPU grid maybe 128x128 or 256x256 with direct pixel manipulation via ImageData can run 60fps. Need produce drop impact with turbulent plumes. We can initialize velocity with downward jet and random vorticity, and density with central drop. Need simulation steps per frame perhaps multiple. Render with soft top lighting: shade density based on gradient/height? Could approximate volume rendering: map dye density to opacity, and add lighting from top by computing vertical gradient of density (or normal from density field) and shading. Since 2D top-down? The prompt says a cup of water, top soft lighting. We'll render the fluid surface from above-ish, with top lighting giving lighter on top? We can add a radial falloff as cup edge and vignette.
We need create a simple grid fluid solver. Let's design:
- N = 128 or maybe 160. Use arrays: u, v (velocity x,y), u_prev, v_prev, dens, dens_prev. Size (N+2)*(N+2). Grid spacing h=1, dt configurable. Add forces: initial drop downward velocity; maybe continuous small random forces to create turbulence. We can use classic Stam stable fluid solver (Jos Stam). However that tends to dampen and produce smooth smoke, not ink tendrils. But with high vorticity confinement or random forces, can get nice swirls.
Implement fluid solver step:
1. add sources: velocities, density.
2. diffuse (Gauss-Seidel) for velocity and density.
3. project (make divergence-free).
4. advect velocity (self-advection) and density.
5. project again.
Stam algorithm with project before and after advection.
To create ink drop impact: At start, set density high at center in circular blob with smooth falloff; set vertical velocity downward large in center; add outward radial velocity and some angular perturbation. Then after frame 0 maybe add a burst. We can also continuously add small density at center? Actually ink drop enters and diffuses, no continuous source. But to simulate initial splash, set initial v field.
To make turbulent, we can add vorticity confinement: compute curl, N = ∇|curl| / |∇|curl||, force = eps * h * (N × curl). This creates swirling tendrils. Implement curl at each cell (du/dy - dv/dx) using central differences. Add force to velocity each frame. Use epsilon ~ 2-5.
Render:
- Use ImageData of size N x N, scale via CSS or drawImage to canvas. Maybe canvas internal resolution N x N for performance, displayed full window with CSS. But canvas size in pixels can be N; CSS size 100%. However devicePixelRatio? We can set canvas width/height = N and CSS width/height 100%. Or set canvas to window inner size and draw ImageData scaled? Better set internal resolution = grid size, CSS scaling. For crispness maybe grid 200. Use N=160. Render pixels.
Need lighting from top. We can compute per pixel shading based on vertical gradient of density: lighter where density increases downward? Top lighting from above means surfaces facing up illuminated. For 2D scalar density, approximate normal from density gradient; N = normalize((dens gradient x, dens gradient y, 1)) (height field). Light direction L = (0, -1, 1?) top means from above (negative y). Compute diffuse = max(0, dot(N,L)). Then color = base ink color modulated: dark core, edges wispy. For high density, dark; for low density, grayish translucent. Maybe color = lerp(water color, ink color, density). Then multiply by lighting factor: lighter (whitish) where lit? Ink in water from top light: dense ink appears darker, edges lighter/whiter due to light scattering? We can use shading to increase brightness where gradient faces top. Also add specular? Soft top light: ambient + diffuse.
Alternatively we can do RGBA based on density:
- alpha = min(1, density * 2 maybe). Low density: high alpha? Wait if density field 0-1, alpha maybe density * 3 with clamp. Dense core opaque black, edges low alpha gray.
- Lighting: compute light = ambient + diffuse * (dot). Then color.rgb = ink_color * (1 - density?) Hmm.
Let's design rendering:
const inkR=10, inkG=12, inkB=15 (near black). const water color = 240,245,250 (light). density d 0.. maybe >1. We compute visual density vd = d; clamp vd>1. Opacity a = 1 - exp(-vd * 3). Actually for ink, thick core black opaque, thin edges transparent. Use color = water + (ink - water) * a, but apply lighting. Top light: if dot positive, brighten. Maybe lightened amount = 1 + 0.3 * diffuse. Then final color = mix * light. But if a low, water stays light. Could work.
Compute normals from density gradient. Need handle boundaries. For each cell (1..N), compute dx = d[i+1,j]-d[i-1,j]; dy = d[i,j+1]-d[i,j-1]; Then normal = normalize((-dx, -dy, 1)) or (dx,dy,1)? For height field, normal = (-dz/dx, -dz/dy, 1). Light from top L = (0, -0.5, 1) normalized? If dy is vertical downward in canvas (top y=0). Light from top means direction downward? In 3D, light from above pointing down: L = (0, -1, 0.5) maybe. Dot with normal = (-dx * Lx - dy * Ly + 1*Lz) / len. If Ly negative (light going down) and dy positive where density increases downward, -dy*Ly positive -> lit. Good.
Also add top highlight with distance? We can add radial vignette and cup edge.
Performance:
- N=160 -> 25600 cells. Each frame: diffuse iter 10 maybe, project iter 20, advect loops. Could be heavy but likely okay in JS at 60fps? Let's estimate. Diffuse with Gauss-Seidel loops over N^2 * iterations ~ 25600*10 = 256k per solve; two diffuses => 512k; project two times 20 iter => ~1M; advect ~256k. Total ~2M operations per frame. JS can handle maybe 2-4M at 60fps. Use typed Float32Array for speed. Use N=128 for safety (16k cells) => ~1.2M ops. But we want visual quality. N=160 maybe borderline but should run ~60fps on modern. We'll optimize loops by storing index increments, using while loops? We'll do for loops.
We can reduce diffusion iterations for density maybe 4 and velocity 4, project iter 20. Or use Jacobi? Gauss-Seidel in place. Use lin_solve with w = 1/(4+1/a) for stability. For diffusion rate ~ small (viscosity 0.0001), dt maybe 0.1, so a = dt*diff*N^2 maybe 0.1*0.0001*16384=0.16. w small. But many iterations not needed if diffusion low. We'll use 8 iterations.
For vorticity confinement: compute curl and gradient; add force F = eps * h * (N x curl). N_x = d|c|/dx / len, N_y = d|c|/dy / len. Force = eps * h * (-N_y * curl, N_x * curl). Add to velocity. Use eps=3.
Advection: use backtrace with linear interpolation. Need clamp coordinates 0.5..N+0.5.
Projection: compute divergence, solve pressure Poisson with Gauss-Seidel, subtract gradient. Standard.
Initial conditions:
- On load (or after first frame), add density at center: for each cell compute distance from center (cx,cy), radius = N*0.08; d = exp(-dist^2/(2*r^2)) * strength maybe 1.2. Add to dens_prev.
- Add velocity: downward v (positive? y axis top-down) maybe 80; outward radial component; swirl. Use addForce function: for center region, vy += dropSpeed * falloff; vx += outwardSpeed * (x-cx)/r * falloff; maybe angular perturbation. Add to u_prev/v_prev. Then step.
To create impact "bloom outward" at t=0, maybe add a strong initial radial outward velocity and downw
这次运行已结束，但厂商没有返回最终正文流，只返回了 reasoning / 中间推理 token。上方「思考过程」已自动展开，避免结果区显示为空。
1.11s
首Token
194
思考TPS
42.3s · ≈8,192 tok
—
输出TPS
8,192
总Tokens（官方）
输入 120
总用时 44.2s · 平均 194 tok/s · 峰值 303 tok/s · 成本 ≈$0.033
Kimi 月之暗面-high-think-budget
kimi-for-coding
We need respond with single file HTML, only complete code, no explanation. Need implement native canvas animation of black ink drop into clear water. Real fluid motion advection diffusion, fractal tendrils, density variation, top soft lighting, 60fps no external libs.
We need produce code. This is a coding generation request. We need think through implementation.
We need create a fluid simulation on grid with advection and diffusion, plus perhaps procedural noise for tendrils. Canvas 2D. Need 60fps. Grid maybe 128x128 or 256x256? Performance in JS with custom solver. We can do a 2D fluid simulation based on Navier-Stokes for velocity and density. Use semi-Lagrangian advection, Jacobi diffusion/projection. Need high quality rendering with density variation, lighting.
But user explicitly wants real fluid advection/diffusion, not simple expanding circle. So implement fluid solver. Need black ink density field. Top soft lighting could be rendered as shading using density gradient? Could use a particle or dye system. Simpler: simulate dye density on grid, render with threshold/gradient to simulate ink with translucent edges. Top lighting: compute normals from density gradient and dot with light direction from top, add rim. We can render each pixel to offscreen ImageData with compositing.
Need ensure single file. No external assets. Use requestAnimationFrame.
Let's design a compact but complete fluid solver.
Grid dimensions: maybe N=200, but solver per frame includes 16 projection iterations and maybe advection operations ~ 4 passes. 200x200 = 40k cells, iterations 20 -> 800k ops per frame, fine. 256x256=65k; with 4 sets of arrays and loops, 60fps possible. Could use Float32Array. Add curl noise / vorticity confinement to create tendrils. Use initial velocity from drop impact.
We can implement a grid-based incompressible fluid solver in JS. Standard stable fluids algorithm (Stam). For velocity (u,v), density (ink), pressure. Add vorticity confinement to maintain swirls. Diffuse? Viscosity low. Advect.
Steps per frame:
1. Add impulse: initial drop sets density and vertical velocity at center. Maybe add continuous small impulse? The drop occurs at t=0; after that the simulation evolves. We can trigger drop on load.
2. Add vorticity confinement to velocity: compute curl, normalize, add force N x curl.
3. Advect velocity: semi-Lagrangian backtrace with bilinear interpolation.
4. Project velocity: solve Poisson pressure with Jacobi iterations (maybe 20-40), subtract gradient.
5. Advect density with velocity.
6. Diffuse density maybe small amount included in advection? We can run a few Jacobi diffusion iterations for density.
7. Fade density slowly.
8. Render.
Need fractal-like initial shape. Could initialize density with multiple overlapping noise blobs, e.g. sum of octaves of Perlin/Simplex noise in a radial falloff. Also initial velocity impulse radial with turbulence. As it evolves, vorticity confinement will create tendrils.
Rendering:
- For each pixel, get ink density d (0..1). Render clear water background with subtle blue/cyan gradient, top lighting. Ink color black/dark grey, alpha based on d. But "density variation: deep dense core, filamentary translucent edge" can be done by mapping density to alpha with power curve: alpha = 1 - exp(-k*d). Color maybe #050505 dark. Top lighting: simulate light from above attenuated by ink column thickness. Use density as optical thickness; background lit from top gets darker where density high, and soft caustic gradient. More realistic: compute vertical gradient of density to approximate normals? Top light: if density gradient upward (more ink below), light scatters? Actually ink in water with top light: darker regions block light; edges are illuminated by scattering, appearing translucent wispy. A simple approach: render background color (light cyan) modulated by exp(-d*absorption). Then add a light layer from top (white gradient). Use alpha compositing: Each cell as a semi-transparent black layer, accumulated over column? 2D simulation no depth. But we can approximate: fill canvas with water background gradient from light top to darker bottom. Then draw ink as black with alpha = 1 - exp(-density*scale), using additive or source-over. Top soft lighting: add specular highlight near top? Better: draw radial gradient from top representing light beam, then draw ink with multiply/darker compositing, and add scattered light on edges (lighter rim) based on gradient magnitude.
Alternative: ray-march through density field? Not 3D. But 2D top view? Actually a "drop into a glass of water" side view? The prompt says top soft lighting, density core and edges. Likely view is from side (looking through glass), top light shining down. Could render as 2D slice with shading: density gradient -> normal; top light direction (0,-1). Compute N = normalize((-gradX, -gradY, 1)); diffuse = max(dot(N, light),0). Ink color = dark base + diffuse * (scatter color). This gives illuminated edges. Also core dark. That seems good and realistic.
We can implement per-pixel rendering. For each grid cell, bilinear sample density d, gradient (dx,dy). Compute lighting:
- Base color: dark ink = rgb(10,10,10).
- Edge scattering color = soft cyan/white? Actually ink black under top light would have specular/scattering on edges maybe gray-blue. Top light from above (0,-1). Edge normals point horizontally/vertically. We'll produce lighter tone on top and edges.
- Water background color = gradient from top white-ish to bottom blue.
- Alpha = clamp(d*10 etc). Use a transfer function: opacity = smoothstep(0,0.7,d*?) maybe.
- If d small, blend to water background.
To make framerate good, we can render to an ImageData at grid resolution and maybe drawImage scaled to canvas, with smoothing. Since grid 200x200, scaling to full window with smoothing can look acceptable but pixelated. Could render higher res by interpolating in shader? JS only. We can render at grid res then use ctx.drawImage with imageSmoothingEnabled true; this upscales and blurs, which may look like soft watercolor. But the user wants high quality. Maybe grid resolution 256x256 and canvas CSS size full. Smoothing gives anti-aliasing but not more detail. Could render at grid resolution to ImageData then putImageData, but pixelated. Better: do bilinear upscaling by drawing the offscreen canvas to main canvas. Canvas 2D drawImage scaling with smoothing gives interpolation, acceptable. The offscreen canvas size = grid resolution. We'll update its ImageData, then draw onto main canvas filling window.
Need handle window resize: set main canvas size to window, offscreen canvas size fixed grid N.
Need implement arrays: u, v, u_prev, v_prev, d, d_prev, p, div, curl maybe. For memory, use Float32Array(N*N). Grid index: i + j*N. Boundaries: we can treat as closed/no-slip? For ink in glass, maybe closed container, no-slip. But simulation should not leak. Use boundary conditions: velocity normal = 0 at walls. Density: zero gradient (Neumann). Standard set_bnd function.
However, boundary loops for each array and each step cost. Use index loops.
Advection function: for each cell, backtrace: x = i - dt0*u[ij], y = j - dt0*v[ij]; clamp to 0.5..N-0.5; interpolate from prev field. Bilinear interpolation. Use lerp.
Projection: compute divergence, pressure solve via Gauss-Seidel (in-place) with 20-60 iterations; then subtract gradient. Gauss-Seidel stable and faster than Jacobi. Use red-black? Simpler nested loops. For N=200, 40 iterations = 1.6M updates; fine.
Vorticity confinement: compute curl = du/dy - dv/dx using central differences. Compute length; if > epsilon, N = (curl_y, -curl_x)/length; add force epsilon2 * N * curl * dt. This will create tendrils.
Initial drop: Set density in center with fractal noise. Could generate density field using layered sine/cosine noise: d(r,theta) = falloff(r) * (0.5 + 0.5*noise(x,y)). Noise can be value noise using a pseudo-random function with sin frequenci
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ink Drop</title>
<style>
html,body{margin:0;padding:0;overflow:hidden;background:#000;height:100%}
canvas{display:block;width:100%;height:100%}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas=document.getElementById('c');
const ctx=canvas.getContext('2d');
let W,H;
function resize(){W=canvas.width=innerWidth;H=canvas.height=innerHeight;}
addEventListener('resize',resize);resize();
const N=200;
const SIZE=N*N;
const dt=0.04;
const diff=0.00015;
const visc=0.00002;
const vorticityStrength=3.2;
const fadeRate=0.9992;
const U=new Float32Array(SIZE),V=new Float32Array(SIZE);
const U0=new Float32Array(SIZE),V0=new Float32Array(SIZE);
const D=new Float32Array(SIZE),D0=new Float32Array(SIZE);
const P=new Float32Array(SIZE),DIV=new Float32Array(SIZE);
const CURL=new Float32Array(SIZE);
const off=document.createElement('canvas');
off.width=N;off.height=N;
const octx=off.getContext('2d',{willReadFrequently:true});
const imgData=octx.createImageData(N,N);
const pixels=imgData.data;
const CX=(N-1)/2;
const topSpot=new Float32Array(SIZE);
const sigma=N*0.45;
const twoSig2=2*sigma*sigma;
for(let j=0;j<N;j++){
const sy=Math.exp(-(j*j)/twoSig2);
const row=j*N;
for(let i=0;i<N;i++){
const sx=Math.exp(-((i-CX)*(i-CX))/twoSig2);
topSpot[row+i]=sx*sy*16;
}
}
function IX(i,j){return i+j*N;}
function set_bnd(b,x){
for(let j=1;j<N-1;j++){
if(b===1){x[IX(0,j)]=-x[IX(1,j)];x[IX(N-1,j)]=-x[IX(N-2,j)];}
else{x[IX(0,j)]=x[IX(1,j)];x[IX(N-1,j)]=x[IX(N-2,j)];}
}
for(let i=1;i<N-1;i++){
if(b===2){x[IX(i,0)]=-x[IX(i,1)];x[IX(i,N-1)]=-x[IX(i,N-2)];}
else{x[IX(i,0)]=x[IX(i,1)];x[IX(i,N-1)]=x[IX(i,N-2)];}
}
x[IX(0,0)]=0.5*(x[IX(1,0)]+x[IX(0,1)]);
x[IX(0,N-1)]=0.5*(x[IX(1,N-1)]+x[IX(0,N-2)]);
x[IX(N-1,0)]=0.5*(x[IX(N-2,0)]+x[IX(N-1,1)]);
x[IX(N-1,N-1)]=0.5*(x[IX(N-2,N-1)]+x[IX(N-1,N-2)]);
}
function lin_solve(b,x,x0,a,c,it){
const invC=1/c;
for(let k=0;k<it;k++){
for(let j=1;j<N-1;j++){
const row=j*N;
for(let i=1;i<N-1;i++){
const id=row+i;
x[id]=(x0[id]+a*(x[id-1]+x[id+1]+x[id-N]+x[id+N]))*invC;
}
}
set_bnd(b,x);
}
}
function diffuse(b,x,x0,d,dt_){
const a=dt_*d*N*N;
lin_solve(b,x,x0,a,1+4*a,12);
}
function project(u,v,p,div){
const h=1/N;
for(let j=1;j<N-1;j++){
for(let i=1;i<N-1;i++){
const id=IX(i,j);
div[id]=-0.5*h*(u[id+1]-u[id-1]+v[id+N]-v[id-N]);
p[id]=0;
}
}
set_bnd(0,div);set_bnd(0,p);
lin_solve(0,p,div,1,4,30);
for(let j=1;j<N-1;j++){
for(let i=1;i<N-1;i++){
const id=IX(i,j);
u[id]-=0.5*N*(p[id+1]-p[id-1]);
v[id]-=0.5*N*(p[id+N]-p[id-N]);
}
}
set_bnd(1,u);set_bnd(2,v);
}
function advect(b,d_,d0,u,v,dt_){
const dt0=dt_*N;
for(let j=1;j<N-1;j++){
for(let i=1;i<N-1;i++){
const id=IX(i,j);
let x=i-dt0*u[id];
let y=j-dt0*v[id];
if(x<0.5)x=0.5;if(x>N-0.5)x=N-0.5;
if(y<0.5)y=0.5;if(y>N-0.5)y=N-0.5;
const i0=Math.floor(x),i1=i0+1;
const j0=Math.floor(y),j1=j0+1;
const s1=x-i0,s0=1-s1;
const t1=y-j0,t0=1-t1;
const i0j0=i0+j0*N,i1j0=i1+j0*N;
const i0j1=i0+j1*N,i1j1=i1+j1*N;
d_[id]=s0*(t0*d0[i0j0]+t1*d0[i0j1])+s1*(t0*d0[i1j0]+t1*d0[i1j1]);
}
}
set_bnd(b,d_);
}
function vorticity_confinement(u,v){
for(let j=1;j<N-1;j++){
for(let i=1;i<N-1;i++){
const id=IX(i,j);
CURL[id]=0.5*N*(v[id+1]-v[id-1]-u[id+N]+u[id-N]);
}
}
const eps=vorticityStrength*dt;
for(let j=1;j<N-1;j++){
for(let i=1;i<N-1;i++){
const id=IX(i,j);
let dx=Math.abs(CURL[id+1])-Math.abs(CURL[id-1]);
let dy=Math.abs(CURL[id+N])-Math.abs(CURL[id-N]);
const len=Math.sqrt(dx*dx+dy*dy)+1e-5;
dx/=len;dy/=len;
const f=eps*CURL[id];
u[id]+=f*dy;
v[id]-=f*dx;
}
}
set_bnd(1,u);set_bnd(2,v);
}
function clampVel(){
for(let k=0;k<SIZE;k++){
if(U[k]>15)U[k]=15;else if(U[k]<-15)U[k]=-15;
if(V[k]>15)V[k]=15;else if(V[k]<-15)V[k]=-15;
}
}
function initDrop(){
const cy=N*0.32;
const r0=N/7;
for(let j=1;j<N-1;j++){
for(let i=1;i<N-1;i++){
const id=IX(i,j);
const dx=i-CX,dy=j-cy;
const dist=Math.sqrt(dx*dx+dy*dy);
const angle=Math.atan2(dy,dx);
const r=dist/r0;
let n=0,a=1,fx=dx*0.07,fy=dy*0.07;
for(let o=0;o<6;o++){
n+=a*(Math.sin(fx*1.9+fy*0.7)+Math.cos(fx*0.6-fy*1.7)+Math.sin((fx+fy)*1.3));
fx*=2;fy*=2;a*=0.5;
}
n*=0.25;
const shell=Math.exp(-r*r*(1.2+0.7*n));
const streak=0.5+0.5*Math.sin(angle*12+n*3+r*5);
let d=shell*streak*2.4;
D[id]=d>3?3:d;
const swirl=Math.sin(angle*3+n*2)*6+Math.cos(angle*7-n*4)*3;
const out=4*Math.exp(-r*r);
const inv=1/(dist+1);
U[id]=((dx/(dist||1))*out+swirl*(-dy)*inv)*shell*0.6;
V[id]=((dy/(dist||1))*out+swirl*(dx)*inv)*shell*0.6+10*Math.exp(-r*r);
}
}
set_bnd(1,U);set_bnd(2,V);
}
function reset(){
for(let k=0;k<SIZE;k++){
U[k]=V[k]=U0[k]=V0[k]=D[k]=D0[k]=P[k]=DIV[k]=CURL[k]=0;
}
initDrop();
}
function step(){
vorticity_confinement(U,V);
U0.set(U);V0.set(V);
diffuse(1,U,U0,visc,dt);
diffuse(2,V,V0,visc,dt);
project(U,V,P,DIV);
U0.set(U);V0.set(V);
advect(1,U,U0,U0,V0,dt);
advect(2,V,V0,U0,V0,dt);
project(U,V,P,DIV);
clampVel();
D0.set(D);
diffuse(0,D,D0,diff,dt);
D0.set(D);
advect(0,D,D0,U,V,dt);
for(let k=0;k<SIZE;k++)D[k]*=fadeRate;
}
function render(){
const iR=8,iG=9,iB=11;
const sR=205,sG=220,sB=230;
const tR=250,tG=253,tB=255;
const bR=200,bG=222,bB=235;
for(let j=0;j<N;j++){
const fy=j/(N-1);
const wR=tR+(bR-tR)*fy;
const wG=tG+(bG-tG)*fy;
const wB=tB+(bB-tB)*fy;
const row=j*N;
for(let i=0;i<N;i++){
const id=row+i;
const d=D[id];
let r=wR,g=wG,b=wB;
if(d>0.005){
let dx=0,dy=0;
if(i>0&&i<N-1)dx=D[id+1]-D[id-1];
if(j>0&&j<N-1)dy=D[id+N]-D[id-N];
const nz=0.22;
const len=Math.sqrt(dx*dx+dy*dy+nz*nz);
const nx=-dx/len,ny=-dy/len,nnz=nz/len;
const lx=0,ly=-1,lz=0.8;
const llen=Math.sqrt(ly*ly+lz*lz);
const nly=ly/llen,nlz=lz/llen;
let diff=nx*lx+ny*nly+nnz*nlz;
if(diff<0)diff=0;
let hx=lx,hy=nly,hz=nlz+1;
const hlen=Math.sqrt(hx*hx+hy*hy+hz*hz);
hx/=hlen;hy/=hlen;hz/=hlen;
let spec=nx*hx+ny*hy+nnz*hz;
spec=spec>0?Math.pow(spec,36)*0.9:0;
let rim=(1-nnz);rim=rim*rim*d*2.2;
if(rim>1)rim=1;
const core=Math.min(1,d*2.2);
const edge=(1-core)*Math.min(1,diff+rim*0.5+0.08);
const sc=(1-core*0.75);
let ir=iR+(sR-iR)*edge+spec*255*sc;
let ig=iG+(sG-iG)*edge+spec*255*sc;
let ib=iB+(sB-iB)*edge+spec*255*sc;
if(ir>255)ir=255;if(ig>255)ig=255;if(ib>255)ib=255;
const alpha=1-Math.exp(-d*6.5);
const oma=1-alpha;
r=r*oma+ir*alpha;
g=g*oma+ig*alpha;
b=b*oma+ib*alpha;
}
const spot=topSpot[id];
r+=spot;g+=spot;b+=spot*1.02;
const base=id*4;
pixels[base]=r<0?0:r>255?255:r;
pixels[base+1]=g<0?0:g>255?255:g;
pixels[base+2]=b<0?0:b>255?255:b;
pixels[base+3]=255;
}
}
octx.putImageData(imgData,0,0);
ctx.clearRect(0,0,W,H);
ctx.drawImage(off,0,0,W,H);
}
function frame(){
step();
render();
requestAnimationFrame(frame);
}
reset();
frame();
addEventListener('pointerdown',reset);
</script>
</body>
</html>
1.34s
首Token
199
思考TPS
90.6s · ≈18,021 tok
213
输出TPS
10.9s · ≈2,324 tok
20,345
总Tokens（官方）
输入 120
总用时 104s · 平均 200 tok/s · 峰值 391 tok/s · 成本 ≈$0.081
智谱 GLM-5.1
glm-5.1
用户要求一个单文件HTML，用原生Canvas实现墨水滴入清水后扩散的流体动画。要求：
1. 真实的流体运动（平流与扩散）
2. 墨水入水瞬间向外绽放湍流、翻涌的羽状墨团
3. 分形的卷须不断弯曲、分叉
4. 缓慢消散成淡淡的云雾
5. 墨水要有密度变化：深而浓的内核、丝缕状半透明的边缘
6. 顶部柔和打光
7. 60fps
8. 不使用外部库
这是一个相当有挑战的流体模拟。我需要用纯Canvas实现一个看起来真实的墨水扩散效果。
技术方案：
- 使用网格化的密度场和速度场
- 实现Jos Stam风格的稳定流体模拟（Navier-Stokes求解器简化版）
- 添加涡度限制来增强湍流感
- 渲染密度场，应用模糊和光照
- 多次滴入墨水以保持持续效果
让我设计：
1. **流体模拟**：
- 速度场 u, v
- 密度场 density
- 添加力（涡度，对流）
- 平流：半拉格朗日
- 扩散：高斯-塞德尔迭代
- 投影：保持速度场无散度
2. **网格大小**：考虑到性能，可能用128x128或更小，但需要足够细节
- 实际上对墨水效果，可以用更低分辨率但更聪明的渲染
3. **渲染**：
- 把密度场画到canvas上
- 应用模糊（模拟扩散）
- 顶部光照效果（密度高的地方看起来更深）
- 可能用ImageData直接操作像素
让我用以下方案：
**主流体模拟**：
- 网格 N x N（N=128或160）
- 速度场 u[N*N], v[N*N]
- 密度场 dens[N*N]
- 每帧：力 → 速度平流 → 速度扩散 → 投影 → 密度平流 → 密度扩散 → 衰减
- 涡度限制增强湍流
**渲染**：
- 用ImageData逐像素绘制
- 密度→颜色映射
- 顶部光照（基于密度梯度）
**用户交互**：
- 鼠标点击添加墨水
- 自动周期性滴入
让我开始写代码：
```javascript
const N = 128; // 网格大小
const iter = 4; // 求解器迭代次数
// 场数组
let u = new Float32Array(N*N);
let v = new Float32Array(N*N);
let u_prev = new Float32Array(N*N);
let v_prev = new Float32Array(N*N);
let dens = new Float32Array(N*N);
let dens_prev = new Float32Array(N*N);
// IX索引
function IX(i, j) {
i = Math.max(0, Math.min(N-1, i));
j = Math.max(0, Math.min(N-1, j));
return i + j*N;
}
// 边界处理
function set_bnd(b, x) {
for (let i = 0; i < N; i++) {
x[IX(i, 0)] = b === 2 ? -x[IX(i, 1)] : x[IX(i, 1)];
x[IX(i, N-1)] = b === 2 ? -x[IX(i, N-2)] : x[IX(i, N-2)];
}
for (let j = 0; j < N; j++) {
x[IX(0, j)] = b === 1 ? -x[IX(1, j)] : x[IX(1, j)];
x[IX(N-1, j)] = b === 1 ? -x[IX(N-2, j)] : x[IX(N-2, j)];
}
x[IX(0,0)] = 0.5*(x[IX(1,0)]+x[IX(0,1)]);
x[IX(0,N-1)] = 0.5*(x[IX(1,N-1)]+x[IX(0,N-2)]);
x[IX(N-1,0)] = 0.5*(x[IX(N-2,0)]+x[IX(N-1,1)]);
x[IX(N-1,N-1)] = 0.5*(x[IX(N-2,N-1)]+x[IX(N-1,N-2)]);
}
// 线性求解（扩散）
function lin_solve(b, x, x0, a, c) {
const cR = 1.0/c;
for (let k = 0; k < iter; k++) {
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
x[IX(i,j)] = (x0[IX(i,j)] + a*(x[IX(i+1,j)]+x[IX(i-1,j)]+x[IX(i,j+1)]+x[IX(i,j-1)])) * cR;
}
}
set_bnd(b, x);
}
}
// 扩散
function diffuse(b, x, x0, diff, dt) {
const a = dt * diff * N * N;
lin_solve(b, x, x0, a, 1+4*a);
}
// 平流（半拉格朗日）
function advect(b, d, d0, u, v, dt) {
const dt0 = dt * N;
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
let x = i - dt0 * u[IX(i,j)];
let y = j - dt0 * v[IX(i,j)];
if (x < 0.5) x = 0.5;
if (x > N - 1.5) x = N - 1.5;
if (y < 0.5) y = 0.5;
if (y > N - 1.5) y = N - 1.5;
const i0 = Math.floor(x);
const i1 = i0 + 1;
const j0 = Math.floor(y);
const j1 = j0 + 1;
const s1 = x - i0;
const s0 = 1 - s1;
const t1 = y - j0;
const t0 = 1 - t1;
d[IX(i,j)] = s0 * (t0 * d0[IX(i0,j0)] + t1 * d0[IX(i0,j1)]) +
s1 * (t0 * d0[IX(i1,j0)] + t1 * d0[IX(i1,j1)]);
}
}
set_bnd(b, d);
}
// 投影（保证不可压缩）
function project(u, v, p, div) {
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
div[IX(i,j)] = -0.5 * (u[IX(i+1,j)]-u[IX(i-1,j)]+v[IX(i,j+1)]-v[IX(i,j-1)])/N;
p[IX(i,j)] = 0;
}
}
set_bnd(0, div);
set_bnd(0, p);
lin_solve(0, p, div, 1, 4);
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
u[IX(i,j)] -= 0.5 * N * (p[IX(i+1,j)]-p[IX(i-1,j)]);
v[IX(i,j)] -= 0.5 * N * (p[IX(i,j+1)]-p[IX(i,j-1)]);
}
}
set_bnd(1, u);
set_bnd(2, v);
}
// 主循环
function step(dt) {
// 速度
diffuse(1, u_prev, u, visc, dt);
diffuse(2, v_prev, v, visc, dt);
project(u_prev, v_prev, u, v);
advect(1, u, u_prev, u_prev, v_prev, dt);
advect(2, v, v_prev, u_prev, v_prev, dt);
project(u, v, u_prev, v_prev);
// 密度
diffuse(0, dens_prev, dens, diff, dt);
advect(0, dens, dens_prev, u, v, dt);
}
```
这是经典的Jos Stam流体模拟。但仅有这个看起来还是不够，因为墨水扩散有特殊的湍流羽状结构。需要：
1. **涡度增强**：通过在卷曲大的地方增加力来保持湍流
2. **多次注入墨水**：包括水平和垂直方向的小扰动
3. **更好的渲染**：密度映射颜色，光照
让我想想渲染。背景是清水，墨水是黑色。所以渲染时：
- 每个像素根据密度场决定alpha
- density = 0 时显示清水颜色（淡蓝白）
- density 高时显示墨水颜色（深黑）
- 顶部光照：根据法线方向（密度梯度）调整亮度
我想用一个高分辨率网格的渲染效果，比如canvas用512x512或更大，但模拟用128x128。
实现思路：
1. 主canvas填满屏幕（让墨水从顶部滴入）
2. 模拟在128x128网格
3. 每帧把密度场渲染到canvas
4. 用ImageData逐像素
设计美观度：
- 容器：玻璃杯效果
- 顶部打光：径向渐变
- 杯子反射高光
- 墨水密度从0到1，颜色从浅蓝→黑
实际让我重新想下。整个canvas是一个容器（杯子内部），墨水从顶部滴入。
让我开始写代码：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>墨水扩散</title>
<style>
body { margin: 0; background: #0a0a0a; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="cv"></canvas>
<script>
// ... 代码 ...
</script>
</body>
</html>
```
主要思路：
- 一个矩形容器（可以是杯子）
- 模拟水
- 顶部滴入墨水（连续滴入几帧形成羽状效果）
- 模拟流体扩散
让我开始完整实现：
```javascript
const cv = document.getElementById('cv');
const ctx = cv.getContext('2d');
// 模拟参数
const SIM_SIZE = 200; // 模拟网格大小
const N = SIM_SIZE;
// 像素分辨率
function resize() {
cv.width = window.innerWidth;
cv.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
// 流体场
const size = N * N;
const u = new Float32Array(size);
const v = new Float32Array(size);
const u_prev = new Float32Array(size);
const v_prev = new Float32Array(size);
const dens = new Float32Array(size);
const dens_prev = new Float32Array(size);
const curl = new Float32Array(size);
// 参数
const dt = 0.1;
const diff = 0.00001; // 密度扩散率
const visc = 0.000001; // 粘度
const vorticity_strength = 30;
const fade = 0.995; // 密度衰减
const vel_fade = 0.99; // 速度衰减
function IX(i, j) {
return i + j * N;
}
function set_bnd(b, x) {
for (let i = 0; i < N; i++) {
x[IX(i, 0)] = b === 2 ? -x[IX(i, 1)] : x[IX(i, 1)];
x[IX(i, N-1)] = b === 2 ? -x[IX(i, N-2)] : x[IX(i, N-2)];
}
for (let j = 0; j < N; j++) {
x[IX(0, j)] = b === 1 ? -x[IX(1, j)] : x[IX(1, j)];
x[IX(N-1, j)] = b === 1 ? -x[IX(N-2, j)] : x[IX(N-2, j)];
}
}
function lin_solve(b, x, x0, a, c) {
const invC = 1.0 / c;
for (let k = 0; k < 4; k++) {
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
x[IX(i,j)] = (x0[IX(i,j)] + a*(x[IX(i+1,j)]+x[IX(i-1,j)]+x[IX(i,j+1)]+x[IX(i,j-1)])) * invC;
}
}
set_bnd(b, x);
}
}
function diffuse(b, x, x0, diffRate, dt) {
const a = dt * diffRate * N * N;
lin_solve(b, x, x0, a, 1+4*a);
}
function advect(b, d, d0, u, v, dt) {
const dt0 = dt * N;
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
let x = i - dt0 * u[IX(i,j)];
let y = j - dt0 * v[IX(i,j)];
if (x < 0.5) x = 0.5;
if (x > N - 1.5) x = N - 1.5;
if (y < 0.5) y = 0.5;
if (y > N - 1.5) y = N - 1.5;
const i0 = x | 0;
const i1 = i0 + 1;
const j0 = y | 0;
const j1 = j0 + 1;
const s1 = x - i0;
const s0 = 1 - s1;
const t1 = y - j0;
const t0 = 1 - t1;
d[IX(i,j)] = s0 * (t0 * d0[IX(i0,j0)] + t1 * d0[IX(i0,j1)]) +
s1 * (t0 * d0[IX(i1,j0)] + t1 * d0[IX(i1,j1)]);
}
}
set_bnd(b, d);
}
function project(u, v, p, div) {
const h = 1.0 / N;
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
div[IX(i,j)] = -0.5 * h * (u[IX(i+1,j)]-u[IX(i-1,j)]+v[IX(i,j+1)]-v[IX(i,j-1)]);
p[IX(i,j)] = 0;
}
}
set_bnd(0, div);
set_bnd(0, p);
lin_solve(0, p, div, 1, 4);
for (let j = 1; j < N-1; j++) {
for (let i = 1; i < N-1; i++) {
u[IX(i,j)] -= 0.5 * (p[IX(i+1,j)]-p[IX(i-1,j)]) / h;
v[IX(i
⚠ 输出中断：未收到正常结束信号（多为生成耗时过长被服务端超时切断，或网络中断），下方内容可能不完整。点「重跑」重试。
这次运行已结束，但厂商没有返回最终正文流，只返回了 reasoning / 中间推理 token。上方「思考过程」已自动展开，避免结果区显示为空。
1.20s
首Token
52
思考TPS
299s · ≈15,629 tok
—
输出TPS
15,629
总Tokens（估算）
总用时 300s · 平均 52 tok/s · 峰值 306 tok/s · 成本 ≈$0.069
智谱 GLM-5.2
glm-5.2
用户想要一个墨水滴入水中扩散的动画。这是一个非常经典的流体模拟场景。让我仔细思考如何用 Canvas 实现真实的墨水扩散效果。
核心要求：
1. 真实的流体运动（平流+扩散），不是简单放大圆
2. 分形卷须、弯曲分叉、羽状墨团
3. 深浓内核 + 丝缕半透明边缘
4. 缓慢消散成云雾
5. 顶部柔和打光
6. 60fps，单文件，原生 Canvas
实现思路：
**方案：反应扩散 + 多层墨团粒子系统**
考虑到性能和效果，我倾向于用一个混合方案：
1. **底层：密度场（grid-based advection-diffusion）**
- 用一个低分辨率的网格存储墨水密度
- 每帧执行：扩散+ 平流（advection - 由速度场搬运密度）
- 速度场由涡旋噪声生成
2. **叠加层：粒子卷须系统**
- 模拟分形分叉的卷须
- 每个卷须是一条粒子链，受涡旋场影响
- 可以分叉生成子卷须
但是真正的流体模拟在JS里跑60fps比较吃力。让我换一个更巧妙的方法：
**实用方案：**
- 使用 Canvas 2D 的 globalCompositeOperation 来累积墨迹
- 主循环用粒子系统：每个粒子是一条"墨丝"，由多个相连的点组成
- 每个粒子根据 curl noise（旋度噪声）流动，产生湍流感
- 粒子会分叉
- 用径向梯度绘制内核+晕染
- 用滤镜模糊来产生扩散感
- 用合成模式叠加产生云雾感
Curl noise 是关键 —— 它产生无散度的速度场，能让粒子像流体一样卷曲流动，不会聚集也不会散开，这正是墨水扩散的视觉特征。
让我设计具体代码：
```javascript
// Perlin/Simplex noise
// Velocity field = curl of noise scalar field
// vx = dN/dy, vy = -dN/dx (90度旋转梯度)
// Ink particles
class InkParticle {
constructor(x, y, life) {
this.x = x; this.y = y;
this.px = x; this.py = y; // previous position
this.life = life;
this.maxLife = life;
this.size = ...;
this.density = ...; // 0..1
}
update(dt, curlField) {
// sample velocity
const v = curlField.sample(this.x, this.y, time);
this.px = this.x;
this.py = this.y;
this.x += v.x * dt;
this.y += v.y * dt;
this.life -= dt;
}
draw(ctx) {
const alpha = this.life / this.maxLife;
// draw as line from (px,py) to (x,y) with proper alpha and size
}
}
```
让我考虑下视觉细节：
- 背景：水的颜色，深蓝色或者带点青色，让墨水黑得明显。可以用径向渐变营造杯壁感
- 顶部光源：从上往下的高光
- 墨滴落下的瞬间：从顶部下落，撞到水里炸开
实际上看用户的描述"墨水入水瞬间应向外绽放出湍流、翻涌的羽状墨团"，所以应该是顶部下落→触底爆炸式扩散。
让我实现一个版本：
1. **背景层**：杯水的渐变 + 顶部高光
2. **墨水扩散层**：用离屏 canvas 累积绘制墨迹
3. **粒子系统**：curl noise 驱动的墨丝
4. **核心墨团**：高密度的中心
5. **消散阶段**：模糊+渐隐
Curl noise 实现：
```javascript
function noise(x, y) { /* perlin */ }
function curl(x, y, t) {
const eps = 0.01;
const n1 = noise(x, y + eps, t);
const n2 = noise(x, y - eps, t);
const n3 = noise(x + eps, y, t);
const n4 = noise(x - eps, y, t);
return {
x: (n1 - n2) / (2 * eps),
y: -(n3 - n4) / (2 * eps)
};
}
```
Perlin noise 我需要一个简化实现。或者用 simplex noise。
让我重新组织代码结构：
```
// 1. Noise function (Perlin/Simplex)
// 2. Curl noise
// 3. Velocity field that evolves with time
// 4. Ink particle system
// - Main blob (dense core)
// - Tendrils (curved filaments)
// - Mist (fading particles)
// 5. Render layers:
// - Background (water)
// - Top light
// - Ink (accumulated)
// - Foreground highlights
```
我准备用以下技术：
**1. 流场：**
- 使用一个时变的 Perlin/Simplex 噪声
- curl noise 产生无散度速度场
- 多个尺度的噪声叠加，产生大漩涡 + 小涡流
**2. 墨滴落水瞬间：**
- 触发一个"爆发"事件，从中心点释放大量粒子
- 粒子有初始向外速度（爆炸感）
- 之后受 curl noise 影响，开始翻滚
**3. 墨水粒子：**
- 每个粒子记录轨迹（前几帧的位置）
- 用 quadraticCurveTo 平滑绘制
- 粒子大小、密度、不透明度随生命周期变化
- 粒子会"分裂"：低概率产生子粒子
**4. 内核：**
- 用径向渐变绘制中心墨团
- 跟随流场缓慢变形
**5. 整体消散：**
- 用 globalAlpha 在每帧之前轻微擦除之前的内容（trail 效果）
- 或者用 filter: blur 来慢慢模糊化
让我开始写代码：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>墨滴扩散</title>
<style>
body { margin:0; background:#050810; overflow:hidden; }
canvas { display:block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
// ... 实现 ...
</script>
</body>
</html>
```
现在写实现：
```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { alpha: false });
let W, H;
function resize() {
W = canvas.width = innerWidth * devicePixelRatio;
H = canvas.height = innerHeight * devicePixelRatio;
canvas.style.width = innerWidth + 'px';
canvas.style.height = innerHeight + 'px';
}
resize();
addEventListener('resize', resize);
// --- Perlin noise (Ken Perlin 改进版) ---
const perm = new Uint8Array(512);
(function() {
const p = new Uint8Array(256);
for (let i = 0; i < 256; i++) p[i] = i;
for (let i = 255; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[p[i], p[j]] = [p[j], p[i]];
}
for (let i = 0; i < 512; i++) perm[i] = p[i & 255];
})();
function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
function lerp(a, b, t) { return a + (b - a) * t; }
function grad(hash, x, y, z) {
const h = hash & 15;
const u = h < 8 ? x : y;
const v = h < 4 ? y : (h === 12 || h === 14 ? x : z);
return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
}
function noise3(x, y, z) {
const X = Math.floor(x) & 255;
const Y = Math.floor(y) & 255;
const Z = Math.floor(z) & 255;
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
const u = fade(x), v = fade(y), w = fade(z);
const A = perm[X] + Y, AA = perm[A] + Z, AB = perm[A + 1] + Z;
const B = perm[X + 1] + Y, BA = perm[B] + Z, BB = perm[B + 1] + Z;
return lerp(
lerp(
lerp(grad(perm[AA], x, y, z), grad(perm[BA], x - 1, y, z), u),
lerp(grad(perm[AB], x, y - 1, z), grad(perm[BB], x - 1, y - 1, z), u),
v
),
lerp(
lerp(grad(perm[AA + 1], x, y, z - 1), grad(perm[BA + 1], x - 1, y, z - 1), u),
lerp(grad(perm[AB + 1], x, y - 1, z - 1), grad(perm[BB + 1], x - 1, y - 1, z - 1), u),
v
),
w
);
}
// curl noise (2D)
function curl(x, y, t) {
const eps = 1.0;
// sample noise at offsets
const n_yp = noise3(x * 0.002, (y + eps) * 0.002, t);
const n_yn = noise3(x * 0.002, (y - eps) * 0.002, t);
const n_xp = noise3((x + eps) * 0.002, y * 0.002, t);
const n_xn = noise3((x - eps) * 0.002, y * 0.002, t);
const cx = (n_yp - n_yn) / (2 * eps);
const cy = -(n_xp - n_xn) / (2 * eps);
return { x: cx, y: cy };
}
```
注意：上面的 curl 实现，eps 太小会导致 noise 几乎采样同一点（因为 noise 频率已经压缩），需要小心。让我修正一下：
```javascript
function curl(x, y, t) {
const eps = 0.0008; // matches noise scale
const n_yp = noise3(x, y + eps, t);
const n_yn = noise3(x, y - eps, t);
const n_xp = noise3(x + eps, y, t);
const n_xn = noise3(x - eps, y, t);
const cx = (n_yp - n_yn) / (2 * eps);
const cy = -(n_xp - n_xn) / (2 * eps);
return { x: cx, y: cy };
}
// sample: curl(x * 0.001, y * 0.001, t * 0.1)
```
让我重新组织。我会让 noise 函数接受世界坐标，并内部缩放：
```javascript
function flowAt(x, y, t) {
const sx = x * 0.0008;
const sy = y * 0.0008;
const eps = 0.01;
const n1 = noise3(sx, sy + eps, t);
const n2 = noise3(sx, sy - eps, t);
const n3 = noise3(sx + eps, sy, t);
const n4 = noise3(sx - eps, sy, t);
let vx = (n1 - n2) / (2 * eps) * 8000;
let vy = -(n3 - n4) / (2 * eps) * 8000;
// 第二个尺度的噪声（小涡流）
// ...
return { x: vx, y: vy };
}
```
现在粒子系统：
```javascript
class Particle {
constructor(x, y, vx, vy, density, life, size) {
this.x = x; this.y = y;
this.vx = vx; this.vy = vy;
this.density = density; // 0..1, 影响透明度
this.life = life;
this.maxLife = life;
this.size = size;
this.trail = []; // 轨迹点
this.maxTrail = 8;
this.dead = false;
}
update(dt, time) {
// 平流：受流场影响
const f = flowAt(this.x, this.y, time);
// 强度系数：随生命周期衰减
const lifeRatio = this.life / this.maxLife;
const flowStrength = 200;
this.vx = this.vx * 0.96 + f.x * 0.04 * flowStrength;
this.vy = this.vy * 0.96 + f.y * 0.04 * flowStrength;
// 一些下沉（墨水比水重）
this.vy += 5 * dt;
// 阻尼
this.vx *= 0.98;
this.vy *= 0.98;
// 移动
this.x += this.vx * dt;
this.y += this.vy * dt;
// 轨迹
this.trail.push({ x: this.x, y: this.y });
if (this.trail.length > this.maxTrail) this.trail.shift();
this.life -= dt;
if (this.life <= 0) this.dead = true;
}
draw(ctx) {
const lifeRatio = Math.max(0, this.life / this.maxLife);
const alpha = lifeRatio * this.density;
if (alpha < 0.01) return;
// 用轨迹画线
if (this.trail.length > 1) {
ctx.strokeStyle = `rgba(5, 5, 12, ${alpha * 0.3})`;
ctx.lineWidth = this.size * lifeRatio;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(this.trail[0].x, this.trail[0].y);
for (let i = 1; i < this.trail.length; i++) {
ctx.lineTo(this.trail[i].x, this.trail[i].y);
}
ctx.stroke();
}
// 画一个圆形
const grad = ctx.createRadialGradient(this.x
⚠ 输出中断：未收到正常结束信号（多为生成耗时过长被服务端超时切断，或网络中断），下方内容可能不完整。点「重跑」重试。
这次运行已结束，但厂商没有返回最终正文流，只返回了 reasoning / 中间推理 token。上方「思考过程」已自动展开，避免结果区显示为空。
2.48s
首Token
48
思考TPS
298s · ≈14,422 tok
—
输出TPS
14,422
总Tokens（估算）
总用时 300s · 平均 48 tok/s · 峰值 237 tok/s · 成本 ≈$0.063