Практическое занятие № 6

ТЕМА: Анимация средствами языка программирования.

ЦЕЛЬ: Сформировать умения использовать растровые изображения для автоматической генерации разнообразных типовых программ, созданных в PascalABC, сформировать умения создавать имитацию движения с помощью команд языка программирования.

 

1. Последовательность выполнения практического занятия.

1.1. Внеаудиторная подготовка

а. повторить технику безопасности при работе на ПК.

б. повторить материал предыдущего занятия или изучить материал учебной  литературы: Информатика: учебное пособие для 11 класса, с. 66…82.

1.2. Работа на учебном занятии

а. Выполнить практические задания.

б. Убрать рабочее место.

в. Оформить отчёт.

2. Методические указания

 

Теоретические сведения для выполнения Задания 1.

Использование растровых изображений

Графические  возможности языка программирования Паскаль расширяет использование растровых изображений. Особенно интересно использование фотографий реальных объектов и явлений живой и неживой природы, которые практически невозможно создать с помощью стандартных графических примитивов.

Процедуры и функции для работы с растровыми изображениями содержатся в модуле GraphABC.

Функция LoadPicture(fname) загружает рисунок из файла с именем fname в оперативную память. Загружать можно рисунки в формате bmp, jpg, gif, pnd. Каждому загруженному рисунку, хранящемуся во время работы программы в оперативной памяти, присваивается целочисленный описатель nm:= LoadPicture(fname). Он передается в качестве первого параметра во все остальные процедуры и функции работы с рисунками.

Процедура DrawPicture (nm, х, у) выводит рисунок с описателем nm в по­зицию (х,у) графического окна, а процедура DrawPicture (nm, х, у, w, h) ещё и масштабирует изображение, устанавливая его ширину w и высоту h. Если w<0, то рисунок зеркально отражается относительно вертикальной прямой, про­ходящей через х, если же h<0, то рисунок зеркально отражается относительно горизонтальной прямой, проходящей через у.

 

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

 

Методика выполнения Задание 1.

-  открытие графического модуля во второй строке с помощью команды uses graphABC;

- значение переменной pic определим целый; 

- в проекционном аппарате предмет (слайд, или рисунок на прозрачной плен­ке) помещают между фокусом и двойным фокусом линзы. На экране получается увеличенное обратное изображение. Для получения на экране прямого изображе­ния слайд переворачивают, алгоритм программы заключается в загрузке из файла растрового изобра­жения и выводе его на экран после необходимых преобразований (увеличение и переворот);  

- прежде всего зададим размеры экрана 640x520 и черный цвет фона;

- нари­суем «линзу»: Ellipse (106, 220, 122, 300);

- загрузим изображение из файла (в нашем случае, robot.bmp) и поместим его опи­сатель в переменную pic : =LoadPicture (’D:\robot.bmp');

- с помощью процедуры DrawPicture (pic, 60,310,-50,-100) выведем перевернутое изображение размером 50 х 100 пикселей в позицию с координа­тами верхнего левого угла (60, 310), поставив перед значениями 50 и 100 знаки «минус». Еще раз выведем это изображение, но уже в позицию с координатами (380, 10), изменив его ширину до 250 пикселей, а высоту — до 500 пикселей, т. е. увеличив его в 5 раз: DrawPicture (pic, 380,10,250,500);

- осталось провести вспомогательные линии, иллюстрирующие построение изображения, и откорректировать положение «линзы»;

- текст программы и результат её выполнения:

 

program pr1;

  uses GraphABC;

  var pic: integer;

   begin

   SetWindowSize(640,520);          {Размеры окна}

   ClearWindow(clBlack);             {Черный фон}

   SetBrushColor(clSkyBlue);

   Ellipse(106, 220, 122, 300) ;    {Линза}

   pic:=LoadPicture(’D:\robot.bmp’); {Загрузка изображения из файла}

   DrawPicture (pic, 60, 310,-50,-100); {Вывод изображения, пере­ворот }

   DrawPicture(pic,380,10,250,500); {Увеличение}

   SetPenColor(clYellow);  {вспомогательные линии}

   line(60,310,380,10);

   line (60,210,380,510);

   SetPenColor(clWhite);

   line(10,310,630,10);

   line(10,210,630,510);

end.

  

   

 

Теоретические сведения для выполнения Задания 2.

Растровые изображения выводятся в прямоугольные области, которые при создании графических композиций могут перекрывать друг друга. Процедура SetPictureTransparent (nm, b) устанавливает режим прозрачности изобра­жения с описателем nm. По умолчанию режим прозрачности отключен (b=False). Если b=True, то при рисовании фон не отображается. Фоновым считается цвет левого нижнего пикселя рисунка.

Растровые изображения можно использовать в качестве образцов для закра­шивания фигур кистью. Процедура SetBrushPicture (fname) закрашивает фигуры фоновым рисунком, используя образец, хранящийся в файле fname.

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

 

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

 

Методика выполнения Задание 2.

-  открытие графического модуля во второй строке с помощью команды uses graphABC и текстового модуля uses crt одновременно;

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

- номер темы будет вводиться с клавиатуры (переменная tema - тип целый): для каждой темы с помощью алгоритмической конструкции выбора case...of зададим имена файлов (переменные fzal, fris - тип строковый), в которых будут храниться подходящие изобра­жения. Например, для темы 1 (зима) используем снежинки (fzal:=D:\snow.gif’) как фоновый рисунок и Буратино (fris:=D:\buratino.gif’), для темы 2 (вес­на) — солнышко (fzal:=D:\sun.gif’) и Попугая (fris:=D:\popugai.gif’), для темы 3 (лето) — ромашки (fzal:=D:\daisy.gif’) и Карлсона (fris:=D:\karlson.gif’), для темы 4 (осень) — листочки (fzal:=D:\list.gif’) и Лису (fris:= D:\lisa.gif’);

- текст поздравления (переменная s тип строковый) вводится с клавиатуры, например «С Но­вым годом!»;

- переменная ris будут иметь тип целый;

- текст программы и результат её выполнения:

 

program pr2;

 uses crt, graphABC;

 var  tema, ris: integer;

 fzal, fris, s: string;

 begin

 SetWindowSize(600,400);

   write( Введите номер темы: 1-зима, 2-весна, 3-лето, 4-осень');

   read(tema);

write(’Введите поздравление’);

read(s);

  case tema of          {выбор имен файлов}

     1:begin fzal:=’D:\snow.jpeg’; fris:=’D:\buratino.jpeg’; end;

     2:begin fzal:=’D:\sun.jpeg’; fris:=’D:\popugai.jpeg’; end;

     3:begin fzal:=’D:\daisy.jpeg’; fris:=’D:\karlson.jpeg’; end;

       4:begin fzal:=’D:\list.jpeg’; fris:=’D:\lisa.jpeg’; end;

  end;

 ClearWindow;

 SetPenColor(clLtGray);        {цвет пера}

 SetBrushPicture(fzal);       {установка заливки}

 Rectangle(0,0,120,400);         {рисование прямоуголь­ника }

    ris:=LoadPicture(fris);         {загрузка изображения из файла}

    DrawPicture(ris,380,70,200,300);        {вывод изображения}

SetBrushStyle(bsClear);       {прозрачный фон кисти}

SetFontColor(clRed);        {цвет шрифта}

SetFontSize(34);        {размер шрифта}

    SetFontStyle(fsBold);     {начертание}

TextOut(60,40,s);       {вывод текста}

end.

 

 

 

 

Теоретические сведения для выполнения Заданий 3-4.

Анимация средствами языка программирования

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

Избежать моргания экрана позволяет использование про­цедуры перерисовки Redraw.

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

 

 

Задание 3.  Составить программу, которая имитирует движение автомо­биля. Пусть автомобиль (avto.bmp) перемещается на фоне здания и деревьев (gorod.bmp ) слева направо на расстояние 400 пикселей. Автомобиль нарисовать в графическом редакторе Paint и дать ему имя avto.bmp,  здания, деревья также нарисовать в Paint и сохранить под именем gorod.bmp.

 

Методика выполнения Задание 3.

-  открытие графического модуля во второй строке с помощью команды uses graphABC;

- загрузим изображения фона и автомобиля из файлов gorod.bmp и avto.bmp, поместив их описатели в переменные fon и avto;

- установим про­зрачность фона для изображения автомобиля: SetPictureTransparent (avto, true). Зададим начальные координаты (х,у), ширину w и высоту h изображения автомобиля. Все переменные будут иметь тип integer;

- процедуры рисования и стирания будем повторять в цикле с предусловием While до тех пор, пока автомобиль не переместится на 400 пикселей. На каж­дом шагу цикла координату х левого верхнего угла изображения будем увеличи­вать на 10. Ширину изображения будем уменьшать на 2 пикселя, а высоту — на 1 пиксель для его уменьшения при удалении.

Заметим, что плавность и длительность полученной демонстрации зависит

от выбора величины шага (увеличения координаты х), количества кадров (по­вторений цикла),

времени показа кадра (задержки), а также быстродействия компьютера.

- текст программы:

 

program pr3;

uses GraphABC;

var fon, avto, x, y, w, h: integer;

begin

SetWindowSize(600,300);

fon:= LoadPicture(’D:\gorod.bmp’); {загрузка изображений}

avto:= LoadPicture(’D:\avto.bmp’);

SetPictureTransparent(avto,true); {прозрачный фон}

x:=0; у:=17 0; w:=240; h:=100;

While x<400 do begin

ClearWindow; DrawPicture (fon,0,0);

DrawPicture(avto,x,y,w,h); {вывод изображений}

    x:=x+10;  w:=w-2;   h:=h-1;

      sleep(20);               {задержка на 20 мс}

      Redraw;            {перерисовка}

    end;

end.

 

 

Задание 4.  Составить программу «Секундомер»: на фоне фотографии циферблата секундомера поместить движущиеся стрелки, которые останавливаются при нажатии любой клавиши.

 

Методика выполнения Задание 4.

-  открытие графического модуля во второй строке с помощью команды uses graphABC и текстового модуля uses crt одновременно;

- загрузим изображение циферблата из файла timer.jpg;

- зададим координаты центра вращения стрелок (x0,y0) и начальные значения секунд sec:=0 и минут min:=0;

- на каждом шагу цикла с постусловием repeatuntil будем увеличивать значение секунд на 1 до тех пор, пока время не превысит 60 мин, или не будет нажата любая клавиша (keyPressed). Значения минут будем вычислять целочисленным делением секунд на 60 (min:=sec div 60);

- секундную стрелку будем рисовать линией длиной 120 и толщиной 3 пикселя, а минутную — 100 и 7 пикселей. Радианная мера угла поворота секундной стрелки равна Pi*sec/30, а минутной — Pi*min/30;

- координаты концов стрелок (x,y) будем вычислять по формулам тригонометрии и округлять до целых.

Например, для секундной стрелки используем формулы:

x:=x0+Round(120*sin(Pi*sec/30));

  y:=y0-Round(120*cos(Pi*sec/30));

- текст программы:

 

рrogram pr4;

uses crt, GraphABC;

var fon, x0, y0, x, y ,sec, min: integer;

begin

SetWindowSize(360,480); {Размеры окна}

HideCursor; {Скрытие курсора}

x0:=173; y0:=300; sec:=0; min:=0;

fon:=LoadPicture(′D:\timer.jpg′); {Загрузка изображения}

repeat

ClearWindow;

DrawPicture(fon,0,0,360,480); {Рисование циферблата}

sec:=sec+1; min:=sec div 60; {Расчет секунд и минут}

x:=x0+Round(120*sin(Pi*sec/30)); {Секундная стрелка}

y:=y0-Round(120*cos(Pi*sec/30)); {Координаты конца}

SetPenWidth(3); Line(x0,y0,x,y); {Рисование}

x:=x0+Round(100*sin(Pi*min/30)); {Минутная стрелка}

y:=y0-Round(100*cos(Pi*min/30)); {Координаты конца}

SetPenWidth(7); Line(x0,y0,x,y); {Рисование}

sleep(1000);

Redraw;

until (min>=60) or keyPressed;

end.

 

 

Похожее изображение

 

Самостоятельная работа

Отметка 5-6:

 Составьте программу, которая загружает из файлов  и выводит на экран:

 

1.     портреты ученых (например, Эйнштейн, Резерфорд, Бор);

 

  http://baba-deda.ru/upload/image/quick-folder/einstein.jpg        http://www.help-rus-student.ru/pictures/09/801_1.jpg 

 

2.     писателей (например, Купала, Колас, Быков);

 

 http://cumir.ru/images/26/26433/yanka-kupala.jpg   http://book-hall.ru/files/kolas.jpg  http://delaemvmeste.by/wp-content/uploads/2014/12/Maksim-Bogdanovich.jpg

 

   3.  художников  (например, Малевич, Савицкий, Ващенко);

 

http://mtdata.ru/u30/photo8A1A/20414524958-0/original.jpg   http://markimira.ru/upload/iblock/5b2/5b2e42b62615cdc528b5dffb65bdb08c.jpg   http://cenadm.gov.by/uploads/images/s000198_351597.jpg

 

4.  композиторов (например, Раинчик, Лученок, Ханок);

 

https://yt3.ggpht.com/-4o9wwNd-Y04/AAAAAAAAAAI/AAAAAAAAAAA/1a-xzcqKx7E/s240-c-k-no-rj-c0xffffff/photo.jpg     http://muzztop.ru/uploads/images/v/i/k/viktor_vujachich_brigantini_muz_igorja_luchenka_st_valentina_lukshi.jpg      http://www.belaruspartisan.org/upload/iblock/294/294add29f5e85d2f983262a323035f8a.jpg

 

5.  изображения животных  (например, енотов, панд, кенгуру);

 

 http://finekartinka.ru/_ph/7/955350196.jpg?1473302935  http://fotohomka.ru/images/Nov/16/0fd5939bbed3a0d435e6f81d5d6af6f3/1.jpg   http://www.wallpack.ru/wall_output/animal/23907.jpg

 

6. растений (например, фиалки, цикломен, декабрист);

 

http://zinniadesigns.net/wp-content/uploads/2015/01/saintpauliaafricanviolet-1.jpg  http://img1.liveinternet.ru/images/attach/c/2/68/767/68767866_1294166464_Ciklamen.jpg  http://os1.i.ua/3/1/13069518_4ca425f3.jpg

 

7.  памятники архитектуры (например. Брестская крепость, гомельский дворец Румянцевых-Паскевичей, минский костел святых Симеона и Елены).

 

              

 

Отметка 6-7:

Составьте программу, которая рисует движение окружности, по заданной ниже траектории:

 

 

 


 

 

Отметка 7-9:

Составьте самостоятельно программу, которая содержит анимацию или рисует рекламные плакаты (турфирмы,  концерта,  спортивного праздника…), используя возможности графического редактора Paint.

 

 

3. Содержание отчета

а. Титульный лист

б. Цель работы

в. Дидактическое и методическое обеспечение

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

д. Заключение в виде анализа полученных результатов и выводов

 

 Контрольные вопросы

1.    Изображения каких форматов можно загружать  в среде PascalABC?

2.    С помощью какой процедуры выводятся растровые изображения?

3.    Какой модуль подключается для создания графических изображений?

4.    Какой модуль подключается для создания текста?

5.    Какие графические примитивы содержит модуль GraphABC?

6.    Как можно имитировать движение изображений в среде PascalABC?

7.    Как избежать моргания экрана при имитации движения изображений?

8.    Команда для создания точки?

9.    Команда для создания линии?

10.   Команда для создания прямоугольника?

11.   Команда для создания окружности?