У даній роботі методичне виклад побудовано 'від простого до складного ". Спочатку розглядаються графічні можливості мови програмування Turbo Pascal на прикладі найпростіших програм, що реалізують лінійні алгоритми. Далі вивчається реалізація розгалужуються і циклічних алгоритмів в графіку, що дозволяє легко перейти до створення програм, що імітують рух. В роботі розглядаються і додатки комп'ютерної графіки: побудова графіків функцій, гістограм. діаграм, візерунків і деяких кривих, використовуючи елементи вищої математики.
Починаючи з 4-й версії Турбо-Паскаля для IBM PC, з'явилася потужна графічна бібліотека, організована в модуль GRAPH.
Використання модуля дозволяє перетворити навчальні програми в повноцінні програмні продукти, що володіють зручним інтерфейсом і красивим оформленням.
Приступаючи вирішувати завдання на тему "Графіка". необхідно пам'ятати, що:
] У графічному режимі екран являє собою сукупність точок, кожна з яких може бути пофарбована в один з 16 кольорів;
] Координати точок зростають зліва направо і зверху вниз; ліва верхня точка має координати (0,0), а права нижня (640,480);
] Для того, щоб програма могла виводити на екран графічні примітиви (лінії, кола, прямокутники), необхідно ініціалізувати графічний режим.
Шаблон графічної програми виглядає наступним чином:
If Errcode = grOk then
I.Рісункі, побудовані з простих геометричних фігур.
Один з найпростіших способів побудови графічного зображення заснований на використанні елементарних геометричних фігур - відрізків прямих, кіл, прямокутників, дуг, еліпсів і т. П.
Побудоване зображення часто нагадує дитячі малюнки або картинки для гри в мозаїку.
Програмувати такі картинки нескладно, однак, потрібна попередня копітка робота по визначенню розмірів фігур і їх розміщення на екрані.
Приклад 1. Наступна програма дозволяє отримати на екрані зображення будиночка.
В якості самостійної роботи можна запропонувати школярам зобразити на екрані ЕОМ малюнки запропоновані в навчальному посібнику під редакцією.
II.Построеніе перетинів в просторових геометричні фігури.
Для розвитку просторової уяви та ознайомлення з основними геометричними тілами можна запропонувати учням написати програми, які виведуть на екран комп'ютера зображення призм, пірамід, конусів і т. П. З побудовою різного роду перетинів.
Приклад 1. В результаті виконання наступної програми, в трикутній піраміді буде побудовано перетин, що проходить через бічне ребро і медіану підстави.
tr: array [1..5] of pointtype = ((x: 320; y: 80), (x: 440; y: 360), (x: 320; y: 440),
driver, mode, e, xc, yc: integer;
Приклад 2. Наступна програма вирішує завдання: в прямокутному паралелепіпеді провести діагональне перетин.
var driver, mode: integer;
Для самостійної роботи школярам можна запропонувати побудувати креслення до наступних завдань:
1. У трикутній піраміді побудувати перетин, паралельне основи.
2. У трикутній піраміді побудувати перетин, що проходить через одну зі сторін підстави і середину протилежної ребра.
3. У правильній чотирикутної піраміді провести перетин, що проходить через діагональ підстави і вершину піраміди.
4. У правильної чотирикутної піраміді провести перетин, що проходить через діагональ підстави і середину бічного ребра.
5. У правильній чотирикутної піраміді провести розтин, паралельне основи і проходить через середину бічного ребра.
6. У прямокутному паралелепіпеді провести перетин, що проходить через сторону нижньої основи і протилежну сторону верхнього підстави.
7. У прямій чотирикутної призмі провести перетин, що проходить через діагональ нижньої основи і одну з вершин верхньої основи.
8. У прямокутному паралелепіпеді побудувати перетин, що проходить через одну зі сторін нижньої основи і одну з вершин верхнього.
9. У прямокутному паралелепіпеді побудувати перетин, що проходить через одне з його ребер і точку перетину діагоналей противолежащей цьому ребру межі.
10. У прямому циліндрі побудувати осьовий переріз.
11. У правильної шестикутної піраміди побудувати перетин, що проходить через вершину і велику діагональ підстави.
12. У правильної шестикутної призми побудувати перетин, що проходить через велику діагональ нижньої основи і одну зі сторін верхнього.
Розгалужуються алгоритми в графіку.
Алгоритми розгалуження використовуються в даному курсі на основі розробки програм-меню «Види геометричних фігур».
Учень повинен написати програму, яка може проілюструвати всі наявні види тієї або іншої геометричної фігури. Програма повинна виконувати наступні дії: на екрані з'являється список різних типів геометричної фігури, користувач вибирає якийсь із цих типів, і програма виводить на екран відповідну ілюстрацію.
Як приклад можна привести програму «Види чотирикутників». Дана програма надає користувачеві меню, з якого він може вибрати чотирикутник певного виду (квадрат, ромб, прямокутник, паралелограм, трапеція). На екрані з'являється зображення вибраного чотирикутника.
var driver, mode: integer;
xc, yc, x1, x2, y1, y2, y3, y4, x3, x4, v: integer;
writeln ( 'Виберіть вид чотирикутника:');
writeln ( '1 - квадрат'); writeln;
writeln ( '2 - ромб'); writeln;
writeln ( '3 - прямокутник'); writeln;
writeln ( '4 - паралелограм'); writeln;
writeln ( '5 - трапеція'); writeln;
writeln ( '6 - вихід'); writeln;
Для самостійної роботи пропонуються наступні варіанти:
1. «Типи трикутників». Програма надає користувачеві меню, з якого він може вибрати певний тип трикутника (прямокутний, гострокутний, тупокутний). На екрані повинен з'явитися малюнок трикутника даного типу.
2. «Типи ліній в трикутнику». Програма надає користувачеві меню, з якого він може вибрати тип лінії трикутника (медіана, висота, бісектриса). На екрані повинен з'явитися малюнок трикутника з лінією обраного типу, причому вона повинна бути виділена іншим кольором або миготінням.
3. «Види просторових фігур». Програма надає користувачеві меню, з якого він може вибрати певну фігуру (паралелепіпед, призму, конус, циліндр, різні варіанти усічених фігур, похилих фігур). На екрані повинен з'явитися малюнок обраної фігури.
Циклічні алгоритми в графіку.
I.Рісункі, побудовані з використанням одного циклу
Як приклад можна розглянути таку задачу: зобразити візерунок, що складається з п'ятнадцяти кіл різного радіусу із загальним центром, причому кожна окружність повинна бути виділена іншим кольором.
var x, y, r, dx, i, dr, mode: integer;
for i: = 1 to 15 do
II.Рісункі, побудовані з використанням датчика випадкових чисел.
Багато цікавих картинок може бути побудовано за допомогою датчика випадкових чисел. Зображення, створене з використанням випадкових величин (визначають, зокрема, складові елементи зображення, їх кольору, розміри і розташування на екрані), має ефект непередбачуваності, неповторності.
Приклад 1. Дана програма, встановлює графічний режим і заповнює екран 30000 точками випадкового кольору. Датчик випадкових чисел використовується і для вибору координат точок.
var i, dr, mode, x, y: integer;
for i: = 1 to 30000 do
Приклад 2. У наступній програмі прямокутне вікно екрану заповнюється 100 випадковими колами (випадково вибраними координатами центру, радіуса та кольору).
var i, drv, mode: integer;
Після того як учні оволодіють навичками організації циклів, можна перейти до використання підпрограм. Тут відбувається перехід від використання абсолютних координат для завдання фігури до її завданням у відносних координатах (наприклад в програмах, що імітують рух).
Імітація руху в графіці.
Робота по цій темі наближає нас до створення простих ігрових програм. Рух створюється за рахунок стирання зображення на старому місці і малювання його на новому місці (з невеликим зсувом). При складанні таких програм широко використовується затримка. Для початку можна запропонувати школярам розробити програму руху елементарної фігури по вертикалі або горизонталі.
Приклад 1. В якості прикладу наводиться така програма, в результаті виконання якої, прямокутник оббігає межі екрану за годинниковою стрілкою.
var xl, yl, xp, yp, d, mode: integer;
procedure reg (xl, yl, xp, yp: integer);
rectangle (xl, yl, xp, yp);
rectangle (xl, yl, xp, yp);
while xp<640 do
while yp<480 do
rectangle (xl, yl, xp, yp);
Для самостійної роботи можна запропонувати хлопцям написати програму руху кола по горизонталі, по вертикалі, по периметру екрану як за годинниковою, так і проти годинникової стрілки.
Для творчої роботи з даної теми учні повинні написати програму, яка імітує рух намальованою фігурки. Варіанти фігурок, рух яких має бути імітований програмою можна взяти з навчального посібника під редакцією.
Як приклад хочеться привести учнівську програму, в результаті виконання якої відбувається рух мурашки (рис.10 в додатку 1) по екрану, причому мураха рухає ніжками.
procedure murash (x, y: integer; spr: byte; show: boolean);
В якості самостійної роботи учням можна запропонувати написати такі програми:
1. Зобразити на екрані відрізок, що обертається в площині екрану навколо:
В) точки, що ділить відрізок у відношенні 1: 3
2. Зобразити на екрані правильний трикутник, що обертається в площині екрану навколо свого центру.
3. Зобразити на екрані прямокутник, що обертається в площині екрану навколо:
А) однієї зі своїх вершин;
Б) однієї з його сторін;
В) однієї зі своїх діагоналей.
Додатки комп'ютерної графіки.
Одним з додатків комп'ютерної графіки є наочне, яскраве уявлення результатів математичних розрахунків. Намальований графік функції, накреслені гістограми та діаграми роблять результати математичних розрахунків доступному для огляду, наочніше і зрозуміліше.
Побудова графіка можна виконувати або точковим методом. або кусочно-лінійним. При першому способі графік будується як послідовність точок, розташованих максимально близько. Відбувається "попіксельно" перебір значень аргументу з виставленням точок з відповідними Y - координатами. При кусково-лінійному методі задається математичний крок # 8710; X, і розраховується послідовність значень (Xi, Yi):
У цьому випадку графік будується в вигляді відрізків прямих, проведених через точки (Xi, Yi), (Xi + 1, Yi + 1), де i = 0,1,2, ..., n.
Розглянемо кусочно-лінійний спосіб побудови графіка.
Щоб отримати на екрані дисплея графік функції необхідно виконати наступні дії:
1. Визначити межі значень аргументу, в межах яких буде будуватися графік: Хmin і Xmax.
2. Для даної області значень аргументу визначити граничні значення функції: Ymin і Ymax. Ці значення можуть бути оціночними, не обов'язково точними.
3. Поставити кордону графічного вікна, в межах якого буде малюватися графік функції: [XGmin, XGmax], [YGmin, YGmax]. Оскільки в графічних координатах вертикальна вісь спрямована вниз, то YGmin> YGmax.
4. Перевести математичні координати (X, Y) в графічні (XG, YG). використовуючи такі формули:
Тут квадратні дужки означають округлення до цілого значення (функція round).
5. Вибирається крок h:
Наступна програма зображує графік функції. y = cos (x) у випадку, використовуючи кусково-лінійний метод, з позначенням осей координат.
var driver, mode, i: integer; y, x, h: real;
kx, ky: real; xg, yg: integer;
x0, y0, xgmax, xgmin, ygmin, ygmax: integer;
Для самостійної роботи учням можна запропонувати досліджувати і побудувати графіки будь-яких елементарних функцій, що вивчаються в шкільному курсі математики ..
Гістограми і секторні діаграми є ефективним засобом відображення числових даних в тих випадках, коли потрібно в наочній формі дати уявлення про співвідношення числових величин з деякої сукупності. Гістограма (столбчатая діаграма) - це кілька прямокутників, підстави яких дорівнюють, а висоти пропорційні відповідним числовим величинам. Секторная діаграма - це коло, площі секторів якого пропорційні відповідним величинам.
Приклад 1. В результаті виконання наступної програми на екран виводиться гістограма успішності учнів класу, - наприклад за підсумками контрольної роботи (іспиту) з якого-небудь предмету.
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];
За допомогою графіки можна створювати красиві візерунки. Наступна програма малює візерунок, який утворений в такий спосіб. На екрані будуються вершини правильного восемнадцатіугольніка, центр якого збігається з центром екрана. Кожна з вісімнадцяти вершин з'єднується відрізками з усіма іншими вершинами. Координати вершин задаються формулами:
yi = yl + R * sin (2πi / 18); i = 1, ..., 18
де i - номер вершини, R - радіус кола, описаного навколо мноугольніка, xl, yl - координати його центру. Для уникнення повторного креслення відрізків між одними і тими ж вершинами, кожна з них з'єднується тільки з вершинами, що мають більший номер.
var i, j, n, xc, yc, r, driver, mode: integer;
x, y: array [1..18] of integer;
xc: = getmaxx div 2;
yc: = getmaxy div 2;
for i: = 1 to n-1 do
for j: = i + 1 to n do
Приклад 2. Наступна програма викреслює «тікає квадрат». «Убегающий квадрат» утворений вкладеними квадратами, вершини кожного наступного квадрата ділять боку попереднього в заданому відношенні. Таким чином, квадрати стають не тільки все менше і менше, але і повертаються на деякий кут.
Вихідними даними для програми є координати лівого верхнього кута зовнішнього квадрата (100, 100), довжина його боку (сто точок екрану), кількість квадратів, які повинні бути побудовані (30) і значення h = 0.8. Для визначення координат вершин чергового квадрата іспользуютcя співвідношення, що дозволяють за відомими координатами кінців відрізка (X1, Y1), (X2, Y2) і заданому відношенню h, в якому деяка точка ділить цей відрізок, визначити координати (X, Y) цієї точки.
xl, yl, i, j, n, xc, yc, r: integer;
x, y, xd, yd: array [0..3] of integer;
rmu, smu, t, dt: real;
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]);
line (x [j], y [j], x [(j + 1) mod 4], y [(j + 1) mod 4]);
В якості самостійної роботи можна запропонувати учням зобразити візерунок, складений з вкладених трикутників, п'ятикутників і шестикутників. Також можна дати завдання: отримати візерунок з декількох картинок вкладених квадратів.
Криві в графіку.
Любителям математики добре відомі такі криві як спіраль Архімеда, равлик Паскаля, кардіоїда, трёхлістнік і чотирьохлистника. Рівняння кривих в полярних координатах мають такий вигляд:
Кут змінюється від 0 до 2π, перерахунок полярних координат в декартові виконується за формулами:
Для найбільш підготовлених учнів можна запропонувати зобразити на екрані такі криві: равлика Паскаля, кардиоиду, трилисник, семипелюсткова троянду ( # 961; = sin7 # 966;). двухлепесткових троянду (# 961; = 1 + sin2 # 966;) і петельне зчеплення (# 961; = 1 + 2cos2 # 966;).
Організація інтерфейсу користувача при розробці професійних програм - робота не менш (а часто - і більше) складна, ніж реалізація логічної або розрахункової частини завдання.
Розробка програм, що використовують графіку - це мабуть, один з найбільш ефективних способів навчання програмуванню школярів. При вивченні операторів графіки не тільки відбувається навчання школярів елементам програмування як такого, але і непрямим шляхом хлопці вчаться орієнтуватися на координатної площині, досліджують як плоскі, так і просторові геометричні фігури, тим самим у школярів розвивається просторове мислення, що важливо при вивченні стереометрії в курсі геометрії.
Важливий естетичний аспект навчання графіки. Кольорова графіка на персональних комп'ютерах дуже красива. Школярі із задоволенням складають програми з використанням операторів графіки, показують один одному результати своєї роботи. При створенні графіки елемент творчості в вивченні програмування стає особливо наочним.
1. Селюн з програмування. М.: Наука, 1988.
2. Гнездилова графіка для школярів. М.: Наука, 1987.
[1] У розглянутих далі прикладах для економії місця не будемо перевіряти функцію GraphResult.