gpt4 book ai didi

javascript - JS - 将二维向量变成曲线?

转载 作者:行者123 更新时间:2023-11-30 15:53:20 25 4
gpt4 key购买 nike

我在 Canvas 上有两个点 (x/y),可以使用 requestanimationframe 或 setinterval 在它们之间直线移动图像。

然而,相反,我想以某种方式?!,在曲线动画中移动对象,这取决于速度 x/y 的矢量组合,尤其是 s(步长)我创建了这个 JSBin:

http://jsbin.com/furomu/edit?html,js,console,output -(点击初始化)。

是否有可能以某种方式将这个“矢量”变成某种曲线以绘制平滑的运动?如果不是,我还需要什么其他值才能将其变成曲线运动?

  //start at 50,50
//move to 150,125
// Vector is 100/75 or v +1/+0.75 at 100 steps


function Move(ox, oy, x, y){
this.ox = ox;
this.oy = oy;
this.x = x
this.y = y
this.p;
this.v = {x: x - ox, y: y - oy};

this.setup = function(){

var p = {};
var v = this.v;

if (this.x > this.y){
p.s = v.y;
p.y = 1;
p.x = v.x/v.y;
}
else {
p.s = v.x;
p.x = 1;
p.y = v.y/v.x;
}

this.p = p;
}

this.setup();
}


function Ship(x, y){
this.x = x;
this.y = y;

this.moves = [];

this.draw = function(){
this.drawSelf();
this.drawTarget();
}

this.create = function(){
var move = new Move(this.x, this.y, 150, 125);
this.moves.push(move);
}

this.update = function(){
var m = this.moves[0];
var self = this;

anim = setInterval(function(){
ctx.clearRect(0, 0, res, res);
self.x += m.p.x;
self.y += m.p.y;
m.p.s--;

self.draw();

if (m.p.s == 0){
clearInterval(anim);
}
}, 30);
}

this.create();
this.draw();
this.update();
}

function init(){
var ship = new Ship(50, 50);
}

最佳答案

关于这个话题有一些有用的信息here

基本上,您需要一个或多个控制点来将您的矢量“弯曲”成一条曲线。

enter image description here enter image description here

这可以通过以下针对单个控制点的公式来实现:[x,y]=(1–t)²P0+2(1–t)tP1+t2²P2

t=0时,右侧等于第一个控制点——线段的起点。当t=1时,我们得到点P1,即第二个控制点和线段的终点。

关于javascript - JS - 将二维向量变成曲线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38976882/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com