javascript - 在带有纹理的圆形路径上 Canvas 水/ Blob 物理？

Question

这是我多年来依赖这个网站后的第一个问题!

无论如何，我想完成类似这种效果的事情:

http://www.flashmonkey.co.uk/html5/wave-physics/

但在圆形路径上，而不是地平线上。本质上，屏幕中央的 float 圆圈/ Blob 会对鼠标交互使用react。我不是在寻找重力，也不是在屏幕周围弹跳的圆圈 - 只是表面波纹。

如果可能的话，我想对形状应用静态纹理，这有可能吗？我是 Canvas 的新手!

我已经尝试用以下链接中的循环代码替换上面示例中的一些代码，但取得的成功非常有限:

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

要是这么简单就好了:)

有什么想法吗？

提前致谢!

Answer 1

我试图通过查看源代码和 JavaScript 控制台弄清楚波浪模拟的工作原理。它工作正常但引发了一些 JS 错误。此外，物理更新似乎与 render() 方法中的渲染纠缠在一起。

这是我发现的有关代码的内容:

mouseMove() 方法根据鼠标位置在波浪上产生扰动，从而在鼠标周围形成波峰。 target 变量是需要更新的粒子的索引，它是根据鼠标位置计算的。

if (particle && mouseY > particle.y) {
    var speed = mouseY - storeY;

    particles[target - 2].vy = speed / 6;
    particles[target - 1].vy = speed / 5;
    particles[target].vy = speed / 3;
    particles[target + 1].vy = speed / 5;
    particles[target + 2].vy = speed / 6;

    storeY = mouseY;
}

然后，更新 target 周围的粒子。我发现的问题是它不进行边界检查，即当 target == 0 时它可能有 particles[-1]。如果发生这种情况，将抛出异常，方法调用结束，但代码不会停止。

render() 方法首先更新粒子位置，然后渲染波浪。

这是它的物理代码:

for (var u = particles.length - 1; u >= 0; --u) {
    var fExtensionY = 0;
    var fForceY = 0;

    if (u > 0) {
        fExtensionY = particles[u - 1].y - particles[u].y - springs[u - 1].iLengthY;
        fForceY += -fK * fExtensionY;
    }

    if (u < particles.length - 1) {
        fExtensionY = particles[u].y - particles[u + 1].y - springs[u].iLengthY;
        fForceY += fK * fExtensionY;
    }

    fExtensionY = particles[u].y - particles[u].origY;
    fForceY += fK / 15 * fExtensionY;

    particles[u].ay = -fForceY / particles[u].mass;
    particles[u].vy += particles[u].ay;
    particles[u].ypos += particles[u].vy;
    particles[u].vy /= 1.04;
}

基本上，它是 Hooke's Law对于由它们之间的 Spring 连接的粒子链。对于每个粒子 u，它将对前一个和下一个粒子的吸引力(if 语句检查它们是否可用)添加到变量 fForceY。我不完全理解 springs 数组的用途。

在最后四行中，它计算加速度(力/质量)，更新速度(添加加速度)，然后更新位置(添加速度)，最后，将速度降低 1.04(摩擦力)。

物理更新后，代码渲染波浪:

context.clearRect(0, 0, stageWidth, stageHeight);
context.fillStyle = color;
context.beginPath();

for (u = 0; u < particles.length; u++) {
    ...
}

...
context.closePath();
context.fill();

我不是在解释，你需要阅读 Canvas 教程才能理解它。

---

这里有一些开始的想法，请注意，我没有测试这些代码。

要修改代码绘制圆形波浪，我们需要引入一个polar coordinate system ，其中粒子的 x 位置是圆中的 Angular ，y 位置是距中心的距离。我们应该在这里使用 theta 和 r 但它需要大量的重构。后面我们再说转型。

mouseMove():计算从鼠标在屏幕上的位置到极坐标的粒子索引，并确保扰动环绕:

定义函数(在 mouseMove() 之外，我们稍后会再次需要它)

 function wrapAround(i, a) { return (i + a.length) % a.length; }

然后改变

 particles[target - 2] --> particles[wrapAround(target - 2, particles)]
 particles[target - 1] --> particles[wrapAround(target - 1, particles)]
 ...

模运算符完成了这项工作，但我添加了 particles.length 所以我没有 modulo一个负数。

render():确保力计算环绕，所以我们需要再次wrapAround函数。我们可以去除两个 if 语句:

    fExtensionY = particles[wrapAround(u - 1, particles)].y - particles[u].y - springs[wrapAround(u - 1, springs)].iLengthY;
    fForceY += -fK * fExtensionY;

    fExtensionY = particles[u].y - particles[wrapAround(u + 1, particles)].y - springs[warpAround(u, springs)].iLengthY;
    fForceY += fK * fExtensionY;

这是目前在 jsfiddle 中的结果:注意波从另一侧传播。 http://jsfiddle.net/DM68M/

完成之后，最难的部分就是将它们渲染成一个圆圈。为此，我们需要将粒子的 (x, y) 视为 (圆中的 Angular ，距中心的距离) 的坐标变换函数，我们还需要逆变换mouseMove() 中的鼠标交互。

 function particleCoordsToScreenCoords(particleX, particleY) {
   return [ radiusFactor * particleY * Math.cos(particleX / angleFactor),
            radiusFactor * particleY * Math.sin(particleX / angleFactor) ];
 }

 function screenCoordsToParticleCoords(screenX, screenY) {
   // something involving Math.atan2 and Math.sqrt
 }

...Factor 变量需要单独确定。 angleFactor 是粒子数组中找到的最高 x 位置的两个 pi

然后，在提供给 context.lineTo, context.arc 的坐标中，使用 particleCoordsToScreenCoords 转换坐标。