Тема: побудова графіка функції мовою Java.

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

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

Обладнання: комп’ютери зі встановленими ОС, JDK та інтегрованим середовищем програмування. Наприклад, Netbeans, для якого подано ілюстрації створення пакунку.

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

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

Хід уроку

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

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

Дати відповіді на питання.

1. Що таке лінійна функція?
2. Що таке квадратична функція?
3. Що таке раціональна функція?
4. Що таке графік функції?

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

За наявними матеріалами ознайомитися з описом таких засобів використання графіки мовою Java:

• На чому малювати?
• Кольори
  • Color
  • setColor
  • setBackground
• Контури
  • drawLine
  • drawRect
  • draw3DRect
  • drawOval
  • drawArc
  • drawRoundRect
  • drawPolyline
  • drawPolygon
• Текст
  • drawString
  • setFont
  • getFont
  • Font
• Приклад 1: графічні примітиви

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

Завдання 1. Створити програму мовою Java, яка будує вікно розміру 600×624, що залежно від значення змінної, заданого у коді пропрограми, будує графік однієї з таких функцій:

• y = x/2 + 0.75;
• y = x²/4 + x/3 – 0.25;
• y = (x/8 + 0.0625)/(2x – 1);
• x = cos 5t, y = sin 7t, при t ∈ [0, 2π] — фігура Ліссажу

Так, як це показано на наступних малюнках.

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

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

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

1. Cтворити пакунок graphtest:
   • Натиснути клавіші Ctrl + Shift + N або використати вказівку меню File / New Project (Файл / Створити проект);
     
     
     
   • в області Categories (Категорії) вибрати Java with Ant;
   • в області Projects (Проекти) вибрати Java Application (Застосунок Java);
   • натиснути кнопку Next (Далі);
     
   
   
   • ввести graphtest у поле Project Name (Назва проекту);
   • клацнути по кнопці Готово (Finish, Гаразд).
     
     
     

2. Замінити вміст файлу Graphtest.java на вміст файлу Graphtest.java прикладу 1.

3. Створити файл Panel.java у теці ресурсів (кодів) пакунку graphtest з таким вмістом.

4. Пересвідчитися у дієздатності програми, запустивши її на виконання і отримавши вікно такого вигляду.

   

5. Вилучити з коду Panel.java зайве: вилучити вказівки, що відображають об'єкти, відмінні від відрізка прямої і тексту. Колір панелі зробити білим.

6. Вставити на початку коду класу Panel:

   • вказівку надання значення змінній, що визначає вид графіка;

   • опис функцій, що задають значення координат x, y точки кривої як функцію деякого параметра t. Для перших трьох графіків значення абсциси x і параметра t збігаються;

   • опис функції, що повертає false при побудові графіка раціональної функції, якщо значення функції не визначено, тобто знаменник дорівнює нулю. В усіх інших випадках повертає true.

   Порівняти з очікуваним.

7. Вставити на початку коду переозначення методу малювання класу Panel:вказівки надання значеннь змінним, що визначають параметри зображення та його побудови. Порівняти з очікуваним.

8. Вставити у код переозначення методу малювання класу Panel:

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

   • зображення й підпис осі абсцис стрілкою чорного кольору товщини 2, якщо вона перетинає відображуваний прямокутник;

   • зображення графіка функції ламаною червоного кольору товщини 3 з вершинами на графіку.

9. Перевірити дію коду. У разі потреби внести зміни.
10. Змінені файли Graphtest.java, Panel.java записати у вказану вчителем теку.
11. Повідомити вчителя про завершення роботи.

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

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

SVG — Scalable Vector Graphics (англійською: масштабована векторна графіка) — специфікація мови розмітки на основі XML або формат файлу двовимірної векторної графіки (статичної, анімованої, інтерактивної).

Ця специфікація є відкритим стандартом, розробленим робочою групою SVG Working Group організації World Wide Web Consortium.

Файл svg можна створити і редагувати:

• у середовищі редактора векторної графіки, наприклад, Inkscape;
• у середовищі текстового редактора;
• за допомогою програми, написаної довільною мовою програмування.

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

<svg>…</svg> — контейнер, всередині якого (замість трьох крапок) записують всі інші вказівки svg (при створення статичного малюнку у файлі формату svg). Наприклад, контейнер:

<svg width="600" height="400" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg">
</svg>

передбачає створення малюнку розміру 600×400 пікселів.

<line /> — вказівка для побудови зображення відрізка прямої.

Наприклад, вказівка:

<line x1="12" y1="34" x2="56" y2="78" style="stroke:rgb(0,0,0);stroke-width:2" />

передбачає створення зображення відрізка прямої:

• суцільна лінія чорного кольору — див. style="stroke:rgb(0,0,0);
• товщини 2 — див. stroke-width:2;
• сполучено точки з екранними координатами (12; 34) і (56, 78).

<text>…</text> — контейнер, що описує форматування символів тексту і всередині якого записуєть контейнери для виведення послідовностей символів.

<tspan>…</tspan> — контейнер, що вказує яку послідовність символів і у якому місці потрібно розташувати.

Наприклад, вказівка:

<text style="font-size:12px;font-style:italic;font-weight:normal;font-family:Ubuntu,Calibri"><tspan x="12" y="34">текст для виведення</tspan></text>

передбачає таке виведення тексту:

• гарнітура — Ubuntu або Calibri, якщо Ubuntu немає;
• розмір — 12рх;
• накреслення — курсив (italic) звичайний (normal);
• відносні екранні координати верхнього лівого кута тексту — (12; 34).

Завдання 2. Створити програму мовою Java, яка створює файли з назвами 1, 2, 3, 4 і типом svg, що містять графіки побудованих функцій у форматі svg. У разі потреби можна використати демонстраційне розв'язання мовою Ruby наявної розробки уроку.

Завдання 3. У разі потреби доробити завдання 1. Порівняти з очікуваним: Graphtest.java, Panel.java.

Текст упорядкував Олександр Рудик.