JS метод Math.atan2()


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

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().
автор: Bond

Порада

Якщо розробляєте гру або графічний додаток, де потрібно знати напрямок руху об'єкта, 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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 4
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

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

Цей приклад демонструє взаємодію користувача з двома полями вводу, щоб вказати координати X та Y. Після натиснення кнопки "Розрахувати кут", відображається кут у радіанах між позитивною півоссю X і заданою точкою.

автор: Bond

У цьому прикладі ми обчислюємо кут між початковою точкою (0,0) та кінцевою точкою (4,3) використовуючи метод Math.atan2(). Порядок аргументів важливий: спочатку передаємо різницю координат Y, потім X.

// Координати початкової точки 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} радіан`); автор: Bond

У цьому прикладі ми визначаємо, під яким кутом об'єкт, розташований в позиції (5,5), повинен обертатися, щоб дивитися безпосередньо на ціль в позиції (10,10). Щоб визначити цей кут, ми використовуємо Math.atan2(), передаючи різницю координат Y та потім X.

// Позиція об'єкта
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} радіан для спрямування на ціль`);
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід