移动图像根据鼠标位置留下轨迹和定向移动-处理

Question

所以我设法完成了大部分练习，但想不出一种方法来制作移动图像的轨迹。另外，在视频中小球会朝着鼠标位置的方向移动。

但是，当我尝试这样做时，鼠标位置每次都在变化，并且球在移动时跟随鼠标。必须使用鼠标位置来计算速度。任何帮助将不胜感激。

我的代码：

PImage ball, bFire;
int xPosB, yPosB, bW, bH, bFW, bFH, velocityX, velocityY;
boolean bMoving;

void setup() {
  size(1024, 512);

  //loading images
  ball = loadImage("ball.png");
  bFire = loadImage("ballFire.png");

  //resizing images
  ball.resize(ball.width/4, ball.height/4);
  bFire.resize(bFire.width/4, bFire.height/4);

  //starting values
  //ball
  xPosB = width/2;
  yPosB = height/2;
}
void draw() {
  background(0);

  //draw ball
  imageMode(CENTER);
  image(ball, xPosB, yPosB);

  //draw fire ball
  if (bMoving) {
    image(bFire, xPosB, yPosB);
    xPosB+=velocityX;
    yPosB+=velocityY;
  }

  //colision detection
  if (xPosB-bFire.width/2 <= 0 || xPosB+bFire.width/2 >= width) {
    velocityX*=-1;
  } else if (yPosB-bFire.height/2 <= 0 || yPosB+bFire.height/2 >= height) {
    velocityY*=-1;
  }
}

void mousePressed() {
  if (mouseButton == LEFT) {
    bMoving=!bMoving;
    velocityX = mouseX/100;
    velocityY = mouseY/100;
  }
}

Answer 1

我无法重现您描述的问题 - 球跟随鼠标。

我可以告诉你，你使用的 mousepressed() 是不正确的。
您指定了速度，但由于 mouseX 和 mouseY 始终为正，球将始终向右和向下移动。

试试下面的代码，它将速度设置为鼠标和球的当前位置之间的差异。小球现在将始终向鼠标移动。

void mousePressed() {
  if (mouseButton == LEFT) {
    bMoving=!bMoving;
    velocityX = (mouseX - xPosB) / 50;
    velocityY = (mouseY - yPosB) / 50;
  }

第二点：我不知道你的 ballFire.png 看起来如何，但现在它被绘制在与球完全相同的 X/Y 位置。这不能给你一个拖尾效果，因为你必须把火球画在球后面一点。

试试下面的代码：

//draw fire ball
  if (bMoving) {
    image(bFire, xPosB-velocityX, yPosB-velocityY);
    xPosB+=velocityX;
    yPosB+=velocityY;
  }

  //draw ball
  imageMode(CENTER);
  image(ball, xPosB, yPosB);

它根据速度在球后绘制火球。所以更快意味着更远的距离。你当然可以调整这个距离。如果你想要多个火球作为拖尾效果，多次绘制不同偏移量的火球。

最后注意：你要最后画球，否则火球会画到普通球的一半。

移动图像根据鼠标位置留下轨迹和定向移动-处理

Moving image leaving trail and directional movement according to mouse position -Processing

processing