Синус и косинус

В уроке «Вращение» мы уже пользовались cos и sin, просто взяв их готовыми — не объясняя, что это вообще такое. Разберём подробнее.

Возьмём любой вектор, кроме нулевого — то есть не (0, 0), — и ещё один, который смотрит ровно в ту же сторону, но специально подобран так, что его длина равна ровно 1. Это тот же единичный вектор из урока «Направление»: направление то же самое, а лишней длины уже нет. Вот x и y именно этого, единичного вектора и называются косинусом и синусом угла, под которым оба вектора направлены. Какой бы длины ни был первый вектор — единичный вектор в ту же сторону всегда один и тот же, а значит, и его cos/sin тоже.

Получить такой единичный вектор можно двумя способами: уже знакомым делением x и y на длину — или, если вместо x и y знаешь угол, напрямую через cos и sin этого угла. Разберём оба.

Попробуй сам

Серый вектор — с задаваемыми длиной и углом. Красный — единичный вектор в том же направлении, но длиной ровно 1. В этом уроке угол задаётся в градусах — просто чтобы удобнее было наблюдать за происходящим; в коде дальше по сайту мы работаем в радианах, как и в уроке «Вращение».

Серый — вектор с задаваемыми длиной и углом. Красный — единичный вектор (длина ровно 1) в том же самом направлении. Кнопка ниже показывает их x и y — сначала у серого, потом у красного вместе с углом, который им обоим задан.

length angle° Показать

Нажми “Показать”: сначала опускаются проекции серого вектора на обе оси — это его x и y. Потом то же самое для красного — его x и y и есть cos(angle) и sin(angle) для этого угла, а дуга обводит сам угол, которым оба вектора направлены. Меняй angle — оба вектора поворачиваются вместе, но у красного x и y всегда в точности cos(angle) и sin(angle). Меняй length — у серого меняются и x, и y, а у красного они остаются теми же самыми: его длина всегда 1, независимо от того, что задано у серого.

Один и тот же вектор, два способа получить

Способ первый — если знаешь x и y. Это уже знакомо из урока «Направление»: делишь x и y вектора на его же длину — получаешь x и y единичного вектора в том же направлении. В демке выше это видно на самих числах: раздели серый x на его длину — получится в точности x красного. То же самое с y. Работает это по той же причине, по которой умножение растягивает вектор (тоже из урока «Направление»): деление — обратное действие, оно сжимает вектор во столько же раз, а деление на собственную длину сжимает его ровно до 1, как любое число, делённое на себя.

Способ второй — если знаешь угол. Даже без самого вектора, зная только угол (уже в радианах — cos и sin в Rust работают именно с ними), cos(angle) и sin(angle) сразу дают x и y единичного вектора под этим углом — без всякого деления, без вектора вообще, только по одному числу.

Оба способа дают один и тот же единичный вектор — просто с разных сторон: один по готовым x и y, другой по одному углу.

// length — длина вектора, уже известна. Делим x и y на неё — получаем
// единичный вектор в том же направлении.
let unit_x = x / length;
let unit_y = y / length;

А вот то же самое, но через угол:

// radians — тот же угол, но в радианах. Берём его косинус и синус —
// получаем тот же единичный вектор, без всякого деления.
let unit_x = radians.cos();
let unit_y = radians.sin();

unit_x и unit_y в обоих случаях получаются одинаковыми — способ разный, а единичный вектор один и тот же.

Что здесь происходит

• Единичный вектор — вектор, чья длина равна ровно 1, направленный туда же, куда и обычный, как в уроке «Направление».
• cos(angle) и sin(angle) — это x и y единичного вектора, направленного под углом angle, только полученные не делением на длину, а напрямую из угла.
• x / length и y / length — тот же приём деления на длину, что и в уроке «Направление», только с x, y вместо dx, dy: там делили направление на курсор, здесь — вектор вообще.
• radians — тот же угол, что и angle в демке, только в радианах, а не в градусах.
• В демке красный вектор всегда длиной 1, какими бы ни были length и angle у серого — оба вектора смотрят в одну сторону, просто длина у них разная.