[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):
Код выводит в консоль синус угла в диапазоне от 0 до Math.PI * 2 радиан (0° - 360°) с шагом 0.1.
Плавное движение вверх и вниз
Так для чего же мы можем использовать Math.sin(angle). Если перед Вами возникнет задача создать плавное зацикленное движение, например вверх - вниз или вперед-назад - эта функция отлично справится с этим. Мы можем умножить её результат на 100 и получим движение в диапазоне 0, 100, -100, 0.
Создадим объект Мяч, который будем использовать для циклического движения.
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(); } } }
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; } } }
Для того, чтобы сместить точку, вокруг которой происходит циклическое движение необходимо изменить значение stage.stageHeight / 2.
Волновое движение
Для реализации волнового движения нам потребуется доработать код выше, а именно:
- Ввести переменные angleX и angleY, которые содержат значения угла.
- Ввести переменные xspeed и yspeed - это скорость движения объекта по осям x и y. Но значение xspeed будет в 2 раза меньше чем yspeed, что обеспечит волновое движение.
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
Для закрепления материала предлагаю нарисовать волну. Сначало попробуйте сделать это самостоятельно. Если у Вас возникнут сложности - ознакомьтесь с примером ниже.
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 имеет соответствующий комментарий):
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); } } }
П.С. Если вы нашли ошибку в изложенном материале - напишите мне.
Всего комментариев 2
Комментарии
31.07.2012 19:57 | |
Новичкам будет очень полезно!
|
02.08.2012 17:22 | |
Да и старичкам :о)
|
Последние записи от Art_133
- [Making Things Move] Урок 2. Использование синуса и косинуса (31.07.2012)
- [Making things move] Урок 1. Тригонометрия в AS3 (26.01.2012)