Java Processing中基于三角学实现正方形绕定点圆周运动

核心规则遵循 #

• 全程不调用translate()、rotate()等内置坐标变换函数，所有坐标计算完全基于基础三角学二维旋转公式
• 以正方形初始状态的左上角顶点为固定锚点，该点在整个动画过程中坐标保持不变，正方形绕该点完成360度连续旋转

原代码问题说明 #

• 注释掉的旋转公式是绕画布原点(0,0)的计算逻辑，缺少锚点偏移换算，无法实现绕自身顶点固定旋转的效果
• 旋转公式y分量计算错误，标准二维旋转矩阵的y轴计算项为x*sinθ + y*cosθ，原代码误用x坐标乘cos项
• 直接调用square()仅能绘制轴对齐的正方形，即使坐标计算正确也只能实现平移动画，无法呈现旋转形态，需要手动计算四个顶点坐标后用四边形绘制接口完成渲染

旋转计算逻辑 #

绕任意固定点旋转的三角学计算分三步：

1. 计算正方形所有顶点相对于固定锚点的相对坐标（锚点自身相对坐标为(0,0)）
2. 对每个相对坐标套用标准旋转公式，得到旋转后的相对坐标
3. 将旋转后的相对坐标叠加锚点的绝对画布坐标，得到顶点最终的绘制位置

修正后可运行代码 #

float angle = 0;
int rectSize = 30;
int pivotX, pivotY; // 固定不动的顶点坐标

void setup() {
  size(500, 500);
  pivotX = width/4;
  pivotY = height/10;
  fill(#B71143);
  noStroke();
}

void draw() {
  background(255); // 每帧清屏避免拖影
  angle += 0.1; // 角度增量控制旋转速度
  float cosVal = cos(angle);
  float sinVal = sin(angle);

  // 逐个计算正方形四个顶点旋转后的绝对坐标
  // 顶点1：固定锚点，坐标永远不变
  float p1x = pivotX;
  float p1y = pivotY;
  // 顶点2：初始状态下正方形右上角
  float p2x = pivotX + rectSize * cosVal;
  float p2y = pivotY + rectSize * sinVal;
  // 顶点3：初始状态下正方形右下角
  float p3x = pivotX + rectSize * cosVal - rectSize * sinVal;
  float p3y = pivotY + rectSize * sinVal + rectSize * cosVal;
  // 顶点4：初始状态下正方形左下角
  float p4x = pivotX - rectSize * sinVal;
  float p4y = pivotY + rectSize * cosVal;

  // 绘制旋转后的正方形
  quad(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y);
}

可选调整 #

• 如果需要更换固定顶点，只需要修改四个顶点的初始相对坐标即可，比如要固定初始右下角为锚点，就把四个点的初始相对坐标换算为相对于右下角的偏移值再代入计算
• 修改angle += 0.1的步长值可以调整旋转速度，步长为正顺时针旋转，为负逆时针旋转

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