Как составить программу по информатике по графику

Урок 1

ТЕМА: Описание графических
операций в языке программирования Паскаль.

Цели: Ввести понятие о графических операторах в
Паскале. Научить учеников правильно составлять программы по обработке
графических функций и операций.

Задачи: Изучить графические операции и функции
на примерах простейших фигур,

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

ПРОГРАММНАЯ ПОДДЕРЖКА язык программирования Паскаль (версия 7.0)

ОБОРУДОВАНИЕ: компьютерная презентация

Тип урока: изучения нового материала

Ход урока

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

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

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

III.          
Мотивация учебной
деятельности

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

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

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

Видеоадаптер – это сложное электронное устройство. Конструктивно
он представляет собой самостоятельную электронную плату или может быть встроен
в системную плату.

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

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

IV.           
Изучение нового
материала

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

uses
Graph;
(что в переводе на русский означает «используется графика»).

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

Простейшая
программа может иметь вид:

Пример 1.

   PROGRAM 
Primer_1;

      uses Graph;

      var  Gd,Gm:
Integer;

   BEGIN

      Gd:=VGA;   {
Графический адаптер — VGA         }

      Gm:=VGAHi; {
Графический режим VGAHi (640×480) }

      InitGraph
(Gd,Gm,’..bgi’); { Включить графический режим }

      If 
GraphResult=grOk

         then {
Если режим включился успешно }

              {
Нарисовать отрезок прямой }

              Line
(0,0,639,479); ReadLn

   END.

Мы видим,
что у процедуры InitGraph три параметра. В качестве первых двух фактических
параметров должны стоять имена целых (integer) переменных. Не будем вдаваться в
подробности, почему это так; вместо этого выясним их предназначение.

Первый
параметр является кодом графического адаптера (т.е. электронной схемы,
управляющей выводом информации на экран). (Дело в том, что на IBM-совместимых
компьютерах применяется ряд стандартных графических адаптеров, носящих названия
CGA, EGA, VGA.)

По нашей
программе можно догадаться, что в используемых нами компьютерах используется
адаптер VGA, и компилятор сам «узнает» слово VGA и заменит его на
нужное целое число (на самом деле равное 9, но мы этого можем и не запоминать).
Каждый графический адаптер позволяет использовать несколько графических
режимов, отличающихся количеством цветов и разрешающей способностью (в
дальнейшем мы узнаем, что это такое). И второй из параметров как раз
предназначен для того, чтобы указать, какой из графических режимов следует
включить. Пока что мы ограничимся лишь одним графическим режимом VGAHi.

Третий
параметр является строкой, содержащей путь к файлу, который называется
EGAVGA.BGI. В этом файле содержится драйвер (такая специальная программа),
необходимый для работы с адаптерами EGA и VGA. И, как легко увидеть из нашего
примера, файл этот находится в подкаталоге TPBGI.

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

  
(0,0)                                          X

    +
———————————————>

    |

    |

    |

   Y

Каждая
точка на экране на самом деле представляет собой очень маленький прямоугольник
(и поскольку это не совсем точка, то иногда используют специальный термин —
«пиксел»). Количество точек (пикселов), умещающихся на экране по
вертикали и горизонтали, называют разрешающей способностью. Разрешающая
способность экрана в режиме VGAHi — 640×480. Это означает, что по горизонтали
на экране умещается 640 точек, а по вертикали — 480. Точка в левом верхнем углу
экрана имеет координаты (0,0). Координата X любой точки экрана лежит в пределах
от 0 до 639, а координата Y — в пределах от 0 до 479.

Как Вы уже
догадались, процедура Line (x1,y1,x2,y2) рисует на экране прямую, соединяющую
точки (x1,y1) и (x2,y2).

Пример 2.

Изобразить на
экране прямоугольный треугольник с вершинами (320, 10),

(120,210),
(520,210).

  
PROGRAM  Primer_2;

      uses Graph;

      var  Gd,Gm:
Integer;

   BEGIN

      Gd:=VGA;
Gm:=VGAHi; InitGraph (Gd,Gm,’..bgi’);

      If 
GraphResult=grOk

         then 
begin

                 
Line (120,210,520,210); { Горизонтальный отрезок }

                 
Line (120,210,320,10);  { Левый катет            }

                 
Line (320,10,520,210);  { Правый катет           }

                 
ReadLn

              
end;

   END.

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

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

Пример 3.

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

   PROGRAM 
Primer_3;

      uses Graph;

      var  Gd,Gm:
Integer;

   BEGIN

      Gd:=VGA;
Gm:=VGAHi; InitGraph (Gd,Gm,’..bgi’);

      If 
GraphResult=grOk

         then
begin

                
SetColor (LightMagenta); { Цвет — светло-сиреневый }

                
Line (120,210,520,210);  { Горизонтальный отрезок }

                
SetColor (LightCyan);    { Цвет — светло-циановый }

                
Line (120,210,320,10);   { Левый катет            }

                
Set Color (Green);          { Цвет — зеленый         }

                
Line (320,10,520,210);   { Правый катет           }

                
ReadLn

              end

   END.

Пример 4
(самостоятельное выполнение)

Разноцветные лучи.

   PROGRAM 
Primer_4;

      uses  Graph;

      const
CenterX=320;

           
CenterY=240;

           
Radius=200;

      var   Gd,Gm:
Integer;

            i    :
Integer;

            dx,dy:
Integer;

   BEGIN

      Gd:=VGA;
Gm:=VGAHi; InitGraph (Gd,Gm,’..bgi’);

      If 
GraphResult=grOk

         then 
begin

                 
For i:=0 to 160  do

                    
begin

                       
dx:=Round (Radius*sin(i*pi/80));

                       
dy:=Round (Radius*cos(i*pi/80));

                       
SetColor (i MOD 16);

                   
    Line(CenterX,CenterY,CenterX+dx,CenterY+dy)

                    
end;

                 
ReadLn

               end

   END.

Пример 5

        Концентрические
окружности.

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

 PROGRAM 
Primer_5;

     
uses Graph;

     
const CenterX=320;

           
CenterY=240;

      var   Gd,Gm: Integer;

           
i    : Integer;

  
BEGIN

     
Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,’..bgi’);

     
If  GraphResult=grOk

        
then  begin

                 
For i:=0 to 23  do

                    
Circle (CenterX,CenterY,i*10);

                 
ReadLn

              
end

  
END.

V.              
Задание классу: Составить
программу с использованием операторов изображения линии, окружности, точки.

VI.           
Домашнее задание: Составить программу для построения семейства
разноцветных, случайным образом расположенных секторов окружностей. (Sector (x,y),StAngle,EndAngle,Xradius,Yradius);

Урок 2

ТЕМА: Использование в
программах процедур и функций для построения простейших графических
изображений.

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

Задачи: Изучить графические операции и функции
на примерах простейших фигур, научиться использовать графические операторы для
составления программ на построение изображений; актуализировать знания по
описанию графических операций; изучить правила ввода в программу графических
процедур и функций; пояснить  назначение  и  дать рекомендации по
использованию процедур и функций модуля Graph; научить использовать в
программах графические процедуры и функции для построения изображений; учить
составлять программы самостоятельно; развивать умения и навыки
составления программ на построение графических изображений; развивать
навыки самостоятельного освоения основных приемов работы на ПЭВМ; воспитывать
аккуратность в работе.

ПРОГРАММНАЯ ПОДДЕРЖКА язык программирования Паскаль (версия 7.0)

ОБОРУДОВАНИЕ: компьютерная презентация

Тип урока: изучения нового материала

Ход урока

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

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

Фронтальный опрос:

1.    
Как подключить библиотеку
графических процедур?

2.    
Что необходимо для
установки графического режима?

3.    
Как задать на экране
положение того, что мы рисуем?

4.    
Можно ли в программах на
построение изображений использовать операторы языка программирования Паскаль?
(перечислить базовые структуры языка программирования Паскаль)

5.    
Каким графическим
оператором можно отобразить точку, линию, окружность (овал)?

6.    
Каким оператором можно
изменить цвет фона, цвет изображения?

7.    
Можно ли в программах
использовать штриховку?

III.          
Изучение нового
материала

Сегодня на уроке мы разберем еще несколько процедур
для построения изображений.

Пример 1.

Построить изображение

PROGRAM 
Primer_1;

     
uses Graph;

     
var  grDriver: Integer;

          
grMode  : Integer;

          
i,x,y   : Integer;

 
{ ———————————— }

  
PROCEDURE  Rect (x,y,x1,y1: Integer);

  
{ Рисует прямоугольник, у которого левый нижний угол }

  
{ имеет координаты (x,y), а правый верхний — (x1,y1) }

  
BEGIN

     
Line (x,y,x,y1);   { Левая сторона   }

     
Line (x1,y,x1,y1); { Правая сторона  }

     
Line (x,y1,x1,y1); { Верхняя сторона }

     
Line (x,y,x1,y)    { Нижняя сторона  }

  
END;

 
{ — }

  
BEGIN

     
GrDriver:=VGA; GrMode:=VGAHi;

     
InitGraph (grDriver,grMode,’..bgi’);

     
If  GraphResult=grOk

        
then  begin

                 
For i:=1 to 15  do

                    
begin

                       
x:=i*30; y:=i*25; SetColor (i);

                       
Rect (x,y,x+50,y+60)

                    
end;

                 
ReadLn

              
end

  
END.

Рисование
прямоугольников — часто встречающаяся проблема, и поэтому неудивительно, что
существует стандартная процедура, работающая так же, как и созданная нами ниже
процедура Rect. Она называется Rectangle.

Пример 2.

Усложним задачу, составить программу для построения
закрашенных прямоугольников.

Для
рисования «заполненных» прямоугольников используется процедура Bar.
Так же, как и для процедуры Rectangle, мы должны указать четыре числа —
координаты двух противоположных углов прямоугольника. (Для процедуры Bar цвет
задается не с помощью SetColor, а с помощью SetFillStyle!).

  
PROGRAM  Primer_8;

     
uses Graph;

     
const Step=35;

     
var   grDriver: Integer;

           
grMode  : Integer;

           
i,x,y   : Integer;

 
{ ——————————- }

  
PROCEDURE  Square (x,y: Integer);

  
{ Рисует цветастый квадрат, центр которого }

  
{ имеет координаты (x,y)                   }

      
var  i,d: Integer;

  
BEGIN

     
For i:=15 downto 0  do

        
begin

           
SetFillStyle (SolidFill,i); d:=i*3+2;

           
Bar (x-d,y-d,x+d,y+d)

        
end

  
END;

 
{ — }

  
BEGIN

     
GrDriver:=VGA; grMode:=VGAHi;

     
InitGraph (grDriver,grMode,’..bgi’);

     
If  GraphResult=grOk

        
then  begin

                 
For i:=0 to 10  do

                    
{ На «побочной» диагонали — 11 точек }

                    
begin

                       
x:=50+i*Step; y:=50+(10-i)*Step;

                       
SetColor(i); Square(x,y)

                    
end;

                 
ReadLn

              
end

  
END.

При
рисовании сложных изображений, содержащих много отрезков, возникает проблема —
вычислять координаты всех точек. Если использовать процедуру LineRel, то
достаточно указывать смещения по обеим координатам относительно текущей точки.
Для относительного перемещения без рисования используется процедура MoveRel Для
задания начальных значений координат текущей точки используется процедура
MoveTo

IV.           
Самостоятельная
работа

Задание

(средний уровень учебных достижений)

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

(достаточный уровень учебных достижений)

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

(высокий уровень)

Написать программу с процедурой вычерчивания
квадратной спирали

program tr; {Программа
вычерчивает в центре экрана треугольник красной линией}
  uses crt, graph;
var d, m: integer; pp:array[1..4] of PointType;
      xm,ym, xmaxD4, ymaxD4:word;
begin
  d:=detect;
  Initgraph(d,m,‘c:bp’);
xm:=GetmaxX;
  ym:=GetmaxY;
  xmaxD4:=xm div 4;
  ymaxD4:=ym div 4; {определение координат вершин}
  pp[1].x:= xmaxD4;
  pp[1].y:= ymaxD4;
  pp[2].x:= xm — xmaxD4;
  pp[2].y:= ymaxD4;
  pp[3].x:= xm div 2;
  pp[3].y:= ym — ymaxD4;
  pp[4]:=pp[1];
  SetColor(4); {цвет для вычерчивания}
  DrawPoly(4,pp); {4 – количество пересечений +1}
  readln;
  CloseGraph
end.

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

FillPoly(a:word,var PolyPoints);

Значения параметров те же, что и в процедуре DrawPоly.
Действие тоже аналогично, но фон внутри многоугольника закрашивается.

Изображение в левой верхней части экрана
четырехугольную звезду зеленого цвета:

program g;
  uses crt, graph;
  const Star:array[1..18] of integer = (75, 0, 100, 50, 150, 75, 100, 100,
75, 150, 50, 100, 0, 75, 50, 50, 75, 0);
  var d, m: integer;
begin
  d:=detect;
  initgraph(d, m,‘c:bp’);
  SetFillStyle(1,2);
  FillPoly(9,Star); {9 – количество пересечений + 1}
  CloseGraph;
end.

Квадратная
спираль.

  
PROGRAM  Primer_9;

     
uses Graph;

     
const CenterX=320;

           
CenterY=240;

           
d=12;

     
var   grDriver: Integer;

           
grMode  : Integer;

           
i,L     : Integer;

 
{ ——————————- }

  
PROCEDURE  Vitok (L,dL: Integer);

  
{ Начиная от текущей точки, рисует виток спирали          }

  
{ из четырех отрезков увеличивающейся длины               }

  
{ L — длина первого отрезка                               }

  
{ dL — приращение длины для каждого из следующих отрезков }

  
BEGIN

     
LineRel (L,0);           { Сдвинуться вправо }

     
LineRel (0,-(L+dL));     { Сдвинуться вверх  }

     
LineRel (-(L+2*dL),0);   { Сдвинуться влево  }

     
LineRel (0,L+3*dL);      { Сдвинуться вниз   }

  
END;

 
{ — }

  
BEGIN

     
grDriver:=VGA; grMode:=VGAHi;

     
InitGraph (grDriver,grMode,’..bgi’);

     
If  GraphResult=grOk

        
then  begin

                 
{ Сделать текущей точкой центр экрана }

                 
MoveTo (CenterX,CenterY);

 
                L:=1;   { Начальная длина отрезка }

                 
For i:=1 to 10  do  { 10 витков спирали }

                    
begin  Vitok (L,d); L:=L+4*d  end;

                 
ReadLn

              
end

  
END.

Домашнее задание:

(средний и достаточный уровень)

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

(высокий уровень)

Составить программу изображения маленького городка (использовать
штриховку).

Урок 3.

ТЕМА: Использование в
программах процедур и функций для построения простейших графических
изображений.

Цели: Продолжить изучение графических операторов,
научить строить графики функций.

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

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

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

учить составлять программы самостоятельно;

развивать умения и навыки составления программ на построение
графических изображений;

воспитывать аккуратность в работе.

ПРОГРАММНАЯ ПОДДЕРЖКА язык программирования Паскаль (версия 7.0)

ОБОРУДОВАНИЕ: компьютерная презентация

Тип урока: изучения и закрепление материала

Ход урока

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

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

 Проверку
домашнего задания проведем в форме ответа на тест.

1.  Что будет изображено на
экране в результате выполнения команды ARC(140,180,0,180,90)

a.     
верхняя полуокружность.

b.    
нижняя полуокружность.

c.     
окружность.*

2. Укажите правильную форму записи
процедуры изображения линии

a.     
LINE(X1,Y1)-(X2 Y2).

b.    
LINETO(X1,Y1,X2,Y2).

c.     
LINE(X1,Y1,X2,Y2).*

3.  Процедура  FLOODFILL(X,Y,С)
позволяет…

a.     
установить стиль
штриховки.

b.    
установить цвет
изображения.

c.     
заштриховать замкнутую
область.*

4.  В какую точку будет переведен
указатель после выполнения команд: MOVETO(20,50);MOVEREL(140,50)

a.     
 (160,50).

b.    
(140,50).

c.     
(160,100).*

5.  Укажите процедуру изображения
окружности

a.     
RECTANGLE(x1,y1,x2,y2).

b.    
CIRCLE(X,Y,R). *

c.     
ARC(X,Y,f1,f2,R).

6.  Что
будет изображено на экране в результате выполнения команд:  MOVETO(80,50); LINEREL(60,0);
LINEREL(0,40); LINEREL(-60,0);  LINEREL(0,-40);

a.     
прямоугольник. *

b.    
ломанная.

c.     
трапеция.

7.  Какая процедура позволяет
инициировать графический режим работы?

a.     
CLEARDEVICE  .

b.    
INITGRAPH . *

c.     
CLOSEGRAPH.

8.  Какая процедура позволяет
установить стиль линии?

a.     
SETFILLSTYLE.

b.    
SETLINESTYLE. *

c.     
SETCOLOR.

9.  Укажите правильную форму записи
процедуры изображения точки

a.     
PUTPIXEL(X,Y,С).

b.    
PUTPIXEL(X,Y).

c.     
PIXEL(X,Y,С).*

10.  Процедура SETBKCOLOR(с)
позволяет…

a.     
установить цвет
изображения.

b.    
установить цвет фона. *

c.     
закрасить фигуру.

III.          
Изучение нового
материала

Мини-лекция

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

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

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

Рисунок получается маленьким, поэтому требуется
увеличить масштаб изображения. Если для функции будет использован весь экран,
надо увеличить рисунок по x и по y в зависимости от
выбранного экрана.

Выбрать масштаб увеличения можно следующим образом:

— определить горизонтальный и вертикальный размеры графика (для этого
вводятся границы области значений и определяются максимальное и минимальное
значение функции на заданной области определения, затем вычисляются разности
максимального и минимального значений аргументов и функции, которые и являются
горизонтальным и вертикальным размерами графика соответственно);

— определить масштаб (сначала определяются масштабы изображения по
горизонтали и вертикали с учетом размеров выбранного экрана по формуле:

масштаб(г/в) = размер экрана (по г/в) / размер графика (по г/в)

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

Пример.  Построить график функции y=x²

Вариант 1

 program f;
   uses graph;
   var d, m: integer;
       x,y: real;
begin
   d:=detect;
   initgraph(d, m, ‘c: bp’);
   SetColor(5);
   Line(0, 240, 640, 240);
   Line(320, 0, 320, 480);
   x:=-20;
   While x<=20 do
     begin
         y:=-Sqr(x);
         PutPixel(x*5 + 320, y*5 +240,
15);
         x:=x+ 0.01;
         end;
end.

Вариант 2
program f;
  uses graph, crt;
  var d, m: integer;
         x, y, mx, my, m,x1, x2, y1,
y2,h: real;

function
f(x:real): real;
   begin
      f:= Sqr(x);
   end;
   clrscr; Write(‘Введите границы отрезка’);
   Read(x1, x2);
   y1:=f(x1);
   y2:=f(x2);
   mx:=640/(x2 –x1);
   my:=480/ (y2 – y1); If mx< my Then m:=mx
   else m:= my;
   h:=1/m; x:=x1;
   d:=detect;
   initgraph(d, m, ‘c:/ bp’);
   SetColor(5);
   Line(0, 240, 640, 240);
   Line(320, 0, 320, 480);
   While x<= x2 do
begin
   y:=-f(x);
   PutPixel(x*m +320, y*m +240, 15);
   x:=x+ h;
end;
end.

Рассмотрим построение графика функции, заданной
параметрически. В отличие от функции, заданной в явном виде y=f(x),
параметр х в этом случае также является функцией, зависящей от
некоторого значения.

Пример (самостоятельное выполнение)

Построить график функции (кардиоида) x = a cos t ( 1+ cos t),

Подсказка —  фрагмент
программы:
SetColor(5);
Line(0, 240, 640, 240);
Line(320, 0, 320, 480);
t:=0;
a:=3;
While t<= 3.1415 do
begin
x:=a*cos(t)*(1+cos(t));
y:=- a*sin(t)*(1+cos(t));
PutPixel(x*5+320, y*5 +240, 15);
t:=t+ 0.01;
end;

Урок 4.

ТЕМА: Практическая работа «Создание программ для построения графических
изображений»

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

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

Тип урока: Практическая работа.

Ход урока.

И. Организация класса.

(Приветствие, вступительное слово учителя).

ІІ. Актуализация опорных знаний, умений,
навыков учеников.

·       
Какой вид «координатной
сетки» экрана монитора?

·       
Как перейти к графическому
режиму работы монитора?

·       
Какие процедуры и функции
используются для построения изображения линий и фигур?

ІІІ. Объявление
темы, цели, задач урока.

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

(Выполнить
практическую работу согласно указаниям, одно задача по 3 балла.)

1.     Построить треугольник с
вершинами в точках (100,100), (150,100), (80,70). Цвет фона серый, цвет линий —
красный.

2.     Построить прямоугольник с
вершинами в точках (80,80), (170,80), (170,150), (80,150). Зарисовать его
желтым цветом, цвет фона — синий.

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

4.     Построить и зарисовать
зеленым цветом круг радиусом 100, центр которого совпадает с центром экрану
дисплея. Цвет фона — малиновый.

V. Подведение
результатов выполнения практической работы. Пересылка файлов на компьютер
учителя.

VІ. Сообщение
домашнего задания.

(Выполнить и
записать на дискету графическое изображение на свободную тему)

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

“Графика в 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:bpbgi’);

     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:bpbgi’);
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:bpbgi’);

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. Построение сечений в пространственных геометрических фигурах.

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

Пример 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:bpbgi’);

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:bpbgi’);

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:bpbgi’);

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:bpbgi’);

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. Рисунки, построенные с использованием датчика случайных чисел.

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

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

uses graph;

var  i,dr,mode,x,y:integer;

begin

dr:=detect;

initgraph(dr,mode,’c:bpbgi’);

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:bpbgi’);

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:bpbgi’);

      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:bpbgi’);

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:bpbgi’);
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:BPBGI’);

   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:bpbgi’);
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:bpbgi’);

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

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

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

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

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

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

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

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

Построение графика можно выполнять либо точечным методом, либо кусочно-линейным. При первом способе график строится как последовательность точек, расположенных максимально близко. Происходит  “попиксельный” перебор значений аргумента с выставлением точек с соответствующими 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 .

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

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

1. Выбирается шаг 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:bpbgi’);
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:BpBgi’);

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:bpbgi’);

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:bpbgi’);

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:bpbgi’);

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:bpbgi’);
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:bpbgi’);

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:bpbgi’);

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 с.

красный

черный

синий

зеленый

желтый

---

Тип урока: комбинированный урок

Цели урока:

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

Оборудование: интерактивная доска,
проектор, карточки-задания, презентация

План урока:

1. Организационный момент – 3 мин.
2. Актуализация ЗУНов – 7 мин.
3. Подготовка к изучению нового материала – 3 мин.
4. Объяснение нового материала – 12 мин.
5. Практическая работа (закрепление изученного
   материала) – 15 мин.
6. Подведение итогов урока – 4 мин.
7. Домашнее задание – 1 мин.

ХОД УРОКА

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

Приветствие ребят! Проверка присутствующих и
готовность их к уроку!

II. Актуализация ЗУНов

Работа по карточкам

I вариант:

1) Переведите выражение из обычной записи в
линейную:

2) Переведите выражение из линейной записи в
обычную математическую:

COS(X)/(2*SIN(X)+1)^1/5

3) Напишите программу нахождения значения
выражения на языке программирования Pascal ABC:

II вариант:

1) Переведите выражение из обычной записи в
линейную:

 

2) Переведите выражение из линейной записи в
обычную математическую:

SQR(TAN(A+B))/SQR(TAN(A–B))

3) Напишите программу нахождения значения
выражения на языке программирования Pascal ABC:

III вариант:

1) Переведите выражение из обычной записи в
линейную:

2) Переведите выражение из линейной записи в
обычную математическую:

10*SIN((A+B)/2)*COS((A–B)/2)

3) Напишите программу нахождения значения
выражения на языке программирования Pascal ABC:

III. Подготовка к изучению нового материала

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

Вопросы:

1. Команда начала программы Pascal
2. Оператор вывода информации на экран
3. Оператор ввода информации на экран
4. Команда, рисующая эллипс на экране
5. Команда, устанавливающая цвет кисти
6. Команда, рисующая отрезок на экране
7. Команда, рисующая на экране прямоугольник
8. Команда, рисующая на экране дугу окружности

Ключевое слово GRAPHICA.

Тема нашего урока: «Графические возможности
языка программирования Pascal ABC»

IV. Объяснение нового материала

Компьютерная графика в Паскале – область
информатики, изучающая методы и свойства
обработки изображений с помощью
программно-аппаратных средств.
Представление данных на компьютере в
графическом виде впервые было реализовано в
середине 50-х годов. Сначала, графика применялась
в научно-военных целях.
Построение графических изображений в Паскале,
исследование графиков функций, одной из важных и
интересных тем программирования.
Обычно экран компьютера находится в символьном
режиме, а для переключения экрана в
графический режим необходимо подключение модуля
graphABC. В результате этого, экран очищается и
переходит в цветной графический режим.
При работе в графическом режиме изображение на
экране строится из точек (пиксель). Каждый
пиксель на экране имеет координаты (X,Y), которые
образуются номерами столбцов (Х) и строк (Y).
Нумерация начинается в верхнем левом углу.
Именно в этом углу расположен пиксель с
координатами (0,0). Координата Х растет вправо,
координата Y – вниз.

Любая графическая картинка формируется
из простых геометрических фигур. Это точки,
отрезки  (линии), прямоугольники, окружности и
т.д. Графические координаты принимают только
целочисленные значения.
Рисование различных геометрических фигур
осуществляется с помощью специальных
стандартных команд (процедур). Команды для работы
в графическом режиме хранятся в библиотечном
модуле GraphAbc, который описывается в разделе
описаний с помощью зарезервированного слова Uses.
В модуле GraphAbc с помощью команды setwindowsize(X,Y) можно
задавать  размеры графического окна.
По умолчанию графическое окно будет принимать
размеры экрана компьютера.

 Стандартные цвета с задаются
символическими константами:

Процедура Line(x1,y1,x2,y2) вычерчивает
прямую линию из точки (х1,y1) в точку (x2,y2) цветом
установленным процедурой SetPenColor(c).
Процедура Rectangle(x1,y1,x2,y2) рисует
прямоугольник, где (х1,y1) координаты верхней левой
точки, а (х2,y2) – правой нижней.
Процедура FillRect(x1,y1,x2,y2: integer) – заливает
прямоугольник, заданный координатами
противоположных вершин (x1,y1) и (x2,y2), цветом
текущей кисти.
Процедура Сircle(x,y,r) рисует окружность с
центром в точке (х,y) и радиусом r.
Закрасить замкнутую фигуру можно с помощью
процедуры FloodFill(х,у,c), (х,у) – координата
точки внутренней области фигуры, c – цвет
заливки.
Процедура СlearWindow(color) устанавливает
цвет графического окна. Закрасить прямоугольник
и круг можно, используя команду закраски кистью
SetBrushColor (color).

Процедуры для ввода текста:

TextOut(x,y: integer; s: string) – выводит строку s в
позицию (x,y) (точка (x,y) задает верхний левый угол
прямоугольника, который будет содержать текст из
строки s);
SetFontSize(size: integer) – устанавливает размер
текущего шрифта в пикселях;
SetFontColor(c: Color) – устанавливает цвет
текущего шрифта;
SetFontStyle(fs: integer) – устанавливает стиль
текущего шрифта.

А теперь попробуем нарисовать домик
вместе.

Пример программы рисования домика:

(преподаватель демонстрирует и
объясняет, а обучающиеся повторяют каждую
строчку)

Измените размер домика и поменяйте цвета
самостоятельно.

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

Напишите программу, рисующую снеговика и
закрасьте его.

Какие процедуры вам для этого понадобятся?

Пример программы, рисующую снеговика.

Program snegovik; uses graphABC; begin FloodFill(50, 80, clYellow); ellipse(120, 350, 280, 480); circle(200, 300, 60); circle(200, 210, 40); line(170, 120, 230, 120);   line(160, 180, 240, 180); line(170, 120, 160, 180); line(230, 120, 240, 180); floodfill(200, 173, clblack); floodfill(200, 123, clblack); setbrushcolor(clblack); circle(190, 200, 5); circle(210, 200, 5); line(200, 210, 220, 220); line(200, 220, 220, 220); line(200, 210, 200, 220); floodfill(204, 214, clblack); setpenwidth(5); line(210, 230, 190, 230); line(70, 320, 170, 250); line(230, 250, 330, 300); line(327, 450, 327, 200); circle(200, 265, 10); circle(200, 300, 10); circle(200, 338, 10); circle(200, 390, 10); circle(200, 428, 10); circle(200, 460, 10); end.

VI. Подведение итогов урока

• Как переключить программу Pascal ABC из символьного
  режима в графический?
• С помощью каких процедур можно получить
  высвечивание  точки на экране, рисования
  линий, прямоугольников, окружностей?
• Какая процедура позволяет закрашивать фигуры?
• Какие цвета вы использовали? (Назовите на
  английском языке)

Выставление отметок.

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

Написать в тетради программу, рисующую
новогоднюю ёлку.

   

   В PascalABC для работы с графикой используется библиотека GraphABC. Для подключения этой библиотеки в программе записывается команда uses GraphABC
      Положение фигур задается координатами  в графическом окне. Началом координат является верхний левый угол графического окна — точка (0;0). Координаты задают порядковый номер пикселя по горизонтали и вертикали, , поэтому они могут быть только целыми числами. Отсчет значений координаты х происходит слева направо, а координаты у — сверху вниз. По умолчанию создается графическое окно размером 640 х 480 пикселей.

Pie(x,y,r,a1,a2)	Рисует заполненный сектор круга с центром в точке (х,у) и радиусом r , заключенный между двумя лучами, образующими углы а1 и а2 с осью ОХ
Random	Возвращает случайное вещественное число в диапазоне [0..1]
Random (a)	Возвращает случайное целое число в диапазоне от 0 до а-1
Random(a,b)	Возвращает случайное целое число в диапазоне от а до b
clRandom	Позволяет задать случайный цвет

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