Как сделать треугольник, который всегда обращен в одну и ту же точку?

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

Вы можете:

1. использовать atan2() для расчета поворота между двумя точками,
2. использовать push() чтобы изолировать координатное пространство (вращать локально, не затрагивая остальную часть эскиза (например, линию)
3. просто вызовите rotate(): он принимает угол в радианах, который atan2() возвращает

Вот пример, основанный на вашем фрагменте:

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 радиан.