Math.atan2() в JavaScript — кут за координатами

Загальний опис

Math.atan2() – це метод в JavaScript, який приймає два аргументи та повертає арктангенс частки своїх аргументів. За допомогою цього методу можна визначити кут між позитивною півоссю X та точкою (x, y) у двовимірному просторі.

Math.atan2() є незамінним інструментом для знаходження кута відносно початку координат. Він широко використовується в графіці, анімації, геометричних обчисленнях і фізичних симуляціях.

Приклад використання: допустимо, у вас є дві точки на площині – одна центральна (0, 0) та інша (x, y). Щоб знайти кут між оссю X і лінією, що проходить через обидві ці точки, вам знадобиться саме метод Math.atan2().

let x = 5;
let y = 5;
let angle = Math.atan2(y, x);
console.log(angle);  // Повертає значення у радіанах

Основні особливості та прийоми:

1. Відрізняється від методу Math.atan(). Поки Math.atan() повертає арктангенс одного числа, Math.atan2() розглядає обидва аргументи як координати на площині та повертає кут між оссю X і точкою (x, y).

2. Вивід завжди у радіанах. Щоб конвертувати це значення в градуси, помножте його на 180/π.

let degrees = angle * (180 / Math.PI);

1. Якщо потрібно знайти кут між двома відомими точками, зніміть координати однієї точки від координат другої та використайте їх як аргументи для Math.atan2().

правити

Порада

Якщо розробляєте гру або графічний додаток, де потрібно знати напрямок руху об'єкта, Math.atan2() може стати незамінним.

автор: Bond правити

Порада

У випадках, коли необхідно робити велику кількість обчислень, розгляньте можливість збереження результатів Math.atan2() для постійних пар координат, щоб уникнути непотрібних повторних обчислень. Кешування результатів може суттєво підвищити продуктивність вашого коду в обчислювально інтенсивних задачах.

автор: Bond правити

Порада

Якщо у вас є дві точки на площині і ви хочете знати кут між ними та осію X, Math.atan2() - ваш найкращий інструмент. Він забезпечує коректне визначення кута навіть у 2-му та 3-му квадрантах, де арктангенс може дати неточні результати.

let y = 5, x = 3;
let angle = Math.atan2(y, x);

автор: Bond правити

Нотатка

Для новачків це може стати пасткою. Пам'ятайте, що Math.atan2() приймає спочатку координату Y, а потім X. Це відрізняється від більшості інших функцій та методів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Math.atan2(y, x)

Параметри

y

Координата y точки. Це перший параметр, який вказує вертикальне відстеження від початкової точки до точки призначення на двовимірній площині.

автор: Bond

правити

x

Координата x точки. Це другий параметр, який вказує горизонтальне відстеження від початкової точки до точки призначення на двовимірній площині.

автор: Bond

правити

Повернення

angle

Повертає кут у радіанах (між -π та π, включно) між позитивною віссю X та променем, що йде від точки (0, 0) до точки (x, y).

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Math.atan2()</h2>
  <p class="description">Повертає арктангенс частки своїх аргументів.</p>
</header>
<main>
  <div class="result">
    <label for="x">X координата: </label><input id="x" type="number" value="5"><br>
    <label for="y">Y координата: </label><input id="y" type="number" value="5"><br>
    <button onclick="calculateAngle()">Розрахувати кут</button>
    <p>Кут між позитивною півоссю X і точкою (x, y) становить: <span id="angleValue">0</span> радіан.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function calculateAngle() {
  let x = parseFloat(document.getElementById("x").value);
  let y = parseFloat(document.getElementById("y").value);

  let angle = Math.atan2(y, x);
  document.getElementById("angleValue").textContent = angle.toFixed(2);
}
//# sourceURL=pen.js

// Координати початкової точки
let startX = 0;
let startY = 0;

// Координати кінцевої точки
let endX = 4;
let endY = 3;

// Використовуємо Math.atan2() для обчислення кута між двома точками
let angle = Math.atan2(endY - startY, endX - startX);

console.log(`Кут між початковою та кінцевою точками: ${angle} радіан`);

// Позиція об'єкта
let objX = 5;
let objY = 5;

// Позиція цілі
let targetX = 10;
let targetY = 10;

// Використовуємо Math.atan2() для визначення кута, під яким об'єкт повинен обертатися, щоб дивитися на ціль
let rotationAngle = Math.atan2(targetY - objY, targetX - objX);

console.log(`Об'єкт повинен обертатися під кутом: ${rotationAngle} радіан для спрямування на ціль`);