Ash*_*wat 2 javascript language-agnostic processing html5-canvas
假设(比如说三角形),我想将一个物体从A移动到B然后B移动到C然后C移动到A.我怎么能这样做?
我google了很多,但找不到在多边形周围移动物体(比如球)的例子.我知道,我可以用贝塞尔曲线完成它,但对于一个简单的三角形或矩形,如果没有它,我该怎么办?请用任何语言提供一些伪代码或代码.(更喜欢JavaScript/Processing).
小智 5
您可以使用插值来获取位置:
x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;
Run Code Online (Sandbox Code Playgroud)
x1, y1你的第一点,x2, y2你的终点在哪里.
f 是一个介于0.0和1.0之间的值,它决定了你在哪一行(即0 =开始,0.5是中途,1 =结束).
当您f = 1转到多边形中的下一个段并重置f为0时.
伪:
//prepare first segment:
x1 = nextX1;
y1 = nextY1;
x2 = nextX2;
y2 = nextY2;
loop:
f += speed; /// f.ex. 0.01
x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;
if f=1 then
f = 0;
x1 = nextX1;
y1 = nextY1;
x2 = nextX2;
y2 = nextY2;
repeat loop;
Run Code Online (Sandbox Code Playgroud)
JavaScript中的示例(有关完整工作示例,请参阅上面的演示链接)
function loop() {
/// leave a trace behind for demo
ctx.clearRect(x + 1, y + 1, 6, 6);
f += speed;
if (f >= 1) {
/// initialize next line in polygon (see demo)
getNextSegment();
}
/// Here: get x and y based on interpolation
x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;
/// draw something to show position
ctx.fillRect(x, y, 8, 8);
/// loop
requestAnimationFrame(loop);
}
Run Code Online (Sandbox Code Playgroud)
对于恒定速度计算起始端点之间的距离,并在该距离上划分一个步长值(预定义的固定值)speed.