如何制作始终面对同一点的三角形？

Question

在我一直从事的 p5/processing 项目中，我需要创建一条线，中间有一个三角形，该三角形始终面向线的连接点之一。创建一个静止的非常容易，但我的端点会四处移动和旋转。当线移动到这个“|”时，我需要找到一种方法来旋转小三角形由此 ” - -”。我当前的代码是这样的：

      let middleX = (fromX + toX)/2;
      let middleY = (fromY + toY)/2;
      triangle(middleX,middleY+5,middleX+5,middleY,middleX,middleY-5);
      line(fromX , fromY, toX, toY);

如您所料，这不适用于旋转。我需要帮助：）。感谢您的关注。

Answer 1

您可以：

用atan2()计算两点之间的旋转，
使用push()隔离坐标space（局部旋转不影响草图的其余部分（例如直线）
简单地调用rotate()：它以弧度表示一个角度，这就是atan2() returns

这是一个基于您的代码段的示例：

let fromX = 200;
let fromY = 200;
let toX = 300;
let toY = 100;
let triangleSize = 5;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // test: change to position
  toX = mouseX;
  toY = mouseY;
  
  let middleX = (fromX + toX) / 2;
  let middleY = (fromY + toY) / 2;
  // calculate the angle between from -> to points
  let angle = atan2(toY - fromY, toX - fromX);
  // isolate coordinate system (indenting is purely visual, not required)
  push();
    // move to central position
    translate(middleX, middleY);
    // rotate from translated position
    rotate(angle);
    // render triangle
    triangle(0, triangleSize, triangleSize, 0, 0, -triangleSize);
  pop();
  
  line(fromX, fromY, toX, toY);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

注意变换的顺序（平移、旋转、缩放）很重要。（例如，如果旋转，则平移三角形将落在不同的位置）

此外，您绘制的三角形默认指向右侧，这与 0 弧度旋转很好地对齐。

如何制作始终面对同一点的三角形？

How to make a triangle that always faces at the same point?

javascript

processing

geometry

rotation

p5.js