Я создаю простую 2D-игру в javascript/canvas. Мне нужно выяснить угол определенного объекта относительно моей позиции.
Итак: скажем, я на (10,10), а объект на (10,5) - это приведет к 90 градусам (при положительном Y вниз, отрицательный Y вверх) (10,10) против (10,15) составит 270 градусов.
Как я могу это сделать?
Предположим, вы находитесь на (a, b), а объект находится в (c, d). Тогда относительное положение объекта вам (x, y) = (c - a, d - b).
Затем вы можете использовать функцию Math.atan2(), чтобы получить угол в радианах.
var theta = Math.atan2(-y, x);
Обратите внимание, что результат находится в диапазоне [-π, π]. Если вам нужны неотрицательные числа, вы должны добавить
if (theta < 0)
theta += 2 * Math.PI;
и преобразуйте радианы в градусы, умножьте на 180 / Math.PI.
Если ваши координаты (xMe, yMe) и их координаты (xThem, yThem), то вы можете использовать формулу:
arctan((yMe-yThem)/(xThem-xMe))
Обычно это будет arctan((yThem-yMe)/(xThem-xMe)), но в этом случае знак оси y изменяется на обратную.
Чтобы преобразовать результат из радианов в градусы умножить на 180/pi.
Итак, в JavaScript это выглядело бы так: Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PI
atan дает значение между -pi/2 и pi/2 (то есть между -90 и 90 градусов). Но вы можете посмотреть, в каком квадранте находится ваш (xThem - xMe, yMe - yThem) вектор и соответствующим образом отрегулировать его.
В условиях неспециалиста:
function pointDirection(x1, y1, x2, y2) {
return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
}
В холсте HTML5 начало координат - это верхний левый угол, поэтому ось y растет сверху вниз. Поэтому, независимо от того, где бы вы ни находились на единичном круге, чтобы вычислить угол точки A до центра (C), вы действительно должны выглядеть как
angle = Math.atan2(Cy-Ay,Ax-Cx)
и вы получите свой результат в диапазоне [-π, π].
Я не знаю, почему они не сделали начало холста в нижнем левом углу.