根据鼠标位置的运动图像离开轨迹和方向移动-处理

时间:2019-01-12 19:30:39

标签: processing

因此,我设法进行了大部分练习,但是想不出一种方法来制作运动图像。此外,视频球中的鼠标沿鼠标位置的方向移动。

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

这是它的外观:https://streamable.com/9jdc3

我的代码:

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;
  }
}

1 个答案:

答案 0 :(得分: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);

它根据速度在球后方绘制火球。因此,更快意味着更多的距离。您当然可以调整此距离。如果要使用多个火球作为拖尾效果,请以不同的偏移量多次绘制火球。

最后一点:您要最后画一个球,否则火球将被画成正常球的一半。