Головна » Інформатика |
Мета: Ввести поняття про графічних операторів у Паскалі. Навчити учнів правильно складати програми по обробці графічних функцій й операцій. Завдання: вивчити графічні операції й функції на прикладах найпростіших фігур, навчитися використовувати графічні оператори для складання програм на побудову зображень (крапок, ліній, окружностей). ПРОГРАМНА ПІДТРИМКА мова програмування Паскаль (версія 7.0) УСТАТКУВАННЯ: комп’ютерна презентація
Тип уроку: вивчення нового матеріалу
Хід уроку Організаційний момент (повторити структуру програми на мові програмування Паскаль) Мотивація навчальної діяльності Екран дисплея ПК являє собою прямокутне поле, що складається з великої кількості крапок. Дисплей може працювати в текстовому й графічному режимах. Але на відміну від текстового режиму в графічному режимі є можливість змінювати кольори кожної крапки. Щоб зробити процес графічного програмування більше ефективним, фірма Borland International розробила спеціалізовану бібліотеку Graph (у цьому бібліотечному модулі втримуються графічні процедури й функції), набір драйверів, що дозволяють працювати з різними типами моніторів, і набір шрифтів для виводу на графічний екран текстів різної величини й форми. Апаратна підтримка графіки ПК забезпечується двома основними модулями: відеомонітором і відеоадаптером. Відеоадаптер – це складний електронний пристрій. Конструктивно він являє собою самостійну електронну плату або може бути вбудований у системну плату. Який би адаптер не був установлений на комп’ютері, ми можемо використати той самий набір графічних процедур і функцій Турбо Паскаля завдяки тому, що їхнє кінцеве настроювання на конкретний адаптер здійснюється автоматично. Це настроювання виконують графічні драйвери. Вивчення графічних операторів і функцій у Паскалі має велике значення, тому що тепер ви зможете не тільки виконувати різні операції із числами й символами, але й працювати над оформленням програм, створювати прості й рухливі зображення, а також графіки функцій.
Вивчення нового матеріалу У мові TURBO Pascal є значна кількість графічних процедур і функцій. Нам знадобляться лише деякі з них. Для того, щоб компілятор "дізнавався" їхньої назви, ми повинні після заголовка програми розмістити рядок наступного виду: uses Graph; (що в перекладі означає «використається графіка»). Дотепер під час нашої роботи за комп'ютером екран завжди перебував у текстовому режимі, тому на екрані можна було бачити тільки лише символи (правда, включаючи, так називані «символи псевдографіки»). Для малювання прямих, окружностей й ін. необхідно перевести екран у графічний режим. Для включення графічного режиму використається процедура InitGraph. Найпростіша програма може мати вигляд:
Приклад 1.
PROGRAM Primer_1; uses Graph; var Gd,Gm: Integer; BEGIN Gd:=VGA; { Графічний адаптер - VGA } Gm:=VGAHi; { Графічний режим VGAHi (640x480) } InitGraph (Gd,Gm,'..\bgi'); { Включити графічний режим } If GraphResult=grOk then { Якщо режим включився успішно } { Намалювати відрізок прямій } Line (0,0,639,479); ReadLn END.
Ми бачимо, що в процедури InitGraph три параметри. У якості перших двох фактичних параметрів повинні стояти імена цілих (integer) змінних. Не будемо вдаватися в подробиці, чому це так; замість цього з’ясуємо їхнє призначення. Перший параметр є кодом графічного адаптера (тобто електронної схеми, що управляє виводом інформації на екран). (Справа в тому, що на IBM-сумісних комп’ютерах застосовується ряд стандартних графічних адаптерів, що носять назви CGA, EGA, VGA.) По нашій програмі можна здогадатися, що у використовуваних нами комп’ютерах використається адаптер VGA, і компілятор сам «довідається» слово VGA і замінить його на потрібне ціле число (насправді рівне 9, але ми цього можемо й не запам’ятовувати). Кожен графічний адаптер дозволяє використати кілька графічних режимів, що відрізняються кількістю кольорів і роздільною здатністю (надалі ми довідаємося, що це таке). І другий з параметрів саме призначений для того, щоб указати, який із графічних режимів варто включити. Поки що ми обмежимося лише одним графічним режимом VGAHi. Третій параметр є рядком, що містить шлях до файлу, що називається EGAVGA.BGI. У цьому файлі втримується драйвер (така спеціальна програма), необхідний для роботи з адаптерами EGA й VGA. І, як легко побачити з нашого прикладу, файл цей перебуває в підкаталозі TPBGI. Все вищевикладене необхідно знати кожному грамотному користувачеві IBM-сумісних комп’ютерів. Однак у нашій лабораторній роботі досить використати конструкцію, використану в першому прикладі, для включення графічного режиму. (І не страшно, якщо в ній не все зрозуміло.) Для того, щоб ми могли що-небудь намалювати на екрані, нам потрібно вміти задавати положення на екрані того, що ми малюємо. Для цього з екраном зв’язується система координат наступного виду: (0,0) X + -----------------------------------> | | | Y Кожна крапка на екрані насправді являє собою дуже маленький прямокутник (і оскільки це не зовсім крапка, то іноді використовують спеціальний термін – «піксел»). Кількість крапок (пікселів), що вміщується на екрані по вертикалі й горизонталі, називають роздільною здатністю. Роздільна здатність екрана в режимі VGAHi - 640x480. Це означає, що по горизонталі на екрані вміщається 640 крапок, а по вертикалі - 480. Крапка в лівому верхньому куті екрана має координати (0,0). Координата X будь-якої крапки екрана лежить у межах від 0 до 639, а координата Y - у межах від 0 до 479. Як ви вже догадалися, процедура Line (x1,y1,x2,y2) малює на екрані пряму, що з’єднує крапки (x1,y1) і (x2,y2).
Приклад 2. Зобразити на екрані прямокутний трикутник з вершинами (320, 10), (120,210), (520,210). PROGRAM Primer_2; uses Graph; var Gd,Gm: Integer; BEGIN Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi'); If GraphResult=grOk then begin Line (120,210,520,210); { Горизонтальний відрізок } Line (120,210,320,10); { Лівий катет } Line (320,10,520,210); { Правий катет } ReadLn end; END. Досить образливо працювати на кольоровому моніторі тільки із чорно-білими зображеннями. Для завдання кольорів малювання прямих, окружностей, крапок й ін. використається процедура SetColor. У якості єдиного її параметра потрібно вказати ціле число, що є кодом кольорів. Кольори кодуються у відповідності з наступною кодовою таблицею:
Якщо Ви добре знаєте англійську мову, то Вам буде зручніше використати не числа, а відповідні їм ідентифікатори; якщо ж Ви англійську знаєте погано, то однаково корисніше запам’ятати англійські назви кольорів, чим запам’ятовувати числа, що кодують кольори.
Приклад 3. Зобразити той же трикутник, що й у попередньому прикладі, але зробити сторони трикутника різнобарвним. PROGRAM Primer_3; uses Graph; var Gd,Gm: Integer; BEGIN Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi'); If GraphResult=grOk then begin SetColor (LightMagenta); { Кольори - світло-бузковий } Line (120,210,520,210); { Горизонтальний відрізок } SetColor (LightCyan); { Кольори - світло-ціановий } Line (120,210,320,10); { Лівий катет } Set Color (Green); { Кольори - зелений } Line (320,10,520,210); { Правий катет } ReadLn end END.
Приклад 4. (самостійне виконання) Різнобарвні промені. PROGRAM Primer_4; uses Graph; const Center=320; Center=240; Radius=200; var Gd,Gm: Integer; i : Integer; dx,dy: Integer; BEGIN Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi'); If GraphResult=grOk then begin For i:=0 to 160 do begin dx:=Round (Radius*sin(i*pi/80)); dy:=Round (Radius*cos(i*pi/80)); SetColor (i MOD 16); Line(Center,Center,Center+dx,Center+dy) end; ReadLn end END.
Приклад 5 Концентричні окружності. Для малювання окружностей використається процедура Circle із трьома цілочисельними параметрами, що задають координати центру окружності й радіус.
PROGRAM Primer_5; uses Graph; const Center=320; Center=240; var Gd,Gm: Integer; i : Integer; BEGIN Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi'); If GraphResult=grOk then begin For i:=0 to 23 do Circle (Center,Center,i*10); ReadLn end END. Домашнє завдання: Скласти програму побудови різнокольорових окружностей, радіуси яких збільшуються.
Урок 2 ТЕМА: Використання в програмах процедур і функцій для побудови найпростіших графічних зображень. Мета: Навчити складати програми на обробку графічних операторів та побудову графічних зображень. Завдання: вивчити графічні операції й функції на прикладах найпростіших фігур, навчитися використовувати графічні оператори для складання програм на побудову зображень. актуалізувати знання з опису графічних операцій; вивчити правила введення в програму графічних процедур і функцій; пояснити призначення й дати рекомендації з використання процедур і функцій модуля Graph; навчити використовувати в програмах графічні процедури й функції для побудови зображень; учити складати програми самостійно; розвивати вміння й навички складання програм на побудову графічних зображень; розвивати навички самостійного освоєння основних прийомів роботи на ПЕОМ; виховувати акуратність у роботі.
ПРОГРАМНА ПІДТРИМКА мова програмування Паскаль (версія 7.0) УСТАТКУВАННЯ: комп’ютерна презентація
Тип уроку: вивчення нового матеріалу
Хід уроку Організаційний момент Фронтальне опитування: Як підключити бібліотеку графічних процедур?
Вивчення нового матеріалу Сьогодні на уроці ми розберемо ще кілька процедур для побудови зображень.
Приклад 1. Побудувати зображення
PROGRAM Primer_1; uses Graph; var grDriver: Integer; grMode : Integer; i,x,y : Integer; { ---------------------------------- } PROCEDURE Rect (x,y,x1,y1: Integer); { Малює прямокутник, у якого лівий нижній кут } { має координати (x,y), а правий верхній - (x1,y1) } BEGIN Line (x,y,x,y1); { Ліва сторона } Line (x1,y,x1,y1); { Права сторона } Line (x,y1,x1,y1); { Верхня сторона } Line (x,y,x1,y) { Нижня сторона } END; { -і- } BEGIN GrDriver:=VGA; GrMode:=VGAHi; InitGraph (grDriver,grMode,'..\bgi'); If GraphResult=grOk then begin For i:=1 to 15 do begin x:=i*30; y:=i*25; SetColor (i); Rect (x,y,x+50,y+60) end; ReadLn end END.
Малювання прямокутників – ця проблема часто зустрічається, і тому не дивно, що існує стандартна процедура, що працює так само, як і створена нами нижче процедура Rect. Вона називається Rectangle.
Приклад 2. Ускладнимо завдання, скласти програму для побудови зафарбованих прямокутників. Для малювання «заповнених» прямокутників використається процедура Bar. Так само, як і для процедури Rectangle, ми повинні вказати чотири числа - координати двох протилежних кутів прямокутника. (Для процедури Bar кольори задається не за допомогою SetColor, а за допомогою SetFillStyle!).
PROGRAM Primer_8; uses Graph; const Step=35; var grDriver: Integer; grMode : Integer; i,x,y : Integer; { ---------------------------------------- } PROCEDURE Square (x,y: Integer); { Малює квітчастий квадрат, центр якого } { має координати (x,y) } var i,d: Integer; BEGIN For i:=15 downto 0 do begin SetFillStyle (SolidFill,i); d:=i*3+2; Bar (x-d,y-d,x+d,y+d) end END; { -і- } BEGIN GrDriver:=VGA; grMode:=VGAHi; InitGraph (grDriver,grMode,'..\bgi'); If GraphResult=grOk then begin For i:=0 to 10 do { На "побічній" діагоналі - 11 крапок } begin x:=50+i*Step; y:=50+(10-i)*Step; SetColor(i); Square(x,y) end; ReadLn end END.
При малюванні складних зображень, що містять багато відрізків, виникає проблема - обчислювати координати всіх крапок. Якщо використати процедуру LineRel, то досить указувати зрушення по обох координатах щодо поточної крапки. Для відносного переміщення без малювання використається процедура MoveRel Для завдання початкових значень координат поточної крапки використається процедура MoveTo
Самостійна робота Завдання (середній рівень навчальних досягнень) Побудувати програму, що у центрі екрана викреслює трикутник червоною лінією.
(достатній рівень навчальних досягнень) Побудувати програму, що у лівій верхній частині екрана викреслює чотирикутну зірку зеленого кольору.
(високий рівень) Написати програму із процедурою креслення квадратної спіралі
program tr; {Програма вичерчує в центрі екрана трикутник червоною лінією} У результаті роботи програми на екрані з’явиться червоний трикутник на чорному фоні. Змінити фон усередині трикутника можна за допомогою процедури FillPoly(a:word,var PolyPoints);
Значення параметрів ті ж, що й у процедурі DrawPоly. Дія теж аналогічно, але фон усередині багатокутника зафарбовується.
Зобразити в лівій верхній частині екрана чотирикутну зірку зеленого кольору:
program g;
Квадратна спіраль.
PROGRAM Primer_9; uses Graph; const Center=320; Center=240; d=12; var grDriver: Integer; grMode : Integer; i,L : Integer; { ---------------------------------------- } PROCEDURE Vitok (L,d: Integer); { Починаючи від поточної крапки, малює виток спіралі } { із чотирьох відрізків довжини, що збільшується, } { L - довжина першого відрізка } { d - збільшення довжини для кожного з наступних відрізків } BEGIN LineRel (L,0); { Зрушитися вправо } LineRel (0,-(L+d)); { Зрушитися нагору } LineRel (-(L+2*d),0); { Зрушитися вліво } LineRel (0,L+3*d); { Зрушитися вниз } END; { ------------------------------ } BEGIN grDriver:=VGA; grMode:=VGAHi; InitGraph (grDriver,grMode,'..\bgi'); If GraphResult=grOk then begin { Зробити поточною крапкою центр екрана } MoveTo (Center,Center); L:=1; { Початкова довжина відрізка } For i:=1 to 10 do { 10 витків спирали } begin Vitok (L,d); L:=L+4*d end; ReadLn end END.
Домашнє завдання: (середній і достатній рівень) Скласти програму зображення маленького містечка. (високий рівень) Скласти програму зображення маленького містечка (використати штрихування).
Урок 3. ТЕМА: Використання в програмах процедур і функцій для побудови найпростіших графічних зображень. Мета: Продовжити вивчення графічних операторів, навчити будувати графіки функцій. Завдання: навчитися використовувати графічні оператори для складання програм на побудову зображень і побудову графіків функцій. актуалізувати знання з опису графічних операцій, введенню в програму процедур і функцій; вивчити правила введення в програму графічних процедур побудови графіків функцій; учити складати програми самостійно; розвивати вміння й навички складання програм на побудову графічних зображень; виховувати акуратність у роботі.
ПРОГРАМНА ПІДТРИМКА мова програмування Паскаль (версія 7.0) УСТАТКУВАННЯ: комп’ютерна презентація
Тип уроку: вивчення й закріплення матеріалу
Хід уроку Організаційний момент Перевірку домашнього завдання проведемо у формі відповіді на тест. 1. Що буде зображено на екрані в результаті виконання команди ARC(140,180,0,180,90) верхнє півколо. 2. Укажіть правильну форму запису процедури зображення лінії LINE(X1,Y1)-(X2 Y2). 3. Процедура FLOODFILL(X,Y,З) дозволяє... установити стиль штрихування. 4. У яку крапку буде переведений покажчик після виконання команд: MOVETO(20,50);MOVEREL(140,50) (160,50). 5. Укажіть процедуру зображення окружності RECTANGLE(x1,y1,x2,y2). 6. Що буде зображено на екрані в результаті виконання команд: MOVETO(80,50);LINEREL(60,0); LINEREL(0,40); LINEREL(-60,0); LINEREL(0,-40); прямокутник. * 7. Яка процедура дозволяє ініціювати графічний режим роботи? CLEARDEVICE . 8. Яка процедура дозволяє встановити стиль лінії? SETFILLSTYLE. 9. Укажіть правильну форму запису процедури зображення крапки PUTPIXEL(X,Y,C). 10. Процедура SETBKCOLOR(с) дозволяє... установити кольори зображення.
Вивчення нового матеріалу Міні-лекція Побудова графіків функцій
Дотепер при створенні малюнків використали тільки перший квадрант системи координат. Для побудови більшості функцій у необхідному інтервалі зміни необхідно працювати хоча б у двох квадрантах. У загальному випадку корисно зображувати систему координат у будь-якій частині площини, але найбільше наочно розташовувати її в центрі екрана. У таких випадках, установивши початок координат у крапці (x0,y0) на екрані, можна координати (x,y) довільної крапки кривої визначати різницею (x-x0,y-y0). Після цього в програмі можна вживати не тільки додатні, але й від’ємні значення. Малюнок виходить маленьким, тому потрібно збільшити масштаб зображення. Якщо для функції буде використаний весь екран, треба збільшити малюнок по x і по y залежно від обраного екрана. Вибрати масштаб збільшення можна в такий спосіб: - визначити горизонтальний і вертикальний розміри графіка (для цього вводяться границі області значень і визначаються максимальне й мінімальне значення функції на заданій області визначення, потім обчислюються різниці максимального й мінімального значень аргументів і функції, які і є горизонтальним і вертикальним розмірами графіка відповідно); - визначити масштаб (спочатку визначаються масштаби зображення по горизонталі й вертикалі з урахуванням розмірів обраного екрана по формулі: масштаб(г/в) = розмір екрана (по г/в) / розмір графіка (по г/в) потім з них вибирається менший, котрий і приймається за необхідний масштаб. У нашому випадку графічний екран має розміри 640х480.У кожному разі, щоб висвітити на екрані крапку, треба взяти x, обчислити по даній абсцисі y і виконати малювання крапки. Тому що на екрані можна одержати лише обмежену кількість значень х, те їх перебираємо за допомогою циклу.
program f; function f(x:real): real; Розглянемо побудову графіка функції, заданої параметрически. На відміну від функції, заданої в явному виді y=f(x), параметр х у цьому випадку також є функцією, що залежить від деякого значення.
Побудувати графік функції (кардиоіду) x = a cos t ( 1+ cos t), Підказка - фрагмент програми:
Практична робота «Створення програм для побудови графічних зображень»
Навчальна мета: Формування практичних навичок, вмінь учнів працювати в середовищі програмування Pascal: створювати, виконувати, редагувати, зберігати програми для побудови графічних зображень. Завдання: Розвивати логічне мислення учнів. підтримувати самостійність виконання роботи, уважність, бережливе ставлення до комп’ютерної техніки, інтерес до програмування. Технічні засоби навчання: комп’ютери, середовище програмування Pascal. Тип уроку: Практична робота.
Хід уроку. І. Організація класу. (Привітання, вступне слово вчителя). ІІ. Актуалізація опорних знань, вмінь, навичок учнів. Який вигляд «координатної сітки» екрану дисплея? ІІІ. Оголошення теми, мети, завдань уроку. IV. Виконання практичної роботи (Виконати практичну роботові згідно вказівок, одне завдання по 3 бали.) Побудувати трикутник з вершинами в крапках (100,100), (150,100), (80,70). Колір тлу сірий, колір ліній - червоний. V. Підведення результатів виконання практичної роботи. Пересилання файлів на комп'ютер вчителя. VІ. Повідомлення домашнього завдання. (Виконати та записати на дискету графічне зображення на вільну тему)
Схожі навчальні матеріали: |
Всього коментарів: 0 | |