Цель: Показать, что анимирование (создание иллюзии движения) – циклический процесс, т.е. может быть описано с помощью циклического алгоритма. Ознакомить учащихся с синтаксической диаграммой оператора цикла с параметром. Научить использовать оператор цикла с параметром для анимирования простых графических объектов. Проверить знания о специфике компьютерной системы координат. Закрепить навыки работы в компьютерной системе координат. Сформировать и закрепить навыки создания простейших программ анимирования графических объектов. Показать различные варианты анимирования графических объектов с использованием операторов цикла с параметром.
Ход урока
I. Повторение пройденного материала и проверка домашнего задания.
Здравствуйте ребята. (Далее по тексту курсивом выделены реплики учителя в течение урока.)
Как всегда, мы начнем сегодня урок с повторения. И первый вопрос, который я сегодня задам: «Кто не справился с домашним заданием?»
Если справились все, то вызвать любого учащегося к доске для выполнения одного из заданий, заданных на дом. Решение задания, выставление оценки.
Молодец! А теперь переходим к традиционному диктанту.
Если кто-то не справился, то вызывается к доске именно этот учащийся, который с помощью класса или/и учителя выполняет задание, вызвавшее затруднения. В этом случае оценку лучше не ставить.
Теперь все неясности разрешены… И мы переходим к традиционному диктанту.
Диктант содержит 5 вопросов, на которые даются короткие ответы, на запись ответа дается от 5 до 10 секунд. Ребятам раздаются небольшие листочки (10х10 см).
Ребята запишите свою фамилию и класс, проставьте у левого края листочка в столбик через строчку цифры: 1, 2, 3, 4, 5. Для ответа на каждый вопрос Вам дается не более 10 секунд.
Проводится диктант (в круглых скобках красным цветом выделен правильный ответ, он не диктуется ):
Все готовы?... Начинаем диктант.
- В каких двух режимах может работать экран монитора. (символьный и графический)
- Координаты левого верхнего угла экрана. (0,0)
- Оператор, устанавливающий количество пикселей на экране монитора (SCREEN)
- Оператор, изображающий окружность (CIRCLE)
- Оператор, закрашивающий замкнутую область произвольной формы (PAINT)
Повторить вопросы диктанта еще раз, чтобы учащиеся могли проверить свои ответы.
Сдаем листочки с ответами на вопросы диктанта и слушаем правильные ответы.
Собрать все работы, и после этого озвучит правильные ответы на все вопросы диктанта, желательно привлечь к этой работе весь класс и дать возможность ребятам самостоятельно озвучить правильные ответы, прокомментировать те вопросы, на которые ребята не смогли дать правильные ответы самостоятельно. Работы проверяются после урока и оцениваются.
II. Новый материал
Тема нашего урока сегодня: «Использование алгоритма цикл с параметром при анимировании графических объектов». Сейчас я продемонстрирую Вам выполнение программы по анимированию графического примитива «Закрашенная окружность»:
Поставить на выполнение файл с заранее написанной программой:
CLS
SCREEN 12
FOR x = 20 TO 600 STEP .1
CIRCLE (x, 200), 5, 15
PAINT (x, 200), 15, 15
CIRCLE (x, 200), 5, 0
PAINT (x, 200), 0, 0
NEXT x
Остановить выполнение работы программы и обратиться к ребятам с вопросом об анимации, вовлечь их в обсуждение с целью выявления алгоритма, по которому создается иллюзия движения.
Наша задача сегодня – научиться создавать программы подобные этой. Но сначала, давайте разберемся, что такое АНИМАЦИЯ. Кто мне может подсказать?
Ожидаемый ответ: «Это мультфильмы»
Совершенно верно! Слово «анимация» в нашем сознании прочно связано с мультфильмами, но само слово означает «оживление», конечно, это не настоящее «оживление», а лишь иллюзия… Скажите пожалуйста, ребята, кто знает как художники-мультипликаторы создают мультфильмы?
Ожидаемый ответ: «Рисуют много картинок-кадров, а потом быстро просматривают» Здесь можно продемонстрировать учащимся блокнот с нарисованным кружочком (на каждой страничке кружочек смещен относительно такого же кружочка, изображенного на предыдущей страничке) - это довольно известный фокус (Приложение 1).
Только что, мы с Вами наблюдали выполнение программы, где видели движение белого кружочка слева на право. Посмотрели опыт с блокнотом, где тоже видели движение кружочка… Но скажите мне, двигался ли кружочек на самом деле или это только иллюзия движения?
Ожидаемый ответ: «Иллюзия».
Давайте посмотрим, как же возникает эта иллюзия. На первой страничке блокнота мы нарисовали кружочек в самом низу странички, на второй страничке в этом месте кружочка нет, но он нарисован чуть выше и так повторяется на всех последующих страничках. Если нам нужно описывать повторяющиеся действия, то мы используем …. Какой тип алгоритмических структур?
Обращение к учащимся. Ожидаемый ответ: «Циклические»
Количество страниц у нас известно точно, т.е. мы точно знаем количество повторений, значит, мы будем использовать… Какой тип циклического алгоритма?
Обращение к учащимся. Ожидаемый ответ: «С параметром»
Какие Вы сегодня МОЛОДЦЫ! А сейчас самый трудный вопрос: «Как нам быть, если страничка всего одна?»
Возможно, что кто-нибудь из ребят догадается, что нужно быстро стереть и нарисовать в другом месте. Если нет, то подсказать ребятам этот ответ. Далее записать получившийся результат словами.
А теперь запишем, что у нас получилось: «Для создания иллюзии движения выполняем следующее:
- Рисуем объект в точке (X,Y)
- Стираем объект (т.е. рисуем его цветом фона)
- Изменяем значения (X,Y)
- Возвращаемся к пункту 1.
Все записали?... А теперь попробуем представить словесно описанный алгоритм в виде блок-схемы… Когда наш кружочек двигается по горизонтали слева на право, какая координата X или Y изменяется, а какая остается постоянной?
Обращение к учащимся. Ожидаемый ответ: «Х»
Очень хорошо! Совершенно верно, какую бы точку на кружочке мы не взяли, Х будет меняться, а Y – нет. Так как меняется только координата Х, то и параметром для цикла послужит Х, которая будет меняться от начального до конечного значения. При этом Y меняться не будет и остается постоянным… Зарисуем блок-схему алгоритма в тетрадь.
Прокомментировать блок-схему, показав, где задается значение X, Y, где начинается и заканчивается цикл с параметром, что является параметром цикла.
Следующий наш шаг - написать программу на QBasic. Первая команда – очистка экрана…
Обращение к учащимся. Ожидаемый ответ: «СLS»
На второй строчке мы должны задать разрешение экрана или количество пикселей экрана…
Обращение к учащимся. Ожидаемый ответ: «SCREEN»
Очень хорошо! Предлагаю выбрать SCREEN 12, который задаст разрешение: 640 х 480. Это означает, что максимальное значение координаты Х – 639, а Y – 479. Мы уже знакомы с оператором CIRCLEи PAINT, которые помогут нам нарисовать окружность и раскрасить ее. Сегодня мы познакомимся с новым оператором – это оператор FOR[1], который является оператором цикла с параметром. Он выглядит так:
FOR (переводится как для) и определяет начало цикла.
NEXT (переводится как следующий) и определяет конец цикла, после него обязательно должен быть записан идентификатор цикла, показывающий какого именно цикла производится завершение.
Идентификатор – изменяющийся параметр цикла. Выражение 1 – начальное значение параметра цикла.
ТО (переводится как до).
Выражение 2 - конечное значение параметра цикла.
STEP (переводится как шаг), после него следует выражение 3, которое определяет величину изменения идентификатора. Если выражение 1 меньше выражения 2, то шаг положительный, если выражение 1 больше выражения 2, то шаг отрицательный. Группа «STEP выражение 3» может не записываться, тогда величина изменения параметра цикла принята равной 1.
Блок операторов – группа команд, выполняемых внутри цикла.
В нашем случае изменяться будет координата Х – она и будет параметром цикла. На третьей строчке мы запишем: «FORX=…» Наш кружочек движется слева на право и по оси Х координата возрастает слева на право. Какое минимальное значение может принять координата Х? (Именно это значение и будет начальным значением параметра цикла, т.е. выражением 1)
Обращение к учащимся. Ожидаемый ответ: «0»
Это правильно, а какое максимальное значение может принять координата Х?
Обращение к учащимся. Ожидаемый ответ: «639»
Очень хорошо! Нам осталось решить какое значение будет у выражения 3. Скажу, по секрету, эту величину нужно подбирать экспериментальным путем! Чем больше значение шага, тем выше скорость движения. Предлагаю взять шаг равным 0,1. Нам остается решить будет шаг положительным или отрицательным.
Обращение к учащимся. Ожидаемый ответ: «Положительным, потому что значение выражения 1 – это 0, выражения 2 - 639. Выражение 1 меньше выражения 2»
Молодцы! Дописываем третью строку: «FOR Х = 0 TO 639 STEP 0.1». Начиная с четвертой строки мы будем писать блок операторов, выполняемых внутри цикла. Обратимся к записи алгоритма по созданию иллюзии движения. В первом пункте мы рисуем фигуру. Нарисовать круг можно с помощью оператора CIRCLE и PAINT. Кто хочет самостоятельно у доски написать команду рисующую окружность и закрашивающую ее?
Выбирается один из желающих. Ученик выходит к доске и самостоятельно или с помощью учителя выписывает 4-ую и 5-ую строчку программы. Коллективно вместе с классом решается вопрос о размере окружности и ее цвете. Учитель рекомендует выбирать яркие, светлые цвета.
И так, четвертая строка программы: «CIRCLE (Х, 200), 10, 11», нарисует нам окружность ярко-голубого цвета радиусом 10. А пятая строка: «PAINT (Х, 200), 11, 11», - закрасит нам область внутри окружности тем же ярко-голубым цветом. Не забываем о красоте записи программы. Записываем строки внутри цикла с отступом относительно строк с оператором цикла. Снова обратимся к записи алгоритма по созданию иллюзии движения. Второй пункт – стирание фигуры, т.е. рисование ее цветом фона (в нашем случае - черным). Кто хочет записать 6-ую и 7-ую строчку программы?
Снова выбирается один из желающих. Учащийся выходит к доске и самостоятельно или с помощью учителя выписывает 6-ую и 7-ую строчку программы.
Шестая строка программы: «CIRCLE (Х, 200), 10, 0» - и седьмая строка программы: «PAINT (Х, 200), 0, 0». Заключительная строка программы: «NEXT Х» - показывает завершение цикла с параметром Х. Если все записали программу, я прошу Вас пройти к компьютерам, набрать эту программу в языковой среде QBasic и выполнить ее.
Пока учащиеся выполняют задание им раздаются карточки с заданиями для самостоятельной работы (Приложение 2)
Ребята, я раздала Вам небольшие задания для самостоятельной работы. В уже имеющейся программе Вам необходимо сделать небольшие изменения, чтобы выполнить свое задание. А какие это будут изменения Вы должны догадаться сами.
Пока учащиеся выполняют задание, учитель проходит по классу помогая, тем учащимся, кто нуждается в помощи. По окончании выполнения задания все учащиеся получают оценку за работу, оценка озвучивается и комментируется.
III. Домашнее задание.
В завершении урока я хочу показать Вам выполнение еще одной программы…
Запускается программа увеличивающейся окружности:
CLS
SCREEN 12
FOR x = 1 TO 200 STEP .01
CIRCLE (320, 240), x, 15
PAINT (320, 240), 15, 15
NEXT x
После просмотра обсудить с учащимися, что является параметром цикла в программе увеличивающейся окружности (Это радиус окружности) и предложить в качестве домашнего задания написать программу уменьшающейся окружности.
Когда прозвенит звонок.
На сегодня урок закончен. Всем спасибо.
Источники:
- Справочная система языка программирования QBasic.