Григорьев С.В. Компьютерная графика. Часть I. Программирование Flash API на ActionScript 2.0. Лабораторный практикум

Подождите немного. Документ загружается.

Лабораторная работа 3

Изменение траектории движения

Цель работы:

1). Изучить: тригонометрические методы в компьютерной графике на

примере создания параметрической траектории движения объекта;

использование тригонометрических функций стандартного класса Math.

2). Создать приложение для управления бесконечным движением

графического объекта по заданной нелинейной траектории.

Порядок выполнения работы:

1. Создайте новую папку, новый проект типа Flash Project и новый

документ типа Flash Document с одинаковыми названиями "lab03".

2. В библиотеку документа "lab02.fla" перенесите два объекта "Background"

и "Ball" типа MovieClip с параметрами из предыдущей работы.

3. На первом кадре создайте экземпляр класса Main.

4. Скопируйте в рабочую папку и присоедините к проекту классы Main и

Motion из предыдущей лабораторной работы.

5. Для того, чтобы задать движение некоторого объекта по параметрической

прямой с использованием значений скорости движения вдоль одной оси и

угла наклона траектории, необходимо использовать вычисление изменения

скорости по другой оси через синус угла наклона траектории движения:

sinxy

6. Тригонометрические функции, работающие с радианами, описаны

методами стандартного класса Math. Функция, задающая перемещение

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

private function stepMotion() {

this._x += this.object.vx;

this._y += Math.sin(Math.PI/180*this.object.vy)*this.object.vx;

}

7. В классе Main измените значения параметров обращения к классу

Collision так, чтобы объект продолжал двигаться по прямой линии под углом

45° с постоянной скоростью 4 точки по оси X в каждом кадре:

var motion:Collision = new Collision(ball, 4, 45);

8. Внесите изменения в метод startMotion() класса Collision таким образом,

чтобы объект отталкивался от стенок неподвижного объекта.

9. Для того, чтобы графический объект двигался вокруг определённой точки

на плоскости (рис. 4), необходимо использовать вычисление косинуса угла

поворота для нахождения координаты объекта на траектории в зависимости

от угла поворота. В приведённом ниже примере точкой поворота будет

являться координата (0,0). Скорость движения здесь будет определять

изменение угла поворота. Также указан исходный угол начала вращения:

private function stepMotion() {

this._x = this.object.vx+Math.cos(Math.PI/180*this.object.vy)*

Êthis.object.vx;

this._y = this.object.vx+Math.sin(Math.PI/180*this.object.vy)*

Êthis.object.vx;

this.object.vy+= this.object.vx;

}

10. Исправьте значения аргументов тригонометрических функций так, чтобы

траектория движения объекта с исходными значениями представляла собой

синусоиду вращения. Используйте разные фазы для угла вращения.

Рис. 4. Движение объекта по эллиптической траектории

11. Сохраните и закройте проект.

Контрольные вопросы:

1). Как описать движение объекта по прямой с помощью тангенса?

2). Каким образом можно изменить метод startMotion() класса Collision для

проверки столкновений при криволинейных траекториях движения?

3). Какую единицу измерения скорости можно здесь использовать?

4). Что означает исходный угол начала вращения объекта?

5). Для чего используется множитель Math.PI/180?

Лабораторная работа 4

Дублирование графических объектов

Цель работы:

1). Изучить: методы создания дубликатов графических объектов, а также

их динамического удаления; способы размещения дубликата объекта в

ActionScript 2.0 на новом свободном уровне в кадре.

2). Создать приложение для управления бесконечным движением

графического объекта со следом, оставляемым на траектории движения.

Порядок выполнения работы:

1. Создайте новую папку и новый проект типа Flash Project.

2. Скопируйте в папку проекта документ типа Flash Document из

предыдущей работы и переименуйте его в "lab04.fla".

3. Создайте новый класс Trail, расширяющий уже имеющиеся в составе

проекта классы Collision или Motion (из предыдущей работы), конструктор

которого будет принимать следующие аргументы:

public function Trail(target, vx, vy, fade) {...}

4. Последний аргумент fade будет управлять степенью "растворения" следа

объекта, переменная типа Number для него должна быть глобальной.

5. В расширенном методе startMotion() после каждого шага необходимо

создать дубликат управляемого объекта на его предке и присвоить ему те же

значения переменных, что и у объекта target:

var trail:MovieClip = this.duplicateMovieClip("trail",

Êthis._parent.getNextHighestDepth());

trail._x = this._x;

trail._y = this._y;

trail.fade = this.object.fade;

6. Для управления переменными дублирующегося объекта trail (его

размерами _xscale и _yscale, а также степенью прозрачности _alpha) в методе

onEnterFrame, необходимо расширить анонимную функцию function():

trail.onEnterFrame = function() {

this._xscale = this._yscale=this._alpha *= this.fade;

};

7. Для того, чтобы ограничить создание дубликатов графического объекта,

необходимо при практически полном "растворении" дубликата объекта

(_alpha=3) динамически его удалять (рис. 5). В противном случае сцена

будет до бесконечности заполняться графическими объектами и уровнями,

на которых они будут нарисованы, что приведёт к значительным потерям

памяти и снижением динамики движения исходного объекта.

Рис. 5. Дублирование графических объектов в движении

8. Сохраните и закройте проект. Создайте папку для проекта следующей

лабораторной работы, скопируйте в неё все файлы и переименуйте ключевой

файл – документ типа Flash Document.

Контрольные вопросы:

1). Каким другим способом можно узнать следующий уровень в кадре?

2). Можно ли использовать метод attachMovie вместо duplicateMovieClip?

3). Какой характеристикой объекта управляет его переменная _alpha?

4). К какому значению приближается значение аргумента fade?

5). Можно ли вместо переменных _xscale и _yscale использовать для

дублирующихся объектов переменные _width и _height?

Лабораторная работа 5

Построение геометрических фракталов

Цель работы:

1). Изучить: наиболее распространённые методы построения

симметричных геометрических фракталов на основе заданных графических

объектов; способ реализации метода на основе рекурсивного алгоритма с

помощью языка ActionScript 2.0.

2). Создать приложение для вывода на экран простого геометрического

фрактал, а также правильно построенного симметричного изображения

дерева на основе этого фрактала.

Порядок выполнения работы:

1. Создайте новый класс Fractal, наследующий методы класса MovieClip.

2. Конструктору класса Fractal должен быть передан объект со сцены для

дальнейшего управления. Основным методом класса будет являться

рекурсивная функция drawFractal().

public function drawFractal(x:Number, y:Number, scale:Number,

Êchild:Number, generation:Number) {

}

3. Переменная child управляет количеством потомков фрактала. Значение

этой переменной должно сохраниться один раз, и затем меняться в

зависимости от количества вхождений в рекурсивную функцию. Используйте

следующий способ сохранения исходного значения:

if (!dchild) {

dchild = child;

}

4. После того, как будет создан дубликат экземпляра фрактала, необходимо

присвоить ему новые координаты, которые были переданы от родительского

экземпляра фрактала (переменные x и y) и размер (переменная scale):

var fractal = this.target.duplicateMovieClip("fractal",

Êthis.target._parent.getNextHighestDepth());

fractal._x = x;

fractal._y = y;

fractal._xscale = fractal._yscale=scale;

5. Переменная generation управляет количеством поколений фрактала.

Каждое новое поколение фрактала будет построено вокруг родительского

под углами вращения, равными углам сегментов, занимаемых дубликатами:

if (generation) {

var angle:Number = 360/child;

}

6. В теле этого условия необходимо установить новые свойства для каждого

потомка внутри поколения. Поскольку все объекты дублируются на одном и

том же уровне, то их предком будет по-прежнему являться background:

while (child) {

var dx:Number = x+Math.cos(Math.PI/180*angle*child)*

Êfractal._width*2+fractal._width/2*.4;

var dy:Number = y+Math.sin(Math.PI/180*angle*child)*

Êfractal._height*2+fractal._height/2*.4;

var dscale:Number = scale*.6;

drawFractal(dx, dy, dscale, dchild, generation-1);

child--;

}

7. На рис. 6 показан простейший фрактал, имеющий 3 потомка в 7

поколениях. Каждый такой потомок расположен под одинаковым углом

относительно друг друга вокруг родителя, то есть 0°, 120° и 240°:

Рис. 6. Простейший геометрический фрактал 3 x 7

8. В классе Main необходимо добавить исходный объект, который затем

нужно скрыть, а всё управление объектами передать классу Fractal:

var ball:MovieClip = this.target.attachMovie("Ball", "ball", 1);

ball._visible = false;

9. Первый, то есть корневой, элемент фрактала, построенный по

рекурсивному алгоритму, представляет собой экземпляр объекта ball. Этот

элемент необходимо поместить в центр сцены, используя новые переменные.

Необходимо также учесть также размеры объекта ball для более точного

размещения его в центре сцены:

var cx:Number = Stage.width/2;

var cy:Number = Stage.height/2;

10. Для того, чтобы построить фрактальное дерево (рис. 7) методом

drawFractal(), необходимо в качестве дублируемого объекта использовать

трапецию, схема построения которой с помощью двух прямоугольников

размерами 100 x 20 и 10 x 10, а также инструмента Free Transform Tool

(панель Tools) со свойством Distort (панель Options) показана на рис. 8.

11. При добавлении этого объекта в библиотеку необходимо также учесть,

что точка регистрации для него должна находиться по центру ширины, а не в

верхнем левом углу, как это было для объекта "Ball". Определите

самостоятельно местоположение точки регистрации, а также возможность

использования её расположения в верхнем левом углу и решите задачу,

поставленную в вопросе 5 для данной лабораторной работы.

Рис. 7. Дерево на основе геометрического фрактала 3 x 7

12. Создайте таким образом объект типа MovieClip с изображением трапеции

и поместите его в библиотеку файла "lab08.fla" с названием "Branch",

который используйте для построения элементов фрактала branch.

Рис. 8. Схема построения графического объекта "Branch"

13. , В метод drawFractal() класса Fractal также необходимо ввести новую

управляющую переменную angle для изменения угла при построении дерева:

public function drawFractal(x:Number, y:Number, angle:Number,

Êscale:Number, child:Number, generation:Number) {

}

14. Для расчёта углов наклонов веток необходимо ввести следующие

переменные (где 180° – угол разворота между крайними ветками):

var angle1:Number = 180/child;

var angle2:Number = -(180+angle1)/2;

15. Расчёт координат положения нового элемента фрактала dx и dy в цикле

изменения переменной child также должен быть изменён и добавлена новая

переменная dangle, которая должна быть передана рекурсивно методу

drawFractal() на месте переменной angle:

var dx:Number = x+Math.sin(Math.PI/180*angle)*scale;

var dy:Number = y-Math.cos(Math.PI/180*angle)*scale;

var dangle:Number = angle+angle2+angle1*child;

Контрольные вопросы:

1). Объясните смысл переменной dchild.

2). Как изменится порядок расчёта координат dx и dy элементов фрактала,

если поместить точку регистрации объекта "Ball" в его центр?

3). Где будет добавлен экземпляр объекта "Ball", если его не скрывать?

4). Что нужно сделать для того, чтобы начальное значение угла angle было

равно 90° и дерево при этом было построено так же, как на рис. 7?

5). Каким образом можно изменить расчёт координат dx и dy при

построении дерева, если переместить точку регистрации в объекте

"Branch" в верхний левый угол?

Вопросы для отчёта по лабораторным работам 2-5:

1). Предоставьте листинг класса Motion с двумя вариантами изменения

координат движущегося объекта (относительно скорости движения и

через угол наклона), первый из которых закомментируйте.

2). Предоставьте листинг класса Collision с объяснением решения задачи,

поставленной в вопросе 2 для лабораторной работы 3.

3). Предоставьте листинг класса Trail с поясняющими комментариями.

4). Предоставьте листинг класса Fractal с поясняющими комментариями.

Лабораторная работа 6

Программное рисование двумерных объектов

Цель работы:

1). Изучить: простейшие методы рисования в API с помощью ActionScript

2.0; пример расчёта столкновения более сложных графических объектов.

2). Создать приложение для управления ограниченным и бесконечным

движением одного графического объекта сложной формы внутри другого.

Порядок выполнения работы:

1. Создайте новый проект с названием "lab06".

2. Скопируйте в рабочую папку и присоедините к проекту классы Main,

Motion и Collision из предыдущих лабораторных работ.

3. Создайте новый класс Graphics2D, наследующий методы класса

MovieClip, в конструкторе которого в качестве прототипа класса MovieClip

укажите метод рисования окружности drawCircle():

public function Graphics2D() {

MovieClip.prototype.drawCircle = drawCircle;

}

4. Метод drawCircle() будет принимать значения координат центра

(переменные x, y) и радиуса (переменная radius) окружности:

function drawCircle(x:Number, y:Number, radius:Number) {

var n:Number = 8;

var theta:Number = (360/n)*Math.PI/180;

var sector:Number = radius/Math.cos(theta/2);

var angle2:Number = 0;

var angle1:Number = angle2-theta/2;

this.moveTo(radius, 0);

for (var i = 0; i<n; i++) {

angle2 += theta;

angle1 += theta;

var x2:Number = radius*Math.cos(angle2);

var y2:Number = radius*Math.sin(angle2);

var x1:Number = sector*Math.cos(angle1);

var y1:Number = sector*Math.sin(angle1);

this.curveTo(x1, y1, x2, y2);

}

this._x = x;

this._y = y;

}

5. Переменная n в методе drawCircle() управляет точностью построения

окружности (количество сегментов должно быть не меньше восьми).

6. Для того, чтобы создать графический объект с помощью метода

drawCircle(), необходимо добавить на сцену экземпляр класса Graphics2D и

создать пустой объект типа MovieClip, у которого уже будет новый метод:

var graphics:Graphics2D = new Graphics2D(this.target);

var bounds:MovieClip = this.target.createEmptyMovieClip("bounds", 0);

7. Для закрашивания объекта bounds можно использовать стандартные

методы. Так, например, для градиентного закрашивания от красного цвета до

чёрного сверху вниз линейно, необходимо использовать следующие

параметры (где cx и cy – координаты центра сцены):

var colors:Array = [0xff0000, 0x000000];

var alphas:Array = [100, 100];

var ratios:Array = [0x00, 0xff];

var matrix:Object = {matrixType:"box", x:-cx, y:-cy, w:cx*2, h:cy*2,

Êr:(90/180)*Math.PI};

bounds.beginGradientFill("linear", colors, alphas, ratios, matrix);

bounds.drawCircle(cx, cy, Math.min(cx, cy));

bounds.endFill();

8. Создайте новый объект ball типа MovieClip внутри объекта bounds и

закрасьте его, используя белый цвет:

var ball:MovieClip = bounds.createEmptyMovieClip("ball", 0);

ball.beginFill(0xffffff, 100);

ball.drawCircle(0, 0, 25);

ball.endFill();

9. Также в классе Main создайте экземпляр объекта класса Collision, в

который передайте объект ball с начальной скоростью 4 и углом наклона 90°.

10. В классе Collision создайте новый метод checkBounds(), в который

перенесите из метода startMotion() сценарий проверки момента столкновения

с внешними стенками с упреждением на шаг вперёд. Объект this._parent – это

родительский объект для объекта ball, в данном случае – это bounds:

function checkBounds() {

var dx:Number = this._x+this.object.vx;

var dy:Number = this._x+this.object.vy;

var distance:Number = Math.sqrt(dx*dx+dy*dy);

var space:Number = distance-(this._parent._width/2-this._width/2);

if (space>0) {

this.object.vx *= -1;

this.object.vy *= -1;

}

11. Обработчик метода onEnterFrame() в методе startMotion() класса Collision

должен быть упрощён до следующей записи:

this.target.onEnterFrame = function() {

this.stepMotion();

this.checkBounds();

};

12. Представленный выше пример сценария проверки момента столкновения

в методе checkBounds() предназначен для класса Motion, в котором метод,

описывающий движение, использует скорости движения по осям X и Y. Для

класса Motion в данной лабораторной работе измените код метода

checkBounds() для движения по одному значению скорости (по оси X) и углу

отклонения относительно её.

13. Для того, чтобы меньший объект ball двигался более хаотично внутри

большого bounds (рис. 9), можно использовать разные значения углов

отклонения в методах checkBounds() класса Collision и init() класса Main, а

также применить метод random() из класса Math для вычисления случайного

значения угла отклонения с множителем 90, указывающим на ограничение

изменения результата от 0 º до 90º:

this.object.vy -= Math.random()*90;

...

var motion:Collision = new Collision(ball, 4, Math.random()*90);