Тема уроку: "Робота з діловою графікою засобами мови Паскаль"

Мета уроку: показати можливості роботи з діловою графікою засобами мови Паскаль на прикладах розв'язання задач.
Тип уроку: Практичний.

На цьому уроці пропонується показати можливості мови Паскаль при побудові графіків функцій та різного виду діаграм.

Задача № 614.
Умова: Зобразити на екрані монітора декартову систему координат, початок якої збігається з центром екрана.
Для малювання осей x та y необхідно скористатися процедурою line, причому координати початку та кінця цих прямих обчислити неважко, тому що вони повинні розміщуватись в центрі екрану. Градуювання осей робиться теж за допомогою коротких відрізків довжиною 8 пікселів, що розташовані з кроком step пікселів (крок в програмі заданий у вигляді константи, хоча можна його задавати і іншим чином). Підписи на осях можна зробити таким чином: число, що треба написати, переводиться в рядок процедурою str, а потім виводиться на екран процедурою OutTextXy. Зверніть увагу на те, що на від'ємному проміжку вісі до числа ліворуч дописується знак "-" командою S := '-'+S, де S - рядок, що містить підпис під поділкою. Для якісного оформлення малюнку використовується процедура settextjustify(1,1), що забезпечує відцентроване виведення тексту у вказану позицію.
Програма, що реалізує запропонований алгоритм, має наступний вигляд:

Program Example_614; 
Uses graph;        {Підключення бібліотек} 
Const 
   Step=25;        {Крок між поділками на осях} 
Var GraphDriver,GraphMode:integer;  
    x,y:integer;   {x,y – координати центру  
                    декартової системи координат} 
    r:integer;     {r – відстань від центру  
                    координат до чергової поділки} 
    S:string;      {Рядок, в якому зберігається  
                    символьне значення підпису для  
                    поділки} 
Begin 
  Randomize; 
  GraphDriver:=VGA;  {Ініціалізація графічного  
                      режиму} 
  GraphMode:=VGAHi; 
  InitGraph(GraphDriver,GraphMode,’’); 
  {Малювання осей}   
  line(0,240,640,240);    
  line(320,0,320,480); 
  {Малювання стрілочок на кінцях осей} 
  line(630,235,640,240);   
  line(630,245,640,240); 
  line(315,10,320,0); 
  line(325,10,320,0); 
  {Підписи на осях} 
  outtextxy(330,5,'Y'); 
  outtextxy(630,220,'X'); 
  x:=320; 
  y:=240; 
  r:=0; 
  {Малювання та підпис поділок на вісі X} 
  while x+r<640 do 
  begin 
    line(x+r,y-4,x+r,y+4); 
    line(x-r,y-4,x-r,y+4); 
    r:=r+step; 
    str(r div step, S); 
    settextjustify (1,1); 
    outtextxy(x+r,y+10,S); 
    s:='-'+S; 
    outtextxy(x-r,y+10,S); 
  end; 
  r:=0; 
  {Малювання та підпис поділок на вісі Y} 
  while y+r<480 do 
  begin 
    line(x+4,y+r,x-4,y+r); 
    line(x+4,y-r,x-4,y-r); 
    r:=r+step; 
    str(r div step, S); 
    settextjustify (1,1); 
    outtextxy(x-10,y-r,S); 
    s:='-'+S; 
    outtextxy(x-10,y+r,S); 
    end; 
  Readkey;	 {Затримка зображення на екрані} 
  Closegraph;   {Закриття графічного режиму} 
End. 

Задача № 616.
Умова: Стовпчаста діаграма - це послідовно зображені прямокутники однакової ширини, що розташовані на одному горизонтальному рівні. Висота прямокутників пропорційна значенням деякої числової послідовності.
Побудувати стовпчасту діаграму за даними n цілими значеннями. Для наочності стовпчики зафарбувати різними кольорами.
Для побудови діаграми, по-перше, необхідно задати кількість стовпчиків, тобто кількість числових значень, по яких буде будуватися діаграма, а, по-друге, - самі значення. В даному алгоритмі всі ці величини вводяться з клавіатури, хоча можна передбачити і інші методи, наприклад, заповнення генератором випадкових чисел.
Після введення числових даних необхідно розрахувати коефіцієнти пропорційності по осях Х та Y, щоб отримати малюнок на весь екран. Врахуємо, що максимальний розмір по осі Х - 640 пікселів, а по осі Y - 480 пікселів. Тоді очевидно, що коефіцієнт по осі Х можна обчислити за формулою SizeX = 640/N - 5, де SizeX - коефіцієнт пропорційності, N - кількість стовпчиків на діаграмі. Константне значення 5 від дробу віднімається, щоб розділити стовпчики між собою хоча б на 5 пікселів (це значення можна змінити).
По осі Y знайти коефіцієнт пропорційності важче, тому що для цього необхідно спочатку визначити максимальне значення, що використовується для побудови діаграми. Для знаходження максимуму використовуємо стандартний алгоритм. Тут можна запропонувати дітям згадати цей алгоритм самостійно.
Прогнозована відповідь: беремо у якості еталону будь-який елемент масиву, наприклад, перший, а потім порівнюємо кожний наступний елемент з еталоном і у випадку невідповідності (черговий елемент більший за еталон) замінюємо еталон.
Після знаходження максимуму знаходимо коефіцієнт пропорційності по осі Y за очевидною формулою SizeY = 480/Max, де SizeY - шуканий коефіцієнт, Max - максимальне значення з масиву.
Обидва шукані коефіцієнти пропорційності округлюємо функцією round, тому що екранні координати не можуть бути дробовими, а після цього нормалізуємо значення масиву множенням на коефіцієнт SizeY.
Після підготовки даних можна починати побудову діаграми. Кожен елемент діаграми будується процедурою Bar, що малює зафарбований прямокутник, колір якого задається процедурою SetFillStyle. Очевидно, що ширина кожного стовпчика буде дорівнювати SizeX - 5, тому початкова координата по осі Х дорівнює (i - 1)*SizeX, а кінцева - i*SizeX - 5, де і - змінна циклу, що рахує номер чергового стовпчика. Початкова координата по осі Y буде максимальною, тобто 480, а кінцева координата дорівнювати різниці між 480 та елементом масиву.
Програма, що реалізує запропонований алгоритм, має наступний вигляд:

Program Example_616; 
Uses graph;          {Підключення графічної  
                      бібліотеки} 
Var GraphDriver,GraphMode:integer; 
    N,i,Max :integer; 
    A:array [1..100] of integer;  {Масив значень  
                                   для побудови  
                                   діаграми} 
         SizeX, SizeY : integer;  {Коефіцієнти  
                                пропорційності по  
                                відповідних осях}  
Begin 
  ClrScr; 
  Write (‘Введіть кількість стовпчиків у діаграмі: ');  
  ReadLn (N); 
        {Введення значень для побудови діаграми} 
  for i:=1 to N do 
      begin 
        Write ('Введіть A[',i,']: '); 
        ReadLn (A[i]); 
      end; 
  Randomize; 
  GraphDriver:=VGA;  {Ініціалізація графічного  
                      режиму} 
  GraphMode:=VGAHi; 
  InitGraph(GraphDriver,GraphMode,’’);     
  SizeX:=round(640/N-5); 
     {Пошук максимального значення в масиві для  
      побудови діаграми на весь екран} 
  Max:=A[1]; 
  for i:=2 to N do  
      if A[i]>Max then Max:=A[i]; 
  SizeY:=round(480/Max); 
     {Перетворення масиву значень у відповідності з  
      коефіцієнтом пропорційності} 
  for i:=1 to N do  
      A[i]:=A[i]*SizeY; 
  Randomize; 
  for i:=1 to N do 
      begin 
        {Встановлення випадковим чином кольору  
         зафарбування стовпчиків діаграми} 
        SetFillStyle (1,random(14)+1); 
        Bar ((i-1)*SizeX,480,i*SizeX-5,480-A[i]); 
      end; 
  Readkey;       {Затримка зображення на екрані} 
  CloseGraph;    {Закриття графічного режиму} 
end. 

Задача № 618.
Умова: Секторною діаграмою називають круг, площі секторів якого пропорційні відповідним числовим величинам, узятим з деякої послідовності.
Для заданої послідовності з n дійсних чисел побудувати секторну діаграму. Для наочності сектори діаграми зафарбувати різними кольорами.
Кількість елементів діаграми в цій задачі вводиться так само, як і в попередньому випадку, тобто з клавіатури, а заповнення масиву даними зробимо генератором випадкових чисел.
Далі, як і в попередній задачі, необхідно промасштабувати початкові значення для виведення їх на екран у вигляді кругової діаграми. Для цього спочатку знаходимо суму всіх елементів масиву, а потім масштабуємо їх за формулою
Ai = Ai*360/Sum, де Sum - загальна сума елементів масиву, 360 - кількість градусів у повному колі.
Сама діаграма будується за допомогою процедури PieSlice, що виводить на екран зафарбований сектор круга. Колір зафарбування задається процедурою SetFillStyle, а початковий та кінцевий кути сектора обчислюються від поточного кута Angle з урахуванням значення елементу масиву. Центр кола, на якому будується кругова діаграма, завжди константний (320; 240).
Програма, що реалізує описаний алгоритм, має наступний вигляд:

Program Example_618; 
Uses graph;            {Підключення бібліотек} 
Var GraphDriver,GraphMode:integer;  
    N, i : integer; 
    Sum,Angle : real; 
    A : array [1..100] of real; 
    S : string; 
Begin 
  ClrScr; 
  Write (‘Введіть кількість стовпчиків у діаграмі: ');  
  ReadLn (N); 
        {Введення значень для побудови діаграми} 
  for i:=1 to N do 
      begin 
        A[i]:=random*200; 
      end; 
  Randomize; 
  GraphDriver:=VGA;  {Ініціалізація графічного  
                      режиму} 
  GraphMode:=VGAHi; 
  InitGraph(GraphDriver,GraphMode,’’);     
  Sum:=0; 
  for i:=1 to N do  
      Sum:=Sum+A[i]; 
  for i:=1 to N do  
      A[i]:=A[i]*360/Sum; 
  Angle:=0; 
  for i:=1 to N do 
      begin 
        SetFillStyle (1,Random(14)+1); 
        PieSlice (320,240,round (Angle), 
                  round (Angle+A[i]),230); 
        {Виведення на діаграмі числових значень} 
        Str (A[i]*Sum/360:0:0,S); 
        OutTextXY(round(320+120*cos((2*Angle+A[i]))*Pi/360), 
                        round(240-120*sin((2*Angle+A[i])*Pi/360)),S); 
        Angle:=Angle+A[i]; 
      end; 
  Readkey;      {Затримка зображення на екрані} 
  CloseGraph;   {Закриття графічного режиму} 
end. 

Домашнє завдання: