这是我多年来依赖这个网站后的第一个问题!
无论如何,我想完成类似这种效果的事情:
http://www.flashmonkey.co.uk/html5/wave-physics/
但在圆形路径上,而不是地平线上。本质上,屏幕中央的 float 圆圈/ Blob 会对鼠标交互使用react。我不是在寻找重力,也不是在屏幕周围弹跳的圆圈 - 只是表面波纹。
如果可能的话,我想对形状应用静态纹理,这有可能吗?我是 Canvas 的新手!
我已经尝试用以下链接中的循环代码替换上面示例中的一些代码,但取得的成功非常有限:
http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/
要是这么简单就好了:)
有什么想法吗?
提前致谢!
最佳答案
我试图通过查看源代码和 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
转换坐标。
关于javascript - 在带有纹理的圆形路径上 Canvas 水/ Blob 物理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24716138/