Движение по траектории

Методические указания к практическому занятию № 29

Тема: «Компьютерная графика и анимация в Visual C#»

Количество часов: 2.

Цели:

- обучающая: изучить возможности построения графиков с помощью элемента управления Chart, написать и отладить программу построения на экране графика заданной функции; изучить возможности Visual Studio по созданию простейших графических изображений, написать и отладить программу построения на экране различных графических примитивов; изучить возможности Visual Studio по созданию простейшей анимации, написать и отладить программу, выводящую на экран анимационное изображение научить анализировать, выделять главное, существенное при решении задачи, самостоятельно работать;

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

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

Задания:

Графики функций.

2. Компьютерная графика.

3. Анимация.

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

 

МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ВЫПОЛНЕНИЮ:

1. Графики функций

Обычно результаты расчетов представляются в виде графиков и диаграмм. Библиотека.NET Framework имеет мощный элемент управления Chart для отображения на экране графической информации (рис. 1).

Рисунок 1 -  Окно программы с элементом управления

 

Построение графика (диаграммы) производится после вычисления таблицы значений функции y = f (x) на интервале [Xmin, Xmax] с заданным шагом. Полученная таблица передается в специальный массив Points объекта Series элемента управления Chart с помощью метода DataBindXY. Элемент управления Chart осуществляет всю работу по отображению графиков: строит и размечает оси, рисует координатную сетку, подписывает название осей и самого графика, отображает переданную таблицу в виде всевозможных графиков или диаграмм. В элементе управления Chart можно настроить толщину, стиль и цвет линий, параметры шрифта подписей, шаги разметки координатной сетки и многое другое. В процессе работы программы изменение параметров возможно через обращение к соответствующим свойствам элемента управления Chart. Так, например, свойство AxisX содержит значение максимального предела нижней оси графика, и при его изменении во время работы программы автоматически изменяется изображение графика.

Задание 1: составить программу, отображающую графики функций sin(x) и cos(x) на интервале [Xmin, Xmax]. Предусмотреть возможность изменения разметки координатных осей, а также шага построения таблицы.

Прежде всего, следует поместить на форму сам элемент управления Chart. Он располагается на панели элементов в разделе Данные.

Список графиков хранится в свойстве Series, который можно изменить, выбрав соответствующий пункт в окне свойств. Поскольку на одном поле требуется вывести два отдельных графика функций, нужно добавить еще один элемент. Оба элемента, и существующий и добавленный, нужно соответствующим образом настроить: изменить тип диаграммы ChartType на Spline. Здесь же можно изменить подписи к графикам с абстрактных Series1 и Series2 на sin(x) и cos(x) - за это отвечает свойство Legend. Наконец, с помощью свойства BorderWidth можно сделать линию графика потолще, а затем поменять цвет линии с помощью свойства Color.

Ниже приведен текст обработчика нажатия кнопки «Расчет!», который выполняет все требуемые настройки и расчеты и отображает графики функций:

 

Индивидуальное задание 1. Постройте график функции для своего варианта. Таблицу данных получить путем изменения параметра X с шагом dx. Добавьте второй график для произвольной функции.

 

 

Компьютерная графика

Для форм в C# предусмотрен способ, позволяющий приложению при необходимости перерисовывать окно формы в любой момент времени. Когда вся клиентская область окна формы или часть этой области требует перерисовки, форме передается событие Paint. Все, что требуется от программиста, - это создать обработчик данного события (рис. 2), наполнив его необходимой функциональностью.

Рисунок 2 - Создание обработчика события Paint

 

Для рисования линий и фигур, отображения текста, вывода изображений и т. д. нужно использовать объект Graphics. Этот объект предоставляет поверхность рисования и используется для создания графических изображений. Ниже представлены два этапа работы с графикой.

• Создание или получение объекта Graphics.

• Использование объекта Graphics для рисования.

Существует несколько способов создания объектов Graphics. Одним из самых используемых является получение ссылки на объект Graphics через объект PaintEventArgs при обработке события Paint формы или элемента управления:

 

 

Методы и свойства класса Graphics.

Имена большого количества методов, определенных в классе Graphics, начинаются с префикса Draw* и Fill*. Первые из них предназначены для рисования текста, линий и не закрашенных фигур (таких, например, как прямоугольные рамки), а вторые - для рисования закрашенных геометрических фигур. Ниже рассматривается применение наиболее часто используемых методов, более полную информацию можно найти в документации по Visual Studio.

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

Первый параметр задает инструмент для рисования линии - перо. Перья создаются как объекты класса Pen, например:

 

Здесь создается черное перо толщиной 2 пиксела. При создании пера можно выбрать его цвет, толщину и тип линии, а также другие атрибуты.

Остальные параметры перегруженных методов DrawLine задают координаты соединяемых точек. Эти координаты могут быть заданы как объекты класса Point и PointF, а также в виде целых чисел и чисел с плавающей десятичной точкой.

В классах Point и PointF определены свойства X и Y, задающие, со­ответственно, координаты точки по горизонтальной и вертикальной оси. При этом в классе Point эти свойства имеют целочисленные значения, а в классе PointF - значения с плавающей десятичной точкой.

Третий и четвертый варианты метода DrawLine позволяют задавать координаты соединяемых точек в виде двух пар чисел. Первая пара определяет координаты первой точки по горизонтальной и вертикальной оси, а вторая - координаты второй точки по этим же осям. Разница между третьим и четвертым методом заключается в использовании координат различных типов (целочисленных int и с плавающей десятичной точкой float).

Чтобы испытать метод DrawLine в работе, создайте приложение DrawLineApp (аналогично тому, как Вы создавали предыдущее приложение в пункте 1 этой практической работе). В этом приложении создайте следующий обработчик события Paint:

Здесь мы вызываем метод DrawLine в цикле, рисуя 50 горизонтальных линий (рис. 3).

Рисунок 3 - Пример использования DrawLine

 

Вызвав один раз метод DrawLines, можно нарисовать сразу несколько прямых линий, соединенных между собой. Иными словами, метод DrawLines позволяет соединить между собой несколько точек. Координаты этих точек по горизонтальной и вертикальной осям передаются методу через массив класса Point или PointF:

Задание 2. Для демонстрации возможностей метода DrawLines создайте приложение. Код будет выглядеть следующим образом:

 

 

Результат работы программы приведен на рисунке 4.

Рисунок 4 - Пример использования массива точек

 

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

В качестве первого параметра передается перо класса Pen. Остальные параметры задают расположение и размеры прямоугольника.

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

Метод DrawEllipse рисует эллипс, вписанный в прямоугольную область, расположение и размеры которой передаются ему в качестве параметров. При помощи метода DrawArc программа может нарисовать сегмент эллипса. Сегмент задается при помощи координат прямоугольной области, в которую вписан эллипс, а также двух углов, отсчитываемых в направлении против часовой стрелки. Первый угол Angle1 задает расположение одного конца сегмента, а второй Angle2 - расположение другого конца сегмента (рис. 5).

Рисунок 5 - Углы и прямоугольник, задающие сегмент эллипса

 

В классе Graphics определен ряд методов, предназначенных для рисования закрашенных фигур. Имена некоторых из этих методов, имеющих префикс Fill*:

• FillRectangle (рисование закрашенного прямоугольника),

• FillRectangles (рисование множества закрашенных многоуголь­ников),

• FillPolygon (рисование закрашенного многоугольника),

• FillEllipse (рисование закрашенного эллипса),

• FillPie (рисование закрашенного сегмента эллипса),

• FillClosedCurve (рисование закрашенного сплайна),

• FillRegion (рисование закрашенной области типа Region).

Есть два отличия методов с префиксом Fill* от одноименных методов с префиксом Draw*. Прежде всего, методы с префиксом Fill* рисуют закрашенные фигуры, а методы с префиксом Draw* - не закрашенные. Кроме этого, в качестве первого параметра методам с префиксом Fill* передается не перо класса Pen, а кисть класса SolidBrush. Ниже приведем пример, выводящий закрашенный прямоугольник:

Индивидуальное задание 2. Изучите с помощью справки MSDN методы и свойства классов Graphics, Color, Pen и SolidBrush. Создайте собственное приложение - выводящий на форму рисунок, состоящий из различных объектов (ли­ний, многоугольников, эллипсов, прямоугольников и пр.), не закрашен­ных и закрашенных полностью. Используйте разные цвета и стили ли­ний (сплошные, штриховые, штрих-пунктирные).

 

Анимация

Класс для работы с таймером Timer формирует в приложении повторяющиеся события. События повторяются с периодичностью, указанной в миллисекундах в свойстве Interval. Установка свойства Enabled в значение true запускает таймер. Каждый тик таймера порождает событие Tick, обработчик которого обычно и создают в приложении. В этом обработчике могут изменяться какие-либо величины и вызываться принудительная перерисовка окна. Для создания анимации весь код, рисующий что-либо на форме, должен находиться в обработчике события Paint.

Для создания простой анимации достаточно использовать таймер, при тике которого будут изменяться параметры изображения (например, координаты концов отрезка) и вызываться обработчик события Paint для рисования по новым параметрам. При таком подходе не надо заботиться об удалении старого изображения, ведь оно создается в окне заново.

Задание 3. В качестве примера рассмотрим код анимации секундной стрелки часов:

 

Движение по траектории.

Движение по траектории реализуется аналогично выше рассмотренному примеру. Для реализации движения по прямой нужно увеличивать переменные, являющиеся узловыми точками, на определенные константы: в приведенном выше примере это переменные x2 и y2. Для задания более сложной траектории можно использовать различные па­раметрические кривые.

В случае движения на плоскости обычно изменению подвергает­ся один параметр. Рассмотрим пример реализации движения окруж­ности по декартову листу (рис. 6).

Рисунок 6 - Декартов лист

 

Декартов лист – это плоская кривая третьего порядка, удовлетворяющая уравнению в прямоугольной системе x ³ + y ³ = 3∙a∙x∙y. Параметр 3∙a определяется как диагональ квадрата, сторона которого равна наибольшей хорде петли.

При переходе к параметрическому виду получаем:

где t = tg φ.

 

 

Описание ряда интересных кривых для создания траектории дви­жения можно найти в Википедии в статье Циклоидальная кривая.

Задание 4. Программная реализация выглядит следующим образом:

Индивидуальное задание 3. Выполните задание согласно варианту:

1. Создайте программу, показывающую пульсирующее сердце.

2. Создайте приложение, отображающее вращающийся винт са­молета.

3. Разработайте программу анимации двигающегося человечка.

4. Создайте программу, показывающую движение окружности по синусоиде.

5. Создайте приложение, отображающее движение окружности по спирали.

6. Разработайте программу анимации падения снежинки.

7. Создайте программу, показывающую скачущий мячик.

8. Создайте приложение, отображающее движение окружности вдоль границы окна. Учтите возможность изменения размеров окна.

9. Разработайте программу анимации летающего бумеранга.

10. Создайте программу, показывающую падение нескольких звезд одновременно.

11. Создайте приложение, отображающее хаотичное движение звезды в окне.

12. Разработайте программу анимации взлета ракеты. Старт осу­ществляется по нажатию специальной «красной» кнопки.

13. Создайте программу, показывающую движение окружности вдоль многоугольника. Число вершин вводится пользователем до анимации.

14. Создайте приложение, отображающее броуновское движение молекулы в окне.

15. Разработайте программу анимации движения планет в Солнеч­ной системе.

16. Создайте программу, показывающую движение квадратика по траектории, состоящей из 100 точек, хранящихся в специальном массиве.

17. Создайте приложение, имитирующие механические часы.

18. Разработайте программу анимации падения нескольких лист­ков с дерева. Движение не должно быть линейным.

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

20. Создайте приложение, отображающее движение автомобиля с вращающимися колесами.

Вопросы для самоконтроля:

1. Графики функций.

2. Компьютерная графика.

3. Анимация.

Список литературы и ссылки на Интернет-ресурсы, содержащие информацию по теме:

Основная литература:

1. Дёмин, А.Ю. Лабораторный практикум по информатике [Электронный ресурс]: учебное пособие / А.Ю. Дёмин, В.А. Дорофеев; Томский политехнический университет. – Томск: Изд-во Томского политехнического университета, 2014. – 132 с. — Режим доступа: https://portal.tpu.ru/SHARED/a/AD/Education/Tab1/workbook_Informatic.pdf.

2. Мейер, Б. Объектно-ориентированное программирование и программная инженерия [Электронный ресурс]/ Мейер Б.— Электрон. текстовые данные. — М.: Интернет-Университет Информационных Технологий (ИНТУИТ), 2016. — 285 c. — Режим доступа: http://www.iprbookshop.ru/39552.