p5.js中用lerp线性插值实现线条随鼠标旋转出现跳变，如何解决？

我用p5.js实现了绕支点旋转的线条，通过atan2让线条指向鼠标，效果正常。但尝试用lerp做平滑过渡时，线条在特定位置会出现跳变，而非平滑旋转。

问题原因 #

问题出在角度的环形特性上：atan2返回的角度范围是**-π到π**（对应-180°到180°），当鼠标移动导致目标角度从π附近（比如170°）跳转到-π附近（比如-170°）时，两个角度的数值差接近2π，但实际最短旋转路径只需要转20°。直接用lerp对角度数值插值时，会沿着数值差的方向走最长路径，导致线条出现跳变或绕大圈的情况。

解决方案 #

需要使用环形角度插值，也就是计算两个角度之间的最短旋转路径，再做平滑过渡。以下是两种实现方式：

方式一：使用p5.js内置的angleLerp函数 #

p5.js 0.10.0及以上版本提供了angleLerp(a, b, t)函数，专门处理角度的环形插值，自动计算最短路径。

修改后的代码：

let rot = 0;

function setup() {
  createCanvas(600, 300);
}

function draw() {
  const v1 = createVector(width / 2 - 50, height / 2);
  const lineLength = 100; // 原线条长度为100

  background(255);
  stroke(0);
  strokeWeight(4);

  // 计算从支点指向鼠标的目标角度
  const targetAngle = atan2(mouseY - v1.y, mouseX - v1.x);
  // 用angleLerp做环形平滑插值
  rot = angleLerp(rot, targetAngle, 0.1);

  push();
  translate(v1.x, v1.y);
  rotate(rot);
  // 旋转后直接绘制固定长度的线条，逻辑更简洁
  line(0, 0, lineLength, 0);
  strokeWeight(10);
  point(0, 0); // 支点
  point(lineLength, 0); // 线条端点
  pop();
}

方式二：手动实现环形角度插值 #

如果你的p5.js版本较低，不支持angleLerp，可以手动计算最短路径的角度差：

let rot = 0;

function setup() {
  createCanvas(600, 300);
}

function draw() {
  const v1 = createVector(width / 2 - 50, height / 2);
  const lineLength = 100;

  background(255);
  stroke(0);
  strokeWeight(4);

  const targetAngle = atan2(mouseY - v1.y, mouseX - v1.x);
  // 计算角度差并调整到-π到π范围（最短路径）
  let angleDiff = targetAngle - rot;
  angleDiff = angleDiff % (TWO_PI);
  // 若差值超过π，取反向的小角度
  if (angleDiff > PI) {
    angleDiff -= TWO_PI;
  } else if (angleDiff < -PI) {
    angleDiff += TWO_PI;
  }
  // 用调整后的差值更新角度，实现平滑旋转
  rot += angleDiff * 0.1;

  push();
  translate(v1.x, v1.y);
  rotate(rot);
  line(0, 0, lineLength, 0);
  strokeWeight(10);
  point(0, 0);
  point(lineLength, 0);
  pop();
}

关键优化点 #

两种方式的核心都是确保插值沿着角度的最短路径进行，避免跨-π/π边界时的跳变；同时优化了线条绘制逻辑，无需预先定义端点坐标，旋转后直接绘制固定长度的线条，代码更简洁高效。

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