• Урок 1 Процедури і функціїї модуля Graph (для роботи з пікселями, колом, дугами)
• Урок 2 Ініціалізація графічного режиму. Бібліотека Graph
• Урок 3 Процедури і функціїї модуля Graph (для роботи з прямокутниками, лініями
• Урок 4 Cтворення графічних об'єктів засобами мови Pascal (практична робота)
• Урок 5 Cтворення графічних об'єктів засобами мови Pascal (практична робота)
• Урок 6 Побудова графіків тригонометричних функцій засобами мови Pascal
• Урок 7 Методи створення рухомих графічних об'єктів засобами мови Паскаль
• Урок 8 Використання процедур модуля Graph для створення рухомих графічних зображень
• Урок 9 Використання рекурсії для графічних побудов
• Урок 10 Особливості виведення текстових повідомлень в графічному режимі
• Урок 11 Тематичне оцінювання з теми "Графіка в Turbo Pascal

Урок 1. Процедури і функціїї модуля Graph (для роботи з пікселями, колом, дугами)

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

Обладнання: персональні комп’ютери, опорний конспект до заданої теми, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.

Робота в комп’ютерному класі – лекційно - практичне заняття;

• пояснення нового матеріалу;
• парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Стандартний стан комп’ютера після його вмикання, а також до моменту запуску програми із середовища Турбо Паскаля відповідає роботі екрану дисплея в текстовому режимі. Для роботи програми в графічному режимі треба виконати ініціалізацію (встановлення) графічного режиму.
Після завершення роботи програми в графічному режимі комп’ютер повертається в текстовий режим.
Питання до учнів:

1. Скільки символів у рядку і в стовпці містить екран дисплея у текстовому режимі?
2. За допомогою яких процедур можна виконати найпростіші графічні побудови в текстовому режимі?
3. Який модуль містить ці процедури?
4. Як під’єднуть модуль Crt ?
5. Як виконати вставляння символу псевдографіки в текст?

2. Пояснення нового матеріалу.

Система координат у графічному режимі не відповідає системі координат текстового режиму (80x25). Графічний екран дисплея складається з точок, які можна засвічувати певним кольором чи гасити, в результаті чого на екрані утворюється деяке зображення. Точки називаються пікселями. Розташування точок визначається їхніми координатами. Можливе задання різних графічних режимів( розміри екрану) для кожного з адаптерів-електронної плати.

Тому будь-яка програма, яка використовує графічні можливості комп’ютера повинна ініціалізувати (встановлювати) графічний режим роботи дисплейного адаптера .

Налаштування процедур на роботу з конкретним адаптером досягається за допомогою підключення потрібного графічного драйвера. Драйвер – це спеціальна програма, яка здійснює управління тими чи іншими технічними засобами комп’ютера.
Графічний драйвер управляє дисплейним адаптером в графічному режимі.
Графічні драйвери розроблені фірмою Borland для всіх типів адаптерів. Вони знаходяться на диску в вигляді файлу з розширенням BGI (від англ. Borland Graphics Interface – графічний інтерфейс фірми Borland).
Н-д: CGA.BGI, EGAVGA.BGI – драйвер для адаптерів EGA і VGA.
Для кожного із адаптерів можливе задання різних графічних режимів (розміри екрану).

Для VGA адаптера розміри екрану в залежності від режиму екрану можуть бути наступні: 640x200, 640x350, 640x480.

Розглянемо екран, який має 640 точок у горизонтальному напрямку (X) і 480 у вертикальному ( Y ). Початок відліку точок є у лівому верхньому куті екрана.

Для виводу графічних зображень на екран на початку програми слід приєднати командою Uses до програми модуль Graph, який містить більш 50 графічних процедур і функцій. ( Uses Graph )

Потрібні файли: Turbo. tpl, Graph.tpu, Egavga.bgi.

Робота програми починається з ініціалізації (встановлення) графічного режиму процедурою InitGraph і завершується процедурою CloseGraph

Розглянемо і проаналізуємо програму: ( роздатковий матеріал ).

USES Graph
 VAR
   GraphDriver:integer; { змінна, що задає тип адаптера }
   GraphMode:integer; {змінна,що задає режим роботи адаптера( екрану)}
BEGIN
{автоматичне визначення типу адаптера}
GraphDriver:= Detect;
{ автоматичний вибір найкращого режиму екрану (640 х 480) }
InitGraph( GraphDriver,GraphMode,'C:TP7');
{ 'C:TP7' - може мати вид ’’ , якщо драйвери в активному каталозі}
if GraphResult < > 0 then
     begin
     writeln(’Помилка графіки’);
     Halt; { Стоп }
    End;
{ GraphResult - ф-я, повертає код останньої виконаної гафічної операції }
{ набуває значення (-14) - 0, якщо 0-помилки немає}
{ Текст програми }

Setbkcolor(0);
Setfillstyle(1,cyan);Bar(0,0,639,479);
Setcolor(black);
Rectangle(50,100,550,300);
CloseGraph

{колір фону }
{зафарбований прямокутник }
{ колір майбутнього зображення}
{ прямокутник}
{ Закриття графічного режиму. }

End.

Починається програма з виклику процедури InitGraph, яка автоматично виявляє апаратні засоби і завантажує відповідний графічний драйвер поміщений в Tp7. Якщо в процесі завантаження пройшла помилка, то на екрані появляється повідомлення про помилку.
CloseGraph - в процесі свого виконання ця процедура очищає пам’ять яка була задіяна під драйвери, шрифти і проміжкові дані і відновлює той режим адаптера, який був до ініціалізації гафічного режиму.
Розглянемо процедури модуля Graph призначені для графічних побудов. Всі процедури, які ми будемо вивчати для зручності користування розділемо на декілька груп.

I. Стандартні прoцедури і функції модуля Graph для работи з кольорами.

SetBkColor (колiр) - задання кольору фону;

SetColor (колiр) - задання кольору майбутнього зображення;

SetFillStyle (стиль заповнення, колiр) - задання способу заповнення замкнутої областi:
Стиль заповнення

FloodFill (x,y, колiр межi) - заповнення замкненої областi з внутрішньою точкою (x,y) ;
Приклад:

SetColor(2);
Circle(320,220,100);
SetFillStyle(1,6);
FloodFill(320,220,2);

CleaDevice – процедура, яка очищає екран зафарбовуючи його кольором фону

GetDеvice – функція, яка повертає максимально допустимі номени кольору для заданого режиму

Чорний колір !!!!!!!!!! Чорний колір набуває значення кольору фону!!!!!!
Існує помилкове твердження, що не можна контури зображення малювати чорним кольором, його просто не видно!

Щоб цього недоліку уникнути в програмі або не використовують процедуру
SetBkColor (колiр), а зафарбовують весь екран дисплея прямокутником потрібного кольору, або використовують SetBkColor ( Black), з параметром
Black, а потім малюють прямокутник на весь екран потрібного кольору.

Приклад програми, що демонструє можливі кольори ( роздатковий матеріал):

USES Graph;
VAR
    GD:integer; {тип адаптера}
    GM:integer; {режим екрану}
BEGIN
    GD:= Detect; {автоматичне визначення типу адаптера}
    InitGraph(GD,GM,''); {автоматичний вибір режиму екрану}
    if GraphResult <> 0 then Halt; {GraphResult - повертає код останньої}
виконаної гафічної операції }
    For i:=0 to GetMaxColor do
        Begin
            SetBkColor(i);
            ClearDevice;
            Readln;
        End;
    CloseGraph;

END.

3. Закріплення матеріалу. Робота за комп’ютерами

Завдання 1 Виконати програму, яка демонструє можливі кольори графічного режиму, модифікувати дану програму, використовуючи генератор випадкових чисел і озвучення кожного кольору іншою нотою.

USES Graph, Crt;
VAR
    GD:integer;
    GM:integer;
BEGIN
    GD:= Detect;
    InitGraph(GD,GM,'');
    if GraphResult <> 0 then Halt;

Randomize;
For i:=1 to 20 do
    Begin
        SetBkColor (random(i));
        Sound(I*5);
        Delay(2000);
        Nosound;
        ClearDevice;
    End;
CloseGraph;

END.

4. Підведення підсумків

Питання до класу:

1. Яка процедура встановлює графічний режим?
2. Як відрізняється система координат в текстовому і в графічному режимі?
3. Яка процедура закриває графічний режим?
4. Назвати процедуру для задання кольору фону.
5. Назвати процедуру для задання кольору майбутнього зображення.
6. Яка відміннісь між процедурами SetFillStyle і FloodFill ?

5. Домашнє завдання

• Вивчити всі процедури розглянуті на уроці.

нагору

Урок 2. Ініціалізація графічного режиму. Бібліотека Graph

Мета: навчити практичного використання процедур модуля Graph, розвивати творчі здібності, підтримувати прагнення до засвоєння нових знань, сприяти естетичному вихованню при побудові графічних фігур.

Обладнання: персональні комп’ютери, опорний конспект до заданої теми, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку:
Робота в комп’ютерному класі – лекційно - практичне заняття;

1. Пояснення нового матеріалу;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Питання до класу:

1. Яка процедура встановлює графічний режим?
2. Пояснити такий рядок: GD:= Detect;
3. З чого складається графічний екран дисплея ?
4. Де початок відліку точок в гафічному режимі?
5. Назвати процедуру для задання кольору фону.
6. Назвати процедуру для задання кольору майбутнього зображення.
7. Яка відміннісь між процедурами SetFillStyle і FloodFill ?
8. З яким кольором має співпадати колір межі в процедурі FloodFill ?
9. Що можна сказати про чорний колір в графіці TP?
10. Яка процедура закриває графічний режим?

2. Пояснення нового матеріалу.

Продовжуємо вивчати процедури модуля Graph призначені для графічних побудов. Розглянемо наступну групу процедур.

I. Прoцедури і функції для работи з пікселями.

PutPixel (x,y,колiр) - висвiтлює точку заданим кольором;

Movto(x,y) – переміщення в точку екрану з координатою(х,у);

Movedel(dx,dy) – переміщення на dx пікселів по горизонталі і на dy по вертикалі відносно останнього поточного показчика;

Getx – визначення поточного положення графічного курсору по осі X;

Gety - визначення поточного положення графічного курсору по осі Y;

GetMaxX – визначення максимальних координат курсору;

GetMaxY - визначення максимальних координат курсору;

II. Прoцедури для работи з колом, дугами.

Circle (x,y,R) – побудова кола з радiусом R i центром(x,y);

Arc (x,y,поч.кут,кiнц.кут,радiус) – побудова дуги;

Pieslice (x,y, початковий кут, кiнцевийкут,радiус) – вивід на екран комп’ютера зафарбованого сектор;

Ellipse (x,y,поч.кут,кiнц.кут,Rx,Ry) - малює елiпс чи дугу елiпса;

FillEllipse(x,y,Rx,Ry) - малює зафарбований елiпс;

Приклад фрагменту програми :

Setbkcolor( 3 ); { колір фону }
Setcolor( 4 ); { колір майбутнього зображення }

Circle(350,150,100); { коло}
Arc(150,50,180,360,100);
Arc(50,150,270,90,100); { дуга  }

Setfillstyle(1,red); { спосіб заповнення }
FloodFill(350,150,4); { заповнення}

3. Закріплення матеріалу (парна та індивідуальна робота за комп’ютером).

У кожного учня окреме завдання з конкретним малюнком:

Додаткові завдання:

1. Вивести коло з демонстрацією всіх можливостей (зміна кольору і типу границі, кольору і типу заливки, положення, розмірів, розтягнення.).
2. Вивести сектор...
3. Вивести дугу...
4. Вивести еліпс...
5. Вивести зображення зіркового неба пікселями випадкових кольорів до натискання будь-якої клавіші на клавіатурі.
6. Зображення кольрового пікселя, що "біжить" по середині екрана.

4. Підведення підсумків

Оголошення оцінок за урок (учням, які відповідали і за практичну роботу)

Питання до класу:

1) Яка процедура встановлює графічний режим?
2) Як відрізняється система координат в текстовому і в графічному режимі?
3) Яка процедура закриває графічний режим?

1. Назвати процедуру для задання кольору фону.
2. Назвати процедуру для задання кольору майбутнього зображення.
3. Яка відміннісь між процедурами SetFillStyle і FloodFill ?

5. Домашнє завдання

1. Вивчити всі процедури розглянуті на уроці;
2. Намалювати в зошиті малюнок з використанням вивчених процедур.
3. Виконати одне з таких завдань:

1. Вивести коло з демонстрацією всіх можливостей (зміна кольору і типу границі, кольору і типу заливки, положення, розмірів, розтягнення.).
2. Вивести сектор...
3. Вивести дугу...
4. Вивести еліпс...
5. Вивести зображення зіркового неба пікселями випадкових кольорів до натискання будь-якої клавіші на клавіатурі.
6. Зображення кольрового пікселя, що "біжить" по середині екрана.

нагору

Урок 3. Процедури і функціїї модуля Graph (для роботи з прямокутниками, лініями)

Мета: навчити практичного використання процедур модуля Graph, розвивати творчі здібності,підтримувати прагнення до засвоєння нових знань, сприяти естетичному вихованню при побудові графічних фігур.

Обладнання: персональні комп’ютери, опорний конспект до заданої теми, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку:
Робота в комп’ютерному класі – лекційно - практичне заняття;

1. Пояснення нового матеріалу;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Питання до класу:

1. Яка процедура встановлює графічний режим?
2. Назвати процедуру для задання кольору фону.
3. Назвати процедуру для задання кольору майбутнього зображення.
4. Перелічити процедури для роботи з пікселями.
5. Перелічити процедури для роботи з дугами.
6. Перелічити процедури для роботи з колом, еліпсом.

2. Пояснення нового матеріалу.

Продовжуємо вивчати процедури модуля Graph призначені для графічних побудов. Розглянемо наступну групу процедур.

I. Прoцедури для работи з прямокутниками.

Rectangle (x1,y1,x2,y2) - малює прямокутник з заданими координатами діагонально протилежними;

Bar (x1,y1,x2,y2) - малює зафарбований прямокутник;

Bar3d (x1,y1,x2,y2, глибина, верх) - малює паралелепiпед;

Вверх

True - є верхня площина
False - верхньої площини немає

II. Прoцедури для роботи з графічними примітивами типу "лінія".

Line (x1,y1,x2,y2) - малює лiнiю мiж двома заданими точками;

LineTo (x,y) - малює лiнiю вiд поточної точки до заданої точки;

SetLineStyle (тип лiнiї, шаблон користувача, товщина лiнiї) - встановлює тип лiнiї;

Тип лінії

0 - суцiльна, Solidln
1 - пунктирна, Dottedln
2 - центорова, Centerln
3 - штрихова, Dashedln
4 - користувача, Userbitln

Товщина
1 - ширина в 1 пiксел
3 - ширина в 3 пiксели

Шаблон використовується, якщо тип лiнiї рiвний 4, iнакше 0

Приклади програм ( учні по-черзі коментують кожний рядок):

Програма №1, файл Gr3.

PROGRAM gr3;
USES Graph,crt;

VAR
    GD:integer;
    M:integer;
    i,r:longint;
BEGIN
    GD:= Detect;
    InitGraph(GD,GM,'');
    if GraphResult <> grOk then Halt;

    randomize;
    Setbkcolor(blue); { колiр фону }
    Setcolor(15); { колiр букв }

     repeat
    SetColor(Random(GetMaxColor)+1);
    Line(100+Random(200),300+Random(100),Random(100),Random(100));
    until KeyPressed;

    Readln;
    Cleardevice;
    CloseGraph;

end.

Програма №2, файл Gr2.

PROGRAM gr2;
USES Graph,crt;

VAR
    GD:integer;
GM:integer;
    i,r:longint;
BEGIN
    GD:= Detect;
    InitGraph(GD,GM,'');
    if GraphResult <> grOk then Halt;

    randomize;
    Setbkcolor(blue); { колiр фону }
    Setcolor(15); { колiр букв }

    for i:=1 to 10000 do
    Putpixel(100+Random(400),100+Random(300),Random(15));
{ заповнення точками }

     Line(50,100,150,20); { лiнiя мiж двома точками }

    MoveTo(10,20);
    LineTo(100,200); {лінія вiд поточної точки до X,Y }
    LineRel(50,100); { лінія вiд поточної з заданим приростом }

    Rectangle(300,200,500,400); { прямокутник }
    Rectangle(29,29,GetMaxX-29,GetMaxY-29); { прямокутник }

    for r:=1 to 5 do
    Circle(200,100,r*10); { Коло }

    Ellipse(200,200,0,360,30,50); { елiпс замкнута фiгура }
    Ellipse(200,200,0,180,50,30); { елiпс розiмкнута }

    for r:=1 to 5 do
     Arc(300,100,0,90,r*10); { дуга }

     Bar(550,400,600,450); { замальований прямокутник}
    Bar3D(10,10,110,60,10,TopOn); { паралелепiпед }
    Bar3d(145,45,250,40,10,true);

    Readln;
    Cleardevice;
    CloseGraph;
end.

Програма №3, файл Gr5.

PROGRAM gr5;
    USES Graph,crt;

VAR
    GD:integer;
    GM:integer;
    i,r:longint;
BEGIN
     GD:= Detect;
    InitGraph(GD,GM,'');
    if GraphResult <> grOk then Halt;

    Setbkcolor(blue); { колiр фону }
    Setcolor(red); { колiр зображення }
    Circle(200,100,70); { коло }
    Setfillstyle(1,red); { спосiб заповнення,колiр }
    FloodFill(200,100,red); { заповнення областi з точкою
    x,y у серединi }

     Setcolor(15);
    Setfillstyle(1,8);
    FillEllipse(GetMaxX div 2,GetMaxY div 2,50,50);

    Setcolor(10);
    Setfillstyle(1,5);
    Bar3d(10,10,110,60,10,topon);

     Readln;
    Cleardevice;
    CloseGraph;

end.

3. Закріплення матеріалу. Робота за комп’ютерами

1. виконання, перегляд розглянутих програм.
2. самостійне виконання програм (у кожного учня окреме завдання)
3. додаткові завдання:
   • Вивести зображення круга, розбитого на сектори і розмальованого у вигляді парасольки.
   • Вивести зображення працюючого світлофора (зі зміною кольорів).
   • Вивести зображення ялинки з трикутників.
   • Вивести зображення ялинки з секторів.
   • Вивести зображення множини дуг, що ростуть до сектора заданого розміра.

4. Підведення підсумків

Питання до класу:
1. Яка процедура малює лiнiю мiж двома заданими точками?
2. Яка процедура малює лiнiю вiд поточної точки до заданої точки?
3. Назвати процедуру для виводу прямокутника?
4. Назвати процедуру для виводу паралелепіпеда?

5. Домашнє завдання

• Вивчити всі процедури розглянуті на уроці;
• Придумати цікавий малюнок на довільну тему з використанням розглянутих процедур.

нагору

Урок 4. Cтворення графічних об'єктів засобами мови Pascal (практична робота)

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

Обладнання: персональні комп’ютери, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.
Робота в комп’ютерному класі – практичне заняття;

1. пояснення деяких завдань, запис програм на дошці;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

1). Пояснити дію процедури Randomize і дію функції Random(18).
2). Диктант:

Написати процедури Graph які виводять на екран монітора:

1. Лінію між двома заданими точками.
2. Паралелепіпед.
3. Дугу.
4. Лінію від поточної точки з заданим приростом.
5. Еліпс не зафарбований.
6. Прямокутник.
7. Зафарбований сектор.
8. Лінію від поточної точки до точки X,Y.
9. Коло.
10. Зафарбований прямокутник.
11. Встановити чорний колір фону.
12. Встановити білий колір зображення.
13. Вивести точку заданим кольором.
14. Написати процедуру, яка задає спосіб заповнення замкнутої області.
15. Процедуру, яка заповнює замкнену область.
16. Процедуру ініціалізації графічного режиму.
17. Процедуру, яка очищає екран зафарбовуючи його кольором фону.
18. Процедуру, яка закриває графічний режим.
19. Процедуру, яка встановлює тип і товщину лінії.
20. Які розміри екрану в графічному режимі?
21. Як підключити бібліотеку Graph?
22. Написати процедуру чистки екрану.
23. Процедуру вивову паралелепіпеда.
24. Зафарбований еліпс.

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

2. Пояснення і запис на дошці завдань.

Продовжуємо вивчати процедури модуля Graph призначені для графічних побудов. Розглянемо наступну групу завдань.

Завдання1.

Побудувати 10 концентричних кіл з центрами в точці (320,240), радіусами відповідно від 60 до 70 пікселів, використати оператор циклу.

uses crt,graph;
  var
    dv,md,x,y,i:integer;
  begin
    dv:=detect;
  initgraph(dv,md,'');
  setbkcolor(1);
  for i:=1 to 10 do
  begin
    circle(320,240,60+i*10);
    delay(20000);
  end;
    readkey;
    closegraph;
  end.

Завдання 1a.
Модифікувати програму таким чином, щоб кожне наступне коло було відмінне від попереднього по кольору.

uses crt,graph;
  var
    dv,md,x,y,i:integer;
  begin
    dv:=detect;
    initgraph(dv,md,'');
    randomize;
    setbkcolor(1);
    for i:=2 to 240 do
    begin
      setcolor(random(25));
      circle(320,240,i);
    end;
    readkey;
    closegraph;
  end.

3. Закріплення матеріалу. Робота за комп’ютерами

1. виконання, перегляд розглянутих програм.
2. самостійне виконання програм (у кожного учня окреме завдання)

Завдання 2.
Вивести на екран зображення множини різнокольрових пухирців (випадкові розміри та заповнення) до натискання будь-якої клавіші.
Завдання 3.
Вивести на екран зображення вкладених прямокутників, що сходяться.
Завдання 4.
Вивести на екран зображення вертикальних різнокольорових ліній на весь екран.
Завдання 5.
Вивести на екран зображення горизонтальних ліній через інтервал.
Завдання 6. Зображення шахматки, з випадковими кольорами заливки.
Завдання 7.
Зображення грат (вільні або задані розміри).
Завдання 8.
Зображення круга, розбитого на сектори і розмальованого у вигляді парасольки.
Завдання 9.
Зображення працюючого світлофора (зі зміною кольорів).
Завдання 10.
Зображення ялинки з трикутників.
Завдання 11.
Вивести зображення круга, розбитого на сектори і розмальованого у вигляді парасольки.
Завдання 12.
Вивести зображення множини дуг, що ростуть до сектора заданого розміра.

3. Підведення підсумків

Оголошення оцінок за урок. У всіх учнів вийшли дуже гарні творчі роботи.
Що було найскладніше для реалізації запропонованого завдання? Що було найцікавіше у виконанні завдання?

4. Домашнє завдання

Завдання 13. Намалювати 6 кіл, які дотикаються, через одне замалювати .

Setcolor(12);
for i:=2 to 9 do
  begin
    circle(20+40*i,240,20);
    if i mod 2=1 then
    begin
      setfillstyle(0,1);
      floodfill(20+40*i,240,12)
    end;
  end;

Завдання 14. Намалювати прапор України.

нагору

Урок 5. Cтворення графічних об'єктів засобами мови Pascal (практична робота)

Мета: вдосконалення практичних вмінь та навичок при складанні різноманітних програм , формувати вміння раціонального пошуку під-час розв’язуваннч задач, алгоритмічного стилю мислення, спрямованого на вибір оптимальних розв’язань, заохочувати самостійність і нестандартність мислення,підтримувати прагнення до засвоєння нових знань,виховувати комп’ютерну грамотність, акуратність під-час виконання малюнків та креслень.

Обладнання: персональні комп’ютери, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.

Робота в комп’ютерному класі - практичне заняття;

1. пояснення деяких завдань, запис програм на дошці;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Учні виконують за комп’ютерами домашні завдання.

Завдання 1. Намалювати 6 кіл, які дотикаються, через одне замалювати .

Setcolor(12);
for i:=2 to 9 do
  begin
    circle(20+40*i,240,20);
    if i mod 2=1 then
    begin
      setfillstyle(0,1);
      floodfill(20+40*i,240,12)
  end;
end;

Завдання 2. Намалювати прапор України.

2. Пояснення і запис на дошці завдань.

Завдання 1. Вивести на екран малюнок, процедуру, яка малює лінію використати в програмі тільки один раз.

Ті учні, які знають алгоритм виконання працюють самостійно за комп’ютерами, решта складають алгоритм розв’язку і записують на дошці.

uses graph,crt;
var
  driver,mode:integer;
  i:integer;
  x,y:integer;
begin
  driver:=detect;
  initgraph(driver,mode,'');
  setcolor(lightmagenta);

   moveto(400,100);
  x:=410;
  y:=100;
  for i:=1 to 21 do
  begin
    lineto(x,y);
    case i mod 4 of
    0: x:=x+i*10;
    1: y:=y+i*10;
    2: x:=x-i*10;
    3: y:=y-i*10;
  end;
  delay(2000);
  end;

  Readln;
  CloseGraph;
end.

Завдання 2. Вивести на екран малюнок, процедуру, яка малює прямокутник використати в програмі чотири рази.

uses graph,crt;
var
  driver,mode:integer;
  i:integer;
  x,y:integer;

begin
  driver:=detect;
  initgraph(driver,mode,'');
  setcolor(lightmagenta);

for i:=1 to 5 do
  begin
    rectangle(0,0,0+i*20,0+i*20);
    rectangle(0,200-i*20,0+i*20,200);
    rectangle(100+(i-1)*20,0,200,100-(i-1)*20);
    rectangle(100+(i-1)*20,100+(i-1)*20,200,200);

    delay(500);
  end;

  Readln;
  CloseGraph;
end.

3. Закріплення матеріалу. Робота за комп’ютером.

Учні виконують завдання розлянуті вище,модифікують різними способами.

Додаткове завдання:побудувати таку фігуру

uses graph,crt;
var
  gm,gd,i,j,b,c,m,d,k1,k2,x1:integer;
  l,t,r,u,s,x,y,a:real;

begin
  gm:=detect;
  initgraph(gm,gd,'');

  setbkcolor(11);
  a:=320;
  b:=160;
  l:=1.15727;
  c:=80;
  d:=10;
  m:=1000;
  for i:=0 to m do
  begin
    t:=2*i/m;
    r:=(ln(29*t+6)-ln(16))/ln(4);
    u:=85*t;
    for k1:=0 to 15 do
    for k2:=0 to 2 do
    begin
      s:=pi*(t+k1/8+k2/24);
      x:=c*r*cos(s);
      y:=d*r*sin(s);
      putpixel(round(a+x),round(2*b-d+y-u),15-k2*3);
    end;
  end;
  readkey;
  closegraph;
end.

4. Підведення підсумків

За допомагою програмування, зокрема циклу і гафіки можна виконувати складні геометричні побудови, використавши ще і знання з математики.

5. Домашнє завдання

Написати програми :

1) вписаного в коло трикутника

2) побудови циліндра, конуса, піраміди, призми.

Завдання №3, якщо не вcтигли в класі.

Завдання 3. Побудувати зірку, скориставшись формулами для визначення координат точки на колі.

x,y – координати центру
x1,y1- координати точки на колі

кут від 0 до 2*Pi
2*Pi/5=1.256

x1=x+R*sin(a)
y1=y-R*cos(a)

Варіант1.

uses graph,crt;
var
  driver,mode:integer;
  i:integer;
  x,y,r:integer;
  zx,zy: array [1..5] of integer;
begin
  driver:=detect;
  initgraph(driver,mode,'');
  setcolor(lightmagenta);

  x:=400;
  y:=350;
  r:=100;

   { circle(x,y,r); }

   for i:=1 to 5 do
  begin
    zx[i]:=round(x+r*sin(i*1.256));
    zy[i]:=round(y-r*cos(i*1.256));
  end;
  for i:=1 to 5 do
  begin
    line(zx[(i*2-1) mod 5 + 1], zy[(i*2-1) mod 5 + 1],
    zx[(i*2+1) mod 5 + 1], zy[(i*2+1) mod 5 + 1]);
    delay(2000);
  end;

  Readln;
  CloseGraph;
end.

Варіант2.

uses graph,crt;
var
  driver,mode:integer;
  i:integer;
  x,y,r:integer;
  zx,zy: array [1..5] of integer;
  n:string;
begin
  driver:=detect;
  initgraph(driver,mode,'');
  setcolor(lightmagenta);

  x:=320;
  y:=240;
  r:=200;

   { circle(x,y,r); }

  for i:=1 to 5 do
  begin
    zx[i]:=round(x+r*sin(i*1.256));
    zy[i]:=round(y-r*cos(i*1.256));
    STR(i, n);
    outtextxy(zx[i]+5, zy[i]+5, n);
  end;

  line(zx[1], zy[1], zx[3], zy[3]);delay(400);
  line(zx[3], zy[3], zx[5], zy[5]);delay(400);
  line(zx[5], zy[5], zx[2], zy[2]);delay(400);
  line(zx[2], zy[2], zx[4], zy[4]);delay(400);
  line(zx[4], zy[4], zx[1], zy[1]);delay(400);

  Readln;
  CloseGraph;
end.

нагору

Урок 6. Побудова графіків тригонометричних функцій засобами мови Pascal

Мета: вдосконалення практичних вмінь та навичок при складанні різноманітних програм , формувати вміння раціонального пошуку під-час розв’язуваннч задач, алгоритмічного стилю мислення, спрямованого на вибір оптимальних розв’язань, заохочувати самостійність і нестандартність мислення,,підтримувати прагнення до засвоєння нових знань.

Обладнання: персональні комп’ютери, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.

Робота в комп’ютерному класі - практичне заняття;

1. пояснення деяких завдань, запис програм на дошці;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

- Побудувати на дошці графік функції y=sin x, y=cos x
- З чого складається графічний екран дисплея ?
- Які розміри екрану в гафічному режимі?
- Перелічити процедури для роботи з лініями.

2. Пояснення нового матеріалу..

Перед тим як розглянути побудову гафіків тригонометричних функцій розглянемо побудову зображення графіка функціі у=х2 на весь екран. Для реалізації цього алгоритму по мінімуму достатньо 2-х змінних х,у типу integer - координати чергового пікселя графіка. Графік буде виводитися попіксельно з використанням циклу (х змінюватиметься від 1 до getmaxx) для двох операторів:
y:= sqr(x); (1)
putpixe(x,y,color) (2)
Виконання оператора (1) в такому вигляді приведе до багатьох помилок (? ). Розглянемо послідовну його модифікацію, яка ліквідує ці помилки:

1. y:= trunc (sqr (x)) - приведення типу real функціїї sqr до типу integer ( тип координати у);
2. y:= trunc (sqr (x)*ksy) - маштабування координати y (значення функції) за допомогою коефіцієнта ksy який добирається так щоб забезпечити гарне розташування графіка в межах екрана по вертикалі;
3. y:= trunc (sqr (x)*ksx)*ksy) - маштабування координати х (аргумента функції) за допомогою коефіцієнта ksx, який добирається в допустимих межах для кожної конкретної фукції, для можливості правильного її обчислення та розташування в межах екрана по горизонталі;
4. y:= trunc (sqr (cx-x)*ksx)*ksy)- зсув графіка по горизонталі для прив’язки до системи координат;
5. y:= trunc (sqr ((cx-x)/ksx)*ksy)+cy; зсув графіка по горизонталі для прив’язки до системи координат.

Завдання 1.

Розглянемо програму для побудови графіків функцій y=sin (x), y=cos(x)

( у кожного учня на парті шаблон програми)

uses graph,crt;
var
driver,mode:integer;
x,y:real;
i:integer;
begin
driver:=detect;
initgraph(driver,mode,'');
setcolor(yellow);
line(0,240,640,240); { Креслення осі X i Y з шкалою}
line(320,0,320,480);

for i:=-10 to 10 do
line(320+i*30, 235, 320+i*30, 245);

SettextStyle(0,0,1); { Креслення стрілочок }
OutTextXY(632,237,'>');
OutTextXY(317,0,'^');

SettextStyle(1,0,2);
OutTextXY(625,245,'x');
OutTextXY(330,0,'y');

SettextStyle(1,0,1);
OutTextXY(324,244,'0');

for i:=-320 to 320 do
begin
putpixel(320+i, 240-round(50*sin(i/30)),green); { коефіцієнт - 50}
putpixel(320+i, 240-round(100*cos(i/30)),lightblue); {коефіцієнт - 100 }
end;
readln;
CloseGraph;
end.

3. Закріплення матеріалу. Робота за комп’ютером.

Завдання 2

Нарисувати графік функції y=2sin(2x)+1 на проміжку [0; 2П],табулюючи функцію з кроком h=0,1. У результаті експерименту, міняючи значення амплітуди в пік селях(за допомогою множника М), зобразити графік на екрані якнайкраще.

4. Підведення підсумків.

- Що слід пам’ятати при робудові графіків функій в графічному режимі?
- Як здійснюється маштабування координат?
- Для чого здійснюється маштабування координат?

5. Домашнє завдання.

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

нагору

Урок 7. Методи створення рухомих графічних об'єктів засобами мови Паскаль

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

Обладнання: персональні комп’ютери, опорний конспект до заданої теми, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.

Робота в комп’ютерному класі - практичне заняття;

1. пояснення деяких завдань, запис програм на дошці;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Перш ніж перейти до нової теми, давайте знову згадаємо цикли:

- Як виконувалось завдання про " підскакуючого хлопчика"?
- Як виконувавця рух фігурками у псевдографіці?
- Як виконувалось завдання для побудови концентричних кіл?

2. Пояснення нового матеріалу.
Щоб почати роботу над створення простішого "мультика" (зображення, що рухається), спочатку розберемося, як воно створюється в реальних умовах. Всі знають, що художник мультиплікатор малює серію зображень, в кожному з яких показується один і той же рух з ледь помітними змінами. Наприклад так, як це показано на наступному малюнку.

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

Завдання1. Вивести на екран малюнок: рух кола по прямокутнику.

1) for i:=2 to 9 do
  begin
    setcolor(random(16);
    circle(50*i,100,50);
    elay(2000);
  end;

2) for i:=2 to 7 do
  begin
    setcolor(random(16);
    circle(450,50*i,50);
    delay(2000);
  end;

3) for i:=9 downto 2 do
  begin
    setcolor(random(16);
    circle(50*i,350,50);
    delay(2000);
  end;

4) for i:=7 downto 2 do
  begin
    setcolor(random(16);
    circle(100,50*i,50);
    delay(2000);
  end;

В даному фрагменті кожне коло виводиться по - черзі на екран і не зникає. Для того, щоб створити ілюзію руху потрібно після кожного delay(2000) вставити процедуру чистки екрану- CleaDevice.

Завдання 2. Вивести рухоме коло по діагоналі екрану, використати рівняння прямої, яка проходить через дві точки: Y= k*x+b

0=k*0+b
480=k*640+b
k=480/640=0.75
y=0.75*x

uses crt,graph;
  var
    dv,md:integer;
    x,y:real;
  begin
    dv:=detect;
    initgraph(dv,md,'');
    x:=25;
    y:=0.75*x;
  While x<= 615 do
  begin
    setcolor(random(25));
    circle(round(x),round(y),25);
    delay(1000);
    cleardevice
    y:=0.75*x;
    x:=x+1;
  end;
  readkey;
  closegraph;
end.

Завдання 3. Зобразити лінію, яка рухається з одним закріпленим кінцем.

uses graph, crt;
var
  driver,mode:integer;
  x,y,x1,y1,r:integer;
  kyt:real;
begin
  driver:=detect;
  initgraph(driver,mode,'');
  setcolor(yellow);
  kyt:=0;
  x:=320;
  y:=240;
  r:=100;
  while kyt<2*pi do
  begin
    x1:=round(x+r*sin(kyt));
    y1:=round(y+r*cos(kyt));
    line(x,y,x1,y1);
    delay(2000);
    kyt:=kyt+pi/16;
  end;
  readln;
  CloseGraph;
end.

Завдання 4.

Умова: "Годинник". Змоделювати рух годинної та хвилинної стрілок.Якщо змоделювати роботу годинника в реальному часі, то наочність програми буде невеликою, тому що рух стрілок буде ледь помітним. Тому зробимо імітацію роботи годинника, тобто хвилинна стрілка буде рухатися достатньо швидко, а рух годинникової стрілки буде залежати від хвилинної. На початку роботи з'ясуємо, з яких елементів складається годинник. По-перше, це круг з поділками, а, по-друге, два відрізка різної довжини, що імітують стрілки (стрілки можна зробити і більш складними). Круг являється нерухомим об'єктом, тому він малюється статично з абсолютними координатами центру та радіусом, а стрілки рухаються, причому переміщується тільки один кінець стрілки-відрізка, а другий теж являється статичним (центр круга).
Формули, за якими обчислюються координати рухомого кінця стрілки, відомі учням з курсу математики (поворот точки на заданий кут відносно нерухомого центру з координатами x0, y0). Тому наводимо їх тут без пояснень:

x = x0 + L*cosa
y = y0 + L*sina
де L - відстань, на якій знаходиться точка від центру повороту,
a - кут, на який повертається точка.
Зверніть увагу тільки на те, що в програмі друга формула замість знаку "-" буде містити знак "+", тому що екранні координати мають направленість осей, зворотну до реальних Декартових координат (на екрані значення координати Y збільшується в напрямку зверху вниз).
Малювання поділок на циферблаті виконується теж за допомогою вище наведених формул
Програма, що реалізує запропонований алгоритм, наведена нижче.
Зверніть увагу, що в цій програмі
L_min, L_time - довжини хвилинної та годинникової стрілок відповідно;
Color_min, Color_time - кольори хвилинної та годинникової стрілок відповідно;
R - радіус циферблату годинника;
х_centr, y_centr - координати центра екрану (визначаються у відповідності до поточної роздільної здатності за допомогою функцій getmaxx та getmaxy;
х_min, y_min - координати рухомого кінця хвилинної стрілки;
х_time, y_time - координати рухомого кінця годинникової стрілки;
Ang_min, Ang_time - кути повороту хвилинної та годинникової стрілок відповідно

Рух стрілок по циферблату здійснюється за рахунок постійного їх перемалювання то активним кольором малювання стрілки, то кольором тла ("затирання" зображення). Програма завершується після натискання будь-якої клавіші за рахунок використання циклу repeat until keypressed.

Program Example_629;
Uses crt,graph; {Підключення бібліотек}
const L_min=174;
  L_time=145;
  Color_min=white;
  Color_time=white;
  R = 200;
var gd,gm:integer;
  S:string[2];
  x_centr, y_centr:integer;
  i,x_min,y_min:integer;
  x_time,y_time:integer;
  Ang_min,Ang_time:real;
begin
  {Ініціалізація графічного режиму}
  gd:=VGA; gm:=VGAHi;
  InitGraph (gd,gm,'egavga.bgi');
  {Визначення центра екрану}
  x_centr := getmaxx div 2;
  y_centr := getmaxy div 2;
  {Малювання статичної частини малюнку}
  SetColor(brown);
  SetFillStyle(1,brown);
  {Малювання циферблату коричневого кольору}
  FillEllipse(x_centr,y_centr,R,R);
  Ang_time:=-90;
  {Встановлення кольору малювання, стилю та вирівнювання тексту}
  SetColor(yellow);
  SetTextJustify(CenterText, CenterText);
  SetTextStyle(DefaultFont, HorizDir, 2);
  {Малювання поділок жовтого кольору та цифр}
  for i:=1 to 12 do
begin
  Ang_time:=Ang_time+30;
  x_time:=round(x_centr+185*cos(Ang_time*pi/180));
  y_time:=round(y_centr+185*sin(Ang_time*pi/180));
  str(i,S);
  OutTextXy(x_time,y_time,S);
end;
  {Малювання ходу годинника}
  Ang_min:=-90;
  Ang_time:=-90;
  repeat
  x_time:=round(x_centr+L_time*cos(Ang_time*pi/180));
  y_time:=round(y_centr+L_time*sin(Ang_time*pi/180));
  SetColor(Color_min);
  Line(x_centr,y_centr,x_time,y_time);
  x_min:=round(x_centr+L_min*cos(Ang_min*pi/180));
  y_min:=round(y_centr+L_min*sin(Ang_min*pi/180));
  SetColor(Color_min);
  Line(x_centr,y_centr,x_min,y_min);
  Delay(10000); {Затримка зображення на екрані}
  SetColor(brown);
  Line(x_centr,y_centr,x_time,y_time);
  Line(x_centr,y_centr,x_min,y_min);
  Ang_min:=Ang_min+6;
  Ang_time:=Ang_time+0.5;
  until keypressed;
  readkey;
  CloseGraph;
end.

3. Закріплення матеріалу. Робота за комп’ютерами

Учні виконують розглянуті завдання, модифікують їх за власним бажанням

4. Підведення підсумків

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

а) намалювати бажаний об'єкт;
б) запам'ятати область екрана, з виведеним малюнком;
в) відновити екран в місці, де був малюнок (тобто стерти малюнок);
г) вивести малюнок на нове місце і т.д.

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

5. Домашнє завдання

Продовжувати працювати над власним малюнком.

Завдання 5. Вивести на екран зображення малюнка, що коливається(маятник)

нагору

Урок 8. Використання процедур модуля Graph для створення рухомих графічних зображень

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

Обладнання: персональні комп’ютери, опорний конспект до заданої теми, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.
Робота в комп’ютерному класі – лекційно - практичне заняття;

1. фронтальна робота з класом;
2. парна та індивідуальна робота за комп’ютером.

Робота з файлами:

1. METEL
2. KOLOBOK
3. MIKI
4. LORRY
5. ANIMA

Хід уроку:

1. Актуалізація опорних знань.
Ми продовжуємо з вами вивчати створення графічних зображень в мові програмування Турбо Паскаль.
Сьогодні ми вивчемо ще одну цікаву тему і навчимось поєднувати ті програми, які ви вже навчились створювати, а саме математику та інформатику, а також якоюсь мірою мисцетво і музику. Перш, ніж ми перейдем до нової теми давайте пригадаємо ті процедури модуля Graph,які ви вже вивчили. У вас на партах листочки-напишіть на них прізвище і за кожну правильну відповідь будете ставити собі один бал. Кожний по черзі називає одну процедуру. Так по кругу до того часу, поки не вичерпаються всі процедури які ви знаєте , якщо до когось доходить черга, а він уже не знає жодної, то говорить наступний, а він пропускає. Почнемо, мабуть з того,що для виводу графічних зображень на екран на початку програми слід ... продовжуйте речення – підєднати до програми модуль Graph( USES GRAPH).
Наступний…...
Молодці!!!

2. Пояснення нового матеріалу.
Крім тих процедур, які ми вивчили модуль Graph містить цікаві процедури за допомогою яких можна здійснити рух графічних зображень. Тема нашого уроку - на дошці: "Використання процедур модуля Graph для створення рухомих графізних зображень"
З деяким рухом графічних зображень ми вже знайомі. Давайте згадаєм як здійснювався рух кола по горизонталі, по вертикалі, коли ми вивчали тему вивід кіл, дуг ? – Питання до класу. За допомогою яких операторів? Як змінювалися координати , коли коло рухалось по горизонталі ? (збільшувалась координата Х) по вертикалі? (Y) по діагоналі? ( і X і Y ) Яку процедуру модуля Graph обов’язково потрібно записати в циклі щоб попереднє зображення зникло? (ClearDevise). Але процедура ClearDevise очищає весь екран зафарбовуючи його фоновим кольором. А якщо потрібно, щоб рухалось одне зображення, а інші залишались незмінними ?
Модуль Graph містить дві процедури, які використовуються для руху складних зафарбованих зображень незалежно від того в якому місці екрану вони виведені і незалежно від інших зображень. Мета нашого уроку сьогодні навчитись творчо використовувати ці процедури.

1. getimage(x1,y1,x2,y2,im) - процедура заносить в пам’ять копію прямокутного фрагменту графічного зображення.

x1,y1,x2,y2 – координати кутів діагонально протилежні фрагменту в якому знаходиться графічне зображення.
im – змінна, куди буде записана копія відеопам’яті з фрагментом зображення а потім виведена на екрані в потрібному місці.
(записує в масив кольори пікселів)
Ця змінна описується в програмі в розділі опису даних, як двовимірний масив. Згадуємо як описується масив ?

Var
im: array [1..(X2-X1), 1..(Y2-Y1)] of byte

Кількість елементів масиву-кількість пікселів по горизонталі і по вертикалі. Пояснити чому використовується тип byte. (для економії оперативної пам’яті)

На окремій дошці малюнок. Учням пропонується записати на дошці розміри двовимірного масиву куди буде занесена копія прямокутного фрагменту.
im: array [1..150, 1..125] of byte

2. putimage (x1,y1, im, Mode) – виводить в задане місце екрану копію фрагменту зображення, яка була поміщена (занесена) в пам’ять процедурою getimage (або забирає).
X1,Y1 – координати верхнього лівого кута того місця екрану, куди буде скопійовано фрагмент зображення.
im – змінна звідки виводиться зображення.
Mode – маска,спосіб копіювання, режим виведення
(може набувати значення 1 або 0)
0 - якщо не було зображення – з’явилось, якщо було – то буде
1 - якщо не було зображення – з’явилось, якщо було – зітреться
2,3,4 - інверсія – не пояснювати

(Можна ще так пояснити: параметр Mode визначає спосіб взаємодії копії, яка знову розміщується з зображенням яке існує на екрані, 0-заміна існуючого зображення на копію)

Пояснити відмінність параметра 0 від 1.

1 – застосувавши до того місця екрану, зідки отримали копію, зітре цю частину екрану. Якщо двічі використати цю процедуру з 1, то зображення не зміниться.

Таким способом можна переміщувати зображення на екрані створюючи ілюзію руху (при цьому збільшувати або зменшувати координати – в циклі).

3. Закріплення матеріалу .

Завдання 1 Вважаючи що здійснена в програмі ініціалізація графічного режиму, описані всі змінні, крім масиву для збереження прямокутного фрагменту ,малюнок виведений на екран з координатами, як намальовано на дошці – написати фрагмент програми для руху даного малюнка з верхнього лівого кута до нижнього правого. (Один учень на дошці записує з поясненням).

Var
im: array [1..150, 1..125] of byte;
…………………………………………
getimage(250,150,400,275, im);
putimage(250,150,im,1);
for i:=1 to 90 do
  begin
    putimage(i*5,i*3,im,0)
  end;
readkey;

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

getimage(250,150,400,275, im)
putimage(250,150,im,1)
for i:=1 to 90 do
  begin
    putimage(i*5,i*3,im,0)
    sound(100*I);
    delay(50*I);
    nosound;
  end;
readkey;

а якщо ноти записані в масив?

4. Практична робота за комп’ютером (біля кожного комп’ютера картка з завданнями)

Завдання 1
Дано файли в яких записані програми виводу графічних зображень. Дано координати прямокутника в якому знаходиться зображення. Здійснити рух даних зображень за допомогою процедур модуля Graph (по горизонталі, по вертикалі, по діагоналі) можна виводити і здійснювати рух одного і того ж графічного зображення в різних місцях екрану.

Файли

METEL (110,30,290,200);
KOLOBOK (5,245,115,350);
MIKI (25,10,300,360);
LORRY (40,150,300,300);
ANIMA (230,350,400,480)

Завдання 2 Модифікувати програми таким чином, щоб з рухом графічних зображень звучали ноти.

(учні виконують завдання за комп’ютером)

5. Підведення підсумків

Питання до класу

1. Яка процедура заносить в пам’ять графічне зображення?
2. Як описати параметр im?
3. Яка процедура виводить з пам’яті на екран графічне зображення?
4. Чим відрізняються різні значення маски Mode в процедурі putimage?

6. Домашнє завдання

1. Повторити всі процедури модуля Graph;
2. Продовжувати працювати над власним малюнком;
3. Продовжувати працювати над завданням про маятник.

нагору

Урок 9. Використання рекурсії для графічних побудов

Мета:
навчальна: перевірити знання теоретичного матеріалу, уміння опрацьовувати графічну інформацію на прикладі практичного завдання;
розвивальна: формувати абстракне мислення та просторові уявлення, розвивати творчі здібності;
виховна: виховувати компютерну грамотність, акуратність під-час виконання малюнків та креслень.

Обладнання: персональні комп’ютери, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку. Робота в комп’ютерному класі - практичне заняття;

1. пояснення деяких завдань, запис програм на дошці;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Учні виконують за комп’ютерами домашнє завдання.

Завдання 1. Вивести на екран зображення малюнка, що коливається(маятник)

PROGRAM MAYATNIK;
USES GRAPH,CRT;
  VAR i:real;
    R,x0,y0:real;
    gm,gd,j:integer;
    x,y:integer;
  BEGIN
    gd:=detect;
    initgraph(gd,gm,' ');
    if graphresult<>grok then halt;
    setbkcolor(3);
    r:=150;
    x0:=300; y0:=200;

    for j:=1 to 3 do
    begin
      i:=5.7;
      while i<=8.3 do
    begin
      x:=trunc(x0+R*cos(i)-R*sin(i));
      y:=trunc(y0+R*sin(i)+R*cos(i));
      setcolor(1);
      line(300,200,x,y);
      circle(x,y,15);
      delay(500);
      setwritemode(1);
      line(300,200,x,y);
      setcolor(3);
      circle(x,y,15);
      setwritemode(0);
      i:=i+0.03;
    end;

      while i>=5.7 do
    begin
      x:=trunc(x0+R*cos(i)-R*sin(i));
      y:=trunc(y0+R*cos(i)+R*sin(i));
      setcolor(1);
      line(300,200,x,y);
      circle(x,y,15);
      delay(500);
      setwritemode(1);
      line(300,200,x,y);
      setcolor(3);
      circle(x,y,15);
      setwritemode(0);
      i:=i-0.03;
    end;
  end;
end.

2. Пояснення і запис на дошці завдань.

Питання:що таке рекурсія?

РЕКУРСІЯ, як відомо,- це виклик деякогю процедурою або функцією самої себе. Використання рекурсії для графічних побудов проілюструємо на прикладі побудови прямокутної спіралі.

Завдання1. Побудувати прямокутну спіраль з початковим значенням довжини перших двох сторін 10 пікселів і кінцевим 320 з центром посередині екрана. Кожну наступну пару сторін збільшувати на 10%.
(Завдання з поясненням записується на дошці )
Наступне завдання: учні аналізують кожний рядок надрукованих на листку паперу програм.

Завдання 2. Побудувати зображення "гілки дерева".

uses graph,crt;
var
  driver,mode:integer;
const
  start=1; {2} {8}
  del=4; {4} {8}

procedure rec(d,len,x,y:integer;kt:real);
var
  x0,y0:integer;
  i:real;
begin
  if d<6 then
  begin
    setcolor(d);
    x0:=x+round(len*sin(kt));
    y0:=y-round(len*cos(kt));
    line(x,y,x0,y0);
    delay(2000);
    i:=-2;
    while i<=2 do
    begin
      rec(d+1,round(len/2),x0,y0,i);
      i:=i+(del/d);;
    end;
  end;
end;

begin
  driver:=detect;
  initgraph(driver,mode,'');

  setcolor(lightgreen);
  ec(start,200,300,400,0.0);

  readln;
  closegraph;
end.

Завдання 2-a.

uses graph, crt;
var
  driver,mode:integer;
const
  start=2; {2} {8}
  del=4; {4} {8}

procedure rec(d,len,x,y:integer;kt:real);
var
  x0,y0:integer;
  i:real;
  begin
    if len>10 then
    begin
      setcolor(d);
      x0:=x+round(len*sin(kt));
      y0:=y-round(len*cos(kt));
      line(x,y,x0,y0);
      delay(2000);
      i:=-2;
      hile i<=2 do
      begin
        rec(d+1,round(len/2),x0,y0,i);
        :=i+2;
      end;
    end;
  end;

  begin
    river:=detect;
    initgraph(driver,mode,'');

     setcolor(lightgreen);
    rec(start,200,300,400,0.0);

    readln;
    closegraph;
  end.

Завдання 2-б.

uses graph, crt;
var
  driver,mode:integer;
const
  start=8; {2} {8}
  del=8; {4} {8}

procedure rec(d,len,x,y:integer;kt:real);
var
  x0,y0:integer;
  i:real;
  begin
    if len>10 then
    begin
      { setcolor(d);}
      x0:=x+round(len*sin(kt));
      y0:=y-round(len*cos(kt));
      line(x,y,x0,y0);
      delay(2000);
      i:=-2;
      while i<=2 do
      begin
        rec(d+1,round(len/2),x0,y0,i);
        i:=i+(del/d);
      end;
    end;
  end;

begin
  driver:=detect;
  initgraph(driver,mode,'');

  setcolor(lightgreen);
  rec(start,200,300,400,0.0);

  readln;
  closegraph;
end.

3. Закріплення матеріалу. Робота за комп’ютерами.

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

4. Підведення підсумків

Питання до класу:

1. Що таке рекурсія?
2. Чи можна завдання, які виконувались зробити без використання рекурсій?
3. Чому в деяких завданнях краще використовувати рекурсію?

5. Домашнє завдання

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

нагору

Урок 10. Особливості виведення текстових повідомлень в графічному режимі

Мета: навчити практичного використання процедур модуля Graph, розвивати творчі здібності,підтримувати прагнення до засвоєння нових знань, сприяти естетичному вихованню при побудові графічних фігур.

Обладнання: персональні комп’ютери, опорний конспект до заданої теми, роздатковий матеріал.

Тип уроку: урок формування умінь і навичок.

Форма організації уроку.

Робота в комп’ютерному класі – лекційно - практичне заняття;

1. Пояснення нового матеріалу;
2. парна та індивідуальна робота за комп’ютером.

Хід уроку

1. Актуалізація опорних знань.

Питання до класу:

Давайте згадаєм, як видяться текcтові повідомлення в звичайному текстовому режимі роботи екрану комп’ютера?

1). Скільки символів у рядку і в стовпці містить екран дисплея у текстовому режимі? ( 80 x 25).
2). Яка процедура встановлює курсор в позицію екрану з заданою координатою?
3). Який модуль містить цю процедуру?
4). Які ще процедури містиь даний модуль?
5). Яка процедура виводить текст?
6). З чого складається графічний екран дисплея ?
7). Де початок відліку точок в гафічному режимі?
8). Назвати процедуру для задання кольору фону.
9). Назвати процедуру для задання кольору майбутнього зображення.
10). Яка відміннісь між процедурами SetFillStyle і FloodFill ?

2. Пояснення нового матеріалу.

В комплект поставки пакета Турбо Паскаль включається набір штрихових шрифтів. Файли цих шрифтів мають розширення *.CHR
На екран в гафічному режимі можна виводити тільки текстові величини типу string. Числові величини попередньо треба перевести в рядкові процедурою Str.
Для виведення тексту існують такі основні процедури:

Текст i шрифти в графiчному режимi

OutText('текст') - вивiд тексту починаючи з поточного положення курсора;

OutTextXY(x,y,'текст') - вивiд тексту починаючи з координати x,y;

SetTextStyle(шрифт, напрям, розмiр) - встановлення потрiбного текстового стилю:

Шрифт (Font):

0 - стандартний      DefaultFont
1 - жирний               TriplexFont
2 - малий,тонкий    SmallFont
3 - прямий               SansSerifFont
4 - готичний             GothicFont

можна використовувати в версії 7.0 ще такі шрифти:

5- рукописний
6- одношрифтовий
7- красивий похилий
8- штифт типу Times Poman
9- збільшений
10- великий двохшрифтовий

Напрям (Direction) :

1 - горизонтальний   HorizDir
2 - вертикальний    VertDir

Розмiр (CharSize) - (1-10)

1 - 8 x 8 пiкселiв
2 - 16 x 16 пiкселiв
n - 8n x 8n пiкселiв

При CharSize=i (1<= i <=10) символи, які складаються з точок будуть займати на екрані прямокутник розміром 8*i X 8*i пікселів.

Є можливість по-різному регулювати ширину і висоту символа:
UserCharSize;
Setusercharsize;

SetTextJustify(по горизонталi, по вертикалi) - встановлення точки прив'язки для розмiщення текстового рядка:
По горизонталi

0 - злiва             LeftText
1 - по центру    CenterText
2 - справа         RidhtText

По вертикалi

0 - внизу BottomText
1 - по центру CenterText
2 - вгорi TopText

Приклад1.

settextjustify(1,1);
Outtextxy(100,100,’A’);

По-змовчуванні в якості точки привязки для розміщення текстового рядка задається лівий верхній кут першого символу.

Приклад 2.

SetColor(LightGreen);
SetTextStyle(0,0,5);
OutTextXY(130,170,'Iнформатика');

TextHeight('текст') - функцiї повертають вiдповiдно
TextWidth('текст') - висоту та ширину текстового блоку

Приклад 3. Намалювати прямокутник з вказаними вершинами

uses crt,graph;
var dv,md,i:integer;
begin
  dv:=detect;
  initgraph(dv,md,'');

  Cleardevice;
  setbkcolor(7);
  setcolor(4);
  rectangle(220,140,420,340);

  SetTextStyle (0,0,2);
  SetTextJustify(2,2);
  OutTextXY(220,340,’A’);

  SetTextJustify(2,0);
  utTextXY(220,140,’B’);

  SetTextJustify(...);
  OutTextXY(.......,’С’);

  SetTextJustify(...);
  OutTextXY(.......,’D’);

  readkey;
  closegraph;
end.

Учні продовжують записи в зошитах самостійно для виведеннч букв ‘C’, ‘D’.

3. Закріплення матеріалу ( парна та індивідуальна робота за комп’ютером).

У кожного учня окреме завдання з конкретним малюнком:

4. Підведення підсумків

Оголошення оцінок за урок (учням, які відповідали і за практичну роботу)

Питання до класу:

1. Назвати процедуру для виводу тексту починаючи з поточного положення курсора;

2). Назвати процедуру для встановлення потрiбного текстового стилю:
3). Назвати процедуру для встановлення точки прив'язки для розмiщеннятекстового рядка:

5. Домашнє завдання

• Вивчити всі процедури розглянуті на уроці;
• Написати програму для виведення на екран монітора малюнка для будь-якого завдання з геометрії.

нагору

Урок 11. Тематичне оцінювання з теми "Графіка в Turbo Pascal

Мета: перевірити практичне використання процедур модуля Graph, розвивати творчі здібності,підтримувати прагнення до засвоєння нових знань, сприяти естетичному вихованню при побудові графічних фігур.

Тип уроку: урок перевірки умінь і навичок.

Форма організації уроку: письмова контрольна робота.

ВАРІАНТ 1.

1. Вказати процедуру, для задання способу заповнення замкнутої області.(1б.)

1. SetbkColor;
2. FloodFill;
3. SetFillStyle;
4. Немає.

2. Дано фрагмент програми. В якому рядку допущено помилку?(1б.)

1. Setcolor(1);
2. Circle(300,100,100);
3. Setfillstyle(2,red);
4. FloodFill(350,150,2);
5. Немає.

3. Дано фрагмент програми. В якому рядку допущено помилку?(1б.)

1. getimage(110,30,290,205);
2. putimage(110,30,im,0);
3. sound(f[k]);
4. delay(200);
5. Немає.

4. Побудувати круг радіусом 100, центр якого співпадає з центром екрану дисплея. Колір фону-червоний, колір кола- білий. (2б.)

5. Використовуючи процедури модуля Graph написати програму, яка виводить на екран 20 вкладених різнокольорових прямокутників (використати цикл і генератор випадкових чисел).(3б.)

6. Відомо, що деяке графічне зображення знаходиться в прямокутнику з коордитанатими (250, 150, 350, 250) . Написати фрагмен програми для руху даного графічного зображення, з верхнього правого кута до нижнього лівого кута екрану дисплея.(4б.)

ВАРІАНТ 2.

1. Вказати процедуру для встановлення точки прив’язки для розміщення текстового рядка.(1б.)

1. OutTextxy;
2. SettextStyle;
3. Settextjustify;
4. Немає.

2. Дано фрагмент програми. В якому рядку допущено помилку?(1б.)

1. SetColor(1);
2. Rectangle(160,40,630,490);
3. Outtextxy(170,50,’Прямокутник’);
4. Немає.

3. Дано фрагмент програми. В якому рядку допущено помилку?(1б.)

1. Setcolor(blue);
2. Settexstyle(0,0,4);
3. Outtextxy(55,40,’ Україна’);
4. Немає.

4. Побудувати прямокутник з вершинами (80,80), (170,80), (170,150),(80,150). Колір фону-жовтий, колір прямокутника-синій. (2б.)

5. Використовуючи процедури модуля Graph написати програму, яка вивидить на екран 20 вкладених різнокольорових кіл (використати цикл і генератор випадкових чисел).(3б.)

6. Відомо, що деяке графічне зображення знаходиться в прямокутнику з коордитанатими (50, 50, 300, 200) . Написати фрагмент програми для руху даного графічного зображення, з нижнього правого кута до верхнього лівого кута екрану дисплея.(4б.)

ДОДАТКОВЕ ЗАВДАННЯ
Зобразити лінію, яка рухається по колу з одним закріпленим кінцем.

нагору