[Making things move] Урок 1. Тригонометрия в AS3
Предисловие.
Информация, представленная ниже, взята из книги Keith Peters "ActionScript 3.0 Animation".
Если новичкам будет интересно и полезно читать основы тригонометрии в AS3, я с радостью продолжу серию уроков.
Жду ваших отзывов.
Начнём.
Что такое тригонометрия?
Тригонометрия - наука о треугольниках и отношениях их сторон и углов.
Существует специальный тип треугольника, который называется прямоугольным. Прямоугольный треугольник имеет угол, который равен 90 градусов. Эта конструкция является очень полезной в AS3. Об этом немного позже.
Углы.
Угол - геометрическая фигура, образованная двумя прямыми.
Градусы и радианы.
Существует две основные единицы измерения углов: градусы и радианы.
Вы, скорее всего, знакомы с градусами и без проблем можете представить угол с 90 или 45 градусами.
1 радиан эквивалентен ~57.2958 градусам. Целый круг (360 градусов) равняется 6.28 радиан, соответственно 180 градусов равен 3.14 радиан. Помните число Pi (Math.PI)? Как раз число Pi равно 3.14.
Соответственно 180 градусов - это Pi (3.14) радиан; 360 градусов - 2Pi (6.28) радиан.
Давайте попробуем прикинуть в уме 90 градусов, это сколько в радианах? Верно, Pi/2.
В AS3 нам потребуются как градусы так и радианы.
К примеру нам необходимо повернуть нарисованную стрелку в сторону курсора мыши. Мы найдём угол поворота, который будет в радианах, затем переведем радианы в градусы и повернем стрелку (MovieClip#rotation) в нужном направление.
Ниже представлены две формулы, которые помогут перевести градусы в радианы и наоборот. Постарайтесь их запомнить, Вы часто будете с ними сталкиваться.
Код:
radians = degrees * Math.PI / 180 degrees = radians * 180 / Math.PI
Вы наверняка знакомы с Декартовой системой координат, она представлена на следующем рисунке:
Система координат во Flash имеет похожий вид:
Начало координат (0,0) находится в левом верхнем углу. Значение x возрастает с лева на право, но направление оси y - перевернутое, то есть сверху - отрицательные значения, а снизу - положительные.
Давайте поговорим об измерении углов.
В декартовой системе координат над осью x положительные углы, под осью x - отрицательные:
Во Flash всё наоборот:
Стороны треугольника.
Необходимо отметить, что сейчас и далее я буду говорить исключительно о прямоугольных треугольниках, у которых один угол равен 90 градусам (или Pi/2 радиан).
Стороны треугольников имеют названия. Две стороны, которые прикасаются к углу 90 градусов - катеты (Legs) треугольника; сторона, которая не прикасается к прямому углу - гипотенуза (hypotenuse). Гипотенуза - самая длинная сторона треугольника.
Катеты бывают противолежащими (Opposite) к углу, и прилежащими(Adjacent).
Когда мы говорим о противолежащем катете от угла, речь идёт о стороне, которая не касается этого угла. Прилежащий катет образует (вместе с гипотенузой) угол.
Тригонометрические функции.
AS3 имеет тригонометрические функции для вычисления отношений сторон треугольника: синус, косинус, тангенс, арксинус, арккосинус, арктангенс.
Возможно это звучит жутко но на практике всё довольно просто.
Синус (sine).
Синус α — отношение катета, противолежащего углу α, к гипотенузе. Другими словами: длина противолежащего катета деленная на длину гипотенузы.
Рассмотрим пример.
На рисунке ниже представлен треугольник с углом 30 градусов.
Противолежащий катет имеет длину в 1 см, гипотенуза - 2 см. Чтобы найти синус угла 30 необходимо поделить 1 см на 2 см. Получаем:
Код:
Sin(30) = 1 / 2 = 0.5
Стоп, но функция Math.sin(30) не возвращает нам ожидаемое число 0.5. Всё потому, что мы не перевели градусы в радианы:
var angleDegrees:Number = 30; var angleRadians:Number = angleDegrees * Math.PI / 180; trace(Math.sin(angleRadians)); // 0.5
Давайте перенесем пример, представленный выше, в систему координат Flash. Треугольник будет иметь следующий вид:
Помним, что во Flash по оси y возрастающие значиния идут вниз (под ось x). Выходит, что значение угла и противолежащего катета будут отрицательными.
Но найти синус угла -30 это не помешает:
var angleDegrees:Number = -30; var angleRadians:Number = angleDegrees * Math.PI / 180; trace(Math.sin(angleRadians)); // -0.5
Косинус α — отношение катета, прилежащего углу α, к гипотенузе. В AS3 получить косинус угла можно так: Math.cos(angle).
Смотрим на картинку:
Картинка выше показывает тот-же угол, -30 градусов. Чтобы найти косинус этого угла нам необходимо 1.73 разделить на 2, это будет 0.865.
Тангенс (Tangent).
Тангенс α — отношение катета, противолежащего углу α, к катету прилежащему углу α: –1/1.73 или –0.578.
Арксинус (arcsine) и арккосинус (arccosine).
Арксинус и арккосинус- это тригонометрические функции, обратные синусу и косинусу соответственно.
В AS3 они представлены следующим образом:
ratio - это отношение сторон.
Если синус 30 градусов это 0.5 (как выяснилось выше), то арксинус 0.5 должен быть 30 градусов.
Помним, что косинус угла 30 равен 0.865, значит арккосинус 0.865 равняется 30.
Стоит иметь ввиду, что числа, представленные здесь, округленны.
Арктангенс (Arctangent).
Арктангенс - функция, обратная тангенсу.
На языке AS3 выглядит так:
Math.atan(ratio);
Стоит обратить ваше внимание на еще одну тригонометрическую функцию AS3:
Она полезнее, чем предыдущая и я покажу это на следующем практическом примере.
Вращение (rotation).
Перейдём от теории к практике.
Предполагается, что вы уже знакомы с базовыми классами AS3, и останавливаться на объяснениях того, как работают методы класса Graphics я не буду.
Представим, что нам необходимо нарисовать стрелку и сделать так, чтобы она всегда показывала в направлении курсора.
Первым делом рисуем стрелку:
var arrow:Sprite = new Sprite(); arrow.graphics.lineStyle(1, 0, 1); arrow.graphics.beginFill(0xffff00); arrow.graphics.moveTo(-50, -25); arrow.graphics.lineTo(0, -25); arrow.graphics.lineTo(0, -50); arrow.graphics.lineTo(50, 0); arrow.graphics.lineTo(0, 50); arrow.graphics.lineTo(0, 25); arrow.graphics.lineTo(-50, 25); arrow.graphics.lineTo(-50, -25); arrow.graphics.endFill(); super.addChild(arrow);
На рисунке ниже изображена стрелка и точка (mouseX, mouseY), в направлении которой должна указывать стрелка. Узнаете уже известный Вам прямоугольный треугольник?
Далее всё очень просто.
// Добавляем слушателя function onEnterFrame(event:Event):void { // находим длину прилегающего катета var dx:Number = mouseX - arrow.x; // находим длину противолежащего катета var dy:Number = mouseY - arrow.y; // находим отношение противолежащего катета к //прилегающему и используем функцию Math.atan(), // чтобы найти угол в радианах var radians:Number = Math.atan(dy / dx); // конвертируем радианы в градусы и //поворачиваем стрелку arrow.rotation = radians * 180 / Math.PI; }
Чтобы поправить этот недочёт необходимо заменить
на
Теперь всё работает так, как должно работать.
Всего комментариев 23
Комментарии
26.01.2012 20:25 | |
Спасибо, добавил в закладки как шпаргалку, а то иногда забываешь такие простые истины :-)
|
26.01.2012 20:32 | |
Новичком себя не считаю, но это реально хорошая тема.
|
26.01.2012 22:11 | |
жду продолжения. интересно
не отлаживаются у меня в памяти все эти синусы и косинусы. может, ваши уроки помогут в этом |
26.01.2012 22:31 | |
27.01.2012 13:19 | |
HardCoder, спасибо за замечание, поправил.
Zebestov, Вы правы, я поправил строчку кода и комментарий к ней. Сейчас должно быть всё понятно. Спасибо за ваши замечания. |
27.01.2012 15:10 | |
Спасибо, поправил.
|
27.01.2012 15:21 | |
Как-то по американски.
5 класс же. |
|
Обновил(-а) Котяра 27.01.2012 в 15:56
|
27.01.2012 15:58 | |
Цитата:
Чтобы поправить этот недочёт необходимо заменить
var radians:Number = Math.atan(dy / dx); на var radians:Number = Math.atan2(dy , dx); Теперь всё работает так, как должно работать. |
|
Обновил(-а) Котяра 27.01.2012 в 16:01
|
27.01.2012 17:10 | |
Цитата:
Можно, хоть ссылку?
|
27.01.2012 19:41 | |
Вах, школьный курс для флешеров
Но, всё это пока только основы основ. Стоит добавить про PI 3.14 - при диаметре круга в 1, его длина окружности = 3.14. То есть 3.14 - это коэффициент, на который увеличивается длина окружности от диаметра. На векипедий очень хороший гиф есть http://ru.wikipedia.org/wiki/%D0%9F%...81%D0%BB%D0%BE) И описание синуса и косинуса для чайников, которое помогло мне таки запомнить, что это такое, на века: Цитата:
Возьмем палку длинной 5 см, поставим вертикально. Её угол в вертикальном положений = 90 Слегка наклоним, её высота стала меньше, так-как она теперь наклонена. Так вот, синус её угла - это на сколько она стала меньше в высоту, а косинус - в ширину.
Надеюсь статья на этом не закончиться, и будут добавлены более интересные вещи. Например движение по окружности , кривые Безье. |
|
Обновил(-а) Tails 27.01.2012 в 19:44
|
07.08.2012 22:36 | |
замечу одно: пи не равно 3.14, оно иррациональное.
т.е. целый круг это 2пи радиан, а не 6.28 |
07.08.2012 23:04 | |
тома написаны о пи.
|
29.03.2014 02:19 | |
Tails, в недолгих поисках я нашёл оригинал, кажется.
Это же он? |
Последние записи от Art_133
- [Making Things Move] Урок 2. Использование синуса и косинуса (31.07.2012)
- [Making things move] Урок 1. Тригонометрия в AS3 (26.01.2012)