如何在p5.js中不使用内置rotate()函数实现点的旋转

实现原理 #

点绕指定中心旋转的计算依赖二维旋转矩阵，无需调用p5内置的变换方法，只需要基础三角函数计算即可完成：

1. 先将待旋转的点做坐标平移，把旋转中心移动到坐标系原点
2. 应用旋转矩阵计算旋转后的相对坐标
3. 将坐标平移回原坐标系，得到最终的绝对坐标

具体计算公式 #

设待旋转点的坐标为 (x, y)，旋转中心坐标为 (cx, cy)，旋转角度为 angle（单位为弧度，顺时针旋转为正方向），则旋转后的新坐标 (newX, newY) 计算方式如下：

// 第一步：平移坐标，将旋转中心设为原点
let translatedX = x - cx;
let translatedY = y - cy;
// 第二步：应用旋转矩阵
let rotatedX = translatedX * cos(angle) - translatedY * sin(angle);
let rotatedY = translatedX * sin(angle) + translatedY * cos(angle);
// 第三步：平移回原坐标系
let newX = rotatedX + cx;
let newY = rotatedY + cy;

可复用函数封装 #

你可以直接封装成通用函数，在需要旋转点的时候调用：

// 入参说明：
// x, y: 待旋转点的原始坐标
// cx, cy: 旋转中心的坐标
// angle: 旋转角度（弧度制，如需传入角度可先用radians(角度值)转换）
function rotatePoint(x, y, cx, cy, angle) {
  const cosA = cos(angle);
  const sinA = sin(angle);
  const tx = x - cx;
  const ty = y - cy;
  return [
    tx * cosA - ty * sinA + cx,
    tx * sinA + ty * cosA + cy
  ];
}

结合你的代码的使用示例 #

比如你代码中(x,y)是1号点的位置，你如果要让(x+30, y-10)这个线的端点绕1号点旋转45度，可以这么写：

// 计算旋转后的端点坐标
const [lineEndX, lineEndY] = rotatePoint(x+30, y-10, x, y, radians(45));
// 绘制旋转后的线
line(x, y, lineEndX, lineEndY);

补充说明 #

如果你之后想要用内置rotate实现绕指定点旋转，也可以通过变换组合实现，逻辑和上面的计算是一致的：

push(); // 保存当前画布状态
translate(cx, cy); // 移动坐标系原点到旋转中心
rotate(angle); // 旋转坐标系
// 此时绘制的元素会绕(cx, cy)旋转，坐标直接填相对于(cx, cy)的坐标即可
line(0, 0, 30, -10);
pop(); // 恢复画布状态，不会影响后续绘制

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