Программирование графических изображений на языке Pascal

Лабораторный практикум «Программирование графических изображений»
Урок № 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