Лабораторный практикум «Программирование графических изображений» Урок № 1 Тема: Реализация графического режима на компьютере. Цель: Познакомиться с основными понятиями графического режима при работе на ПК. Ход урока. Теоретическая часть. Тезаурус – 1. словарь языка с полной смысловой информацией, 2. в информатике – полный систематизируемый набор данных о какой-либо области знания, позволяющий человеку или вычислительной машине в ней ориентироваться (Словарь иностранных слов, Москва, «Русский язык», 1989). Тезаурус языка Паскаль. Модуль – отдельная программа, представляющая собой набор констант, типов данных, переменных, процедур и функций. Структура модуля позволяет использовать его как своеобразную библиотеку описаний. В набор стандартных библиотек интегрированной среды Turbo Pascal 7.0. входят несколько стандартных модулей: System, Crt, Graph и др. Каждый модуль хранится во внешней памяти в отдельном файле с расширением tpu. Модуль System – подключается автоматически к любой программе. Включает все стандартные процедуры и функции языка Turbo Pascal. Модуль Crt – обеспечивает управление текстовым режимом работы экрана (очистка экрана, перемещение курсора в любую позицию экрана, изменение цвета символов и др.). Подключается к программе стандартным образом при помощи служебного слова uses, записывается сразу после названия программы строкой Uses CRT; Модуль Graph – обеспечивает управление графическим режимом работы экрана (позволяет создавать и выводить на экран графические изображения). Подключается к программе стандартным образом Uses GRAPH; Графический режим. В среде Turbo Pascal экран компьютера может работать в двух режимах: текстовом или графическом. Текстовый режим служит для вывода символьной информации: чисел, текстов. Для вывода графических изображений необходимо перевести экран в графический режим. Графическое изображение. В графическом режиме работы любое изображение на экране дисплея состоит из множества мельчайших точек, называемых пикселями. Каждый пиксель – это светящаяся точка таких размеров, при которых промежуток между соседними точками отсутствует. Видеоконтроллер (адаптер) – устройство, управляющее работой графического дисплея. Видеоконтроллер состоит из двух частей: видеопамяти и дисплейного процессора. Видеопамять – электронное энергозависимое запоминающее устройство. В видеопамяти хранится двоичный код изображения, выводимого на экран. Таким образом, изображение, созданное на языке Pascal и высвечиваемое на экране дисплея с помощью совокупности пикселей, хранится в видеопамяти. © Самосушев В.Л. 1 Лабораторный практикум «Программирование графических изображений» Дисплейный процессор периодически (50-70 раз в секунду) читает содержимое видеопамяти и в соответствии с ним управляет работой дисплея Система координат. В графическом режиме экран дисплея представляет собой прямоугольную сетку координат. Левый верхний угол экрана имеет координаты (0,0), нижний правый (для адаптера VGA) – (639,479). Значение координаты х увеличивается слева направо, координаты у – сверху вниз. В этом режиме курсор невидим, но всегда присутствует. Практическая часть. Задания. 1. Определить координаты центра экрана. 2. Определить координаты левого нижнего и правого верхнего углов экрана. 3. Какие фигуры можно изобразить при помощи описанных выше точек (углы экрана и его центр)? Начертите в тетради возможные пятиугольники, вершинами которого являются эти пять точек. © Самосушев В.Л. 2 Лабораторный практикум «Программирование графических изображений» Урок №2 Тема: Инициализация графического режима и выход из него Цель: Научиться инициализировать графический режим при программировании в среде Turbo Pascal. Ход урока. Теоретическая часть. Есть несколько способов инициализации графического режима. Для автоматического определения типа графического драйвера инициализации графического режима необходимо после строки с названием программы набрать следующий фрагмент текста программы (в фигурных скобках записываются комментарии, т.е. фрагменты, не влияющие на исполнение программы компьютером): Uses Graph; {подключение графического модуля} Var Driver, Mode: integer; {переменная Driver определяет тип графического драйвера} {переменная Mode задаёт режим работы графического драйвера} Begin Driver := Detect; {автоматическое определение графического драйвера} InitGraph(Driver, Mode, ‘’); {‘’ - здесь указывается, что файл с драйвером монитора находится в том же каталоге, что и основная программа Тurbo Pascal} После окончания работы в графическом режиме следует вернуться в текстовый режим экрана. Для этой цели предназначена процедура CloseGraph, т.е. для закрытия графического режима в программе надо набрать строку CloseGraph; Графические примитивы В любом графическом пакете существуют процедуры создания (рисования) основных геометрических фигур: прямых линий, окружностей, эллипсов, прямоугольников и др. Такие фигуры называют графическими примитивами (они состоят из множества точек). Основные процедуры создания графических примитивов, имеющихся в модуле Graph: Line(x1,y1,x2,y2); - создаёт прямую линию с заданными координатами концов (x1,y1) и (x2,y2). LineTo(x,y) – создаёт прямую линии от текущей точки до точки с координатами (x,y). Rectangle(x1,y1,x2,y2) – создаёт прямоугольник с заданными координатами верхнего левого угла (x1,y1) и нижнего правого угла (x2,y2). Circle(x,y,r) – создаёт окружность с центром в точке (x,y) и радиусом r. Пример программы рисования прямоугольника по контуру экрана, его диагоналей и окружности с центром в центре экрана и радиусом, равным половине высоты экрана. Program picture1; Uses Graph; Var driver, mode: integer; Begin {инициализации графического режима} © Самосушев В.Л. 3 Лабораторный практикум «Программирование графических изображений» Driver := detect; InitGraph(Driver,Mode,’’); {рисование фигуры} Rectangle(0,0,GetMaxX,GetMaxY); Line(0,0,GetMaxX,GetMaxY); Line(0,GetMaxY,GetMaxX,0); Circle(GetMaxX div 2,GetMaxY div 2,GetMaxY div 2); {задержка экрана с графическим изображением до нажатия клавиши Enter} ReadLn; {закрытие графического режима} CloseGraph End. В программе функции GetMaxX и GetMaxY определяют максимальные значения координат (x,y), которые определяют правый нижний угол (для адаптера VGA GetMaxX = 639, GetMaxY = 479). GetMaxX div 2 и GetMaxY div 2 – операции целочисленного деления на 2 (для адаптера VGA GetMaxX div 2 = 319, GetMaxY = 239). Практическая часть. Набрать и исполнить программу выше приведённого примера. Домашнее задание. Написать программу для рисования фигур, созданных на предыдущем уроке. © Самосушев В.Л. 4 Лабораторный практикум «Программирование графических изображений» Урок №3 Тема: Задание цвета. Цель: Научиться задавать цвет графическим изображениям. Ход урока. Теоретическая часть. Поскольку любой рисунок складывается из точек, основной процедурой получения изображения можно считать PutPixel (X,Y; Color) {поставить точку с заданными координатами (X;Y) и указанным цветом}. Коды цветов (Color): Номер цвета 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Имя константы Black Blue Green Cyan Red Magenta Brown LightGray DarkGray LightBlue LightGreen LightCyan LightRed LightMagenta Yellow While Цвет Чёрный Тёмно-синий Тёмно-зелёный Бирюзовый Красный Фиолетовый Коричневый Светло-серый Тёмно-серый Синий Светло-зелёный Светло-бирюзовый Розовый Малиновый Жёлтый Белый Пример. Следующая программа устанавливает по центру экрана окно размером 100х100, заливает его жёлтым фоном и заполняет синими точками, расположенными через 4 позиции. Примечание: окно задаётся координатами верхнего левого и правого нижнего углов. Uses Graph; Var Driver, Mode: integer; X,Y,X1,Y1,X2,Y2,Xc,Yc: integer; Begin {инициализация графического режима} Driver := Detect; InitGraph := (Driver,Mode,’’); {Определение координат центра экрана} Xc := GetMaxX Div 2; Yc := GetMaxY Div 2; {Определение координат графического окна} X1 := Xc – 50; Y1 := Yc – 50; X2 := Xc + 50; Y2 := Yc + 50; © Самосушев В.Л. 5 Лабораторный практикум «Программирование графических изображений» {Установка графического окна} SetViewPort(X1,Y1,X2,Y2,True); {Установка цвета фона и очистка экрана} SetBkColor(Yellow); ClearDevice; {Расстановка точек в окне} For X :=1 To 25 Do For Y := 1 To 25 Do PutPixel(4*X,4*Y,Blue); {Задержка изображения на экране до нажатия <Enter>} ReadLn; {Выход из графического режима и переход в символьный режим} CloseGraph; End. Практическая часть. Набрать и исполнить программу выше приведённого примера. Домашнее задание. Написать программу для изображения двух графических окон размером 150х150: первое окно – левый верхний угол окна расположен в левом верхнем углу экрана, второе окно – правый нижний угол окна расположен в правом нижнем углу экрана. Залить окна разными произвольными цветами и заполнить их точками другого цвета через 2 позиции. © Самосушев В.Л. 6 Лабораторный практикум «Программирование графических изображений» Урок №6 Тема: Использование циклов для создания графических изображений. Цель: Научиться использовать циклы для создания графических изображений на примере программы «Звёздное небо»… Ход урока. Ниже приведена программа создания изображения «звёздного неба» и угасания части его «звёзд». Перепишите программу в тетрадь. Program А; Uses Graph; Var driver,mode:integer; Х,у,a,b,c,d,i,j:integer; Begin {Ввод данных} Write(’Введите два числа a и b ’); Readln(a); Readln(b); Write(’Введите два числа с и d ’); Readln(c); Readln(d); Write(’Введите координаты окна «звёздного неба» x и y ’); Readln(х); Readln(у); {Инициализация графического режима} Driver := detect; InitGraph(Driver,Mode,''); Randomize; {Создание «звёздного неба»} for i:=1 to a do for j:=1 to b do PutPixel(random(x), random(y), white); Readln; {Угасание «звёзд»} for i:=1 to c do for j:=1 to d do PutPixel(random(x), random(y), black); ReadLn; {Выход из графического режима} CloseGraph End. Из чего же состоит программа? Исходные данные: a и b – произведение a*b задаёт количество создаваемых точек. с и d – произведение с*d задаёт количество угашаемых точек. x и y – координаты окна «звёздного неба». Левый угол окна всегда совпадает с левым верхним углом экрана. Окно во весь экран имеет координаты x = 640, y = 480; в четверть экрана x = 320, y = 240. Randomize – функция изменения создания последовательности случайных чисел. Random(N) – функция создания случайного числа от 0 do N-1, например Random(640) создаст любое число от 0 до 639. For … to … do – цикл (повторение операции тела цикла, в нашем случае создания точки процедурой PutPixel(X,Y,Color)). Наберите программу в среде Turbo Pascal и сохраните её. Исполните программу при следующих исходных данных a b c d x y 100 100 1000 1000 640 480 10 10 100 100 320 240 © Самосушев В.Л. 7 Лабораторный практикум «Программирование графических изображений» Урок №7 Тема: Работа с несколькими окнами в среде Turbo Pascal. Цель: Научиться работать с несколькими окнами в среде Turbo Pascal. Ход урока. Теоретическая часть. В среде Turbo Pascal 7.0 можно открыть сразу 10 окон встроенного текстового редактора и работать с ними. Переключение между окнами производится командами Alt + [Номер_окна], например, Alt + 1; Alt + 2 и т.д. Для закрытия окна редактора можно воспользоваться командой меню Windows Close или «щёлкнуть» мышью по зелёному квадратику в левом верхнем углу экрана. Для открытия окна во весь экран надо «щёлкнуть» мышью по зелёной двунаправленной стрелке в правом верхнем углу экрана. Команды редактирования текста: Edit Cut – вырезать выделенный фрагмент текста; Edit Copy - скопировать в буфер обмена выделенный фрагмент текста; Edit Paste – вставить фрагмент текста из буфера обмена; Edit Clear – удалить выделенный фрагмент текста. Примечание. Перечисленные приёмы работы в среде Turbo Pascal 7.0 пригодятся на сегодняшней практической работе. Практическая часть. Используя выше изученные способы создания графических изображений и сохранённые программы, 1. составить программу для изображения 25 окружностей радиусом 7 пикселей, центр окружности задаётся случайными числами (Х = 640, Y = 480); 49 квадратов со стороной 5 пикселей, левый верхний угол задаётся случайными числами (Х = 640, Y = 480); 36 отрезков (линий) длиной 8 пикселей, начало отрезка задаётся случайными числами (Х = 640, Y = 480); 16 эллипсов (овалов) радиусами 3 и 6 пикселей, центр эллипса задаётся случайными числами (Х = 640, Y = 480); 2. отредактировать программу так, чтобы каждый вид фигуры был разного цвета (окружности – одного цвета, квадраты – другого цвета и т.д.). Цвет задать при помощи случайного числа (вспомните, сколько цветов можно создать в среде Турбо Паскаль 7.0) 3. Отредактировать программу так, чтобы линии фигур не выходили за границы экрана. Примечание. 1. Для фигур, задаваемых двумя точками (прямоугольник и линия), необходимо использовать дополнительные переменные. Hапример, для линии со случайными координатами начальной точки и координатами второй точки, задаваемые случайными числами, бОльшими координат первой точки не более, чем на 10 пикселей, фрагмент программы изображения 100 линий может выглядеть так: randomize; for i:=1 to 4 do for j:=1 to 25 do begin X := random(640); Y := random(480); Line(X,Y,X+random(11),Y+random(11)); end; © Самосушев В.Л. 8 Лабораторный практикум «Программирование графических изображений» Урок №8 Тема: Заполнение графических примитивов. Цель: Научиться заполнять цветами замкунтые области. Ход урока. Теоретическая часть. Любую область, ограниченную замкнутой линией, можно закрасить. Для этого нужно указать какую-нибудь точку внутри области (X,Y) и цвет граничной линии (BorderColor). Соответствующая процедура записывается следующим образом: FloodFill(X,Y,BorderColor); Модуль Graph позволяет выводить на графический экран тексты. Для этого используется несколько процедур. Например, процедура OutTextXY(X,Y,Text); Выводит в графическом окне символьную строку (Text) начиная с указанной позиции (X,Y). Например, OutTextXY(195,400,’Это РОБОТ’); Практическая часть. Отредактируйте ранее созданные программы (каждую программу открывайте в отдельном окне для окончательного предъявления результатов учителю в конце урока): 1. Создайте надпись «Этот Робот создан Фамилия и имя» (Фамилия и имя ваши в творительном падеже). 2. Закрасьте соответствующими цветами ранее созданные замкнутые области: a. Узор из 4-х квадратов, 4-х эллипсов, окружности и двух линий. b. Случайные фигуры (последняя программа). 3. Предоставьте результаты работы учителю. © Самосушев В.Л. 9 Лабораторный практикум «Программирование графических изображений» Урок №9 Тема: Закрашенные области. Цель: Научиться создавать закрашенные области. Ход урока. Теоретическая часть. Среди графических примитивов существуют закрашенные области. Цвет закраски определяется процедурой SetColor. Кроме того, можно управлять рисунком закраски (типом заполнения). Заполненная прямоугольная область с заданными координатами определяется процедурой Bar(X1, Y1, X2, Y2); Обведённый линией (SetLineColor. SetLineStyle) и закрашенный (SetFillStyle) эллипс: FillEllipse(X, Y, RX, RY); Обведённый линией и закрашеннй эллипсный сектор: Sector(X, Y, BegA, EndA, RX, RY); Обведённый линией и закрашенный сектор окружности: PieSlice(X, Y, BegA, EndA); Практическое здание. Создать приведённые выше фигуры с различным типом заполнения и под каждой из них сделать соответствующие надписи © Самосушев В.Л. 10