1 Программирование на языке Паскаль Тема 11. Анимация © К.Ю. Поляков,

2 Анимация Анимация (англ. animation) – оживление изображения на экране. Задача: внутри синего квадрата 400 на 400 пикселей слева направо двигается желтый квадрат 20 на 20 пикселей. Программа останавливается, если нажата клавиша Esc или квадрат дошел до границы синей области. Проблема: как изобразить перемещение объекта на экране? Привязка: состояние объекта задается координатами (x,y) Принцип анимации: 1. рисуем объект в точке (x,y) 2. задержка на несколько миллисекунд 3. стираем объект 4. изменяем координаты (x,y) 5. переходим к шагу 1

3 Как "поймать" нажатие клавиши? Событие – это изменение в состоянии какого-либо объекта или действие пользователя (нажатие на клавишу, щелчок мышкой). IsEvent – логическая функция, которая определяет, было ли какое-то действие пользователя. Event – процедура, которая определяет, какое именно событие случилось. if IsEvent then begin Event(k, x, y); if k = 1 then writeln('Клавиша с кодом ', x) else { k = 2 } writeln('Мышь: x=', x, ' y=', y); end; if IsEvent then begin Event(k, x, y); if k = 1 then writeln('Клавиша с кодом ', x) else { k = 2 } writeln('Мышь: x=', x, ' y=', y); end; var k, x, y: integer;

4 Как выйти из цикла при нажатии Esc? program qq; var stop: boolean; k,code,i: integer; begin stop := False; repeat if IsEvent then begin Event(k, code, i); if (k = 1) and (code = 27) then stop := True; end;... until stop; end; если что-то произошло... что произошло? если нажата клавиша с кодом 27 (Esc), то стоп True, если надо остановиться запуск цикла

5 Процедура (рисование и стирание) procedure Draw(x, y: integer; flag: boolean); begin if flag then Brush(1, 255, 255, 0) else Brush(1, 0, 0, 255); Rectangle(x, y, x+20, y+20); end; procedure Draw(x, y: integer; flag: boolean); begin if flag then Brush(1, 255, 255, 0) else Brush(1, 0, 0, 255); Rectangle(x, y, x+20, y+20); end; (x, y) (x+20, y+20) Идеи одна процедура рисует и стирает стереть = нарисовать цветом фона границу квадрата отключить (в основной программе) рисовать (True) или нет (False)? рисуем: цвет кисти – желтый стираем: цвет кисти – синий только заливка!

6 Полная программа program qq; var x, y, k, code, i: integer; stop: boolean; procedure Draw(x,y: integer; flag: Boolean); begin... end; begin Brush(1, 0, 0, 255); Rectangle(10, 10, 400, 400); Pen(0, 0, 0, 255); x := 10; y := 200; stop := false; repeat if IsEvent then begin... end; Draw(x, y, True); Delay(10); Draw(x, y, False); x := x + 1; if x >= then stop := true; until stop; end. процедура начальные условия выход по клавише Esc выход при касании границы синий фон ждем 10 мс отключить границу

7 «4»: Два квадрата двигаются в противоположном направлении: «5»: Два квадрата двигаются в противоположном направлении и отталкиваются от стенок синего квадрата: Задания

8 Управление клавишами Задача: жёлтый квадрат внутри синего квадрата управляется клавишами-стрелками. Коды клавиш: влево – 37 вверх – 38Esc – 27 вправо – 39 вниз – 40 Проблема: как изменять направление движения? Решение: if {было событие} then begin if {нажата клавиша} then begin {получить код клавиши - code} if code = 37 then x := x – 1; if code = 38 then y := y – 1; if code = 39 then x := x + 1; if code = 40 then y := y + 1; if code = 27 then stop := True; end; if {было событие} then begin if {нажата клавиша} then begin {получить код клавиши - code} if code = 37 then x := x – 1; if code = 38 then y := y – 1; if code = 39 then x := x + 1; if code = 40 then y := y + 1; if code = 27 then stop := True; end; IsEvent Event ( k, code, i); if k = 1 then begin case code of 37: x := x – 1; 38: y := y – 1; 39: x := x + 1; 40: y := y + 1; 27: stop := True; end; если было нажатие на клавишу, …

9 Программа program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); Delay(20); Draw(x, y, False); until stop; end. program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); Delay(20); Draw(x, y, False); until stop; end. procedure Draw(x,y: integer; flag: Boolean); begin... end; if IsEvent then begin... end; Что плохо? ? процедура основной цикл обработка событий

10 Как убрать мигание? Проблема: даже если не нажата никакая клавиша, квадрат перерисовывается через каждые 20 мс (мигание!) Что хочется: не перерисовать квадрат, если не было никакого события Решение: нарисовать квадрат и ждать события Новая проблема: как ждать события? Решение новой проблемы: пустой цикл "пока не случилось событие, ничего не делай": while not IsEvent do;

11 Программа program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); while not IsEvent do; until stop; end. program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); while not IsEvent do; until stop; end. procedure Draw(x,y: integer; flag: Boolean); begin... end; Draw(x, y, False); Event(k, code, i);... while not IsEvent do; процедура рисуем квадрат ждем события только теперь стираем Что можно улучшить? ?

12 «4»: Квадрат двигается при нажатии стрелок, однако не может выйти за границы синего квадрата: «5»: Квадрат непрерывно двигается, при нажатии стрелок меняет направление и отталкивается от стенок синего квадрата: Задания

13 Вращение Задача: изобразить модель вращения Земли вокруг Солнца. Проблема: движение по окружности, как изменять координаты? Решение: использовать в качестве независимой переменной (менять в цикле) угол поворота α (x 0, y 0 ) α L (x, y) x = x 0 + L · cos(α) y = y 0 – L·sin(α)

14 Процедура procedure Draw(x, y: integer; flag: boolean); const r = 10; begin if flag then Brush(1, 100, 100, 255) else Brush(1, 0, 0, 0); Ellipse(x-r, y-r, x+r, y+r); end; procedure Draw(x, y: integer; flag: boolean); const r = 10; begin if flag then Brush(1, 100, 100, 255) else Brush(1, 0, 0, 0); Ellipse(x-r, y-r, x+r, y+r); end; рисовать (True) или нет (False)? рисуем: цвет кисти – голубой стираем: цвет кисти – черный только заливка! радиус Земли (x-r, y-r) (x,y)(x,y) (x+r, y+r)

15 Константы и переменные program qq; const rSun = 60; { радиус Солнца} L = 150; { радиус орбиты Земли } x0 = 200; { координаты центра Солнца} y0 = 200; var x, y, { координаты Земли } k, code, i: integer; { для Event } a, ha: real; { угол поворота, шаг } stop: boolean; { признак остановки программы } begin... end. program qq; const rSun = 60; { радиус Солнца} L = 150; { радиус орбиты Земли } x0 = 200; { координаты центра Солнца} y0 = 200; var x, y, { координаты Земли } k, code, i: integer; { для Event } a, ha: real; { угол поворота, шаг } stop: boolean; { признак остановки программы } begin... end. procedure Draw(x, y: integer; flag: Boolean); begin... end;

16 Основная программа program qq;... begin Brush(1, 0, 0, 0); Fill(1,1); Brush(1, 255, 255, 0); Ellipse(x0-rSun, y0-rSun, x0+rSun, y0+rSun); a := 0; ha := 1*pi/180; { начальный угол, шаг 1 o за 100 мс} stop := false; Pen(0,0,0,0); { отключаем контуры } repeat x := round(x0 + L*cos(a)); y := round(y0 - L*sin(a)); Draw(x, y, True); Delay(100); Draw(x, y, False); a := a + ha; until stop; end. program qq;... begin Brush(1, 0, 0, 0); Fill(1,1); Brush(1, 255, 255, 0); Ellipse(x0-rSun, y0-rSun, x0+rSun, y0+rSun); a := 0; ha := 1*pi/180; { начальный угол, шаг 1 o за 100 мс} stop := false; Pen(0,0,0,0); { отключаем контуры } repeat x := round(x0 + L*cos(a)); y := round(y0 - L*sin(a)); Draw(x, y, True); Delay(100); Draw(x, y, False); a := a + ha; until stop; end. залить фон черным рисуем Солнце новые координаты поворот на ha ждем 100 мс if IsEvent then begin Event(k, code, i); if (k = 1) and (code = 27) then stop := true; end;

17 «4»: Изобразить модель Солнца с двумя планетами, которые вращаются в противоположные стороны: «5»: Изобразить модель системы Солнце-Земля- Луна: Задания