Построение графических изображений в среде Turbo Pascal

18

МУНИЦИПАЛЬНОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ДОПОЛНИТЕЛЬНОГО ОБРАЗОВАНИЯ ДЕТЕЙ

«СТАНЦИЯ ЮНЫХ ТЕХНИКОВ ГОРОДА ЕВПАТОРИИ РЕСПУБЛИКИ КРЫМ»

(МБОУДОД "СЮТ")

297402, Российская Федерация, Республика Крым, город Евпатория, ул. Революции, д. 75, тел. (06569) 3-03-30,

е-mail: [email protected]

План-конспект учебного занятия

кружок «Компьютер и информационные технологии», группа 2 – А

Тема учебного занятия: «Построение графических изображений в среде Turbo Pascal».

Цель учебного занятия: формирование у детей знаний и умений работы с языком программирования Pascal, организация работы по усвоению детьми основных понятий, принципов работы с данным языком.

Задачи учебного занятия:

Образовательная:

• проконтролировать степень усвоения основных понятий, принципов работы с языком программирования Pascal, изученных и сформированных на предыдущих занятиях;

• обеспечить усвоение основных задач, входящих в содержание темы учебного занятия;

• научить составлять программы с использованием графических процедур и функций в среде Turbo Pascal;

• формировать умение правильно и грамотно выражать свои мысли.

Развивающая:

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

Воспитательная:

• воспитывать аккуратность, внимательность, вежливость, дисциплинированность и бережное отношение к вычислительной технике.

Тип учебного занятия: формирование новых знаний, навыков и умений.

Методы работы: объяснительно-иллюстративный, практическая работа.

Формы работы: индивидуальная, групповая.

Оборудование: персональные компьютеры, доска, мел.

Дидактические материалы: карточки с заданиями.

Ход учебного занятия.

• Организационный момент;

• ТБ при работе за компьютером;

• Актуализация опорных знаний:

• Мотивация учебной деятельности обучающихся:

• Выполнение практической работы;

• Физкультминутка;

• Итоги учебного занятия:

• Вы научились составлять программы с использованием графических процедур и функций в среде Turbo Pascal.

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

Приветствие, проверка присутствующих. Объяснение хода учебного занятия.

2. ТБ при работе за компьютером.

3. Актуализация опорных знаний:

Основные принципы работы с языком Pascal.

Pascal – один из самых известных языков программирования. Создан в 1968 – 1969 годах швейцарским ученым Никлаусом Виртом, был назван в честь французского математика и физика Блеза Паскаля, и используется для обучения программированию по сей день.

Перед началом работы следует напомнить, что язык Pascal – это совокупность трёх составляющих: алфавита, синтаксиса (правил написания объектов языка) и семантики (правил использования этих объектов).
Алфавит Pascal состоит из:

1. Прописных и строчных букв латиницы: A...Z, a…z;

2. Цифр: 0...9;

3. Специальных символов: + — * / = .,:; ‘ # ( ) { } [ ] и их комбинаций: «=» «

Задача же синтаксиса и семантики состоит в том чтобы, правильно написать раздел программы и правильно составить ее структуру, в противном же случае ваша программа будет работать неправильно (или же не работать вовсе!).

Структура программы выглядит так:

Program «имя программы»; — заголовок программы;
(Примечание: в конце строки ставится точка с запятой, не во всех, но в большинстве) 
Uses (название библиотеки); здесь подключаются библиотеки, которые дают дополнительные возможности при создании программ;
Label (имя метки); здесь, если необходимо, прописываются метки, позволяющие переходить в разные места программы (о них позже);
Const тут указываем переменные с постоянной величиной, например, p=3.14;
Var тут через запятую перечисляем все переменные, а затем, указываем тип данных (Пример: Var: K, L, M: integer; N, O: real; (если несколько типов));
Begin (здесь без точки с запятой)
Дальше следует основной блок программы;
end. – конец программы (обязательно после “end” точка, если только это конец программы, а не операторные скобки).

Следует заметить, что из вышеперечисленных разделов обязательными есть только «Var», «Begin» и «end», остальные же могут применяться, если это требуется в ходе выполнения поставленной задачи. 

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

Модуль Graph

ТР обладает достаточно разнообразными средствами для работы со стандартным VGA экраном (возможно также использование и и других типов видеоадаптеров).

VGA адаптер имеет разрешение 640х480 пиксель (точка (0,0) в левом верхнем углу экрана), 16 цветов.

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

Общая структура графической программы:

Uses crt, graph;

var Gd, Gm: Integer;

begin

Gd: = Detect;

InitGraph (Gd, Gm, 'c: \bp\bgi');

...

{Здесь построение изображения}

...

ReadKey;

CloseGraph;

end.

Путь c: \bp\bgi указывает расположение файла egavga. bgi (драйвер графического адаптера). На разный компьютерах этот путь может быть разным. Если файл egavga. bgi поместить в каталог с программой, то путь можно не указывать.

Основные графические процедуры и функции:

Построение фигур

PutPixel (x,y,c) - отображает на экране точку с координатами (x,y) и цветом c

Line (x1,y1,x2,y2) - рисует линию с началом в точке (x1,y1) и концом - (x2,y2)

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

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

Circle (x,y,r) - рисует окружность с центром (x,y) и радиусом r

Ellipse (x,y,ba,ea,xr,yr) - рисует дугу эллипса с центром в (x,y), горизонтальным и вертикальным радиусом xr и yr, и начальным и конечным углом ba и ea

FillEllipse (x,y,xr,yr) - рисует закрашенный эллипс с центром в (x,y), горизонтальным и вертикальным радиусом xr и yr

Определение цветов и стилей

GetPixel (x,y) - возвращает цвет пиксела с координатами (x,y)

SetColor (c) - устанавливает цвет изображения (для линий)

SetFillStyle (p,c) - устанавливает текущий стиль и цвет c (для "закрашенных" фигур)

FloodFill (x,y,b) - закрашивает замкнутую область с внутренней точкой (x,y) и цветом контура b

Работа с текстом

OutTextXY (x,y,st) - выводит на экран строку st с позиции (x,y)

SetTextStyle (f,d,s) - устанавливает шрифт f, его направление d и размер

Сообщения об ошибках.

function GraphErrorMsg (ErrorCode: integer): String; Возвращает строку сообщения об ошибке для заданного кода ErrorCode.

function GraphResult: integer; Возвращает код ошибки для последней графической операции.

Графические процедуры

Arc (x,y: integer; St,En,R: word);{рисование дуги, где x,y - коорд. центра дуги, R - радиус, St, En - нач. и конечный углы. }

ClearDevice; {очистка экрана}

Circle (x,y: integer; R: word);{окружность радиуса R

cцентром в точке (x,y) }

CloseGraph; {закрытие графики}

InitGraph (gd,gm: integer; Path: string);{инициализация графики, где

gd - графический драйвер,

gm - графический режим,

Path - путь размещения файла

с расширением. bgi. }

Line (x1,y1,x2,y2: integer); {рисование линии, проходящей через две точки:

с координатами (x1,y1) и (x2,y2) }

LineRel (dx,dy: integer);{рисование линии: dx, dy- приращения

координат к координатам текущей позиции курсора}

LineTo (x,y: integer);{рисование линии, проходящую через текущую позицию курсора и точку с координатами (x,y) }

Moveto (x,y: integer);{задание координат текущей точки}

OutText (T: string);{вывод текста в текущую точку}

OutTextXY (x,y: integer; T: string);{вывод текста в точку с координатами х, у}

Rectangle (x1,y1,x2,y2: integer);{рисование прямоугольника: (x1,y1) и (x2,y2) - координаты противоположных вершин}

PutPixel (x,y: integer; c: word);{выводит точку с координатами (х, у) цветом с}

Графические функции

GetMaxX - определяет максимальный размер экрана по оси x.

GetMaxY - определяет максимальный размер экрана по оси y.

GetX - координата текущей позиции курсора по оси x.

GetY - координата текущей позиции курсора по оси y.

Машинные координаты.

Начало машинной системы координат, направление осей, а также максимальные значения координат монитора показаны на рисунке

На рисунке приведена также машинная (x_m, y_m) и физическая (x,y) системы координат. Для изображения на экране точки с физическими координатами (x,y) необходимо определить ее машинные координаты (x_m, y_m). Расчетные формулы имеют следующий вид (попробуйте самостоятельно получить эти формулы):

x_m=x₀+x*M_x,

y_m=y₀-y*M_y,

где M_x, M_y-масштабы соответственно по осям x и y, которые показывают число пикселей в одной физической единице,

x, y - физические координаты точки,

x_m, y_m - машинные координаты точки,

x₀, y₀ - машинные координаты начала физической системы координат.

Пример. Нарисовать через весь экран горизонтальную и вертикальную линии, пересекающиеся в центре монитора.

Этапы разработки программы сведены в таблицу.

Таблица

Пример. Написать программу построения графика функции y=x² для xϵ [-1; 1].

Этапы разработки программы сведены в таблицу.

Таблица

4. Мотивация учебной деятельности обучающихся:

Создавая Паскаль, Вирт преследовал 2 цели:

• во-первых, разработать язык, пригодный для обучения программированию как систематической дисциплине;

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

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

Это был самый первый простой язык (ord pascal) для программирования, помогающий решить множество практических задач прошлого столетия (1970 год). Он был разработан группой ученых. С расширением платформ были созданы новые версии этой программы, а Pascal стал классическим языком программирования.

5. Выполнение практической работы.

Линейные алгоритмы в графике.

I.  Рисунки, построенные из простейших геометрических фигур.

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

Построенное изображение часто напоминает детские рисунки или картинки для игры в мозаику.

Программировать такие картинки несложно, однако, требуется предварительная кропотливая работа по определению размеров фигур и их размещение на экране.

Пример 1. Следующая программа позволяет получить на экране изображение домика.

uses graph;

var dr, mode:integer;

begin

dr:=detect;

initgraph(dr, mode,'c:\bp\bgi');

rectangle(40,280,460,520);

rectangle(80,320,200,440);

rectangle(280,320,400,520);

line(40,280,240,120);

line(240,120,460,280);

circle(240,200,40);

readln;

closegraph;

end.

Пример 2. Данная программа выводит на экран флаг Олимпийских игр.

uses graph;

var dr, mode:integer;

begin

dr:=detect;

initgraph(dr, mode,'c:\bp\bgi');

setfillstyle(solidfill, lightgray);

bar(80,80,200,135);

setcolor(green);

circle(100,100,15);

setcolor(black);

circle(140,100,15);

setcolor(red);

circle(180,100,15);

setcolor(yellow);

circle(120,115,15);

setcolor(blue);

circle(160,115,15);

readln;

closegraph;

end.

II.  Построение сечений в пространственных геометрических фигурах.

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

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

uses graph;

const

tr:array[1..5] of pointtype=((x:320;y:80),(x:440;y:360),(x:320;y:440),

(x:160;y:400),(x:320;y:80));

var

driver, mode, e,xc, yc:integer;

begin

driver:=detect;

initgraph(driver, mode,'c:\bp\bgi');

drawpoly(5,tr);

line(160,400,440,360);

xc:=(320+160) div 2;

yc:=(400+440) div 2;

line(320,80,xc, yc);

line(xc, yc,440,360);

setfillstyle(2,14);

floodfill(420,320,15);

floodfill(xc+1,yc-1,15);

line(320,80,320,440);

readln;

closegraph;

end.

Пример 2. Следующая программа решает задачу: в прямоугольном параллелепипеде провести диагональное сечение.

uses graph;

var driver, mode:integer;

font:word;

begin font:=installuserfont('goth');

driver:=detect;

initgraph(driver, mode,'c:\bp\bgi');

setfillstyle(0,0);

bar3d(120,120,480,360,80,true);

line(120,360,200,300);

line(200,300,200,62);

line(200,300,560,300);

line(200,300,480,360);

line(200,62,480,120);

setfillstyle(3,15);

floodfill(202,70,15);

floodfill(202,130,15);

floodfill(475,340,15);

settextstyle(font,0,4);

outtextxy(220,420,'parallepiped');

readln;

closegraph;

end.

Примеры решения задач с использованием операторов графики и циклических операторов:

Задача1.: Составить программу, осуществляющую движение отрезка, концы которого вращаются по двум заданным окружностям. 

Листинг решение:

uses crt,graph;

var x1,y,x2,x3,y3,x4,y4:integer;

    u:real;

begin

initgraph(x1,y,'');

x1:=20;

y:=getmaxY div 2;

x2:=100;

u:=pi/2;

repeat

setcolor(14);

setlinestyle(0,0,1);

circle(x1,y,20);

circle(x2,y,20);

x3:=x1+round(20*cos(u));

y3:=y-round(20*sin(u));

x4:=x2+round(20*cos(u));

y4:=y-round(20*sin(u));

setcolor(11);

setlinestyle(0,0,3);

line(x3,y3,x4,y4);

delay(100);

setcolor(0);

circle(x1,y,20);

circle(x2,y,20);

setlinestyle(0,0,3);

line(x3,y3,x4,y4);

x1:=x1+5;

x2:=x2+5;

u:=u-0.1;

until x1=getmaxX;

setcolor(12);

settextstyle(0,0,3);

outtextXY(getmaxX div 2-60,y,'Okonchanie rabotu programmu');

readln

end.

Сохраните Вашу работу и покажите её педагогу.

6. Физкультминутка.

7. Итоги учебного занятия

Ответьте на следующие вопросы:

1. Что нового Вы узнали, решив задания на учебном занятии?

2. Задания были сложными? Задания были интересными?

3. Над изучением каких тем в разделе «Изучение языка программирования Pascal» Вы хотели бы ещё поработать?

18