Processing技术问题：如何让飞机触边前完成180度翻转并移动？

核心问题分析 #

• 直接围绕画布原点旋转导致飞机偏移，正确逻辑是先平移到飞机中心位置，再执行旋转，最后绘制图形。
• 当前旋转在一帧内完成多次循环，没有动画过渡，瞬间完成翻转。
• 触发翻转的条件是飞机已经出界（globalY < 0），应提前在飞机即将到达边缘时启动翻转。

修改后的完整代码 #

int globalX = 0;
int globalY = 600;
int vitesse = 3;
float rotationAngle = 0; // 跟踪当前旋转角度
boolean isRotating = false; // 是否正在执行翻转
final float TARGET_ROTATION = PI; // 180度对应的弧度值

void setup() {
  size(800, 600);
  rectMode(CENTER);
}

void draw() {
  background(255);

  pushMatrix();
  bouger();
  tourner();
  // 平移到飞机中心位置，再应用旋转
  translate(globalX + 250, globalY + 200);
  rotate(rotationAngle);
  // 以(0,0)为中心绘制飞机，配合平移操作消除偏移
  dessinerAvion(0, 0);
  popMatrix();
}

void bouger() {
  // 翻转过程中暂时停止移动，也可根据需求调整为边转边移
  if (!isRotating) {
    globalY = globalY - vitesse;
  }
}

void tourner() {
  // 提前触发翻转：当飞机顶部距离上边缘100像素时启动
  if (globalY + 100 < 100 && !isRotating) {
    isRotating = true;
  }
  
  // 逐步完成180度翻转，每次帧旋转少量角度
  if (isRotating) {
    rotationAngle += PI / 30; // 调整此值控制翻转速度
    if (rotationAngle >= TARGET_ROTATION) {
      rotationAngle = TARGET_ROTATION;
      isRotating = false;
      // 翻转完成后反向移动
      vitesse *= -1;
    }
  }
}

void dessinerAvion(int x, int y) {
  rectMode(CENTER);

  // 机身
  fill(156,21,21);
  ellipse(x, y - 100, 50, 100);
  rect(x, y, 50, 250,60);

  // 左引擎
  rect(x - 125, y + 25, 25, 50, 75);
  // 右引擎
  rect(x + 125, y + 25, 25, 50, 75);

  fill(210,14,14);
  // 左机翼
  quad(x - 175, y + 75, x - 175, y + 50, x - 25, y - 25, x - 25, y + 50);
  // 右机翼
  quad(x + 175, y + 75, x + 175, y + 50, x + 25, y - 25, x + 25, y + 50);
  
  fill(112,14,14);
  // 左尾翼
  triangle(x - 25, y + 90, x - 24, y + 110, x - 75, y + 110);
  // 右尾翼
  triangle(x + 25, y + 90, x + 24, y + 110, x + 75, y + 110);
  // 垂直尾翼
  triangle(x, y + 85, x - 2, y + 110, x + 2, y + 110);
}

关键修改点 #

• 新增rotationAngle和isRotating变量，实现逐步翻转的平滑动画，避免瞬间完成。
• 调整翻转触发条件，保证飞机在出界前启动翻转动作。
• 通过translate将坐标系移至飞机中心，再执行旋转，彻底解决偏移问题。
• 修改dessinerAvion的绘制坐标，以飞机中心为原点，配合平移操作完成正确绘制。

内容的提问来源于stack exchange，提问作者Vincent Fortier