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

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

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

[Making Things Move] Урок 2. Использование синуса и косинуса

Запись от Art_133 размещена 31.07.2012 в 10:02

Предисловие
В предыдущем уроке мы вспомнили основы тригонометрии. Повторили, что такое углы, градусы, радианы, тригонометрические функции.
Представляю Вашему вниманию новый урок.

Цель урока: научиться работать с синусом и косинусом.

Синусоида
Скорее всего Вам знаком термин синусоида и вы знаете, что за фигура на изображении:



Это графическое представление результата функции синус, для каждого угла в диапазоне от 0° до 360° (или от 0 до 2pi радиан). Каждая точка кривой содержит координаты[x; y]. Собственно координата y является результатом функции синус.

Чтобы было понятнее предлагаю взглянуть на следующий рисунок:



Обратите внимание, синус угла 0° равен 0, то-есть координата y первой точки 0. А синус угла 90° (или pi/2) равен 1. Синус 180° (или pi радиан) снова 0°. Синус 270° (или 3/2pi) равен -1. Синус 360° (или 2pi) снова 0.

На ActionScript для вычисления синуса угла используется конструкция Math.sin(angle):
Код AS3:
for(var angle:Number = 0; angle < Math.PI * 2; angle += .1)
{
          trace(Math.sin(angle));
}
Код выводит в консоль синус угла в диапазоне от 0 до Math.PI * 2 радиан (0° - 360°) с шагом 0.1.

Плавное движение вверх и вниз
Так для чего же мы можем использовать Math.sin(angle). Если перед Вами возникнет задача создать плавное зацикленное движение, например вверх - вниз или вперед-назад - эта функция отлично справится с этим. Мы можем умножить её результат на 100 и получим движение в диапазоне 0, 100, -100, 0.

Создадим объект Мяч, который будем использовать для циклического движения.
Код AS3:
package tutorials.items
{
	import flash.display.Sprite;
 
	public class Ball extends Sprite
	{
		private var radius:Number;
		private var color:uint;
 
		public function Ball(radius:Number=40, color:uint=0xff0000) 
		{
			this.radius = radius;
			this.color = color;
			init();
		}
 
		public function init():void 
		{
			super.graphics.beginFill(color);
			super.graphics.drawCircle(0, 0, radius);
			super.graphics.endFill();
		}
	}
}
Реализовывать движение нашего мяча (Ball.as) будет класс BallMover.as:

Код AS3:
package tutorials.ch2
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	import tutorials.ch2.Ball;
 
	public class BallMover extends Sprite
	{
		private var ball:Ball; // создаём мячь
 
		//создаём переменную angle (угол) и присваиваем ей значение 0
                private var angle:Number = 0;
 
		public function BallMover()
		{
			this.init();
		}
 
		private function init():void
		{
			this.ball = new Ball();
			super.addChild(ball);
			this.ball.x = stage.stageWidth / 2;
			super.addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		public function onEnterFrame(event:Event):void
		{
			// синус угла angle умножаем на 50
			// к полученном результату прибавляем высоту сцены деленную на 2
			// Это расположит мяч в центре сцены по оси y
			this.ball.y = stage.stageHeight / 2 + Math.sin(angle) * 50;
 
			// меняем значение угра, это нам даст плавное движение мяча по оси y
			this.angle += 0.1;
		}
	}
}
Поэкспериментируйте с кодом. Вы увидите, что изменение числа 0.1 отобразится на скорости движения. Для того, чтобы изменить длину волны необходимо увеличить или уменьшить число 50.
Для того, чтобы сместить точку, вокруг которой происходит циклическое движение необходимо изменить значение stage.stageHeight / 2.


Волновое движение
Для реализации волнового движения нам потребуется доработать код выше, а именно:
- Ввести переменные angleX и angleY, которые содержат значения угла.
- Ввести переменные xspeed и yspeed - это скорость движения объекта по осям x и y. Но значение xspeed будет в 2 раза меньше чем yspeed, что обеспечит волновое движение.
Код AS3:
package tutorials.ch2
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	import tutorials.ch2.Ball;
 
	public class Waves extends Sprite
	{
		private var ball:Ball;
		private var angleX:Number = 0;
		private var angleY:Number = 0;
		private var centerX:Number = 200;
		private var centerY:Number = 200;
		private var range:Number = 100;
		private var xspeed:Number = .035;
		private var yspeed:Number = .07;
 
		public function Waves() 
		{
			init();
		}
		private function init():void
		{
			ball = new Ball();
			addChild(ball);
			ball.x = 0;
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		public function onEnterFrame(event:Event):void
		{
			ball.x = centerX + Math.sin(angleX) * range;
			ball.y = centerY + Math.sin(angleY) * range;
			angleX += xspeed;
			angleY += yspeed;
		}
	}
}

Волны с использованием drawing API
Для закрепления материала предлагаю нарисовать волну. Сначало попробуйте сделать это самостоятельно. Если у Вас возникнут сложности - ознакомьтесь с примером ниже.
Код AS3:
package tutorials.ch2
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class WaveDrawing extends Sprite
	{
		private var angle:Number = 0;
		private var centerY:Number = 200;
		private var range:Number = 50;
		private var waveWidth:Number = 1;
		private var yspeed:Number = .3;
		private var xpos:Number;
		private var ypos:Number;
 
		public function WaveDrawing() 
		{
			init();
		}
 
		private function init():void
		{
			xpos = 0;
			graphics.lineStyle(1, 0, 1);
			graphics.moveTo(0, centerY);
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
 
		public function onEnterFrame(event:Event):void 
		{
			xpos += waveWidth;
			angle += yspeed;
			ypos = centerY + Math.sin(angle) * range;
			graphics.lineTo(xpos, ypos);
		}
	}
}
Косинусоида
С синусоидой всё понятно. Давайте двигаться дальше и рассмотрим график функции косинус (также известный под названием косинусоида).
Для получения косинуса угла в AS3 используется конструкция Math.cos(angle). То, что она возвращает хорошо показывает рисунок ниже:



Косинус угла 0° равен 1. Увеличивая угол постепенно до 2pi радиан (или 360°) видим, что косинус равен 0 (для 90°), -1 (для 180°), 0 (для 270°) и 1 (360°).


Круговое движение
Функция косинус в паре с функцией синус может использоваться в ситуации, когда необходимо реализовать круговое движение объекта. Всё что нам необходимо это получить координаты точек [x:y] и присвоить их объекту.

Так как-же реализовать круговое движение? Дня начала взгляните на изображение ниже.



Данная картинка иллюстрирует движение объекта по круговой траектории
Красная точка - положение объекта, который двигается по кругу.
Вычислить координату y красной точки не представляет никаких сложностей и мы уже это делали ранее, а получить координату x нам поможет функция косинус.

Важно понимать, что все операции расчёта производятся над одним значением угла angle, а не для разных, как мы делали в примере с Waves.as, где использовались angle1 и angle2.
Вот как это выглядит на ActionScript (вычисления координаты x имеет соответствующий комментарий):

Код AS3:
package tutorials.ch2
{
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	import tutorials.ch2.Ball;
 
	public class Circle extends Sprite
	{
		private var ball:Ball;
		private var angle:Number = 0;
		private var centerX:Number = 200;
		private var centerY:Number = 200;
		private var radius:Number = 50;
		private var speed:Number = .1;
 
		public function Circle()
		{
			init();
		}
 
		public function onEnterFrame(event:Event):void
		{
                        // вычисляем координаты x
			ball.x = centerX + Math.sin(angle) * radius;
			ball.y = centerY + Math.cos(angle) * radius;
			angle += speed;
		}
 
		private function init():void
		{
			ball = new Ball();
			addChild(ball);
			ball.x = 0;
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
	}
}
Источник: Keith Peters "ActionScript 3.0 Animation".

П.С. Если вы нашли ошибку в изложенном материале - напишите мне.
Всего комментариев 2

Комментарии

Старый 31.07.2012 19:57 samana вне форума
samana
 
Аватар для samana
Новичкам будет очень полезно!
Старый 02.08.2012 17:22 GBee вне форума
GBee
 
Аватар для GBee
Да и старичкам :о)
 

 


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


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