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

Методическая разработка

“Графика в Turbo Pascal”

Введение.

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

Начиная с 4й версии Турбо-Паскаля для IBM PC, появилась мощная графическая библиотека, организованная в модуль GRAPH.

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

Приступая решать задачи на тему “Графика” , необходимо помнить, что :

1.  В графическом режиме экран представляет собой совокупность точек, каждая из которых может быть окрашена в один из 16 цветов;
2. координаты точек возрастают слева направо и сверху вниз; левая верхняя точка имеет координаты (0,0), а правая нижняя (640,480);
3. для того, чтобы программа могла выводить на экран графические примитивы (линии, окружности, прямоугольники), необходимо инициализировать графический режим.

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

Uses Graph;

Var

     Driver,mode:integer;

     Errcode: integer;

Begin

     Driver:=detect;

     Initgraph(driver,mode,’c:\bp\bgi’);

     Errcode:=GraphResult;^[1]

     If Errcode=grOk then

        Begin

           {сюда следует поместить основные инструкции}

        end;

readln;

CloseGraph;

End.

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

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

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

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

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

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

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

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

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

Пример 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. В треугольной пирамиде построить сечение, параллельное основанию.
2. В треугольной пирамиде построить сечение, проходящее через одну из сторон основания и середину противоположного ребра.
3. В правильной четырёхугольной пирамиде провести сечение, проходящее через диагональ основания и вершину пирамиды.
4. В правильной четырёхугольной пирамиде провести сечение, проходящее через диагональ основания и середину бокового ребра.
5. В правильной четырёхугольной пирамиде провести сечение, параллельное  основанию и  проходящее через середину бокового ребра.
6. В прямоугольном параллелепипеде провести  сечение, проходящее через сторону нижнего основания и противоположную сторону верхнего основания.
7. В прямой четырёхугольной призме провести сечение, проходящее через диагональ нижнего основания и одну из вершин верхнего основания.
8.  В прямоугольном параллелепипеде построить  сечение,  проходящее через одну из сторон нижнего основания и одну из вершин верхнего.
9. В прямоугольном параллелепипеде построить сечение, проходящее через одно из его ребер и точку пересечения диагоналей  противолежащей этому ребру грани.
10.  В прямом цилиндре построить осевое сечение.
11. В правильной  шестиугольной пирамиде построить сечение, проходящее через вершину и большую диагональ основания.
12.  В правильной шестиугольной призме  построить сечение, проходящее  через большую диагональ нижнего основания и одну из сторон  верхнего.

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

Алгоритмы ветвления  используются в данном курсе на основе разработки программ-меню  «Виды геометрических  фигур».

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

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

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 setcolor(cyan);
    x1:=xc-150;
    y1:=yc+100;
    x2:=xc-50;
    y2:=yc-100;
    x3:=xc+150;
    y3:=y2;
    x4:=xc+50;

     y4:=y1;

     line(x1,y1,x2,y2);

     line(x2,y2,x3,y3);

     line(x3,y3,x4,y4);

     line(x4,y4,x1,y1);

     outtextxy(x1,y4+30,'ПАРАЛЛЕЛОГРАММ');

     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.

Для самостоятельной работы предлагаются следующие варианты:

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

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

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

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

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.

2. Рисунки, построенные с использованием датчика случайных чисел.

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

Пример 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:=0;y0:=0;

      dx:=getmaxx div 8;

      dy:=getmaxy div 8;

      x:=x0;

      y:=y0;

      for i:=1 to 8 do

       begin

         for j:=1 to 8 do

          begin

            if ((i+j) mod 2)=0

               then setfillstyle(solidfill,black)

               else setfillstyle(solidfill,white);

            bar(x,y,x+dx,y+dy);

            x:=x+dx;

            end;

            x:=x0;

            y:=y+dy;

       end;

       readln;

       closegraph;

end.

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

initgraph(d,mode,'c:\bp\bgi');
xl:=0;yl:=0;

xp:=40;yp:=30;
rectangle(xl,yl,xp,yp);
while xp<640 do
begin xl:=xl+40;
     xp:=xp+40;
     reg(xl,yl,xp,yp)

end;
while yp<480 do
begin yl:=yl+30;
      yp:=yp+30;
      reg(xl,yl,xp,yp)

 end;
while xl>0 do
begin xl:=xl-40;
     xp:=xp-40;
     reg(xl,yl,xp,yp)

end;
while yl>0 do
begin yl:=yl-30;
     yp:=yp-30;
     reg(xl,yl,xp,yp)

end;
rectangle(xl,yl,xp,yp);
readln;
closegraph;
end.

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

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

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

uses graph,crt;

const

   Head = LightGray;

   Body = DarkGray;

   Eye  = White;

var

   gd,gm:integer;

   x,y:integer;

procedure murash(x,y:integer;spr:byte;show:boolean);

begin

   SetLineStyle(SolidLn,SolidFill,1);

   if show then

   begin

      SetFillStyle(InterleaveFill,Head);

      SetColor(Body);

   end else

   begin

      SetFillStyle(SolidFill,0);

      SetColor(0);

   end;

   FillEllipse(x+50,y+25,25,25);

   if show then

   begin

      SetColor(Body);

      SetFillStyle(SolidFill,Body);

   end else

   begin

      SetColor(0);

      SetFillStyle(SolidFill,0);

   end;

   FillEllipse(x+55,y+65,15,15);

   FillEllipse(x+55,y+107,27,27);

   Sector(x+45,y+36,260,360,28,13);

   SetFillStyle(SolidFill,0);

   Bar(x,y+53,x+47,y+134);

   if show then

   begin

      SetColor(Body);

      SetFillStyle(SolidFill,Eye);

   end else

   begin

      SetColor(0);

      SetFillStyle(SolidFill,0);

   end;

   FillEllipse(x+56,y+20,6,8);

   Ellipse(x+58,y+20,0,360,3,7);

   SetFillStyle(SolidFill,0);

   FillEllipse(x+58,y+20,3,4);

   if show then

   begin

      SetColor(Body);

   end else

   begin

      SetColor(0);

   end;

   MoveTo(x+73,y+35);

   LineTo(x+79,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 div 2;
cy:=getmaxy div 2;

setcolor(red);

a:=36;
for i:=1 to 360 do
begin setcolor(white);

       arc(cx,cy,0,360,110);
      cx1:=cx+round(110*cos(pi*i/180));
      cy1:=cy-round(110*sin(pi*i/180));
      putpixel(cx1,cy1,red);
      delay(150);
      cleardevice;
 end;

 arc(cx,cy,0,360,110);

 putpixel(cx1,cy1,red);
readln;

 closegraph;
end.

Вращение фигур.

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

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. Изобразить  на экране отрезок, вращающийся в плоскости экрана вокруг:

А) своей оси;

Б) своего конца;

В)  точки, делящий отрезок в отношении 1:3

2. Изобразить на экране правильный треугольник, вращающийся в плоскости экрана вокруг своего центра.
3. Изобразить на экране прямоугольник, вращающийся в плоскости экрана вокруг:

А) одной из своих вершин;

Б) одной из его сторон;

В)  одной из своих диагоналей.

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

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

Построение графиков функций

Построение графика можно выполнять либо точечным методом, либо кусочно-линейным. При первом способе график строится как последовательность точек, расположенных максимально близко. Происходит  “попиксельный” перебор значений аргумента с выставлением точек с соответствующими Y – координатами. При кусочно-линейном методе задается математический шаг ∆X, и рассчитывается последовательность значений  (Xi, Yi) :

В этом случае график строится в виде отрезков прямых, проведенных через точки   (Xi, Yi),  (Xi+1, Yi+1), где i=0,1,2,…,n.

Рассмотрим кусочно-линейный способ построения графика.

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

1. Определить границы значений аргумента, в пределах которых будет строиться график: Хmin и Xmax.
2. Для данной области значений аргумента определить предельные значения функции: Ymin и Ymax. Эти значения могут быть оценочными, не обязательно точными.
3. Задать границы графического окна, в пределах которого будет рисоваться график функции: [XGmin, XGmax], [ YGmin, YGmax]. Поскольку в графических координатах вертикальная ось направлена вниз, то YGmin > YGmax .

4. Перевести математические координаты (X,Y) в графические (XG,YG) , используя следующие формулы:

Здесь квадратные скобки означают округление до целого значения  (функция  round).

5. Выбирается шаг h :

Следующая программа изображает график  функции : y=cos(x) для , используя кусочно-линейный метод, с обозначением осей координат.

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)<ymin then ymin:=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.

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

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 x<x2 do begin

px:=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.

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

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

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

Спираль Архимеда  -

Улитка Паскаля       -  

Кардиоида                -  

Трилистник              -  

Четырёхлистник      -  

Угол изменяется  от 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φ).

Заключение.

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

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

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

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

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

красный

черный

синий

зеленый

желтый