Графические возможности в программировании

Тема: Графические возможности языка

программирования Паскаль.

Цель урока :

Образовательная- различие текстового и графического режима экрана, их модули, инициализация графического режима, использование цветов, вывод текста в графическом режиме, расположение точек, линий на экране для рисования фигур, применение операторов при составлении программы.

Развивающая - развитие логического мышления, навыков взаимоконтроля и самоконтроля, рассуждения о координатных точках и их правильной расстановки на экране, умений работать самостоятельно, умений говорить и слушать на уроке. Использование межпредметных связей: координатная ось в математике и в программировании.

Воспитательная - развитие культуры общения и культуры ответа на поставленные учителем вопросы по данной теме, способствовать развитию чувства коллективизма, сотрудничества и взаимопомощи.

Оборудование : 1) Плакаты : а) Режим экрана модуля Crt и Graph ;

б) Область разрешения экрана;

в) Номера цветов

2) Компьютеры, видеопроектор.

3) Электронный учебник « 1С Образование»

4) Программа Turbo Pascal 7.0

5) Индивидуальные карточки

План урока :

1. Организационный момент.

2. Изучение нового материала : Графический режим экрана.

3. Операторы, применяемые в графике ( приложение № 2 )

4. Вывод текста в графическом режиме. Примеры - программы.

5. Рисование фигур в графическом режиме. Примеры - программы.

6. Закрепление материала - работа по карточкам.

7. Домашнее задание.

Ход урока :

1. Организационный момент ( приветствие детей, рассаживаю их, спрашиваю об отсутствующих).

Учитель: (На доске записана тема урока) . Диктую детям название темы « Графические возможности языка программирования Паскаль», чтоб они записали себе в тетрадь. На столах ваших лежит план урока и по этому плану мы будем сегодня работать. ( на ученических столах розданы план урока, они смотрят, читают).

Электронный учебник: ( 1 слайд)

( Вот так выглядит первая страница

электронного учебника «1С Образование :

Программирование на языке Паскаль »).

Показывает и озвучивает 2 и 3 слайды:

Учитель :

2. До сих пор при составлении программ мы использовали только текстовый режим экрана, используя модуль Crt. Однако Турбо Паскаль позволяет выводить на экран рисунки, чертежи, графики функций, т.е. все то, что принято называть компьютерной графикой.

Видеопамять, размещаемая на плате управления дисплеем - адаптере, хранит образ экрана - страницу. Наиболее распространенными являются адаптеры EGA, VGA, SVGA и др. Сложную логику использования видеопамяти обеспечивает драйвер - программа, взаимодействующая с адаптером. Файлы драйверов находятся в каталоге BGI ( файл egavga.bgi ).

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

1) размером графической сетки, т.е. числом размещаемых точек ( пикселей )

на экране - в Турбо Паскале - 640 х 480.

Учитель: Начертите координатную плоскость на доске ( один ученик выходит к доске), которую изучаете в математике, и в тетради ( остальные чертят в тетради).

Ученик : ( чертит на доске) :

Учитель: В отличии от математики ось У

направлена вниз, и отчет начала точек идет с левого верхнего угла экрана.

Учитель: Показывааю на плакте ( три плаката).

( координатная ось в графическом режиме - чертеж на доске).

Учитель: Найдите центр центр экрана.

Ученики: центр экрана - (320, 240).

Учитель: Вторая характеристика

2) цветностью ( всего 16 цветов ). ( Учащимся раздаю распечатки на столах ).

Номер

цвета

Имя константы

Цвет

0

Black

Черный

1

Blue

Темно - синий

2

Green

Темно - зеленый

3

Cyan

Бирюзовый

4

Red

Красный

5

Magenta

Фиолетовый

6

Brown

Коричневый

7

LightGray

Светло - серый

8

DarkGray

Темно - серый

9

LightBlue

Синий

10

LightGreen

Светло - зеленый

11

LightCyan

Светло - бирюзовый

12

LightRed

Розовый

13

LightMagenta

Малиновый ( лиловый )

14

Yellow

Желтый

15

White

Белый

128

Blink

Мерцание символа

Учитель: Для установки графического режима существует библиотека, который называется модулем : Uses Graph

В модуле Graph процедура установки графического режима экрана имеет вид:

InitGraph (< Драйвер >, < Режим >,< Путь к файлу драйвера >) -

в программе указывают соответствующий драйвер и режим его работы -

производят инициализацию графического режима с помощью этого оператора

( Учащимся раздаю распечатки на столах ).

Электронный учебник: ( показывает и озвучивает 4 и 6 слайды, 5 пропускаем )

Учитель: Показываю распечатку детям и раздаю на столы.

Фрагмент программы, инициализирующий графический режим для монитора :

Uses Graph;

Var GraphDriver,GraphMode:Integer;

begin

GraphDriver:=Detect;

InitGraph(GraphDriver,GraphMode,'');

Вместо GraphDriver можно писать - Gr (r-режим экрана)

GraphMode можно писать - Gm (m-модуль экрана)

Тогда фрагмент программы, инициализирующий графический режим для монитора выглядит таким образом :

Uses Graph;

Var Gr,Gm:Integer;

begin

Gr:=Detect;

Gm: = 0; {0-автомат. определение адаптера,

можно в программе эту сточку не писать}

InitGraph(Gr,Gm,'');

Электронный учебник: ( показывает и озвучивает 7, 8, 9 слайды )

Учитель:

3. Для составления программы в Паскале необходимо применить операторы, т.е. их еще называют процедурами, вот некоторые из них : ( Раздаю учащимся методич. пособие-распечатка операторов). Типы переменных в операторах относятся к целым типам (Integer,Word и др).

1) SetBkColor (номер цвета) - цвет фона (Red или 4 - одно и тоже)

2) SetColor (номер цвета) - цвет линий и пикселей

3) GetMaxColor - возвращает максимальный код цветов используемой палитре

Любой фигуре можно соотнести текст, изображаемый возле нее или в ней.

4) SetTextStyle(<Номер шрифта>,<Направление>,<Размера>)-вывод текста

5) OutText (< Текст>) - выводит текст

6) OutTextXY (X,Y,< Текст>) - выводит текст с указанной позиции

7) SetTextJustify(<Горизонт.>,< Вертик.>)- положение текста

8) ClearDevice - стирает все, что находится

Операторы рисования:

9) PutPixel (x,y,номер цвета) - рисует точку

10) Line (x1,y1,x2,y2)-проводит отрезок прямой м/у двумя точками с

заданными координатами

11) LineTo (x2,y2) - задает координаты конца линии; нач. положение линии

определяет точка с текущими координатами

(т.е.оператор построения отрезка с указанием последней его точки)

12) LineRel(dx,dy) - задает приращение конца линии от текущих координат

(т.е. оператор построения отрезка с указанным смещением)

13) Rectangle(x1,y1,x2,y2)-изображает прямоугольник с диагональю (x1,y1)-(x2,y2)

14) Bar (x1,y1,x2,y2) - рисует закрашенный прямоугольник

15) Bar3d (x1,y1,x2,y2,<Глубина>,< Крышка>)- рисует параллелепипед

16) Сircle (x,y,R) - рисует окружность, где x,y -центр круга, R -радиус

17) Arc (x,y,Нач. угол,Конеч. угол,R) - рисование дуги

18) Ellipse( x,y,A1,A2,R1,R2) - рисует эллипс, где х,у-координаты точек,

А1,А2 - начальный и конечный угол, R1,R2 - гориз. и вертик. радиусы элипса)

19) CloseGraph - отменяет графический режим и восстанавливает текстовый режим

20) Fill Poly (<Число вершин>,< Двумерный массив коорд. вершин>) -

рисует закрашенный многоугольник или

21) DrawPoly (< Число вершин>+1,< Двумер. массив коорд. вершин>)

22) Fill Ellipse (x,y,Rx,Ry) - рисует закрашенный эллипс

23) Pie Slice (x,y,Нач.угол,Конеч.угол,R)-рисует закрашенный сектор круга

24) RestoreCrtMode - для временного перехода в текстовый режим

25) SetGraphMode(< Режим>) - для последующего возврата в граф. режим

26) Floodfill (x,y,цвет границы)-ограничивает цвет контура фигуры для

заливки из оператора setcolor и закрашивает произвольную замкнутую фигуру тем

цветом, который указан в операторе Setfillstyle(тип,цвет), где х,у-

координаты любой точки внутри замкнутой фигуры. Если фигура не замкнута или

неверно задан цвет границы, закраска разольется по всему экрану. Например:

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

setcolor (10); setfillstyle (1,9 { цвет заливки синий});

rectangle (50,50,400,150);

floodfill (250,100,10); { цвет контура светло-зеленый}

27) Setfillstyle(тип, цвет)- устанавливает стиль заполнения фигур, этот

оператор работает совместно с оператором Floodfill (x,y,цвет границы)- где тип:

Const emptyfill = 0; {заливка цветом фона}

solidfill = 1; {заливка назначенным цветом}

linefill = 2; {штриховка линиями}

itslashfill = 3; {штриховка //////}
slashfill = 4; {штриховка утолщенными /////}
bkslashfill = 5; {штриховка \\\\\\}
itbkslashfill = 6; {штриховка утолщенными \\\\\\}
hatchfill = 7; {штриховка ++++++}
xhatchfill = 8; {штриховка хххххх}
interleavefill = 9; {штриховка в клетку}
widedotfill =10; {штриховка редкими точками}
closedotfill =11; {штриховка частыми точками}
userfill =12; {штриховка определяется пользователем}; цвет - переменная типа Word, задающая цвет запол­нения. Если параметр тип имеет значение 12, то рисунок узо­ра определяется программистом и задается в процеду­ре setfillpattern (тип, цвет), которая может использоваться без setfillstyle.

4. Вывод текста в графическом режиме. Пример - программы.

Электронный учебник: ( показывает и озвучивает 10,11,12,13 слайды )

Учитель: Ребята садитесь за компьютеры и запустим программу № 1 на выполнение в среде Turbo Pascal: ( в компьютере эта программа на экране)

Нажимаем комбинацию клавиш CTRL + F9 - выполнение программы.

Электронный учебник: ( показывает и озвучивает 14 слайд )

В результате выполнения программы на фоне красного цвета экрана выйдет запись PASCAL с указанным видом шрифтов.

А теперь давайте поменяем стиль шрифта.

Учитель: А теперь давайте в данной программе № 1 поменяем стиль шрифта, так как в операторе SetTextStyle(<Номер шрифта>,<Направление>,<Размера>)

Program Primer1; Uses Graph, Crt;

var Gr, Gm : integer;

begin

Gr:=detect;

Gm:=0;

Initgraph(Gr,Gm,' ');

setbkcolor(Red);

setcolor(Blue);

settextstyle(GothicFont,0,7);

outtextxy(200,150,' Pascal ' );

readkey;

Closegraph;

end.

1) Поменяем номер шрифта: вместо слова GothicFont оставим цифры от 0 до 10 и в конце оставим шрифт 0.

2) Поменяем Направление шрифта - 0- горизонтальное, 1 - вертикальное.

Оставим горизонтальное направление.

3) Поменяем Размер шрифта, вместо 7- ставим любые цифры от 0 до 10.

4) Поменяем цвет фона экрана - бирюзовый - № 3 напишите вместо Red в операторе SetBkColor

5) Поменяем цвет символа текста на малиновый № 13 и напишем вместо Blue в операторе SetColor.

6 ) Поменяем в операторе OutTextXY позицию вывода текста, т.е. координатную точку - вместо (100,100) поставим (150,300).

Ученики: Проделывают на компьютере.

5. Учитель: Мы с вами разобрали вывод текста в графическом режиме экрана.

А теперь продолжим урок, садитесь за теоретические парты и изучим рисование фигур в графическом режиме экрана: Посмотрите распечатку по операторам и там с 9 по 19 номера даны операторы рисования. Покажу на доске некоторые операторы.

Электронный учебник:

( показывает и озвучивает

2,3,4,5,6 слайды )

Электронный учебник:

( показывает и озвучивает 7 слайд ) ( а в 8 слайде - ответ )

Учитель: Раздаю распечатку фрагмента этой программы № 2.

Ученики: Делают это задание в тетради, один ученик к доске.

Учитель: Показываю ответ программы № 2 на компьютере в среде Turbo Pascal:

program Primer2;

uses graph,crt;

var d,reg : integer;

begin

d:=detect; initgraph(d,reg,' ');

{ setbkcolor(0); }

{ setcolor(15);} rectangle(100,50,100,150);

{ setcolor(15);} rectangle(80,120,200,120);

{ setcolor(14);} rectangle(80,50,150,150);

readkey;

closegraph;

end.

По умолчанию цвет фона экрана - черный (0), а цвет контура линий - белый (15).

Потом поменяем цвета и фона и контура.

Электронный учебник: ( показывает и озвучивает 9,10,11,12 слайды )

Ученики: садятся за компьютеры, с тетрадью, с распечаткой операторов.

Учитель: Показываю программу № 3 ( через видеопроектор): Составить программу

вывода на экран точки, линии, круга, прямоугольника, закрашенного

прямоугольника и дуги.

Program Pimer3; Uses Graph;

Var GraphDriver,GraphMode:Integer;

begin

GraphDriver:=Detect;

InitGraph(GraphDriver,GraphMode,'');

SetBKColor(0);

PutPixel(320,240,10); { точкa }

setcolor(14); Line (10,10,600,400 ); { линия }

setcolor(12); circle(320,240,100); { круг }

setcolor(13); rectangle(10,10,600,400); { прямоугольник }

bar ( 450,50, 550,250) ; { закраш. белый прям-к }

setcolor(14); arc ( 50,250,180,90,100 ); { дуга }

readln;

CloseGraph

end.

Учитель: Составить программу № 4 ( видеопроектор) вывода на экран « веера» из 50

линий, имеющих общее начало (0,0) , с использованием датчика

случайных чисел для длины линии и цвета.

program Primer4; uses Graph; { лучи }

var dr, reg,j: Integer;

BEGIN dr:= detect;

initgraph (dr,reg,'C:\Pascal\tp7\bgi');

Randomize;

SetBKColor (0);

For j:=1 to 50 do Begin

SetColor (Random (GetMaxColor+1));

Line(0,0, Random(GetMaxX), Random(GetMaxY))

End;

Readln; Closegraph;

END.

Учитель: Вопрос к учащимся:

1) Где в программе необходимо поменять число, чтобы количество отрезков было не 50, а 500, а 1000 ?

Ученики: ( должны ответить) - в цикле For j:=1 to 500 (1000)

2) Где в программе необходимо поменять значение, чтобы лучи пошли :

А) от центра экрана

Б) с правого верхнего угла

В) с нижнего левого угла

Г) с правого нижнего угла экрана

Д) снизу от центра ?

Ученики: ( должны ответить) - в операторе

А) Line(320,240, Random(GetMaxX), Random(GetMaxY))

Б) Line(639,0, Random(GetMaxX), Random(GetMaxY))

В) Line(0,419, Random(GetMaxX), Random(GetMaxY))

Г) Line(639,419, Random(GetMaxX), Random(GetMaxY))

Д) Line(320,419, Random(GetMaxX), Random(GetMaxY))

Учитель: Программа № 5. Нарисовать флаг Башкирии ( без символики

Курултая). Программу можно написать несколькими способами:: 1) используя построение прямоугольника и внутри залить цветом флага; 2) в цикле с помощью построения линии. Можно создать и каким-нибудь другим способом. ( Во время демонстрации программы, звучит башкирская музыка ).

{ первый вариант программы с помощью функций

setfillstyle(1,15) и floodfill (250,100,10) }

Program pr17; uses graph; { флаг Башкирии }

var d,reg:integer;

begin d:=detect; initgraph (d,reg,'');

setcolor (10); setfillstyle (1,9 {LightBlue});

rectangle (50,50,400,150);

floodfill (250,100,10);

setcolor (10); setfillstyle (1,15 {White});

rectangle (50,150,400,250);

floodfill (160,170,10);

setcolor (10); setfillstyle (1,10 {LightGreen});

rectangle (50,250,400,350);

floodfill (260,270,10);

readln;

closegraph;

end.

{ второй вариант программы с помощью

линий и с операторов setfillstyle и floodfill }

program pr_48; uses graph; { флаг Башкирии }

var x,n,i, d,r, y:integer;

begin

d:=detect; initgraph(d,r,'');

setbkcolor(15);

setcolor(12);

y:=120; for i:=0 to 3 do begin

line(160,y,480,y);

y:=y+80; end;

x:=160; for N:=1 to 2 do begin

line(x,120,x,360);

x:=x+320; end;

setfillstyle(1,1); floodfill(161,121,12);

setfillstyle(1,2); floodfill(479,359,12);

readln; closegraph;

end.

6. Закрепление материала : работа по карточкам.

Учитель: Раздаю каждому карточку. Каждый из них должны будут подставить в

программу свой вариант по карточке.

program K1; uses graph;

var Gr, Gm : integer;

begin

Gr:=detect;

Initgraph(Gr,Gm,' ');

{ на этом месте рисует каждый

свое задание по карточке }

readln;

closegraph;

end.

Ученики: пишут программы. Например, карточка 1:

Нарисовать на правой верхней части экрана круг,

цвет контура - красный, фон экрана - жёлтый.

program K1; uses graph;

var Gr,Gm:integer;

begin Gr:= detect;

initgraph(Gr,Gm,' ');

setbkcolor(14);

{ PutPixel(480,120,12);

-можно не писать,

показывает точку центра круга}

setcolor(12);

circle (480,120,120);

readln;

closegraph;

end.

Учащиеся должны уметь быстро и правильно определять координаты точек в графическом режиме экрана:

7. Домашняя работа:

Учитель: Программа № 6. Нарисовать флаг России. Программу можно написать несколькими способами:: 1) используя построение прямоугольника и внутри залить цветом флага; 2) в цикле с помощью построения линии.

{ { первый вариант программы с помошью функций

setfillstyle(1,15) и floodfill (250,100,10) }

Program pr7; uses graph; { флаг России }

var d,reg:integer;

begin

d:=detect; initgraph (d,reg,'');

setcolor (10); setfillstyle (1,15 {white});

rectangle (50,50,400,150);

floodfill (250,100,10);

setcolor (10); setfillstyle (1,9 {lightblue});

rectangle (50,150,400,250);

floodfill (160,170,10);

setcolor (10); setfillstyle (1,4 {red});

rectangle (50,250,400,350);

floodfill (260,270,10);

readln;

closegraph;

end.

{ { второй вариант программы с помощью

линий и с операторов setfillstyle и floodfill }

program pr_48; uses graph; { флаг России }

var x,n,i, d,r, y:integer;

begin

d:=detect; initgraph(d,r,'');

setbkcolor(15);

setcolor(12);

y:=120; for i:=0 to 3 do begin

line(160,y,480,y);

y:=y+80; end;

x:=160; for N:=1 to 2 do begin

line(x,120,x,360);

x:=x+320; end;

setfillstyle(1,9); floodfill(165,205,12);

setfillstyle(1,4); floodfill(165,285,12);

readln; closegraph; end.

Программа № 7. Выводит слово PASCAL на экран в графическом режиме вначале без цикла, затем в цикле, затем опять без цикла. Фон экрана произвольный цвет.

program Primer7; uses graph,crt;

var d,f,i:integer;

begin

d:=detect; initgraph(d,f,' ');

setbkcolor(0); { Запись текста }

settextstyle(4,0,7);

outtextxy( 70,170,' P A S C A L ');

readln; cleardevice;

setbkcolor(4); { Запись текста с циклом }

for i:=50 to 600 do begin setcolor(3);

circle(i,300,10); end; readln ;

settextstyle(7,0,10);

for i:=1 to 1000 do begin

setcolor(1); outtextxy(60,130,' PASCAL');

setcolor(14); outtextxy(60,130,' PASCAL');

end ; readln ; cleardevice;

setbkcolor(11); { Запись текста }

setcolor(6);

outtextxy(60,130,' PASCAL ');

readln;

closegraph; end.

Домашняя работа: Прочитать эту тему, выучить операторы.

Вывод: Основной целью было научить учащихся составлять программы в

Паскале для работы в графическом режиме, чтобы умели различать

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

графики, вывод текста в графическом режиме, расположение точек на

экране для рисования фигур, применять цвета, операторы в программе.

Литература :

[1] И.Г. Семакин, А.П. Шестаков « Основы программирования »

приложение № 2 , с. 397-409 [1] ) .

[2] А.Б. Николаев «Турбо-Паскаль в примерах».

[3] Личные материалы и разработки, программы.

13