Методработа

Методическая разработка
“Графика в Turbo Pascal”

Введение.

В данной работе методическое изложение построено от простого к сложному’. Сначала рассматриваются графические возможности языка программирования Turbo Pascal на примере простейших программ, реализующих линейные алгоритмы. Далее изучается реализация разветвляющихся и циклических алгоритмов в графике, что позволяет легко перейти к созданию программ, имитирующих движение. В работе рассматриваются и приложения компьютерной графики: построение графиков функций, гистограмм, диаграмм, узоров и некоторых кривых, используя элементы высшей математики.
Начиная с 4й версии Турбо-Паскаля для IBM PC, появилась мощная графическая библиотека, организованная в модуль GRAPH.
Использование модуля позволяет превратить учебные программы в полноценные программные продукты, обладающие удобным интерфейсом и красивым оформлением.
Приступая решать задачи на тему “Графика” , необходимо помнить, что :
В графическом режиме экран представляет собой совокупность точек, каждая из которых может быть окрашена в один из 16 цветов;
координаты точек возрастают слева направо и сверху вниз; левая верхняя точка имеет координаты (0,0), а правая нижняя (640,480);
для того, чтобы программа могла выводить на экран графические примитивы (линии, окружности, прямоугольники), необходимо инициализировать графический режим.
Шаблон графической программы выглядит следующим образом:

Uses Graph;
Var
Driver,mode:integer;
Errcode: integer;
Begin
Driver:=detect;
Initgraph(driver,mode,’c:\bp\bgi’);
Errcode:=GraphResult;
If Errcode=grOk then
Begin
{сюда следует поместить основные инструкции}
end;
readln;
CloseGraph;
End.

















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

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

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

Пример 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.

В качестве самостоятельной работы можно предложить школьникам изобразить на экране ЭВМ рисунки предложенные в учебном пособии под редакцией И.Г. Семакина.

Построение сечений в пространственных геометрических фигурах.
Для развития пространственного воображения и ознакомления с основными геометрическими телами можно предложить учащимся написать программы, выводящие на экран компьютера изображения призм, пирамид, конусов и т.п. с построением различного рода сечений.
Пример 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:8
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
· Пример 2. Следующая программа решает задачу: в прямоугольном параллелепипеде провести диагональное сечение.









uses graph;
var driver,mode:integer;
font:word;
begin font:=installuserfont('goth');
driver:=detect;
initgraph(d
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
Для самостоятельной работы школьникам можно предложить построить чертеж к следующим задачам:
В треугольной пирамиде построить сечение, параллельное основанию.
В треугольной пирамиде построить сечение, проходящее через одну из сторон основания и середину противоположного ребра.
В правильной четырёхугольной пирамиде провести сечение, проходящее через диагональ основания и вершину пирамиды.
В правильной четырёхугольной пирамиде провести сечение, проходящее через диагональ основания и середину бокового ребра.
В правильной четырёхугольной пирамиде провести сечение, параллельное основанию и проходящее через середину бокового ребра.
В прямоугольном параллелепипеде провести сечение, проходящее через сторону нижнего основания и противоположную сторону верхнего основания.
В прямой четырёхугольной призме провести сечение, проходящее через диагональ нижнего основания и одну из вершин верхнего основания.
В прямоугольном параллелепипеде построить сечение, проходящее через одну из сторон нижнего основания и одну из вершин верхнего.
В прямоугольном параллелепипеде построить сечение, проходящее через одно из его ребер и точку пересечения диагоналей противолежащей этому ребру грани.
В прямом цилиндре построить осевое сечение.
В правильной шестиугольной пирамиде построить сечение, проходящее через вершину и большую диагональ основания.
В правильной шестиугольной призме построить сечение, проходящее через большую диагональ нижнего основания и одну из сторон верхнего.











Разветвляющиеся алгоритмы в графике.

Алгоритмы ветвления используются в данном курсе на основе разработки программ-меню «Виды геометрических фигур».
Учащийся должен написать программу, которая может проиллюстрировать все имеющиеся виды той или иной геометрической фигуры. Программа должна выполнять следующие действия: на экране появляется список различных типов геометрической фигуры, пользователь выбирает какой-то из этих типов, и программа выводит на экран соответствующую иллюстрацию.
В качестве примера можно привести программу «Виды четырёхугольников». Данная программа предоставляет пользователю меню, из которого он может выбрать четырёхугольник определенного вида (квадрат, ромб, прямоугольник, параллелограмм, трапеция). На экране появляется изображение выбранного четырёхугольника.
uses graph,crt;
label k;
var driver,mode:integer;
xc,yc,x1,x2,y1,y2,y3,y4,x3,x4,v:integer;
begin textcolor(yellow);
gotoxy(30,5);
writeln;
writeln(' Выберите вид четырёхугольника:’);
writeln;
writeln(' 1 - квадрат'); writeln;
writeln(' 2 - ромб');writeln;
writeln(' 3 - прямоугольник');writeln;
writeln(' 4 – параллелограмм’);writeln;
writeln(' 5 - трапеция');writeln;
writeln(' 6 - выход');writeln;
write(' >_ ');
readln(v);
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
xc:=getmaxx div 2;
yc:=getmaxy div 2;
case v of
1: begin setcolor(12);
x1:=xc-100;
y1:=yc-100;
x2:=xc+100;
y2:=yc+100;
rectangle(x1,y1,x2,y2);
outtextxy(xc-40,y2+20,'К В А Д Р А Т'); end;
2: begin setcolor(lightmagenta);
x1:=xc-100;
y1:=yc;
x2:=xc;
y2:=yc-200;
x3:=xc+100;
y3:=y1;
x4:=xc;
y4:=yc+200;
line(x1,y1,x2,y2);
line(x2,y2,x3,y3);
line(x3,y3,x4,y4);
line(x4,y4,x1,y1);
outtextxy(xc-30,y4+30,' Р О М Б ');end;
3: begin setcolor(lightblue);
x1:=xc-200;
y1:=yc-100;
x2:=xc+200;
y2:=yc+100;
rectangle(x1,y1,x2,y2);
outttextxy(xc-80,y2+30,'ПРЯМОУГОЛЬНИК');
end;
4: begin set
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·ПАРАЛЛЕЛОГРАММ');
end;
5: begin
setcolor(green);
x1:=xc-200;
y1:=yc+100;
x2:=xc-100;
y2:=yc-100;
x3:=xc+100;
y3:=y2;
x4:=xc+200;
y4:=y1;
line(x1,y1,x2,y2);
line(x2,y2,x3,y3);
line(x3,y3,x4,y4);
line(x4,y4,x1,y1);
outtextxy(xc-60,y4+30,'ТРАПЕЦИЯ');
end;
else goto k;
end;
readln;
closegraph;
k:
end.

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









Циклические алгоритмы в графике.

Рисунки, построенные с использованием одного цикла

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

uses graph;
var x,y,r,dx,i,dr,mode:integer;
begin
dr:=detect;
initgraph(dr,mode,'c:\bp\bgi');
x:=getmaxx div 2;
y:=getmaxy div 2;
r:=20;
dx:=15;
for i:=1 to 15 do
begin
setcolor(i);
circle(x,y,r);
r:=r+dx;
end;
readln;
closegraph;
end.


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

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

uses graph;
var i,dr,mode,x,y:integer;
begin
dr:=detect;
initgraph(dr,mode,'c:\bp\bgi');
randomize;
x:=getmaxx;
y:=getmaxy;
for i:=1 to 30000 do
putpixel(random(x),random(y),random(15)+1);
readln;
closegraph;
end.

Пример 2. В следующей программе прямоугольное окно экрана заполняется 100 случайными окружностями (случайно выбранными координатами центра, радиуса и цвета).

uses graph,crt;
var i,drv,mode:integer;
xc,yc,r:integer;
begin
drv:=detect;
initgraph(drv,mode,'c:\bp\bgi');
setviewport(80,80,600,400,true);
For i:=1 to 100 do
begin
xc:=random(getmaxx div 2);
yc:=random(getmaxy div 2);
r:=random(getmaxy div 4);
setcolor(random(15)+1);
circle(xc,yc,r)
end;
readln;
closegraph;
end.

В качестве самостоятельной работы можно предложить написать школьникам простейшие программы с датчиком случайных чисел: нарисовать 10 линий, 10 прямоугольников, 10 треугольников и т.д.
















Вложенные циклы в графике.

Пример 1. Классическая задача на применение вложенных циклов – рисование шахматной доски: учащимся дается задание написать программу, рисующую шахматную доску на экране.
uses graph;
var driver,mode:integer;
i,j,x0,y0,dx,dy,x,y:integer;
begin driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
x0:
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
Пример 2. Следующая программа выводит на экран узор из окружностей, расположенные в четыре ряда, в каждом ряду по пять окружностей и они должны быть разного цвета.

uses graph;
var x,y,r,dx,l,j,i,dr,mode:integer;
begin
dr:=detect;
initgraph(dr,mode,'c:\bp\bgi');
y:=200;
r:=30;
l:=50;
randomize;
for i:=1 to 4 do
begin x:=200;
for j:=1 to 5 do
begin setcolor(random(15)+1);circle(x,y,r);
x:=x+l;
end;
y:=y+l;
end;
readln;
closegraph;
end.
После того как ученики овладеют навыками организации циклов, можно перейти к использованию подпрограмм. Здесь происходит переход от использования абсолютных координат для задания фигуры к ее заданию в относительных координатах (например в программах, имитирующих движение).






Имитация движения в графике.

Работа по этой теме приближает нас к созданию простых игровых программ. Движение создается за счет стирания изображения на старом месте и рисования его на новом месте ( с небольшим сдвигом). При составлении таких программ широко используется задержка. Для начала можно предложить школьникам разработать программу движения элементарной фигуры по вертикали или горизонтали.
Пример 1. В качестве примера приводится следующая программа, в результате выполнения которой, прямоугольник обегает границы экрана по часовой стрелке.




uses crt,graph;
var xl,yl,xp,yp,d,mode:integer;
procedure reg(xl,yl,xp,yp:integer);
begin setcolor(random(14)+1);
rectangle(xl,yl,xp,yp);
delay(500);
cleardevice;
end;
begin
randomize;
d:=detect;
initgra
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·Для самостоятельной работы можно предложить ребятам написать программу движения круга по горизонтали, по вертикали, по периметру экрана как по часовой, так и против часовой стрелки.
Для творческой работы по данной теме учащиеся должны написать программу, имитирующую движение нарисованной фигурки. Варианты фигурок, движение которых должно быть сымитировано программой можно взять из учебного пособия под редакцией И.Г. Семакина..
В качестве примера хочется привести ученическую программу, в результате выполнения которой происходит движение муравья (рис.10 в приложении 1) по экрану, причем муравей двигает ножками.
uses graph,crt;
const
Head = LightGray;
Body = DarkGray;
Eye = White;
var
gd,gm:integer;
x,y:integer;
procedure murash(x,y:
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·,y-5);
LineTo(x+68,y-12);
MoveTo(x+73,y+35);
LineTo(x+85,y-4);
LineTo(x+95,y-12);
SetLineStyle(SolidLn,SolidFill,3);
case spr of
1:begin
MoveTo(x+48,y+62); {ножка 1}
LineTo(x,y+63);
LineTo(x+15,y+45);
LineTo(x+8,y+40);
MoveTo(x+48,y+68); {ножка 2}
LineTo(x+10,y+73);
LineTo(x+4,y+80);
LineTo(x,y+77);
MoveTo(x+55,y+62); {ножка 3}
LineTo(x+105,y+58);
LineTo(x+102,y+38);
LineTo(x+105,y+35);
MoveTo(x+55,y+68); {ножка 4}
LineTo(x+100,y+75);
LineTo(x+108,y+70);
LineTo(x+115,y+70);
MoveTo(x+65,y+132); {ножка 5}
LineTo(x+75,y+138);
LineTo(x+58,y+150);
LineTo(x+68,y+150);
MoveTo(x+75,y+110); {ножка 6}
LineTo(x+95,y+130);
LineTo(x+75,y+150);
LineTo(x+85,y+150);
end;
2:begin
MoveTo(x+48,y+62); {ножка 1}
LineTo(x,y+63);
LineTo(x+10,y+45);
LineTo(x+3,y+40);
MoveTo(x+48,y+68); {ножка 2}
LineTo(x+10,y+76);
LineTo(x+4,y+83);
LineTo(x,y+80);
MoveTo(x+55,y+62); {ножка 3}
LineTo(x+105,y+58);
LineTo(x+105,y+38);
LineTo(x+108,y+35);
MoveTo(x+55,y+68); {ножка 4}
LineTo(x+100,y+72);
LineTo(x+108,y+68);
LineTo(x+115,y+68);
MoveTo(x+65,y+132); {ножка 5}
LineTo(x+72,y+138);
LineTo(x+55,y+150);
LineTo(x+65,y+150);
MoveTo(x+75,y+110); {ножка 6}
LineTo(x+98,y+130);
LineTo(x+78,y+150);
LineTo(x+88,y+150);
end;
end;
end;
begin
gd:=detect;
initgraph(gd,gm,'C:\BP\BGI');
x:=100; y:=100;
while (not keypressed) and (x<400) do
begin
murash(x,y,1,true);
delay(300);
murash(x,y,1,false);
murash(x,y,2,true);
delay(300);
murash(x,y,2,false);
x:=x+3;
end;
if readkey=#0 then readkey;
closegraph;
end.


Пример 2. Следующая программа демонстрирует движение точки по окружности.
uses graph,crt;
var driver,mode:integer;
st:string;
h,w,cx,cy,x1,x2,y1,y2:integer;
i,cx1,cy1,a:integer;
begin
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
cx:=getmaxx
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·Вращение фигур.

В результате работы следующей программы происходит вращение прямоугольника вокруг своей оси.
uses graph,CRT;
var driver,mode,xc,yc,i:integer;
X11,Y11,X2,Y2,X1,Y1,X3,Y3,YC1,YC2:INTEGER;
bega,bega1:integer;
coo:arccoordstype;
begin
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
xc:=getmaxx div 2;
yc:=getmaxy div 2;
x11:=xc-50;
y11:=yc-50;
x2:=x11;
y2:=yc+50;
x1:=xc+50;
yc1:=y11;
yc2:=y2;
y1:=y2;
x3:=xc+50;
y3:=yc-50;
rectangle(x11,y11,x1,y1);
delay(2000);
cleardevice;
bega:=180; bega1:=0;
for i:=1 to 18 do
begin setcolor(0);
arc(xc,yc1,bega,bega+20,50);
getarccoords(coo);
x11:=coo.xend;
y11:=coo.yend;
arc(xc,yc1,bega1,bega1+20,50);
getarccoords(coo);
x3:=coo.xend;
y3:=coo.yend;
arc(xc,yc2,bega,bega+20,50);
getarccoords(coo);
x2:=coo.xend;
y2:=coo.yend;
arc(xc,yc2,bega1,bega1+20,50);
getarccoords(coo);
x1:=coo.xend;
y1:=coo.yend;
setcolor(15);
line(x11,y11,x2,y2);
line(x2,y2,x1,y1);
line(x1,y1,x3,y3);
line(x3,y3,x11,y11);
delay(2000);
cleardevice;
bega:=bega+20;
bega1:=bega1+20;
end;
rectangle(x3,y3,x2,y2);
readln;
closegraph;
end.

В качестве самостоятельной работы учащимся можно предложить написать следующие программы:
Изобразить на экране отрезок, вращающийся в плоскости экрана вокруг:
А) своей оси;
Б) своего конца;
В) точки, делящий отрезок в отношении 1:3
Изобразить на экране правильный треугольник, вращающийся в плоскости экрана вокруг своего центра.
Изобразить на экране прямоугольник, вращающийся в плоскости экрана вокруг:
А) одной из своих вершин;
Б) одной из его сторон;
В) одной из своих диагоналей.





























Приложения компьютерной графики.

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

Построение графиков функций
Построение графика можно выполнять либо точечным методом, либо кусочно-линейным. При первом способе график строится как последовательность точек, расположенных максимально близко. Происходит “попиксельный” перебор значений аргумента с выставлением точек с соответствующими Y – координатами. При кусочно-линейном методе задается математический шаг
·X, и рассчитывается последовательность значений (Xi, Yi) :
13 EMBED Equation.3 1415
В этом случае график строится в виде отрезков прямых, проведенных через точки (Xi, Yi), (Xi+1, Yi+1), где i=0,1,2,,n.
Рассмотрим кусочно-линейный способ построения графика.
Чтобы получить на экране дисплея график функции 13 EMBED Equation.3 1415 необходимо выполнить следующие действия:
Определить границы значений аргумента, в пределах которых будет строиться график: Хmin и Xmax.
Для данной области значений аргумента определить предельные значения функции: Ymin и Ymax. Эти значения могут быть оценочными, не обязательно точными.
Задать границы графического окна, в пределах которого будет рисоваться график функции: [XGmin, XGmax], [ YGmin, YGmax]. Поскольку в графических координатах вертикальная ось направлена вниз, то YGmin > YGmax .

Перевести математические координаты (X,Y) в графические (XG,YG) , используя следующие формулы:
13 EMBED Equation.3 1415
Здесь квадратные скобки означают округление до целого значения (функция round).
Выбирается шаг h :
13 EMBED Equation.3 1415
Следующая программа изображает график функции : y=cos(x) для 13 EMBED Equation.3 1415, используя кусочно-линейный метод, с обозначением осей координат.
Uses graph;
var driver,mode,i:integer;y,x,h:real;
kx,ky:real;xg,yg:integer;
a,b:real;
x0,y0,xgmax,xgmin,ygmin,ygmax:integer;
ymin,ymax:real;
function f(x:real):real;
begin f:=cos(x) end;
begin
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
a:=-2*pi;b:=2*pi;
xgmax:=640;xgmin:=0;
ygmin:=200 ;ygmax:=100;
x:=a;
h:=(b-a)/640;
ymin:=f(a);ymax:=f(a);
x0:=round((xgmax-xgmin)/2);
y0:=round((ygmin-ygmax)/2);
for i:=0 to 640 do
begin if f(x)>ymax then ymax:=f(x);
if f(x) x:=x+h;
end;
kx:=(xgmax-xgmin)/(b-a);
ky:=(ygmax-ygmin)/(ymax-ymin);
setcolor(yellow);
x:=a;y:=f(x);
moveto(0,round(ygmin+ky*(f(x)-ymin)));
for i:=0 to 640 do
begin
x:=x+h;
lineto(i,round(ygmin+ky*(f(x)-ymin)));
end;
setcolor(white);
line(xgmin,y0+ygmax,xgmax,y0+ygmax);
line(x0,ygmin+30,x0,ygmax-30);
line(xgmax-5,y0+ygmax-5,xgmax,y0+ygmax);
line(xgmax-5,y0+ygmax+5,xgmax,y0+ygmax);
line(x0-5,ygmax-15,x0,ygmax-30);
line(x0+5,ygmax-15,x0,ygmax-30);
outtextxy(x0-15,ygmax-25,'Y');
outtextxy(xgmax-15,y0+ygmax-15,'X');
readln;
closegraph;
end.

Рассмотрим точечный метод построения графика на примере функции: 13 EMBED Equation.3 1415 для 13 EMBED Equation.3 1415.

uses graph;
var driver,mode,i,k,l,m,n,xk1,yk1:integer;
d,c,a,b,e,x,x1,x2,y,dx,xk,yk:real;
x0,y0,mx,my,px,py:integer;
function f(x:real):real;
begin
f:=x*x*x-0.2*x*x-0.2*x-1.2;
end;
begin
driver:=detect;
initgraph(driver,mode,'C:\Bp\Bgi');
x0:=320; y0:=240;
mx:=10; my:=10;
line(10,y0,630,y0);
line(x0,10,x0,470);
x1:=-5; x2:=5;
dx:=0.01;
x:=x1;
while xpx:=x0+round(x*mx);
py:=y0-round(f(x)*my);
putpixel(px,py,yellow);
x:=x+dx;
end;
line(x0,10,x0-10,20);
line(x0,10,x0+10,20);
line(630,y0,620,y0-10);
line(630,y0,620,y0+10);
outtextxy(x0-20,15,'Y');
outtextxy(610,y0-15,'X');
readln;
end.

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

Построение гистограмм и диаграмм.

Гистограммы и секторные диаграммы являются эффективным средством отображения числовых данных в тех случаях, когда нужно в наглядной форме дать представление о соотношении числовых величин из некоторой совокупности. Гистограмма (столбчатая диаграмма) – это несколько прямоугольников, основания которых равны, а высоты пропорциональны соответствующим числовым величинам. Секторная диаграмма – это круг, площади секторов которого пропорциональны соответствующим величинам.

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

uses crt,graph;
const sh=15;
var driver,mode:integer;
kol,i,k,x1,y1,x2,y2:integer;
m:array[2..5] of byte;
a:array[1..4] of string[5];
s:string;
l:real;
begin
clrscr;
a[1]:='"5" ';
a[2]:='"4"';
a[3]:='"3"';
a[4]:='"2"';
writeln(' Данные для построения гистограммы');
writeln;
writeln(' Количество учеников, получивших:');
writeln;
for i:=5 downto 2 do
begin
write( ,I,' > ');
readln(m[i]);
kol:=kol+m[i]
end;
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
setviewport(10,10,630,400,true);
settextstyle(0,horizdir,1);
k:=5;
y1:=300;
outtextxy(200,20,'Успеваемость учеников');
outtextxy(200,35,'по контрольной работе');
for i:=1 to 4 do
begin
x1:=i*100;
L:=m[k]/kol*100;
str(L:2:0,s);
setfillstyle(i,i);
y2:= y1-round(250*m[k]/kol);
bar3d(x1,y1,x1+sh,y2,10,topon);
outtextxy(x1+10,y2-35,s+'%');
outtextxy(x1,y1+10,a[i]);
k:=k-1;
end;
readln;
closegraph;
end.

Пример 2. Данная программа теперь выводит круговую диаграмму с легендой успеваемости класса по итогам контрольной работы.

uses crt,graph;
var driver,mode:integer;
a,b,c,n,d,x,y,x1,y1,x2,y2,x3,y3:integer;
a1,b1,c1,d1,f,f1,f2,f3:real;
aa,bb,cc,dd:string;
begin
clrscr;
writeln(' Введите количество ');
writeln;
write(' пятёрок - ');
readln(a);
write(' четвёрок - ');
readln(b);
write(' троек - ');
readln(c);
write(' двоек - ');
кeadln(d);
n:=a+b+c+d;
a1:=a/n*100;
b1:=b/n*100;
c1:=c/n*100;
d1:=d/n*100;
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi');
circle(240,240,120);
line(240,240,360,240);
if a<>0 then
begin
f:=2*pi*a1/100;
x:=240+round(120*cos(f));
y:=240+round(120*sin(f));
setfillstyle(1,1);
floodfill(300,250,15);
setfillstyle(1,1);
line(240,240,x,y);
setfillstyle(1,2);
floodfill(300,230,15);
setfillstyle(1,1);
rectangle(400,40,440,50);
floodfill(410,45,15);
line(445,45,465,45);
outtextxy(470,41,'пятёрки');
str(a1:2:0,aa);
outtextxy(545,41,aa+'%');
end
else F:=0;
if b<>0 then
begin
f1:=2*pi*b1/100+f;
x1:=240+round(120*cos(f1));
y1:=240+round(120*sin(f1));
setfillstyle(1,2);
floodfill(300,230,15);
line(240,240,x1,y1);
setfillstyle(1,2);
rectangle(400,60,440,70);
floodfill(410,65,15);
line(445,65,465,65);
outtextxy(470,61,'четверки');
str(b1:2:0,bb);
outtextxy(545,61,bb+'%');
end
else f1:=f;
if c<>0 then
begin
f2:=2*pi*c1/100+f1;
x2:=240+round(120*cos(f2));
y2:=240+round(120*sin(f2));
setfillstyle(1,0);
floodfill(300,230,15);
setfillstyle(1,4);
floodfill(300,230,15);
line(240,240,x2,y2);
setfillstyle(1,4);
rectangle(400,80,440,90);
floodfill(410,85,15);
line(445,85,465,85);
outtextxy(470,81,'тройки');
str(c1:2:0,cc);
outtextxy(545,81,cc+'%');
end;
if d<>0 then
begin
setfillstyle(1,14);
rectangle(400,100,440,110);
floodfill(410,105,15);
line(445,105,465,105);
setfillstyle(1,0);
floodfill(300,230,15);
setfillstyle(1,14);
floodfill(300,239,15);
outtextxy(470,101,'двойки');
str(d1:2:0,dd);
outtextxy(545,101,dd+'%');
end;
readln;
closegraph;
end.




Узоры в графике.

С помощью графики можно создавать красивейшие узоры. Следующая программа рисует узор, который образован следующим образом. На экране строятся вершины правильного восемнадцатиугольника, центр которого совпадает с центром экрана. Каждая из восемнадцати вершин соединяется отрезками со всеми другими вершинами. Координаты вершин задаются формулами:
xi=xl+R*cos(2
·i/18);
yi= yl+R*sin(2
·i/18); i=1,,18
где i - номер вершины, R – радиус окружности, описанной около мноугольника, xl, yl - координаты его центра. Во избежании повторного вычерчивания отрезков между одними и теми же вершинами, каждая из них соединяется только с вершинами, имеющими больший номер.

uses crt,graph;
var i,j,n,xc,yc,r,driver,mode:integer;
x,y:array[1..18] of integer;
t,dt:real;
begin
n:=18;
r:=150;
t:=0;
dt:=2*pi/n;
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi\');
xc:=getmaxx div 2;
yc:=getmaxy div 2;
for i:=1 to n do
begin t:=t+dt;
x[i]:=xc+round(r*cos(t));
y[i]:=yc-round(r*sin(t));
end;
for i:=1 to n-1 do
for j:=i+1 to n do
line(x[i],y[i],x[j],y[j]);
readln;
closegraph;
end.
Пример 2. Следующая программа вычерчивает «убегающий квадрат». «Убегающий квадрат» образован вложенными квадратами, вершины каждого следующего квадрата делят стороны предыдущего в заданном отношении. Таким образом, квадраты становятся не только все меньше и меньше, но и поворачиваются на некоторый угол.
Исходными данными для программы являются координаты левого верхнего угла внешнего квадрата (100, 100), длина его стороны (сто точек экрана), количество квадратов, которые должны быть построены (30) и значение h=0.8. Для определения координат вершин очередного квадрата используютcя соотношения, позволяющие по известным координатам концов отрезка (X1,Y1), (X2,Y2) и заданному отношению h, в котором некоторая точка делит этот отрезок, определить координаты (X,Y) этой точки.

uses graph;
var
xl,yl,i,j,n,xc,yc,r:integer;
driver,mode:integer;
x,y,xd,yd:array[0..3] of integer;
rmu,smu,t,dt:real;
begin
n:=30;
r:=100;
t:=0;
dt:=2*pi/n;
xl:=100;
yl:=100;
x[0]:=xl;
x[1]:=xl+r;
x[2]:=xl+r;
x[3]:=xl;
y[0]:=yl+r;
y[1]:=yl+r;
y[2]:=yl;
y[3]:=yl;
smu:=0.08;
rmu:=1-smu;
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi\');
for i:=1 to n do
begin
for j:=0 to 3 do
begin
xd[j]:=round(rmu*x[j])+round(smu*x[(j+1) mod 4]);
yd[j]:=round(rmu*y[j])+round(smu*y[(j+1) mod 4]);
end;
for j:=0 to 3 do
line(x[j],y[j],x[(j+1) mod 4],y[(j+1) mod 4]);
for j:=0 to 3 do
begin
x[j]:=xd[j];
y[j]:=yd[j]
end;
end;
readln;
closegraph;
end.
В качестве самостоятельной работы можно предложить учащимся изобразить узор, составленный из вложенных треугольников, пятиугольников и шестиугольников. Также можно дать задание: получить узор из нескольких картинок вложенных квадратов.
































Кривые в графике.

Любителям математики хорошо известны такие кривые как спираль Архимеда, улитка Паскаля, кардиоида, трёхлистник и четырёхлистник. Уравнения кривых в полярных координатах имеют следующий вид :
Спираль Архимеда - 13 EMBED Equation.3 1415
Улитка Паскаля - 13 EMBED Equation.3 1415
Кардиоида - 13 EMBED Equation.3 1415
Трилистник - 13 EMBED Equation.3 1415
Четырёхлистник - 13 EMBED Equation.3 1415
Угол изменяется от 0 до 2
·, пересчет полярных координат в декартовы выполняется по формулам:
Х=
·
·cos
·, Y=
·
·sin
·.
Пример 1. Данная программа строит на экране изображение спирали Архимеда.
uses graph;
var i,j,n,xc,yc,driver,mode:integer;
x,y:array[1..18] of integer;
fi,dfi,r,a:real;
x1,x2,y1,y2:integer;
begin
write('a>0 :_'); readln(a);
dfi:=1/a;
x1:=200; y1:=200;
fi:=0; r:=a*fi;
xc:=getmaxx div 2;
yc:=getmaxy div 2;
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi\');
while fi<=2*pi do begin
x2:=200+round(r*cos(fi));
y2:=200-round(r*sin(fi));
line(x1,y1,x2,y2);
x1:=x2;
y1:=y2;
fi:=fi+dfi ;
r:=a*fi
end;
readln;
closegraph;
end.

Пример 2. Следующая программа выводит на экран четырёхлистник.

uses graph;
var i,j,n,xc,yc,driver,mode:integer;
x,y:array[1..18] of integer;
fi,dfi,r:real;
a,x1,x2,y1,y2:integer;
begin
write(' a>0 : _ '); readln(a);
dfi:=1/a;
x1:=200+a; y1:=200;
fi:=0; r:=a*cos(2*fi);
xc:=getmaxx div 2;
yc:=getmaxy div 2;
driver:=detect;
initgraph(driver,mode,'c:\bp\bgi\');
while fi<=2*pi do begin
x2:=200+round(r*cos(fi));
y2:=200-round(r*sin(fi));
line(x1,y1,x2,y2);
x1:=x2;
y1:=y2;
fi:=fi+dfi ;
r:=a*cos(2*fi)
end;
readln;
closegraph;
end.

Для наиболее подготовленных учащихся можно предложить изобразить на экране следующие кривые: улитку Паскаля, кардиоиду, трилистник, семилепестковую розу (
·=sin7
·), двухлепестковую розу (
·=1+sin2
·) и петельное сцепление (
·=1+2cos2
·).

Заключение.

Организация интерфейса пользователя при разработке профессиональных программ – работа не менее (а часто – и более) сложная, чем реализация логической или расчетной части задачи.
Разработка программ, использующих графику – это пожалуй, один из наиболее эффективных способов обучения программированию школьников. При изучении операторов графики не только происходит обучение школьников элементам программирования как такового, но и косвенным путем ребята учатся ориентироваться на координатной плоскости, исследуют как плоские, так и пространственные геометрические фигуры, тем самым у школьников развивается пространственное мышление, что немаловажно при изучении стереометрии в курсе геометрии.
Немаловажен эстетический аспект обучения графики. Цветная графика на персональных компьютерах очень красива. Школьники с удовольствием составляют программы с использованием операторов графики, показывают друг другу результаты своей работы. При создании графики элемент творчества в изучении программирования становится особенно наглядным.





Список литературы.

Абрамов С.А., Гнездилова Г.П., Капустина Е.Н., Селюн М.М. Задачи по программированию. М.:Наука, 1988.
Абрамов С.А., Гнездилова Г.П. Компьютерная графика для школьников. М.:Наука, 1987.
Бурцева Г.А. Графика в обучении программированию.//Информатика и образование. 2002. №6.
Гусак А.А., Гусак Г.М., Бричикова Е.АСправочник по высшей математике. – 4-е изд. стереотип. Мн.:ТетраСистемс, 2002. – 640 с.
Культин Н.Б. Turbo Pascal в задачах и примерах. – СПб.:БХВ – Петербург, 2001. – 256 с.
Попов В.Б. Turbo Pascal для школьников. Учебное пособие, 3-е доп.изд. –М.:Финансы и статистика, 2002. – 528 с.
Рапаков Г.Г., Ржеуцкая С.Ю. Turbo Pascal для студентов и школьников. –СПб.:БХВ –Петербург, 2002. – 352 с.
Семакин И.Г. Лекции по программированию: Учебное пособие. – Пермь: Изд-во Перм.ун-та, 1996. – 256 с.
Фаронов В.В. Программирование на персональных ЭВМ в среде Турбо-Паскаль. 2-е изд. –М.:Изд-во МГТУ, 1992. – 448 с.













 В рассмотренных далее примерах для экономии места не будем проверять функцию GraphResult.











красный

черный

синий

зеленый

желтый



Root Entry

Приложенные файлы

  • doc metodrabota
    Размер файла: 163 kB Загрузок: 0

Добавить комментарий