Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Регистрация Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > Art_133

Рейтинг: 5.00. Голосов: 6.

[Making things move] Урок 1. Тригонометрия в AS3

Запись от Art_133 размещена 26.01.2012 в 18:53
Обновил(-а) Art_133 27.01.2012 в 15:48

Предисловие.
Информация, представленная ниже, взята из книги 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.
Вы наверняка знакомы с Декартовой системой координат, она представлена на следующем рисунке:


Система координат во 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
Вот как это выглядит на AS3:
Код AS3:
trace(Math.sin(30)); // –0.988031624092862
Стоп, но функция Math.sin(30) не возвращает нам ожидаемое число 0.5. Всё потому, что мы не перевели градусы в радианы:
Код AS3:
var angleDegrees:Number = 30;
var angleRadians:Number = angleDegrees * Math.PI / 180;
trace(Math.sin(angleRadians)); // 0.5
Сейчас всё ок.
Давайте перенесем пример, представленный выше, в систему координат Flash. Треугольник будет иметь следующий вид:


Помним, что во Flash по оси y возрастающие значиния идут вниз (под ось x). Выходит, что значение угла и противолежащего катета будут отрицательными.
Но найти синус угла -30 это не помешает:
Код AS3:
var angleDegrees:Number = -30;
var angleRadians:Number = angleDegrees * Math.PI / 180;
trace(Math.sin(angleRadians)); // -0.5
Косинус (Cosine).
Косинус α — отношение катета, прилежащего углу α, к гипотенузе. В AS3 получить косинус угла можно так: Math.cos(angle).
Смотрим на картинку:


Картинка выше показывает тот-же угол, -30 градусов. Чтобы найти косинус этого угла нам необходимо 1.73 разделить на 2, это будет 0.865.
Код AS3:
trace(Math.cos(-30 * Math.PI / 180)); // 0.865
Тангенс (Tangent).
Тангенс α — отношение катета, противолежащего углу α, к катету прилежащему углу α: –1/1.73 или –0.578.

Код AS3:
trace(Math.tan(-30 * Math.PI / 180)); //–0.577350269189626
Арксинус (arcsine) и арккосинус (arccosine).
Арксинус и арккосинус- это тригонометрические функции, обратные синусу и косинусу соответственно.
В AS3 они представлены следующим образом:
Код AS3:
Math.asin(ratio);
Math.acos(ratio);
ratio - это отношение сторон.

Если синус 30 градусов это 0.5 (как выяснилось выше), то арксинус 0.5 должен быть 30 градусов.
Код AS3:
trace(Math.asin(0.5) * 180 / Math.PI);
Помним, что косинус угла 30 равен 0.865, значит арккосинус 0.865 равняется 30.
Код AS3:
trace(Math.acos(0.865) * 180 / Math.PI);
Стоит иметь ввиду, что числа, представленные здесь, округленны.

Арктангенс (Arctangent).
Арктангенс - функция, обратная тангенсу.
На языке AS3 выглядит так:
Math.atan(ratio);

Стоит обратить ваше внимание на еще одну тригонометрическую функцию AS3:
Код AS3:
Math.atan2(y, x);
Она полезнее, чем предыдущая и я покажу это на следующем практическом примере.


Вращение (rotation).
Перейдём от теории к практике.
Предполагается, что вы уже знакомы с базовыми классами AS3, и останавливаться на объяснениях того, как работают методы класса Graphics я не буду.

Представим, что нам необходимо нарисовать стрелку и сделать так, чтобы она всегда показывала в направлении курсора.
Первым делом рисуем стрелку:
Код AS3:
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), в направлении которой должна указывать стрелка. Узнаете уже известный Вам прямоугольный треугольник?


Далее всё очень просто.
Код AS3:
// Добавляем слушателя
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;
}
Мы видим, что стрелка показывает в направлении за мышкой только когда курсор справа от стрелки.

Чтобы поправить этот недочёт необходимо заменить
Код AS3:
var radians:Number = Math.atan(dy / dx);
на
Код AS3:
var radians:Number = Math.atan2(dy , dx);
Теперь всё работает так, как должно работать.
Всего комментариев 23

Комментарии

Старый 26.01.2012 20:25 PainKiller вне форума
PainKiller
 
Аватар для PainKiller
Спасибо, добавил в закладки как шпаргалку, а то иногда забываешь такие простые истины :-)
Старый 26.01.2012 20:32 GBee вне форума
GBee
 
Аватар для GBee
Новичком себя не считаю, но это реально хорошая тема.
Старый 26.01.2012 20:43 HardCoder вне форума
HardCoder
 
Аватар для HardCoder
Спасибо, хотелось бы продолжения. Если можно... в частности по стереометрии. А то незабываемые фундаментальные вещи вроде теоремы Пифагора, почти, невозможно забыть. А вот уже как манипулировать фигурами в пространстве - забыл еще в армии
Старый 26.01.2012 22:11 olexandr вне форума
olexandr
 
Аватар для olexandr
жду продолжения. интересно
не отлаживаются у меня в памяти все эти синусы и косинусы. может, ваши уроки помогут в этом
Старый 26.01.2012 22:31 Zebestov вне форума
Zebestov
 
Аватар для Zebestov
Код AS3:
// находим отношение противолежащего катета к 
//прилегающему (арктангенс)
var radians:Number = dy / dx;
Это что еще за ахинея?
Старый 26.01.2012 22:46 HardCoder вне форума
HardCoder
 
Аватар для HardCoder
И еще вот, прошелся снова по статье и заметил:
Цитата:
Тангенс - отношение противолежащего катета к гипотенузе
Измените на:
Цитата:
Тангенс - отношение противолежащего катета к прилегающему
Старый 26.01.2012 23:39 -De- вне форума
-De-
 
Аватар для -De-
Представьте единичную окружность и точку на ней. Х координата её - косинус, у координата - синус, длина дуги - угол, синус / косинус = тангенс, косинус / синус = котангенс. Хватит один чертёж в голове держать) С приставкой арк - обратные функции. 180 градусов = пи радиан (в школе табличка висела). atan2 - волшебная функция, которая по x и y координатам находит угол. Для положительных х работает тупо как арктангенс, ценна именно тем, что внутри себя разруливает нулевые и отрицательные х.
Старый 27.01.2012 13:19 Art_133 вне форума
Art_133
 
Аватар для Art_133
HardCoder, спасибо за замечание, поправил.
Zebestov, Вы правы, я поправил строчку кода и комментарий к ней. Сейчас должно быть всё понятно.
Спасибо за ваши замечания.
Старый 27.01.2012 14:02 Dima_DPE вне форума
Dima_DPE
Отличная статья.

Угол уже так не определяют. Да и раньше я такое определение встречал очень редко. Мне импонирует вариант из википедии, про два луча который.

P.S. А это вам подарок от Юникода - ° .
Старый 27.01.2012 14:11 fish_r вне форума
fish_r
 
Аватар для fish_r
Цитата:
из книги Keith Peters "ActionScript 3.0 Animation".
Имеется в виду, видимо "Foundation ActionScript 3.0 Animation"? Потому, что у автора (Кейта Петерса) есть ещё и "AdvancED ActionScript3.0 Animation", где такой информации нет, но зато много информации по столкновениям, изометрии, 2.5Д, 3Д...
А, то я вчера два раза перелистал... )
Старый 27.01.2012 14:25 HardCoder вне форума
HardCoder
 
Аватар для HardCoder
Цитата:
Мне импонирует вариант из википедии, про два луча который.
Можно, хоть ссылку?
Цитата:
у автора (Кейта Петерса) есть ещё и "AdvancED ActionScript3.0 Animation", где такой информации нет, но зато много информации по столкновениям, изометрии, 2.5Д, 3Д
А вот за это спасибо.
Старый 27.01.2012 14:47 K.A.T.A.F.A.L.K.E.R вне форума
K.A.T.A.F.A.L.K.E.R
 
Аватар для K.A.T.A.F.A.L.K.E.R
Цитата:
Целый круг (360 градусов) равняется 6.2832 радиан, соответственно 180 градусов равен 3.14 радиан
а почему везде разная степень точности для пи и для 2*пи? "Соответственно" 180 градусов должны равняться 3.1416 что ли. Или 360 просто 6.28.
Старый 27.01.2012 15:10 Art_133 вне форума
Art_133
 
Аватар для Art_133
Спасибо, поправил.
Старый 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 Dima_DPE вне форума
Dima_DPE
Цитата:
Можно, хоть ссылку?
Конечно, я не жадный http://ru.wikipedia.org/wiki/%D0%A3%D0%B3%D0%BE%D0%BB
Старый 27.01.2012 17:14 Dima_DPE вне форума
Dima_DPE
@-De- дело говорит, с учителями нам видимо повезло Одна единичная окружность в памяти и хватает. Только тангенс и катангенс можно еще в виде прямых x=1 и y=1 представить соответственно.
Старый 27.01.2012 18:32 HardCoder вне форума
HardCoder
 
Аватар для HardCoder
Dima_DPE, я, немного невнимательно прочитал и со старта не правильно воспринял слово "определяют". Сразу полезло в голову "вычисляют", "находят", и подумал, что в википедии есть какая-то новая наука про вычисление углов. А что - там все что не хочешь могут написать...
Старый 27.01.2012 19:41 Tails вне форума
Tails
 
Аватар для Tails
Вах, школьный курс для флешеров
Но, всё это пока только основы основ.

Стоит добавить про PI 3.14 - при диаметре круга в 1, его длина окружности = 3.14. То есть 3.14 - это коэффициент, на который увеличивается длина окружности от диаметра. На векипедий очень хороший гиф есть http://ru.wikipedia.org/wiki/%D0%9F%...81%D0%BB%D0%BE)

И описание синуса и косинуса для чайников, которое помогло мне таки запомнить, что это такое, на века:
Цитата:
Возьмем палку длинной 5 см, поставим вертикально. Её угол в вертикальном положений = 90 Слегка наклоним, её высота стала меньше, так-как она теперь наклонена. Так вот, синус её угла - это на сколько она стала меньше в высоту, а косинус - в ширину.
Ещё добавить про ротацию у клипов в среде флэш. У них не от 0 до 360, а от 0 до 180 и от 0 до -180 в другую сторону (отрицательные значения) Хотя если вы присвоите им ротацию положительным (числом более 180), оно будет автоматически переведено в отрицательный диапазон. Например присвоив 225, он повернёться как надо, но его ротация станет: -45

Надеюсь статья на этом не закончиться, и будут добавлены более интересные вещи. Например движение по окружности , кривые Безье.
Обновил(-а) Tails 27.01.2012 в 19:44
Старый 27.01.2012 21:38 Dima_DPE вне форума
Dima_DPE
@HardCoder виновато мое техническое образование. Мне и фраза "угол 90 градусов" не сильно нравиться, но в школе мы и сами так выражались. В тойже википедии используют понятие "мера угла", т.е. градусная мера угла равна 90 или мера угла равна 90 градусов. Но это уже придирка.
Старый 07.08.2012 22:36 Wolf вне форума
Wolf
замечу одно: пи не равно 3.14, оно иррациональное.
т.е. целый круг это 2пи радиан, а не 6.28
Старый 07.08.2012 23:04 dimarik вне форума
dimarik
 
Аватар для dimarik
тома написаны о пи.
Старый 29.03.2014 02:19 ZackMercury вне форума
ZackMercury
 
Аватар для ZackMercury
Tails, в недолгих поисках я нашёл оригинал, кажется.
Это же он?
 

 


Часовой пояс GMT +4, время: 07:34.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.