如何使粒子对象跟随鼠标移动

Question

我希望粒子对象在移动时仅跟随mouseX和mouseY位置。我可以用mouseX和Y替换“原点”值吗？

  void run() {
    update();
    display();
  }

  // Method to update position
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    lifespan -= 2.0;
  }

    // Method to display
  void display() {
    stroke(0, lifespan);
    strokeWeight(2);
    fill(127, lifespan);
    ellipse(location.x, location.y, 12, 12);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
 }

Answer 1

看看这个例子：

PVector pos;
PVector vel;
PVector acc;

void setup()
{
  size(400, 400);
  pos = new PVector(width / 2, height / 2);
  vel = new PVector(0, 0);
  acc = new PVector(0, 0);
}

void draw()
{
  background(255);
  followMouse();
  update();
  ellipse(pos.x, pos.y, 10, 10);
}

void followMouse()
{
  PVector mouse = new PVector(mouseX, mouseY);
  //calculating what acceleration would be needed to instantly reach the mouse
  acc = mouse.sub(pos);
  //reducing the acceleration to not reach the mouse instantly
  acc.mult(0.1);
}

void update()
{
  vel.add(acc);
  //dampening the velocity, so the ball gets slower when close to the mouse
  vel.mult(0.8);
  pos.add(vel);
}

Answer 2

这个示例更加简单易懂-希望对您有所帮助。

float x;
float y;
float easing = 0.05;

void setup() {
  size(640, 360); 
  noStroke();  
}

void draw() { 
  background(51);

  float targetX = mouseX;
  float dx = targetX - x;
  x += dx * easing;

  float targetY = mouseY;
  float dy = targetY - y;
  y += dy * easing;

  ellipse(x, y, 66, 66);
}

Answer 3

Processing的lerp()函数适用于此功能（因为您正在寻找要对鼠标光标 lerp 起作用的粒子）。

posX = lerp(posX, mouseX, 0.5);
posY = lerp(posY, mouseY, 0.5);

最终参数（此处为0.5）是在两个值之间进行插值的量，其中0.1非常靠近当前粒子位置； 0.5位于粒子位置和光标位置之间的中间，等等。

---

Lerp是线性插值的缩写。您可能会发现其他形式的插值（或缓动）更适合于对粒子的运动进行建模，例如Penner缓动集合中的那些：