如何在p5.js中使用平滑曲线在两个连续点之间进行插值 [英] how to interpolate between two consecutive points with a smooth curve in p5.js

问题描述

我打算让椭圆在停止点之间平稳移动，同时保持旋转.它将在(20,50)点旋转1秒，在平滑曲线(贝塞尔曲线或随机多项式)上过渡到(40,70)，旋转到3秒，然后移至(160,190)

I intend to have an ellipse move smoothly between the stop points while keep rotating. It'll rotate for 1sec at point (20,50), transition to (40,70) on a smooth curve (bezier or random polynomial) and rotate till 3sec and move on to (160,190)

当前问题是它在停止点之间跳跃而不是平稳移动.

The current issue is that it jumps between stop points rather than move smoothly.

var angle=0;
var x=[20,40,160] // x coordinates for stop points
var y=[50,70,190] // y coordinates for stop points
var t=[1000,2000,4000] // time for stop points
var i=0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
    background(220);
    frameRate(30);
    translate(x[i],y[i]);
    rotate(angle);


  if (millis() >= t[i] & millis() < t[i+1]){
    i+=1
  }

  fill(0);
  ellipse(0,0, 20, 80);
    angle++
}

推荐答案

执行此操作的方法有很多，并且您采用哪种方法取决于您希望代码的行为方式.

There are a lot of different ways to do this, and which approach you take depends on exactly how you want your code to behave.

与您的最后一个问题的答案相似，您需要在两个要点.

Similar to the answer to your last question, you need to show the movement between the points.

现在，您正在直接从一个点移动到另一个点.您需要显示中间步骤.

Right now you're moving directly from one point to another. You need to show the intermediate steps.

这里有几件值得研究的东西:

Here are a few things to look into:

• frameCount变量保存当前帧号.这对于要在特定帧上触发的行为的准确计时很有用.
• millis()函数返回草图已运行的毫秒数.这对于基于持续时间的逻辑很有用，在这种情况下，您需要在一定秒数后执行一些操作.
• lerp()函数允许您计算随时间变化的值.
• 您还可以使用增量值，在其中每帧将X和Y值移动一定量.

• The frameCount variable holds the current frame number. This is useful for exact timing of behaviors that you want to trigger on specific frames.
• The millis() function returns the number of milliseconds the sketch has been running. This is useful for duration-based logic, where you want to do something after a certain number of seconds.
• The lerp() function allows you to calculate values that change over time.
• You could also use delta values, where you move the X and Y values by some amount each frame.

这是最后一种方法的示例:

Here's an example of that last approach:

var circleX = 20;
var circleY = 20;
var mode = 'move right';

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(200);
    ellipse(circleX, circleY, 20, 20);

    if (mode == 'move right') {
        circleX++;
        if (dist(circleX, circleY, 380, 20) < 1) {
            mode = 'move down';
        }
    } else if (mode == 'move down') {
        circleY++;
        if (dist(circleX, circleY, 380, 380) < 1) {
            mode = 'move left';
        }
    } else if (mode == 'move left') {
        circleX--;
        if (dist(circleX, circleY, 20, 380) < 1) {
            mode = 'move up';
        }
    } else if (mode == 'move up') {
        circleY--;
        if (dist(circleX, circleY, 20, 20) < 1) {
            mode = 'move right';
        }
    }
}

但是请注意，这段代码只是一个示例，这里还有很多改进的余地.重要的是，您需要在每一帧中稍微移动场景，而不是直接从一个点移动到另一个点.

But please note that this code is just an example, and there's a ton of room for improvement here. The important thing is that you need to move the scene a little bit each frame, instead of going directly from one point to another.

这篇关于如何在p5.js中使用平滑曲线在两个连续点之间进行插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！