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

Министерство образования и науки Луганской Народной Республики

государственное образовательное учреждение

среднего профессионального образования

Луганской Народной Республики

«Луганский колледж строительства, экономики и права»

ОТКРЫТОЕ ЗАНЯТИЕ

по дисциплине «Основы алгоритмизации и программирования»

на тему: «Разработка и отладка программ с построением анимированных изображений»

Преподаватель: Рогозин В. С. Группа: 2КС-21

Дата проведения: 17.12.2018

Тема: Разработка и отладка программ с построением анимированных изображений

Тип: комбинированное.

Цели:

Учебная: научить создавать компьютерные модели, используя компоненты среды программирования Borland C++ Builder.

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

Воспитательная: способствовать воспитанию ответственности за выполненную работу, уверенности в своих знаниях при работе с графикой среды программирования Borland C++ Builder, культуры поведения на занятии.

Материальное и учебно-методическое обеспечение занятия: компьютеры с средой программирования Borland C++ Builder, презентация «Составление и отладка программ с построением изображений. Анимация», мультимедийный проектор.

 Межпредметные связи: «Математика», «Микропроцессорные системы», «Информационные технологии»

Методы обучения: словесный (повторение, рассуждение, рассказ, беседа); наглядный (демонстрация с помощью мультимедийного оборудования); практический (разрабатывают програму); метод контроля, самоконтроля (при выполнении заданий по вариантам, практического задания).

Литература

1.     Шилдт Г. С++: базовый курс, 3-ое издание.: Тэр. с англ.-М. : Издательский дом "Вильямс", 2010

2.     Архангельский А. Я. "Програмирование в C++ Builder". - М.: "Издательство Бином", 2003

3.            Парфилова Н.И., Пылькин А.Н., Трусов Б.Г. Программирование: Основы алгоритмизации и программирования: учебник / под ред. Б.Г.Трусова. – М., 2014.

Технологическая карта занятия

№ п/п	Назва­ние этапа за­нятия	Продолжительность	Используе­мые методы, приемы, формы, виды работы	Содержание дея­тельности препо­давателя	Содержание деятельности студента
1	Организационный момент	2 мин.	Словесный	Приветствует, про­веряет присутст­вующих, готовность к занятию.	Отвечают на приветствие. Староста док­ладывает о явке студен­тов на за­ня­тие. Занимают свои места.
2	Актуа­ли­зация опорных знаний	15 мин.	Опрос, пись­менная ра­бота, диффе­ренцирован­ный подход, самопроверка	Выдает задания для письменной ра­боты, поясняет ус­ловия выполнения заданий, критерии оценивания. Организует самоконтроль.	Отвечают на во­просы, вы­пол­няют зада­ние на кар­точках и компьютерах. Осуществ­ляют само­контроль.
3	Мотива­ция учеб­ной дея­тель­ности. Сооб­ще­ние темы, цели за­ня­тия, домаш­него за­дания	3 мин.	Словесный, фронтальный	Поясняет значение темы в современном мире. Сообщает тему занятия, фор­мулирует цели заня­тия.	Слушают, за­пи­сывают.
4	Изуче­ние но­вого ма­териала	15 мин.	Словесный, наглядный	Сообщает новый материал. Задает вопросы. Показывает примеры разработки программ.	Отве­чают на во­просы.
5	Закреп­ле­ние и сис­тема­тиза­ция полу­ченных знаний	40 мин.	Словесный, практический, работа в па­рах, взаимо­проверка, ме­тод развития критического мышления	Инструктирует по организации рабо­чих мест, соблюде­нию правил ТБ при выполнении прак­тического задания. Формулирует зада­ния, контролирует выполнение.	Повторяют пра­вила ТБ при ра­боте за компью­тером. Выполняют за­дания на компь­ютере в парах, со­ставляют фишьбоун
6	Подве­де­ние ито­гов, вы­став­ление оценок	5 мин	Словесный, групповая ра­бота, «Чемодан – мясорубка - корзина»	Подводит итоги, задает домашнее задание выставляет оценки, проводит рефлек­сию	Слушают, записывают домашнее задание уча­ствуют в реф­лексии

Структура занятия

1.            Организационный момент (2 мин.)

2.            Актуализация опорных знаний (15 мин.)

Письменная работа. Дифференцированные карточки на 2 варианта

3.            Мотивация учебной деятельности. Сообщение темы, цели занятия. Сообщение домашнего задания (3 мин.)

4.                 Изучение нового материала (15 мин.)

4.1. Методы создания анимированной модели.

4.2 Компоненты для создания изображения.

5.     Закрепление и систематизация полученных знаний (40 мин.)

5.1. Программа «Модель яблока».

5.2. Программа «Модель движения по окружности»

5.3. Составление «Фишбоун» (5 мин.)

6.     Подведение итогов, домашнее задание, выставление оценок. Рефлексия «Чемодан – мясорубка - корзина» (5 мин.)

1.                 Организационный момент.

2.                 Сообщение темы и цели занятия.

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

3.Актулизация опорных знаний и навыков.

Для повторения пройдённого материала и проверки знаний, которые вы получили ранее, пройдем тест. На выполнения теста отводится 15 минут. Тест состоит из трех заданий. Первые два задания выполняете на компьютере. В папке «Урок» выберете свой вариант и откройте тест после выполнения теста результат занесите в бланк. Студенты, у которых первый вариант выполняют задание на компьютере, второй вариант выполняет письменное задание, по выполнению поменяйтесь местами.

1 вариант
ФИО студента_________________________________________________
Задание 1. Установите соответствия (Тест 1) 5 балов
Задание 2. Расположите строки кода в правильном порядке (Тест 2) 10 балов
Задание 3. Вставьте пропущенные слова. 15 балов за каждый правильный ответ 3 бала.
_____________- это абстракция описывающая методы, свойства, ещё не существующих объектов. _____________ — конкретное представление абстракции, имеющее свои свойства и методы. Созданные объекты на основе одного класса называются экземплярами этого класса. Эти объекты могут иметь различное поведение, свойства, но все равно будут являться объектами одного класса. В ООП существует три основных принципа построения классов: _______________ - это свойство, позволяющее объединить в классе и данные, и методы, работающие с ними и скрыть детали реализации от пользователя. _______________ - это свойство, позволяющее создать новый класс-потомок на основе уже существующего, при этом все характеристики класса родителя присваиваются классу-потомку. _______________ - свойство классов, позволяющее использовать объекты классов с одинаковым интерфейсом без информации о типе и внутренней структуре объекта.
Проверку выполнил ФИО _____________________________________________
Таблица результатов тестов
Задание 1.	Задание 2.		Задание 3.
Выполнение программы «Модель яблока»
Выполнение программы «Модель движения по окружности»
Составление «Фишбоуна»
Всего

2 вариант
ФИО студента_________________________________________________
Задание 1. Установите соответствия (Тест 1) 5 балов
Задание 2. Расположите строки кода в правильном порядке (Тест 2) 10 балов
Задание 3. Вставьте пропущенные слова. 15 балов за каждый правильный ответ 3 бала.
____________ в программировании состоит из свойств и методов. _________ - это любые данные, которыми можно характеризовать объект класса. ____________ - это функции, которые могут выполнять какие-либо действия над данными (свойствами) класса. Все свойства и методы классов имеют права доступа. По умолчанию, все содержимое класса является доступным для чтения и записи только для него самого. Для того, чтобы разрешить доступ к данным класса извне, используют модификатор доступа ___________. Закрытые данные класса размещаются после модификатора доступа ______________ .
Проверку выполнил ФИО _____________________________________________
Таблица результатов
Задание 1.	Задание 2.		Задание 3.
Выполнение программы «Модель яблока»
Выполнение программы «Модель движения по окружности»
Составление «Фишьбоун»
Всего

Поменяйтесь с вашим напарником проверочными листами, напишите ФИО в графе «Проверку выполнил» и проверьте правильность выполнения третьего задания, за каждый правильный ответ - 3 бала. Выставьте количество набранных балов под третьем заданием и верните листок.

Ответы

1 вариант

3. Вставьте пропущенные слова

Класс - это абстракция описывающая методы, свойства, ещё не существующих объектов. Объект - конкретное представление абстракции, имеющее свои свойства и методы. Созданные объекты на основе одного класса называются экземплярами этого класса. Эти объекты могут иметь различное поведение, свойства, но все равно будут являться объектами одного класса. В ООП существует три основных принципа построения классов:

Инкапсуляция - это свойство, позволяющее объединить в классе и данные, и методы, работающие с ними и скрыть детали реализации от пользователя.

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

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

2 вариант

3. Вставьте пропущенные слова

Класс в программировании состоит из свойств и методов. Свойства - это любые данные, которыми можно характеризовать объект класса. Метод - это функции, которые могут выполнять какие-либо действия над данными (свойствами) класса. Все свойства и методы классов имеют права доступа. По умолчанию, все содержимое класса является доступным для чтения и записи только для него самого. Для того, чтобы разрешить доступ к данным класса извне, используют модификатор доступа public. Закрытые данные класса размещаются после модификатора доступа private .

3. Мотивация учебной деятельности.

При программировании некоторых процессов возникает необходимость описания движения определённого объекта. Часто движение применяется при разработке игровых программ. Еще одна область применения движения - это визуализация физических или химических законов. Сегодня мы и рассмотрим методы создания анимированных моделей.

4. Изучение нового материала

Анимация - это демонстрирующаяся в быстром темпе последовательность кадров, каждый из которых несколько отличается от предшествовавшего ему и следующего за ним кадра. Каждый кадр отображается в течение определенного промежутка времени. Если кадров достаточное количество, и время их отображения невелико, то создается иллюзия движения.

Процедурная анимация полностью или частично рассчитывается компьютером. Сюда можно включить следующие её виды:

·                   симуляция физического взаимодействия твёрдых тел;

·                   имитация движения систем частиц, жидкостей и газов;

·                   имитация взаимодействия мягких тел (ткани, волос);

·                   расчёт движения иерархической структуры связей (скелета персонажа) под внешним воздействием (Ragdoll).

Для создания анимации в среде программирования C++ Builder используется два метода: метод «Реализации математической модели» и с помощью программы Macromedia Flash и компонента MediaPlayer.

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

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

Сегодня мы изучим применение анимации для визуализации математической модели.

Рассмотрим основные этапы создания анимации.

1 Этап. Выводим исходное изображение.

2 Этап. Очищаем холст.

3 Этап. Изменяем положение и форму объекта в соответствии с данным физическим законом.

4 Этап. Выводим изображение на экран и повторяем цикл.

Какие компоненты могут нам понадобиться на каждом этапе.

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

Вывести готовое изображение с помощью компонентов

·                   Image (Образ) — предназначен для создания на форме невидимого контейнера, в который можно поместить один графический файл с битовым образом, пиктограммой или метафайл.

·                   Shape (Фигура) — позволяет рисовать на форме простые геометрические фигуры, такие как окружность, квадрат, эллипс или прямоугольник при изменении свойства Shape.

Второй способ – это нарисовать изображение, используя графический класс TCanvas. Этот класс является основой для графической подсистемы C++ Builder. Он объединяет в себе и пространство (холст, канву) для создания, хранения и обработки графических объектов, и средства для рисования (перо, кисть, шрифт), и методы для рисования (набор функций по рисованию типовых геометрических фигур).

При выборе способа отображения рисунка каждый программист должен руководствоваться как будет вести себя модель на последующих этапах.

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

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

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

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

5.     Закрепление и систематизация полученных знаний (40 мин.)

5.1. Программа «Модель яблока».

5.2. Программа «Модель движения по окружности»

5.3 Заполнение «Фишбоун»

Для закрепления полученных знаний, напишем программу, которая иллюстрирует закон всемирного тяготения. Такого типа программы вы сможете применять при создании справочников, что сделает их более наглядными и интерактивными.

Создайте форму и расположите следующие компоненты. Image1, Image2, Image3, Button1, Timer1.

Задайте первоначальные свойства.

Компонент	Свойство	Значение	Действие
Form1	AutoSize	True	Автоматический размер формы
Image1	Picture	Выбрать файл ньютон1.jpg	Задать содержимое рисунка фона
Image2	Picture	Выбрать файл яблоко.png	Задать содержимое рисунка движения
	Transparent	True	Сделать фон прозрачным
	Top и Left	Расположить над головой Ньютона	Начальное положение яблока
Image3	Picture	Выбрать файл ньютон1.jpg	Задать содержимое рисунка сообщения
	Visible	False	Скрыть рисунок
Timer1	Enabled	False	Деактивировать таймер
	Interval	100	Задать скорость движения яблока
Button1	Caption	«Начать»	Название кнопки

Переходим к написанию кода программы.

void __fastcall TForm1::Button1Click(TObject *Sender)

{

 Timer1->Enabled=True;

}

//---------------------------------------------------------------------------

void __fastcall TForm1::Timer1Timer(TObject *Sender)

{

Image2->Top= Image2->Top+5;

}

Как мы видим, яблоко пролетает сквозь голову и уходит за границу картинки, а нам требуется еще и вывести вторую картинку на экран. Исправьте код так, чтобы при соприкосновении с головой ученого, выводилась 3 картинка, содержащая закон Ньютона. Кто справится, поднимает руку, я подойду и проверю выполнение, выставлю баллы. Максимально количество баллов, которое вы можете получить – 5 балов.

Что ж, как мы видим требовалось лишь добавить условие для таймера.

if (Image2->Top>180) {  Timer1->Enabled=False; Image3->AutoSize=True;

Image3->Visible=True;

}

         Теперь все в порядке.

         Попробуем более сложную модель, а точнее движение точки по окружности.

Можно конечно обойтись и без всяких подробностей, просто дать формулы, по которым определяются координаты точки, движущейся по окружности. Но скорее всего, поймут их не все, в основном те, у кого «отлично» по математике. Для остальных так и останется загадкой, зачем нужны синусы и косинусы.

Раз в формулах есть синусы и косинусы, повторяем определение, что такое косинус и синус острого угла прямоугольного треугольника АВС. Косинус острого угла в прямоугольном треугольнике это отношение прилежащего катета к гипотенузе, синус противолежащего катета к гипотенузе.

Переходим к прямоугольной системе координат. На которой определяем от чего зависят координаты точки при движении по окружности. Рассматривая тот же треугольник АВС, мы приходим к выводу, что при постоянном радиусе координаты X и Y будут выражаться по формулам:

X=R∙cos α

Y=R∙sin α

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

Так как графическое окно в системе программирования представляет собой первую четверть прямоугольной системы координат, ось Y которой направлена вниз. Если брать за центр окружности, по которой будет двигаться точка начало системы координат, то мы увидим только четвертую часть от всей траектории движения. Поэтому воспользуемся еще одним математическим знанием: параллельный перенос и его свойства.

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

x´= 320 + x

y´= 200 + y

         Переместив начало координат в центр графического окна, мы не перевернули ось Y. Она так и осталась направленной в низ. Поэтому воспользуемся правилами преобразования графиков, про них упоминается при изучении темы «Квадратичная функция и ее график» Умножение функции на -1 отражает график симметрично относительно оси ОХ. Воспользуемся этим свойством для того что бы перевернуть ось Y в «нормальное» состояние. Мы установили, что положение точки будет зависеть от угла, рассмотрим какие значения будет принимать угол при движении точки по окружности с определенным шагом.

Составленные нами формулы примут вид:

x´= 320 + R∙cos α

y´= 200 - R∙sin α

И переписать на компьютерный язык:

a=a+M_PI/30

x= 320+100*cos(a));

y:= 200-100*sin(a));

Для организации повторения используем Timer.

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

Откройте новую форму и расположите компоненты Button1, Timer1.

Timer1 сделайте неактивным.

Из полученной математической модели получим код.

int x=320;

int y=200;

double a=0;

void __fastcall TForm1::Button1Click(TObject *Sender)

{

Timer1->Enabled=True;

Form1->Canvas->Pen->Color=clBlack;

Form1->Canvas->Brush->Color=clBlack;

Form1->Canvas->Ellipse(x,y,x+50,y+50);

x=320+100*cos(a);

y=200-100*sin(a);

}

//---------------------------------------------------------------------------

void __fastcall TForm1::Timer1Timer(TObject *Sender)

{

Form1->Canvas->Pen->Color=clRed;

Form1->Canvas->Brush->Color=clRed;

x=320+100*cos(a);

y=200-100*sin(a);

a=a+M_PI/30;

Form1->Canvas->Ellipse(x,y,x+50,y+50);

}

Как мы видим, круг прорисовывается каждый раз и в результате получаем тор. Попробуйте определить на каком шаге ошибка и исправить ее. Кто справится, поднимает руку, я подойду и проверю выполнение, выставлю баллы. Максимальное количество баллов, которое вы можете получить – 5 балов.

Проверим, что получилось. В код требуется добавить строки кода

Form1->Canvas->Pen->Color=clBtnFace;

Form1->Canvas->Brush->Color=clBtnFace;

Form1->Canvas->Ellipse(x,y,x+50,y+50);

С помощью которого будет рисоваться круг с цветом фона на предыдущих координатах. Таким образом был пропущен этап очистки экрана.

А теперь подведем итог. Составим схему проблем и их решения.

Заполняем ваши оценочные листы и не забудьте посчитать общее количество балов.

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

Написать программу по вариантам

Оценочный лист занятия

Актуализация опорных знаний			Закрепление полученных знаний			Общий балл	Оценка по 5 бальной системе
Выполнение тестов			Первое задание	Второе задание	Составление фишбоун
0-5	0-10	0-15	0-5	0-5	0-2

Соответствие количества набранных баллов оценке за занятие

Количество набранных баллов	Оценка по 5-бальной системе
0-21	2
22-29	3
30-37	4
38-42	5

Рефлексия.

На доске вывешиваются рисунки чемодана, мясорубки, корзины.

Чемодан – всё, что пригодится в дальнейшем.

Мясорубка – информацию переработаю.

Корзина – всё выброшу.

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