Урок "Программирование графической анимации"
учебно-методический материал по информатике и икт (8 класс) по теме

Солынина Ольга Михайловна

Представлена разработка урока под названием "Программирование графической анимации. (Задача о бильярдном шарике)".

 

Скачать:

ВложениеРазмер
Office presentation icon Презентация для урока397 КБ
Файл Разработка урока232.64 КБ

Предварительный просмотр:

Чтобы пользоваться предварительным просмотром презентаций создайте себе аккаунт (учетную запись) Google и войдите в него: https://accounts.google.com

Подписи к слайдам:

Слайд 1

Задача «Движение бильярдного шарика» Мой университет - www.moi-mummi.ru

Слайд 2

Пусть у нас уже есть программа движения шарика по диагонали экрана (щелкните по шарику на рисунке)

Слайд 3

SCREEN 9 COLOR 1, 0 WINDOW (0, 0)-(640, 350) x = 1 y = 1 dx = 1 dy = 1 FOR k = 0 TO 10000 CIRCLE (x, y), 3, 6 PAINT (x, y), 6 FOR i = 1 TO 10 000: NEXT i CIRCLE (x, y), 3, 4 PAINT (x, y), 4 , 4 x = x + dx y = y + dy NEXT k Программа движения шарика по диагонали выглядит следующим образом: Здесь dx , dy – приращения соответствующих координат.

Слайд 4

Наша задача состоит в том, чтобы шарик, достигнув какой-либо границы экрана, отскакивал от нее как от стенки (щелкните по шарику на рисунке) . Чтобы шарик не вылетал за верхний край экрана, необходимо, чтобы ордината объекта не превышала 350 pix (при стандартном размере экрана 640х350) В связи с возникшей ситуацией в нашей задаче, когда необходимо выполнить определенные условия, напомним, что такое условный оператор.

Слайд 5

Условный оператор. IF <условие> THEN оператор1 ELSE оператор2 Если условие выполняется, то выполняется «оператор1», в противном случае выполняется «оператор2». В записи условия можно использовать следующие символы: =, >, >=, <, <=, <> Существует неполная форма оператора: IF <условие> THEN оператор1

Слайд 6

Вставим в программу движения шарика условие IF y = 350 , причем, этот условный оператор мы должны добавить в цикл, где в каждой итерации при каждом увеличении координаты Y происходит проверка данного условия. Как только оно выполнится, так координата Y , которая до сих пор увеличивалась с приращением dy = +1, должна будет уменьшаться и приращение станет равно: dy = - 1 . Вот как будет выглядеть программа с добавлением условного оператора, которое учитывает столкновение шарика с верхней границей экрана:

Слайд 7

SCREEN 9 COLOR 1, 0 WINDOW (0, 0)-(640, 350) x = 1 y = 1 dx = 1 dy = 1 FOR k = 0 TO 10000 CIRCLE (x, y), 3, 6 PAINT (x, y), 6 FOR i = 1 TO 10 000: NEXT i CIRCLE (x, y), 3, 0 PAINT (x, y), 0, 0 IF y = 350 THEN dy = - 1 x = x + dx y = y + dy NEXT k

Слайд 8

dy = -1 dx = +1 dy = +1 x = 0 y = 0 Запустим программу на выполнение:

Слайд 9

Рассмотрим дальнейшее движение шарика. Достигнув правого края экрана, шарик должен отскочить вниз так, как указано на схеме: dy = -1 dx = -1 x = 0 y = 0 В этом случае координата Y будет по-прежнему уменьшаться, т.е. dy = - 1. Координата X , которая до сих пор увеличивалась, после выполнения условия x = 640 начнет уменьшаться или d х = - 1, что то же самое. dx = +1 dy = +1

Слайд 10

SCREEN 9 COLOR 1, 0 WINDOW (0, 0)-(640, 350) x = 1 y = 1 dx = 1 dy = 1 FOR k = 0 TO 10000 CIRCLE (x, y), 3, 6 PAINT (x, y), 6 FOR i = 1 TO 10 000: NEXT i CIRCLE (x, y), 3, 0 PAINT (x, y), 0, 0 IF y = 350 THEN dy = - 1 IF x = 640 THEN dx = - 1 x = x + dx y = y + dy NEXT k Вот так будет выглядеть программа с добавлением второго условного оператора, где предусмотрено условие столкновение шарика с верхней границей экрана:

Слайд 11

dy = -1 dx = -1 x = 0 y = 0 Запустим вновь программу на выполнение: dx = +1 dy = +1

Слайд 12

Рассмотрим дальнейшее движение шарика. Достигнув нижнего края экрана, шарик должен отскочить вверх так, как указано на схеме: dy = -1 dy = +1 x = 0 y = 0 В этом случае координата Y начнет увеличиваться, т.е. dy = +1 , а координата X будет по-прежнему уменьшаться, т.е. d х = - 1 . dx = +1 dy = +1 dx = +1 dy = +1 dx = -1

Слайд 13

Вот так будет выглядеть программа с добавлением третьего условного оператора, где предусмотрено условие столкновение шарика с нижней границей экрана: SCREEN 9 COLOR 1, 0 WINDOW (0, 0)-(640, 350) x = 1 y = 1 dx = 1 dy = 1 FOR k = 0 TO 10000 CIRCLE (x, y), 3, 6 PAINT (x, y), 6 FOR i = 1 TO 10 000: NEXT i CIRCLE (x, y), 3, 0 PAINT (x, y), 0, 0 IF y = 350 THEN dy = - 1 IF x = 640 THEN dx = - 1 IF y = 0 THEN dy = + 1 x = x + dx y = y + dy NEXT k

Слайд 14

dx = -1 dx = -1 dy = -1 x = 0 y = 0 Запустим программу на выполнение: dx = -1 dy = +1 dx = +1 dy = +1

Слайд 15

Нам осталось рассмотреть последний вариант в движении шарика – столкновение его с левой границей. Достигнув этой границы экрана, шарик должен отскочить вверх так, как указано на схеме: dy = -1 dy = +1 dx = +1 x = 0 y = 0 В этом случае после выполнения условия x = 0 координата Х должна увеличиваться, т.е. d х = +1, а координата Y , которая до сих пор увеличивалась, по-прежнему будет увеличиваться, т.е. dy = +1. . dx = -1 dx = +1 dy = +1

Слайд 16

SCREEN 9 COLOR 1, 0 WINDOW (0, 0)-(640, 350) x = 1 y = 1 dx = 1 dy = 1 FOR k = 0 TO 10000 CIRCLE (x, y), 3, 6 PAINT (x, y), 6 FOR i = 1 TO 10 000: NEXT i CIRCLE (x, y), 3, 0 PAINT (x, y), 0, 0 IF y = 350 THEN dy = - 1 IF x = 640 THEN dx = - 1 IF y = 0 THEN dy = + 1 IF x = 0 THEN dx = + 1 x = x + dx y = y + dy NEXT k Так будет выглядеть программа с добавлением четвертого условного оператора, где предусмотрено столкновение шарика с левой границей экрана:

Слайд 17

dy = -1 dy = +1 dx = +1 x = 0 y = 0 Запустим программу на выполнение и вот, что получим: dx = -1 dx = +1 dy = +1

Слайд 18

Эту программу необходимо оптимизировать, заменив четыре условных оператора двумя. Приращения по координатам dx и dy будут менять знаки на противоположный. SCREEN 9 COLOR 1, 0 WINDOW (0, 0)-(640, 350) x = 1 y = 1 dx = 1 dy = 1 FOR k = 0 TO 10000 STEP 1 CIRCLE (x, y), 3, 6 PAINT (x, y), 6 FOR i = 1 TO 4000: NEXT i CIRCLE (x, y), 3, 0 PAINT (x, y), 0, 0 IF y = 350 or y=0 THEN dy = - dy IF x = 640 or x=0 THEN dx = - dx x = x + dx y = y + dy NEXT k

Слайд 19

Итак, если мы увеличим число повторений в цикле на достаточное количество, то движение биллиардного шарика выглядит следующим образом: … и т.д.

Слайд 20

Мой университет - www.moi-mummi.ru Далее можно усложнить эту задачу и рассмотреть несколько вариаций на тему «Движение шарика»: «Движение шарика в заданном прямоугольнике»; «Движение шарика по экрану с препятствием»; «Муха в графине» (рисуем прямоугольный графин с горлышком, располагаем внутри шарик (муху) и заставляем его двигаться внутри графина, отражаясь от его стенок. Меняя начальное расположение шарика, можно добиться, что через какое-то время муха вылетит из графина и продолжит полет, отражаясь от сторон экрана и о стенки графина, как о препятствии на пути мухи.



Предварительный просмотр:

Программирование графической анимации.

(Задача о бильярдном шарике).

Вид занятия: комбинированное занятие (теоретическое и практическое), изучение нового материала.

Цели урока: – освоение приемов построения циклических и разветвляющихся вычислительных алгоритмов и их программирование на языке QBASIC.

Задачи:

Образовательные

  1. формирование навыков работы с программным обеспечением;
  2. выбор определённого программного средства для реализации, поставленной задачи;
  3. выработка умений и навыков решения практических задач в соответствующих программах.

Развивающие

  1. развитие внимания, способности к анализу;
  2. развитие логического мышления;
  3. развитие навыков работы с системой программирования;
  4. развитие способностей к определённым видам деятельности (инженерная графика, программирование и т.д.)
  5. развитие памяти и логического мышления.

Воспитательные:

  1. формирование мировоззрения у учащихся;
  2. формирование мотивации к изучению предмета «Основы алгоритмизации и программирования»;
  3. формирование самостоятельности мышления, чёткости и организованности в работе, умения контролировать свою деятельность;
  4. работать эффективно в соответствии с располагаемым временем;
  5. воспитание интереса к предмету и профессии;

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

Применение инновационных образовательных технологий:

  1. исследовательские технологии;
  2. информационно-коммуникационные технологии;
  3. технология коллективного взаимообучения;
  4. электронные технологии;
  5. интерактивные технологии.

Методы: словесные, наглядные, практические.

План урока.

1) Организационно-подготовительный этап (5 мин).

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

3) Выполнение самостоятельных заданий (15 мин).

4) Подведение итогов (5 мин). Постановка домашнего задания.


Содержание урока:

  1. Организационно-подготовительный этап.

Здравствуйте, ребята. Запишите, пожалуйста, тему урока: «Движение бильярдного шарика».

 Сегодня необходимо вспомнить задачу о движении закрашенного шарика по диагонали экрана. Вы уже знакомы с принципами движения. Давайте вспомним некоторые правила и команды:

Назовите оператор, который рисует шарик? (Дети должны ответить)

Назовите оператор, который закрашивает шарик. (Дети должны ответить)

Что необходимо выполнить, чтобы шарик произвел движение по экрану? (Дети должны ответить)

Как долго будет двигаться шарик? (Дети должны ответить)

Что случится, если шарик достиг края экрана? (Дети должны ответить)

Откройте, пожалуйста, свою программу движения шарика по диагонали (мы ее отлаживали на прошлых уроках). (Дети должны открыть программу)

Сегодня нам понадобится условный оператор, речь о котором шла на предыдущем уроке. Скажите, как выглядит условный оператор? (Дети должны ответить)

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

Для ограничения движения шарика необходима проверка некоторых параметров, а именно координат шарика. Например, чтобы при движении шарик не заходил за верхний край экрана, необходимо, чтобы ордината объекта не превышала 350 (при стандартном размере экрана 640х350) Чтобы шарик, к примеру, не заходил за правый край экрана, необходимо, чтобы абсцисса объекта не превышала 640.

Встречные вопросы:

Какие ограничения для координат необходимы для левой границы экрана?

Какие ограничения для координат необходимы для нижней границы экрана?

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

IF <условие> THEN оператор1 ELSE оператор2

Если условие выполняется, то выполняется «оператор1», в противном случае выполняется «оператор2».

Неполная форма условного оператора:

IF <условие> THEN оператор1

А теперь вернемся к задаче.

Назовем ее «Движение бильярдного шарика». Пусть будет наш экран бильярдным столом. Установим начальные координаты шарика: Х=0, Y=0 и приращение координаты Х  dx=1, координаты Y dy=1. Если координатные приращения положительные, то шарик будет двигаться вправо и вверх.

Вот, как выглядит наша программа:

SCREEN 9

COLOR 1, 0

WINDOW (0, 0)-(640, 350)

x = 1

y = 1

dx = 1

dy = 1

FOR k = 0 TO 10000 STEP 1

CIRCLE (x, y), 3, 6

PAINT (x, y), 6

FOR  i = 1 TO 4000: NEXT i

CIRCLE (x, y), 3, 0

PAINT (x, y), 0, 0

x = x + dx

y = y + dy

NEXT k

Достигнув верха экрана (работает условный оператор), куда должен двигаться шарик, отскочив от края?

Рисуем схематически движение шарика:

Вот так будет выглядеть программа с добавлением условного оператора, где предусмотрено условие столкновение шарика с верхней границей экрана (на экран выводится слайд презентации с текстом программы):

SCREEN 9

COLOR 1, 0

WINDOW (0, 0)-(640, 350)

x = 1

y = 1

dx = 1

dy = 1

FOR k = 0 TO 10000

CIRCLE (x, y), 3, 6

PAINT (x, y), 6

FOR  i = 1 TO 10000: NEXT i

CIRCLE (x, y), 3, 0

PAINT (x, y), 0, 0

IF y = 350 THEN dy = -1

x = x + dx

y = y + dy

NEXT  k

Вставьте в нужное место программы условный оператор и выполните эту программу. (Учащиеся редактируют программу и выполняют ее, получая результат). Результат выполнения программы: шарик, достигнув верхней границы экрана, отскочил вправо и улетел за границу экрана.

Что необходимо сделать, чтобы он отскочил и от правой границы?

Куда должен двигаться шарик, отскочив от края?

Рисуем схематически движение шарика:

Так будет выглядеть программа с добавлением условного оператора, где предусмотрено столкновение шарика с правой границей экрана (на экран выводится слайд презентации с текстом программы):

SCREEN 9

COLOR 1, 0  

WINDOW (0, 0)-(640, 350)

x = 1

y = 1

dx = 1

dy = 1

FOR k = 0 TO 10000  

CIRCLE (x, y), 3, 6

PAINT (x, y), 6

FOR  i = 1 TO 10000: NEXT i

CIRCLE (x, y), 3, 0

PAINT (x, y), 0, 0

IF y = 350 THEN dy = -1

IF x = 640 THEN dx = -1

x = x + dx

y = y + dy

NEXT  k

Вставьте в нужное место программы второй условный оператор и выполните эту программу. (Учащиеся вновь редактируют программу и выполняют ее, получая результат). Результат выполнения программы: шарик, достигнув правой границы экрана, отскочил вниз и улетел за нижнюю границу экрана.

Рассмотрим дальнейшее движение шарика. Достигнув нижнего края экрана (работает условный оператор), куда должен двигаться шарик, отскочив от края?

Рисуем схематически движение шарика.

Если шарик достигает левой границы экрана, то куда должен двигаться шарик, отскочив от края?

Рисуем схематически движение шарика:

  1. Выполнение самостоятельных заданий

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

Учащиеся редактируют программу. Запускают ее. Получают результат.

Добавили?

Тот из учеников, кто продемонстрировал движение шарика, отскакивающего от каждой границы экрана, может претендовать на отличную оценку.

А теперь посмотрим результат - как выглядит программа с добавлением условных операторов, где предусмотрено столкновение шарика с верхней, правой, нижней и левой границами экрана (на экран выводится очередной слайд презентации с текстом программы):

SCREEN 9

COLOR 1, 0

WINDOW (0, 0)-(640, 350)

x = 1

y = 1

dx = 1

dy = 1

FOR k = 0 TO 10000

CIRCLE (x, y), 3, 6

PAINT (x, y), 6

FOR  i = 1 TO 10000: NEXT i

CIRCLE (x, y), 3, 0

PAINT (x, y), 0, 0

IF y = 350 THEN dy = -1

IF x = 640 THEN dx = -1

IF y = 0 THEN dy = +1

IF x = 0 THEN dx = +1

x = x + dx

y = y + dy

NEXT  k

Каким образом можно оптимизировать эту программу, заменив четыре условных оператора двумя? Сделайте это самостоятельно.

SCREEN 9

COLOR 1, 0

WINDOW (0, 0)-(640, 350)

x = 1

y = 1

dx = 1

dy = 1

FOR k = 0 TO 10000 STEP 1

CIRCLE (x, y), 3, 6

PAINT (x, y), 6

FOR i = 1 TO 4000: NEXT i

CIRCLE (x, y), 3, 0

PAINT (x, y), 0, 0

IF y = 350 or y=0 THEN dy = - dy

IF x = 640 or x=0 THEN dx = - dx

x = x + dx

y = y + dy

NEXT k

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

А теперь ответьте на вопрос.

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

  1. Подведение итогов.

Итак, мы сегодня познакомились с условным оператором и отработали его на задаче «Бильярдный шарик».

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

Урок окончен. Спасибо, ребята, за работу.

Критерии оценки за урок.

Оценить на «отлично» тех ребят, у которых самостоятельные шаги были выполнены безупречно, и программа показывала правильный результат.

Оценки «хорошо» можно поставить учащимся, у которых были небольшие ошибки и они успевали их исправить в рамках изложения материала.

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

Учащимся, которые успели лишь переписать программу со слайда презентации и выполнить ее, ставится «удовлетворительно»



По теме: методические разработки, презентации и конспекты

Урок информационных коммуникационных технологий (10 класс) «СОЗДАНИЕ АНИМАЦИИ ДЛЯ ОТДЕЛЬНЫХ ЭЛЕМЕНТОВ ГРАФИЧЕСКОГО ОБЪЕКТА»

Открытый урок по "Информатике и ИКТ" в 10 классе  "СОЗДАНИЕ АНИМАЦИИ ДЛЯ ОТДЕЛЬНЫХ ЭЛЕМЕНТОВ ГРАФИЧЕСКОГО ОБЪЕКТА»Цель урока: Научиться «оживлять» картинки на слайдах.Задачиурока:Активизация опор...

Анимация. Создание анимации средствами растрового редактора GIMP

Дидактический материал создан средствами программы Smart Notebook 10. Предназначен для использования на уроках информатики 8-9 классах (по учебнику Н.Д.Угриновича) или во внеурочной деятельности.Работ...

Урок в 9 классе по информатике на тему "Растровая и векторная анимация. GIF анимация"

В данном уроке показано, как создавать GIF анимацию на компьютере в растровом редакторе GIMP...

Практическая работа «Пазлы и Анимация в графическом редакторе GIMP»

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

План-конспект занятия по анимации. Изобразительные возможности анимации

План-конспект 3 занятия из блока: пластилиновая техника анимации...

Размещение графических объектов на слайдах презентации. Применение эффектов анимации к объектам слайда

- На прошлом уроке мы с вами познакомились с программой Open Office Impress, рассмотрели интерфейс и основы работы с программой Open Office Impress. Давайте вспомним основные моменты этой темы.1. Тест...

Графический редактор Adobe Photoshop. Создание анимированных изображений. GIF – анимация. Создание анимированного текста с помощью обрезной маски.

Графический редактор Adobe Photoshop.Создание анимированных изображений. GIF – анимация.Создание анимированного текста с помощью обрезной маски.Цель работы: научить работать с инструментом &laqu...