如何在给定时间内使对象在p5.js中移动？

如何解决如何在给定时间内使对象在p5.js中移动？

假设我有一个1200px的画布。如何在给定的时间（例如10秒）内使对象从起点（100px）移动到终点（1000px）？以这种方式，对象从起点到终点仅需10秒钟。

到目前为止，我的代码如下：

    function setup()
{
    createCanvas(img.width,img.height);

    //Initialize x with the start value
    x = startX;
}

function draw()
{
    image(img,0);

    x = min(endX,x);
    x+=2;

    //stop the object if it's near enough to endx and endy
    if (abs(endX - x) < 30)
    {
        x = endX;
    }

    y = 114;

    //stop the object if it goes off of the screen
    x = min(x,1200);
    x = max(x,0);

    var spotlightSize = 114;

    blendMode(BLEND);
    background(10);
    image(spotlight_image,x-spotlightSize/2,y-spotlightSize/2,spotlightSize,spotlightSize);
    blendMode(DARKEST);
    image(img,0);
}

解决方法

如果帧速率是完美且恒定的，则只需将行进距离除以花费的帧数即可。结果将是您在每个帧中需要走多远。帧速率不是完美的或恒定的，但是我们将在假设帧速率理想的情况下编写程序，因为它将在以后对我们有所帮助。

您需要做的是：

1. 查找您要移动的时间会经过多少帧-将移动时间乘以每秒的帧数
2. 找到从起点到终点的位移-从终点减去起点
3. 将位移除以将要通过的帧数
4. 将每一帧移到最远，直到距离末端足够近

示例实现：（您只使用了x位置，但我使用了向量，因为它们将来可能对某人有用）

new p5();

const fps = 60; // frames per second

const startPos = createVector(100,50);
var position = startPos.copy();
const endPos = createVector(600,450);
const stopAtDist = 30; // stop if it's this far from the end point in any direction
const distToTravel = p5.Vector.sub(endPos,startPos);

const moveDurationS = 10; // Move duration in seconds
const moveDurationFrames = moveDurationS / (1 / fps); // How many frames will it take to move the distance
const distToMovePerFrame = p5.Vector.div(distToTravel,moveDurationFrames); // How far to move each frame

var currentlyMoving = true;

function setup() {
    createCanvas(800,500);
    frameRate(fps);
}

function draw() {
    background(0);

    // Draw the start pos
    stroke('yellow');
    strokeWeight(10);
    point(startPos.x,startPos.y);

    // Draw the end pos
    stroke('green');
    point(endPos.x,endPos.y);

    // Draw the current position
    stroke('red');
    point(position.x,position.y);

    // If it's currently moving,then move
    if (currentlyMoving) {
        position.add(distToMovePerFrame);
    }
    // If it is close enough to the end,then stop
    if (abs(dist(position.x,position.y,endPos.x,endPos.y)) < stopAtDist) {
        currentlyMoving = false;
    }
}

不过，帧频不是恒定的。幸运的是，p5具有告诉我们在最后一帧中经过了多少毫秒的功能。所以我们要做的是：

1. 找出您要移动的时间经过了多少毫秒-将您要移动的秒数乘以1000
2. 找出每毫秒将移动多远-将开始/结束位移除以将经过的毫秒数
3. 在每帧中，移动每毫秒的距离乘以该帧中经过的毫秒数。

这就是翻译成代码的地方：

new p5();

const fps = 60; // frames per second

const startPos = createVector(100,startPos);

const moveDurationS = 10;
const moveDurationMs = moveDurationS * 1000;
const distToMovePerMs = p5.Vector.div(distToTravel,moveDurationMs);

var currentlyMoving = true;

function setup() {
    createCanvas(800,then move
    if (currentlyMoving) {
        var thisFrameMovement = p5.Vector.mult(distToMovePerMs,deltaTime);
        position.add(thisFrameMovement);
    }
    // If it is close enough to the end,endPos.y)) < stopAtDist) {
        currentlyMoving = false;
    }
}

我测试了上面的代码，它非常准确-平均降低了0.75％。我希望这是您在答案中寻找的东西！