Тема: побудова графіка функції у середовищі Lasаrus.

Мета уроку: після виконання роботи учень повинен:

• пояснювати:
  • призначення й можливості середовища Lazarus;
  • призначення основних пунктів меню середовища Lazarus;
  • призначення панелей інструментів середовища Lazarus;
• уміти:
  • створювати процедури для відображення координатної площини;
  • створювати процедури для відображення точок і відрізків на площині;
  • додавати можливості змінювати параметри і масштабувати графік.

Обладнання: комп’ютери зі встановленими ОС та інтегрованим середовищем програмування Lazarus.

Структура уроку

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Вивчення нового матеріалу.
4. Інструктаж з ТБ.
5. Закріплення вивченого матеріалу.
6. Підбиття підсумків уроку.
7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань
Назвати елементи вікна середовища програмування Lazarus і порівняти з очікуваними відповідями.

Завантаження середовища програмування Lazarus призводить до появи на екрані монітора кількох вікон.

Головне вікно
Верхню частину головного вікна поділяють на три функціональних блоки (див. малюнок знизу):

• Головне меню (під рядком назви програмного вікна кнопки: Файл, Правка, Пошук і т.і.) для вказівок керування файлами, компіляцією, властивостями проекту, вікнами та вказівок налаштування середовища;

• Панель інструментів (під рядком меню ліворуч), що надає швидкий доступ до основних вказівок головного меню;

• Панель компонентів (під рядком меню праворуч закладки: Standard, Additional, Common Controls і т.і.), що надає доступ до основних об'єктів середовища програмування (поля введення, кнопок, напису, меню тощо).

Інспектор об'єктів
У верхній частині вікна показано ієрархічну структуру об'єктів, а внизу розташовано вкладки: Властивості, Події, Улюблені.

Редактор тексту
Саме в цьому вікні ми будемо вводити й редагувати текст програми.

Усі можливі операції над текстом перелічено у пунктах головного меню Правка

і Пошук.

Вікно повідомлень
Вікно призначене для повідомлень щодо компілювання, компонування й налаштування проекту.

3. Вивчення нового матеріалу

Об'єкти середовища Lazarus для створення зображень:

• форма Form;
• Image з вкладення Additional;
• PaintBox з вкладення Additional.

При малюванні на компонентах Form і PaintBox потрібно враховувати те, що зображення зникає при зміні розташування вікна, згортання і розгортанні програми, при зміні розмірів вікна тощо. Для збереження зображення на цих компонентах потрібно створити подію onPaint, для в якої прописати всі вказівки відновлення зображення. Компонент Image. не вимагає перемальовування, а зображення на ньому зберігається протягом усього часу роботи з програмою. У зв'язку з цим використаємо лише цю компоненту.

Всі три перелічені вище компоненти: Form, Image, PaintBox мають спадкоємця — об'єкт Canvas (англійською — полотно для малювання).

Наступним кроком при малюванні є налаштування пера (олівця) для малювання, наприклад, таким чином:

with Image1.canvas.pen do
begin
  width:= 2;       // Товщина у пікселях
  color:= clBlack; // Колір
end;

Колір полотна задають значенням властивості canvas.brush.color. Подамо приклади процедур для малювання на полотні:

with image1.canvas do
begin
  MoveTo(10,10);            // Перемістити перо в точку (10; 10)
  LineTo(100,100);          // Намалювати лінію з поточної точки до точки (100; 100)
  Rectangle(10,10,100,100); // Намалювати прямокутник з протилежними вершинами у точках (10; 10), (100; 100)
  Ellipse(10,10,100,100);   // Намалювати еліпс, вписаний у прямокутник протилежними вершинами у точках (10; 10), (100; 100)
end;

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

Властивість Pixels — масив всіх точок полотна — також часто використовують для малювання. Пікселі можна записувати на полотно з певним кольором. Наприклад, оператор:

Image1.Canvas.Pixels [x,y]:= clRed;

робить червоним піксель з координатами x, y. Зчитування з полотна колір пікселя можна здійснити, наприклад, таким чином:

variable:=Image1.canvas.pixels[x,y];

де x, y — координати пікселя, variable — змінна типу LongInt.

На уроці ми зосередимося лише на побудові зображення неперервної кривої — графіка деякої функції (лінійної, квадратичної і раціональної) — у вигляді ламаної. Зазвичай на графіку ще присутні горизонтальні й вертикальні лінії сітки з підписами і, можливо, осі координат. Таке дооформлення графіка буде запропоновано як домашнє завдання. Вище вже описано, як малювати відрізки прямих. Подамо приклад налаштування шрифту (font) для виведення тексту на полотні (canvas) об'єкту Image1:

with Image1.canvas.font do
begin
  color:= clNavy;     // Колір
  style:= [];         // Стиль
  name:= 'Arial Cyr'; // Назва гарнітури
  size:= 14;          // Розмір
end;

У поданій вище частині процедури налаштування шрифту:

• стиль (style) — це масив стилів, який може мати такі значення:
  
  [ ] — звичайний прямий;
  [FsBold] — жирний;
  [FsItalic] — курсив;
  [FsStrikeOut] — перекреслений;
  [FsUnderLine] — підкреслений
  
  або перелік через кому у квадратних дужках записаних вище слів. Наприклад, [FsBold,FsItalic] — жирний курсив;

• назва гарнітури (name) одна з тих, які містить операційна система (Times New Roman, Ms Sans Serif, Courier New тощо).

• розмір шрифту (size) може набувати значень від 1 до 32768.

Для виведення рядка тексту з попередньо налаштованим шрифтом використовують процедуру:

TextOut(x,y,'Рядок тексту');

Координати x і y визначають початок першого символу напису на полотні у пікселях. Цю процедуру потрібно застосувати до певного полотна, бо їх у програмі може бути багато. Наприклад, так:

Image25.canvas.textout (10,20,'Рядок тексту');

4. Інструктаж з ТБ
5. Закріплення вивченого матеріалу

Завдання. Створити програму «Побудова графіків функцій».

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

• або використати вказівку маню Файл / Зберегти всі;
• або натиснути клавіші Ctrl + Shift + S;
• або натиснути кнопку Зберегти всі на панелі інструментів.

Вказівки до виконання

1. Створити новий проект. Використати вказівку меню Проект / Новий проект..., у вікні діалогу вибрати Застосунок і натиснути кнопку OK.

   

2. Додати на платформу компонент панель зі вкладення Standard

   

   і надати властивості Align створеної панелі значення alBottom

   

   для того, щоб розташувати панель внизу вікна.

   

3. Додати на платформу компонент Image з вкадення Additional

   

   і надати властивості Align значення alClient.

   
   
   

4. Надати властивості форми BorderStyle значення bsSingle,

   

   а властивості Caption значення «Побудова графіків функцій».

   

5. Отримати таке розташування об'єктів внизу форми:

     [Edit1][Edit2][Edit3][Edit4][Edit5][Edit6][Edit7] [Очистити] [Побудувати]
        n      t0     t1     x0     x1     y0     y1

   

   • встановити на панель написи Label1, Label2, Label3, Label4, Label5, Label6, Label7 (компонент з вкладення Standard)

     

     і надати властивості Caption відповідні значення n, t0, t1, x0, x1, y0, y1;

     

   • встановити на панель текстові поля Edit1, Edit2, Edit3, Edit4, Edit5, Edit6, Edit7 (компонент з вкладення Standard), призначені введення вхідних даних n, t0, t1, x0, x1, y0, y1, зміст яких описано у коментарях коду програми (див. далі). Для всіх надати властивості Text порожнє значення;

     

   • встановити на панель кнопки Button1, Button2 (компонент з вкладення Standard), призначені для того, щоб відповідно очистити лист перед виведенням графіку чи вивести на лист графіки.

     

     Властивості caption кнопки Button1 надати назву «Очистити»,

     

     а для кнопки Button2 — «Будувати».

     

6. Створити подію onCreate для форми: внести з допомогою Редактора текстів у код програми

   

   таке:

   procedure TForm1.FormCreate(Sender: TObject);
   begin   // Надати значення як усталено
     edit1.text:= '';
     edit2.text:= '';
     edit3.text:= '';
     edit4.text:= '';
     edit5.text:= '';
     edit6.text:= '';
     edit7.text:= '';
   end;

7. Створити подію onClick для натискання кнопки Очистити: внести з допомогою Редактора текстів у код програми

   

   таке:

   procedure TForm1.Button1Click(Sender: TObject);
   var r: TRect;                      // Оголосити змінну r типу прямокутник
   begin
     r:= rect(0, 0, image1.width, image1.height); // Надати r розміру Image1
     with Image1.canvas do
     begin
       brush.style:= bsSolid; // Надати пензлю тип заповнення "суцільний"
       brush.color:= clWhite; // Зробити колір пензля білим
       fillrect(r);           // Заповнити об'єкт r кольором пензля
       pen.color:= clRed;     // Зробити колір олівця червоним
       rectangle(2, 2, image1.width-2, image1.height-2); // Намалювати рамку по периметру
       moveto(2,image1.Height div 2);                    // Намалювати вісь абсцис Х
       lineto(image1.width-2, Image1.Height div 2);
     end;
   end;

8. Cтворити код обчислення абсциси й ординати графіка: внести з допомогою Редактора текстів у код програми

   

   таке:

   function fx(t: real): real;
   begin
     fx:=t
   end;
   function fy(t: real): real;
   begin
     fy:=1/t
   end;

   Поданий вище код передбачає обернено-пропорційну залежність між абсцисою та ординатою: xy = 1. Водночас така структура програми передбачає і можливість параметричного задання кривої. Інакше кажучи, подання абсциси й ординати значеннями функцій деякого параметра t. Таким чином можна задати криві, що не є графіками функцій. Наприклад, фігури Ліссажу.

9. Cтворити подію побудови графіка функції після натискання кнопки Button2 (Будувати): внести з допомогою Редактора текстів у код програми

   

   таке:

   procedure TForm1.Button2Click(Sender: TObject);
   var      // приріст, наймене й найбільше значення
   dt, t0, t1,  // параметра (аргумента)
   dx, x0, x1,  // абсциси на графіку
   dy, y0, y1,  // ординати на графіку
   
            // поточні значення:
   t,       // параметра (аргумента)
   x,       // абсциси
   y:real; // ординати
   
   n,         // кількість точок ламаної
   j: integer;// лічильник вершини ламаної
   begin
     // Прочитати значення n, t0, t1, x0, x1, y0, y1
      n:= StrToInt  (Edit1.text);
     t0:= StrToFloat(Edit2.text);
     t1:= StrToFloat(Edit3.text);
     x0:= StrToFloat(Edit4.text);
     x1:= StrToFloat(Edit5.text);
     y0:= StrToFloat(Edit6.text);
     y1:= StrToFloat(Edit7.text);
   
     dx:=x1-x0;
     dy:=y1-y0;
     dt:=(t1-t0)/n;
     Image1.Canvas.MoveTo(round(Image1.Width *(fx(t0)-x0)/dx),
            round(Image1.Height*(y1-fy(t0))/dy));
     for j:=1 to n do
     begin
       t:=t0+j*dt;
       Image1.Canvas.lineto(round(Image1.Width *(fx(t)-x0)/dx),
              round(Image1.Height*(y1-fy(t))/dy))
     end;
   
   end; 

   Зверніть увагу на відмінність у виразах, у які входять:

   • fx, від якого віднімають найменше значення абсциси;
   • fy, яке віднімають від найбільшого значення ординати.

   Причина відмінності така: звичні напрямки зростання абсциси й екранної координати по горизонталі збігаються (зліва направо), а напрямки зростання ординати й екранної координати по вертикалі — відповідно знизу догори і згори донизу — протилежні.

10. Протестувати проект: відкомпілювати й запустити його на виконання, натиснувши клавішу F9. Ввести такі значення:

     n:=100;
    t0:=0,01;
    t1:=5;
    x0:=0;
    x1:=5;
    y0:=0;
    y1:=5;

    

    Натиснути клавіші Очистити й Побудувати й отримати такий графік.

    

    Змінити початкове значення параметра:
    
    t0:=0;
    
    отримати графіки функцій:
    
    fy:=5-t;
    fy:=t*t/5;
    
    

    
    
    

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Підбиття підсумків уроку

Доповнити проект таким:

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

• малювання цих ліній сітки;

• підписів точок перетину ліній сітки з межами малюнку відповідними значеннями абсциси чи ординати.

Текст упорядкував Косов Олександр Євгенович, вчитель спеціалізованої школи № 291 Дарницького району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 3.10.2016 по 07.10.2016.