Автор: Бормина Анна Юрьевна
Место работы: МБОУ Лицей №7 г. Саяногорск, Республика Хакасия
Должность: учитель информатики
Урок: Программирование в среде Turbo Pascal.
Знакомство с графическим модулем Graph.
Тип урока: Комбинированный (теоретическая часть, практика работа) урок.
Цели урока:
Образовательная – Выработка навыков работы в Turbo Pascal, Знакомство учащихся с модулем Graph. Изучение графических процедур: окружность(Circle) и линия(Line). Решение практических задач с использованием операторов графики.
Развивающая – развить логическое, пространственное, творческое мышление учащихся.
Технической оснащение:
Проектор мультимедиа; ученическая доска; персональный компьютер.
Программное оснащение:
ОС Windows, программа Turbo Pascal.
Учащиеся должны уметь:
Самостоятельно запускать программу Turbo Pascal;
Работать с координатной плоскостью, рассчитывать координаты;
Грамотно инициализировать графический режим;
Составлять программы с использование операторов графики.
Ход урока:
1. Организационный момент.
2. Устный опрос по материалу предыдущего урока. Постановка цели. Формирование мотивации к изучению темы.
3. Озвучивание темы урока: Программирование в среде Turbo Pascal.Знакомство с графическим модулем Graph.
ОБЪЯСНЕНИЕ МАТЕРИАЛА:
Стандартный режим работы в среде Турбо Паскаля – текстовый. В этом режиме на экран выводятся только известные компьютеру символы.
В графическом режиме экран дисплея можно рассматривать как совокупность близко расположенных точек. Точку экрана называют пиксель или пиксел (pixel). Светимость этих точек может регулироваться программой. Пикселы образуют прямоугольную таблицу - растр с нумерацией элементов относительно левого верхнего угла экрана – точки с координатами (0; 0).
Для представления символов текстовой информации используется матрица с фиксированным количеством пикселов. Знакоместо каждого символа – прямоугольник размером, к примеру, 8x8, 8x14, 8x16 и т.д.; - в знакоместо при помощи программы помещается растровое изображение символа.
Графические возможности конкретного видеоадаптера (видеокарты) определяются разрешающей способностью (разрешением) монитора, т.е. общим количеством пикселов, а также количеством цветов (оттенков), которыми может светиться каждый из них. Современные мониторы поддерживают разрешение 800x600 точек, 1024x768 точек и более. Чем выше разрешающая способность монитора, тем качественнее изображение. Многие видеоадаптеры могут работать с несколькими графическими страницами.
Графическая страница – область оперативной памяти, используемая для создания “карты” экрана – информации о светимости (цвете) каждого пиксела. На одном и том же компьютере количество точек и количество возможных цветов можно изменять в процессе работы, выбирая графический режим - одну из предусмотренных в конструкции компьютера комбинаций значений.
Драйвер – это программа, управляющая определенным устройством ПК. Графический драйвер управляет дисплейным адаптером в графическом режиме. Графические драйверы обычно располагаются на диске в подкаталоге BGI рабочего каталога в виде файлов с расширением .BGI (Borland Graphic Interface).
В ТП 7.0 есть стандартный библиотечный модуль Graph - библиотека подпрограмм, обеспечивающих управление графическими режимами видеоадаптеров: CGA, EGA, VGA, MCGA, Hercules, PC 3270, AT&T 6300, IBM 8514.
Библиотека Graph содержит около 80 графических процедур и функций (таблица 1), а также десятки констант и описаний типов данных. Подключение модуля происходит при помощи зарезервированного слова USES (uses Graph;).
Модуль Graph – файл GRAPH.TPU. Для работы с графикой этот файл должен быть доступным для компилятора, т.к. GRAPH.TPU не входит в состав библиотеки TURBO.TPL. В поле UNIT опции DIRECTORIES / OPTIONS главного меню среды Турбо Паскаля следует указать каталог, в котором размещен файл GRAPH.TPU.
Для использования различных шрифтов при выводе текста (кроме кириллицы) нужно скопировать файлы с расширением .CHR в рабочий каталог. При запуске программы с кириллицей скопируйте файл EGAVGA.BGI в рабочий каталог.
Любая программа для работы с графикой должна содержать блоки вызова процедуры инициализации графического режима InitGraph - правильность выполнения этой процедуры проверяется функцией GraphResult (0 – в случае успеха) - и процедуры выхода из графического режима CloseGraph.
Пример инициализации графического режима:
uses crt, graph; {подключение модулей}
var gd,gm:integer;
begin
clrscr;
gd:=detect; initgraph (gd, gm, ' ');
. . . . . . . . . . . . . . . . . .
CloseGraph; {закрытие графического режима}
End.
Для возврата из графического режима в текстовый используется оператор: CloseGraph-полное прекращение работы графической системы.
Таблица 1. Процедуры и функции из библиотеки Graph
Обращение | Действие |
InitGraph (Driver, Mode, F) | Инициирует графический режим работы адаптера |
CloseGraph | Завершает работу адаптера в графическом режиме |
RestoreCrtMode | Служит для кратковременного возврата в текстовый режим |
ClearDevice | Очищает экран, закрашивает его в цвет фона |
ClearViewPort | Очищает графическое окно |
SetGraphMode(Mode) | Устанавливает новый графический режим работы адаптера; значения Mode – в конце главы |
SetViewPort(X1, Y1, X2, Y2, T) | Устанавливает прямоугольное окно на экране: X1,Y1 – координаты левого верхнего, X2, Y2 – координаты правого нижнего углов окна, T – выражение типа Boolean, определяющее “отсечку” не умещающихся в окне элементов изображения (True – “отсекать”) |
SetPalette(Reg, Col) | Формирует новое значение Col в регистре с номером Reg (установка одного цвета палитры) |
SetAllPalette(Palette) | Производит смену кодов цветности во всех регистрах палитры, подробно – литература [6, 7] |
SetBkColor (Color) | Устанавливает цвет фона (целое число от 0 до 15) |
SetColor (Color) | Устанавливает цвет для выводимых символов и линий, Color – выражение типа Word (см. гл. 2.4.6) |
PutPixel (X, Y, Color) | Выводит точку с координатами X, Y цветом Color |
Line (X1, Y1, X2, Y2) | Рисует отрезок линии по коордимнатам его концов |
LineRel (Xh, Yh) | Вычерчивает линию от текущего положения указателя до положения, заданного приращениями его координат Xh и Yh (выражения типа Integer) |
LineTo (X, Y) | Вычерчивает линию от текущего положения указателя до положения, заданного его новыми координатами |
MoveRel (DX, DY) | Устанавливает новое положение указателя в координатах относительно предыдущего |
MoveTo (X, Y) | Устанавливает новое положение указателя |
OutText (Т) | Выводит текст Т (кроме кириллицы), начиная с текущего положения указателя |
OutTextXY (X, Y, Т) | Выводит текст Т, начиная с позиции X строки Y |
Circle (X, Y, R) | Рисует окружность радиуса R типа Word с центром в точке с координатами (X; Y) |
Bar (X1, Y1, X2, Y2) | Заполняет прямоугольную область экрана, заданную координатами диагонали |
Bar3D (X1, Y1, X2, Y2, D, Top) | Чертит трехмерное изображение параллелепипеда (D –глубина) и закрашивает его переднюю грань; Top – выражение типа Boolean, если Top = True, верхняя грань вычерчивается, если False - нет |
Rectangle (X1, Y1, X2, Y2) | Вычерчивает прямоугольник по координатам левого верхнего и правого нижнего углов |
Arc (X, Y, A, B, R) | Чертит дугу окружности: X, Y – координаты центра, A, B – начальный и конечный углы дуги(в градусах), отсчет углов ведется против часовой стрелки; R – радиус (в пикселах); |
Ellipse (X, Y, A, B, RX, RY) | Чертит эллипсную дугу: X, Y – координаты центра, A, B – начальный и конечный углы дуги (в градусах), RX, RY – горизонтальный и вертикальный радиусы |
Sector (X, Y, A, B, RX, RY) | Рисует и штрихует сектор эллипса радиусами RX и RY с центром в точке X, Y от угла A к углу B |
SetFillStyle (Pattern, Color) | Устанавливает образец штриховки и цвет |
SetLineStyle (LineStile, Pattern,Thickness) | Устанавливает толщину и стиль линии |
SetTextStyle (Font, Direction, CharSize) | Устанавливает текущий шрифт (09), направление (по горизонтали-0/вертикали-1) и размер символов (013) |
FillEllipse (X, Y, RX, RY) | Рисует закрашенный эллипс |
FloodFill (X, Y, C) | Заполняет любую замкнутую фигуру, используя текущий стиль заполнения (узор и цвет), X, Y – координаты точки внутри этой области, С – цвет границы |
FillPoly (N, Coords) | Обводит линией и закрашивает замкнутый многоугольник; N – количество вершин, Coords – переменная типа PointType, содержащая координаты вершин (см. сноску под таблицей) |
GetImage (X1,Y1, X2,Y2, Buf) | Помещает в буфер памяти Buf копию прямоугольного фрагмента изображения |
PutImage (X,Y, Buf, ModePut) | Выводит в заданное место экрана (X,Y – координаты верхнего левого угла) копию фрагмента изображения из буфера Buf, ModePut – способ копирования (в конце главы) |
ImageSize (X1,Y1,X2,Y2) | Возвращает размер памяти в байтах, необходимый для размещения прямоугольного фрагмента изображения |
GraphResult | Возвращает 0, если последняя графическая операция выполнилась без ошибок |
GraphErrorMsg (Code) | Возвращает значение типа String с текстовым сообщением об ошибке; Code – код ошибки |
GetGraphMode | Возвращает значение типа Integer, в котором содержится код текущего режима работы графического адаптера |
GetX | Возвращает текущую координату указателя по горизонтали / вертикали (тип Integer ) |
GetY |
GetMaxX | Возвращает максимальную координату экрана по горизонтали / вертикали (тип Word ) в текущем режиме работы |
GetMaxY |
Сегодня на уроке мы с вами выполним практическую работу, в которой наглядно представлены процедуры такие как:
Процедура line (x1, y1, x2,y2) проводит текущим цветом отрезок прямой между точками с координатами x1, y1 и x2, y2.
Процедура putpixel (x, y, c) рисует точку (пиксель) с координатами x, y цвета c (карточка с цветовой шкалой).
Процедура circle (x, y, r) рисует текущим цветом окружность с центром в точке имеющей координаты x, y и радиусом r.
Практическая работа «СНЕГОВИК».
Шаг 1. Взять тетрадный лист бумаги в клетку. Повернуть в альбомный формат.
Шаг 2. Нарисовать координатную плоскость с осями X и Y. Масштаб 1 клетка = 20 пикселей на экране монитора. Соответственно ось х разметить на 480 пикселей, ось у – 640 пикселей.
Шаг 3. На полученной плоскости рисуем снеговика с метлой.
Х 480
0 У 640
Шаг 4. Делаем расчеты всех изображенных фигур и фиксируем их.
circle (80, 20, 20);
circle (220, 20, 20);
circle (140, 100, 80);
circle (140, 240, 70);
circle (140, 340, 50);
circle (60, 240, 20);
circle (240, 240, 20);
Line (110, 370, 120, 420);
Line (120, 420, 160, 420);
Line (160, 420, 170, 370);
Line (260, 40, 260, 400);
Line (260, 320, 220, 360);
Line (260, 340, 240, 380);
Line (260, 320, 300, 360);
Line (260, 340, 280, 380);
Шаг 5. Полученные координаты переводим в программный код.
Program snegovik;
uses crt, graph; {подключение модулей}
var {раздел объявления переменных}
gd,gm:integer;
begin
clrscr;
gd:=detect;
gm:=1;
initgraph (gd, gm, 'c:\tp7\bgi ');
circle (80, 20, 20);
circle (220, 20, 20);
circle (140, 100, 80);
circle (140, 240, 70);
circle (140, 340, 50);
circle (60, 240, 20);
circle (240, 240, 20);
Line (110, 370, 120, 420);
Line (120, 420, 160, 420);
Line (160, 420, 170, 370);
Line (260, 40, 260, 400);
Line (260, 320, 220, 360);
Line (260, 340, 240, 380);
Line (260, 320, 300, 360);
Line (260, 340, 280, 380);
Readrey;
CloseGraph; {закрытие графического режима}
End. {конец программы}
Шаг 6. Проверка программы на ошибки. Запуск программы на выполнение. Просмотр результата работы.
4. Подведение итогов. Отметить и похвалить учащихся успешно справившихся с поставленной задачей.
5. Проверочные вопросы к уроку.
Как называется модуль, который подключает графический редактор?
Что делает процедура: Circle (X, Y, R)?
Что делает процедура: Line (x1, y1, x2, y2)?
Какая процедура очищает экран?
6. Домашнее задание.
В тетради нарисовать координатную плоскость, на плоскости нарисовать рисунок с помощью линий и окружности. Например: домик, елку с шарами, работа и т.д.
Приложение 1
Таблица 1. Процедуры и функции из библиотеки Graph
Обращение | Действие |
InitGraph (Driver, Mode, F) | Инициирует графический режим работы адаптера |
CloseGraph | Завершает работу адаптера в графическом режиме |
RestoreCrtMode | Служит для кратковременного возврата в текстовый режим |
ClearDevice | Очищает экран, закрашивает его в цвет фона |
ClearViewPort | Очищает графическое окно |
SetGraphMode(Mode) | Устанавливает новый графический режим работы адаптера; значения Mode – в конце главы |
SetViewPort(X1, Y1, X2, Y2, T) | Устанавливает прямоугольное окно на экране: X1,Y1 – координаты левого верхнего, X2, Y2 – координаты правого нижнего углов окна, T – выражение типа Boolean, определяющее “отсечку” не умещающихся в окне элементов изображения (True – “отсекать”) |
SetPalette(Reg, Col) | Формирует новое значение Col в регистре с номером Reg (установка одного цвета палитры) |
SetAllPalette(Palette) | Производит смену кодов цветности во всех регистрах палитры, подробно – литература [6, 7] |
SetBkColor (Color) | Устанавливает цвет фона (целое число от 0 до 15) |
SetColor (Color) | Устанавливает цвет для выводимых символов и линий, Color – выражение типа Word (см. гл. 2.4.6) |
PutPixel (X, Y, Color) | Выводит точку с координатами X, Y цветом Color |
Line (X1, Y1, X2, Y2) | Рисует отрезок линии по коордимнатам его концов |
LineRel (Xh, Yh) | Вычерчивает линию от текущего положения указателя до положения, заданного приращениями его координат Xh и Yh (выражения типа Integer) |
LineTo (X, Y) | Вычерчивает линию от текущего положения указателя до положения, заданного его новыми координатами |
MoveRel (DX, DY) | Устанавливает новое положение указателя в координатах относительно предыдущего |
MoveTo (X, Y) | Устанавливает новое положение указателя |
OutText (Т) | Выводит текст Т (кроме кириллицы), начиная с текущего положения указателя |
OutTextXY (X, Y, Т) | Выводит текст Т, начиная с позиции X строки Y |
Circle (X, Y, R) | Рисует окружность радиуса R типа Word с центром в точке с координатами (X; Y) |
Bar (X1, Y1, X2, Y2) | Заполняет прямоугольную область экрана, заданную координатами диагонали |
Bar3D (X1, Y1, X2, Y2, D, Top) | Чертит трехмерное изображение параллелепипеда (D –глубина) и закрашивает его переднюю грань; Top – выражение типа Boolean, если Top = True, верхняя грань вычерчивается, если False - нет |
Rectangle (X1, Y1, X2, Y2) | Вычерчивает прямоугольник по координатам левого верхнего и правого нижнего углов |
Arc (X, Y, A, B, R) | Чертит дугу окружности: X, Y – координаты центра, A, B – начальный и конечный углы дуги(в градусах), отсчет углов ведется против часовой стрелки; R – радиус (в пикселах); |
Ellipse (X, Y, A, B, RX, RY) | Чертит эллипсную дугу: X, Y – координаты центра, A, B – начальный и конечный углы дуги (в градусах), RX, RY – горизонтальный и вертикальный радиусы |
Sector (X, Y, A, B, RX, RY) | Рисует и штрихует сектор эллипса радиусами RX и RY с центром в точке X, Y от угла A к углу B |
SetFillStyle (Pattern, Color) | Устанавливает образец штриховки и цвет |
SetLineStyle (LineStile, Pattern,Thickness) | Устанавливает толщину и стиль линии |
SetTextStyle (Font, Direction, CharSize) | Устанавливает текущий шрифт (09), направление (по горизонтали-0/вертикали-1) и размер символов (013) |
FillEllipse (X, Y, RX, RY) | Рисует закрашенный эллипс |
FloodFill (X, Y, C) | Заполняет любую замкнутую фигуру, используя текущий стиль заполнения (узор и цвет), X, Y – координаты точки внутри этой области, С – цвет границы |
FillPoly (N, Coords) | Обводит линией и закрашивает замкнутый многоугольник; N – количество вершин, Coords – переменная типа PointType, содержащая координаты вершин (см. сноску под таблицей) |
GetImage (X1,Y1, X2,Y2, Buf) | Помещает в буфер памяти Buf копию прямоугольного фрагмента изображения |
PutImage (X,Y, Buf, ModePut) | Выводит в заданное место экрана (X,Y – координаты верхнего левого угла) копию фрагмента изображения из буфера Buf, ModePut – способ копирования (в конце главы) |
ImageSize (X1,Y1,X2,Y2) | Возвращает размер памяти в байтах, необходимый для размещения прямоугольного фрагмента изображения |
GraphResult | Возвращает 0, если последняя графическая операция выполнилась без ошибок |
GraphErrorMsg (Code) | Возвращает значение типа String с текстовым сообщением об ошибке; Code – код ошибки |
GetGraphMode | Возвращает значение типа Integer, в котором содержится код текущего режима работы графического адаптера |
GetX | Возвращает текущую координату указателя по горизонтали / вертикали (тип Integer ) |
GetY |
GetMaxX | Возвращает максимальную координату экрана по горизонтали / вертикали (тип Word ) в текущем режиме работы |
GetMaxY |
Приложение 2
Карточка: Цветовая шкала
Цвет | Код | Цвет | Код | Цвет | Код |
Black- черный | 0 | Red-красный | 4 | DarkGray-темно-серый | 8 |
Blue - синий | 1 | Magenta-малиновый | 5 | LightBlue- ярко-голубой | 9 |
Green- зеленый | 2 | Brown-коричневый | 6 | LightGreen-ярко-зеленый | 10 |
Cyan-бирюзовый | 3 | LightGray-светло-серый | 7 | LightCyan-ярко-бирюзовый | 11 |
LightRed-ярко-красный | 12 | LightMagenta-ярко-малиновый | 13 | Yellow-желтый | 14 |
White-белый | 15 | | | | |