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

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

14. Проверьте работу проекта (рис. 9), сохраните и закройте его.

Рис. 9. Ограниченное движение графического объекта

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

1). В чём смысл переменной prototype класса MovieClip?

2). В чём смысл переменных colors, alphas, ratios метода beginGradientFill()?

3). Почему для рисования объекта ball используются координаты (0, 0)?

4). Как изменится вычисление переменной dy через угол наклона движения?

5). Почему для рисования окружности методом drawCircle() в классе

Graphics2D недостаточно менее чем 8 сегментов?

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

Столкновение множества графических объектов

Цель работы:

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

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

принципы интерактивного управления мышью в приложении; принципы

построения и использования массивов в ActionScript 2.0.

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

движением множества графических объектов ball. Создание объектов

сделать интерактивным при нажатии кнопкой мыши на площади объекта

bounds. Ограничить количество создаваемых объектов ball до 5.

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

1. Используйте копии классов Main, Graphics2D, Motion и Collision.

2. Для того, чтобы создать несколько объектов разного размера (от 25 до 50)

при нажатии кнопки мыши на объекте bounds (метод onPress) в месте

нажатия (свойства _xmouse и _ymouse объекта типа MovieClip) и ограничить

их количество до 5 (рис. 10), используйте следующий обработчик:

bounds.onPress = function() {

var n:Number = this.getNextHighestDepth();

if (n<5) {

ball = this.createEmptyMovieClip("ball"+n, n);

ball.beginFill(0xffffff, 100);

ball.drawCircle(this._xmouse, this._ymouse,

ÊMath.random()*25+25);

ball.endFill();

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

motion.startMotion();

}

};

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

Collision, используя метод push для новой переменной targets типа Array,

которую нужно определить в начале класса Collision как new Array().

Рис. 10. Столкновение множества графических объектов

4. Для проверки момента столкновения одного подвижного объекта с

другим необходимо создать отдельный метод checkBalls() и включить его в

список обработчика в методе startMotion() класса Collision:

this.target.onEnterFrame = function() {

this.stepMotion();

this.checkBounds();

this.checkBalls();

};

5. Метод checkBalls() практически полностью повторяет метод

checkBounds(), с учётом проверки момента пересечения текущего объекта с

другими объектами из массива с помощью метода hitTest():

var balls:Array = this.object.targets;

...

for (var i = 0; i<balls.length; i++) {

if (balls[i] != this && this.hitTest(balls[i])) {

var dx:Number = this._x-balls[i]._x+this.object.vx;

var dy:Number = this._y-balls[i]._y+this.object.vy;

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

var space:Number = distance-(balls[i]._width/2+this._width/2);

if (space<0) {

this.object.vx *= -1;

this.object.vy *= -1;

}

6. Проверьте работу проекта при добавлении и движении пяти независимых

подвижных графических объектов.

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

1). Для чего используется упреждающий расчёт положения объекта ball?

2). Что означает запись new Array() для определения переменной массива?

3). Почему иногда происходит "залипание" подвижных объектов при

столкновении их со стенками неподвижного объекта и друг с другом?

4). Как в реальности ведут себя физические тела при столкновении?

5). Какое отношение имеют свойства указателя мыши – координаты

_xmouse и _ymouse к графическому объекту типа MovieClip?

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

Моделирование системы гравитации

Цель работы:

1). Изучить: методы моделирования простейшей системы гравитации в

компьютерной графике; вывод данных на консоль вывода в ActionScript 2.0.

2). Создать приложение для моделирования гравитационных свойств

ограниченного движения графических объектов.

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

1. Скопируйте в новый проект классы Main, Graphics2D, Motion и Collision

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

2. Создайте новый класс Gravity, расширяющий класс Collision.

Конструктор класса Gravity кроме необходимых для суперконструктора

переменных, должен принимать две новые – friction и gravity типа Number.

3. Значение переменной friction ("сила тяготения", замедляющая скорость

движения) при вызове конструктора Gravity задайте равным 0.98, а значение

gravity ("масса" объекта) задайте пропорциональным его размерам.

4. Создайте новый метод setGravity() для ускорения движения подвижного

объекта, вызов которого включите в список обработчика onEnterFrame():

private function setGravity() {

this.object.vy += this.object.gravity;

}

5. Создайте ещё один новый метод setFriction() для замедления движения

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

private function setFriction() {

this.object.vx *= this.object.friction;

this.object.vy *= this.object.friction;

}

6. Для того, чтобы просмотреть промежуточное значение какой-либо

переменной и, например, изменить исходные данные, используйте команду

trace() с соответствующим аргументом, например:

trace(this.object.vy);

7. Исправьте методы класса Collision таким образом, чтобы объекты ball

после добавления "падали" вниз до столкновения со стенкой объекта bounds

и затем "скатывались" до максимально возможного значения _y (рис. 11).

Рис. 11. Объекты ball становятся неподвижными

под действием "гравитации"

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

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

1). Какую роль выполняет переменная friction?

2). Какую роль выполняет переменная gravity?

3). В чём заключается смысл метода setFriction() класса Gravity?

4). Почему происходит спонтанное "выталкивание" одних объектов ball из-

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

5). Где выводится результат выполнения команды trace()?

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

Моделирование пружинной системы

Цель работы:

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

графике на примере пружинной (колеблющейся с затуханием) системы.

2). Создать приложение для инициирования и управления затухающими

колебаниями матрицы изначально неподвижных графических объектов.

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

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

2. Используйте классы Main и Graphics2D из предыдущей работы.

3. Создайте новый метод drawRect() для рисования прямоугольников,

принимающий следующие переменные: x, y – координаты верхнего левого

угла; width, height – соответственно ширина и высота прямоугольника.

4. В классе Main создайте прямоугольный объект bounds с размерами

сцены, закрашивание для которого используйте из предыдущих работ.

5. С помощью двух приведённых ниже циклов создайте матрицу квадратов

5 x 5 размерами 25 пикселей (number – количество элементов матрицы на

сторону, size – размер одного элемента, grid – отступ между квадратами):

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

for (var j = 0; j<number; j++) {

var n:Number = bounds.getNextHighestDepth();

var box:MovieClip = bounds.createEmptyMovieClip("box"+n, n);

box.beginFill(0xffffff, 100);

box.drawRect((i-number/2)*

Ê (size+grid)+cx, (j-number/2)*(size+grid)+cy, size, size);

box.endFill();

}

6. Для управления элементами матрицы напишите обработку методов

нажатия и освобождения кнопки мыши на объекте (метод onRelease) и вне

объекта (метод onReleaseOutside):

box.onPress = function() {

this.startDrag();

};

box.onRelease = box.onReleaseOutside=function () {

this.stopDrag();

};

7. Создайте новый класс Spring с двумя методами startSpring() и setSpring().

8. Конструктор класса Spring должен принимать три аргумента для старта

движения и замедления (по аналогии с конструктором класса Gravity):

public function Spring(target, friction, gravity) {

...

targets.push({target:target, x:target._x, y:target._y});

}

9. Переменные targets.x и targets.y предназначены для сохранения

начальных значений координат элементов матрицы.

10. Изменение скорости движения после перемещения элемента системы с

помощью указателя мыши (с замедлением) задайте через переменные dx и dy:

var dx:Number = this.object.targets[i].x-this.object.targets[i].target._x;

var dy:Number = this.object.targets[i].y-this.object.targets[i].target._y;

this.object.vx += dx/this.object.gravity;

this.object.vy += dy/this.object.gravity;

11. Необходимо составить метод setSpring() таким образом, чтобы при

"оттаскивании" элемента матрицы с помощью мыши и отпускании его, он

возвращался на своё место, двигаясь по принципу пружины. Кроме того, все

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

активного элемента и двигаться синхронно ему (рис. 12).

Рис. 12. Синхронное движение элементов пружинной системы

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

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

1). Для чего используется массив значений targets?

2). Сколько переменных хранит объектная модель массива targets?

3). Зачем необходимо хранение начальных координат элементов системы?

4). Почему при определённых значениях аргументов конструктора Spring

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

5). Какое физическое явление можно имитировать данной моделью?

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

1). Предоставьте листинги классов Collision для лабораторных работ 7 и 8

с объяснением методов checkBalls() и checkBounds().

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

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

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

4). Предоставьте листинг класса Graphics2D с описанием всех

существующих в нём методов, включая конструктор, а также примеры

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

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

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

Цель работы:

1). Изучить: общие принципы программного построения простейших

трёхмерных моделей; использование аффинных преобразований для

получения проекций вращения трёхмерных моделей; использование

фокусного расстояния при расчёте перспективного проецирования.

2). Создать приложение для управления вращением трёхмерного

графического объекта вдоль осей X, Y и Z на плоском фоне.

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

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

2. Используйте классы Main и Graphics2D из предыдущей работы.

3. По аналогии класса Graphics2D создайте новый класс Graphics3D для

рисования трёхмерных графических объектов с помощью полигонов.

4. В конструкторе класса Graphics3D определите следующие прототипы:

MovieClip.prototype.vertex3D = new Array();

MovieClip.prototype.polygons = new Array();

MovieClip.prototype.setVertex = setVertex;

MovieClip.prototype.setPolygon = setPolygon;

MovieClip.prototype.render = render;

MovieClip.prototype.rotate = rotate;

5. Так же используются следующие глобальные переменные:

var vertex3D, polygons:Array;

var rgb, alpha:Number;

var matrix:Object;

6. Методы setVertex() и setPolygon() предназначены соответственно для

заполнения массивов координат вершин и порядок построения полигонов по

этим вершинам (четыре вершины – a, b, c, d):

public function setVertex(x:Number, y:Number, z:Number) {

vertex3D.push({x:x, y:y, z:z});

}

public function setPolygon(a:Number, b:Number, c:Number,

Êd:Number, rgb, alpha) {

polygons.push({vertices:[a, b, c, d], rgb:rgb, alpha:alpha});

}

7. При рисовании граней трёхмерной модели на одном плоском

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

наблюдателю, чем все остальные так, чтобы не было перекрытия. Для этого

используется массив depths для хранения информации о порядке граней:

public function render(focalLength:Number) {

...

var vertex2D:Array = new Array();

var depths:Array = new Array();

for (var i = 0; i<polygons.length; i++) {

var zDepth:Number = 0;

for (var j = 0; j<polygons[i].vertices.length; j++) {

var zVertex:Array = polygons[i].vertices[j];

if (!vertex2D[zVertex]) {

vertex2D[zVertex] = new Object();

var scale:Number = focalLength/

Ê(focalLength-vertex3D[zVertex].z);

vertex2D[zVertex].x = vertex3D[zVertex].x*scale;

vertex2D[zVertex].y = vertex3D[zVertex].y*scale;

}

zDepth += vertex3D[zVertex].z;

}

depths.push([polygons[i], zDepth]);

}

depths.sort(function (a:Number, b:Number) {

return a[1]>b[1];

});

for (var i = 0; i<depths.length; i++) {

var zPolygon:Array = depths[i][0].vertices;

this.moveTo(vertex2D[zPolygon[0]].x, vertex2D[zPolygon[0]].y);

this.beginFill(depths[i][0].rgb, depths[i][0].alpha);

for (var j = 1; j<zPolygon.length; j++) {

this.lineTo(vertex2D[zPolygon[j]].x,

Êvertex2D[zPolygon[j]].y);

}

this.lineTo(vertex2D[zPolygon[0]].x, vertex2D[zPolygon[0]].y);

this.endFill();

}

8. Единственным аргументом метода render() является переменная

focalLength, которая учитывается при расчёте перспективной проекции.

9. Теперь, например, для того, чтобы задать некоторый четырёхугольный

полигон в трёхмерной системе координат, в классе Main необходимо сделать

вызов следующих методов:

var cube:MovieClip = bounds.createEmptyMovieClip("cube", 1);

cube.setVertex(-75, -75, 75);

cube.setVertex(75, -75, 75);

cube.setVertex(75, -75, -75);

cube.setVertex(-75, -75, -75);

cube.setPolygon(0, 1, 2, 3, 0xff0000, 50);

10. Прорисовку графического объекта с помощью метода render()

необходимо делать в каждом кадре, очищая перед выводом экран с помощью

метода clear(), а также указывать тип линии рисования lineStyle().

11. Задайте рисование правильного куба в пространстве. Все грани закрасьте

шестью основными цветами. Измените степень прозрачности (рис. 13).

Рис. 13. Куб с разной степенью прозрачности граней:

0% (слева), 100%(в центре) и 50% (справа)

12. Для того, чтобы вращать или перемещать трёхмерный объект в

пространстве, необходимо использовать аффинные преобразования. Для

этого необходимо создать новый класс Matrix, конструктор которого будет

пустым, а основным методом будет transformMatrix() следующей структуры:

private function transformMatrix(matrix:Object) {

if (complete) {

var move:Object = new Object();

move.a = matrix.a*a+matrix.b*d+matrix.c*g;

...

a = move.a;

...

} else {

a = matrix.a;

...

}

complete = true;

}

13. Переменная matrix представляет собой объект с девятью свойствами: a, b,

c, d, e, f, g, h, i для хранения текущей матрицы аффинных преобразований.

14. Три других метода rotateX(), rotateY() и rotateZ() соответственно будут

представлять собой аффинные преобразования при вращении вдоль

соответствующих осей. Из каждого такого метода должно быть задано

обращение к методу transformMatrix() с соответствующей матрицей

аффинных преобразований, например, для метода rotateX(angle):

sin = Math.sin(angle*Math.PI/180);

cos = Math.cos(angle*Math.PI/180);

transformMatrix({a:1, b:0, c:0, d:0, e:cos, f:sin, g:0, h:-sin, i:cos});

15. Для вызова этих методов из класса Main одновременно в классе

Graphics3D создайте один метод rotate() с тремя аргументами – углами.

16. В самое начало метода render() необходимо добавить следующий

фрагмент умножения матрицы трансформации на координаты вершин,

взятых из массива vertex3D. При условии наличия заполненного объекта

matrix должен выполняться цикл и последующее удаление объекта:

for (var i = 0; i<vertex3D.length; i++) {

var move:Object = vertex3D[i];

var x:Number = matrix.a*move.x+matrix.b*move.y+matrix.c*move.z;

...

move.x = x;

...

}

delete matrix;

17. Для того, чтобы более гибко управлять вращением куба, можно

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

Также можно включить управление значением focalLength для метода

render() с помощью колёсика прокрутки мыши на площади фонового объекта

bounds, к которому должен быть прикреплён объект cube.

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

1). Для чего используется переменная zDepth в методе render()?

2). Каким образом происходит сортировка элементов массива depths?

3). В чём смысл использования логической переменной complete?

4). Для чего используется переменная move’ в методе render()?

5). Что происходит при уменьшении значения focalLength?

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

Моделирование системы освещения

Цель работы:

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