在画布中制作和动画波形 [英] Make and animate wave in canvas
问题描述
我在寻找一种在画布上设计的形状来创建波浪的方法。
I’m looking for a way to create a wave in a shape designed in canvas.
经过大量研究，我发现了一些非常接近我想要的东西：
After much research I found something that is pretty close to what I want:
http://codepen.io/jackrugile / pen / BvLHg
问题是波的移动看起来有点不真实。我想保持这个随机运动的概念，没有一个从左到右重复自己的形状，但如果我找到一种方式来创造一个现实的水运动（良好的流体动力学，碰撞这个波与其容器（自定义形状）的边缘）。
The problem is that the movement of the wave appears a bit unreal. I'd like to keep this notion of random motion and not have a shape that repeats itself by moving from left to right but it will be great if I found a way to create a ‘realistic’ water movement (good fluid dynamics, collisions of this wave with the edges of its container (custom shape)).
我想我问了很多，但...小线的研究可以帮助:)
I think I'm asking a lot but ... A small line of research could help :)
推荐答案
干扰
Interference
You can make a more realistic wave using interference.
- 有一个大波浪（大浪）慢跑，大动作
- 使用平均值水平混合波形并计算各个点
- 使用基本样条绘制结果（或者如果分辨率较高，您只需在点之间绘制简单的线条）。
- Have one big wave (swell) running slowly with a big motion
- Have another one or two smaller sine waves running (oscillators)
- All with random amplitudes
- Mix the waves horizontally using average and calculate the various points
- Draw the result using a cardinal spline (or if the resolution is high you can just draw simple lines between the points instead).
使用各种参数，你可以调整它现场以找到一个好的组合。
Use various parameters so you can adjust it live to find a good combination.
你也可以添加振荡器来表示z轴，
You can also add oscillators to represent the z axis to make it more realistic in case you want to layer the waves to make a pseudo-3D wave.
我不能给你波浪碰撞，流体动力学 - 这将是一个有点太宽的SO，但我可以给你一个流体的Ish波的例子（因为你有每个段的点，你可以使用它的碰撞检测）。
I cannot give you wave collision, fluid dynamics - that would be a bit too broad for SO but I can give you a fluid-ish wave example (as you have the point of each segment you can use that for collision detection).
例如，创建一个振荡器对象，你可以设置各种设置，如幅度，旋转速度（相位）等。
And example would be to create an oscillator object which you could set the various settings on such as amplitude, rotation speed (phase) etc.
然后有一个混音功能，可以混合您使用的这些振荡器的结果。
Then have a mixer function which mixes the result of these oscillators that you use.
此演示中的振荡器对象如下所示：
function osc() {
/// various settings
this.variation = 0.4; /// how much variation between random and max
this.max = 100; /// max amplitude (radius)
this.speed = 0.02; /// rotation speed (for radians)
var me = this, /// keep reference to 'this' (getMax)
a = 0, /// current angle
max = getMax(); /// create a temp. current max
/// this will be called by mixer
this.getAmp = function() {
a += this.speed; /// add to rotation angle
if (a >= 2.0) { /// at break, reset (see note)
a = 0;
max = getMax();
}
/// calculate y position
return max * Math.sin(a * Math.PI) + this.horizon;
}
function getMax() {
return Math.random() * me.max * me.variation +
me.max * (1 - me.variation);
}
return this;
}
这样做对我们所有的设置和计算，我们需要做的是调用 getAmp（）为每个帧获取一个新值。
This do all the setup and calculations for us and all we need to do is to call the getAmp() to get a new value for each frame.
使用混音器。这个混音器允许我们添加我们想要的混音器：
Instead of doing it manually we can use a "mixer". This mixer allows us to add as many oscillators we want to the mix:
function mixer() {
var d = arguments.length, /// number of arguments
i = d, /// initialize counter
sum = 0; /// sum of y-points
if (d < 1) return horizon; /// if none, return
while(i--) sum += arguments[i].getAmp(); /// call getAmp and sum
return sum / d + horizon; /// get average and add horizon
}
在一个方向上移动点的记录器将产生流体看波。
Putting this in a loop with a point recorder which shifts the point in one direction will create a fluid looking wave.
上面的演示使用三个振荡器。在这方面的一个提示是保持旋转速度低于大的膨胀，否则你会得到小的颠簸。）
The demo above uses three oscillators. (A tip in that regard is to keep the rotation speed lower than the big swell or else you will get small bumps on it.)
注意：我创建一个新的随机最大不是最好的方式，因为我使用断点（但简单的演示目的）。你可以用更好的东西代替它。
NOTE: The way I create a new random max is not the best way as I use a break point (but simple for demo purpose). You can instead replace this with something better.
这篇关于在画布中制作和动画波形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
