Урок "Інтерактивність"
Тема: Інтерактивність.
Мета:
навчальна: ознайомити учнів з принципами інтерактивності; навчити використовувати курування об’єктами за допомогою мишки та клавіатури та комбінування можливостей курування.
розвивальна: розвивати вміння та навички роботи з програмами в яких використовують курування об’єктами.
виховна: виховувати інтерес, уважність, якість виконання робіт, естетичність.
Тип уроку: засвоєння нових знань.
Обладнання: комп’ютер, проективна дошка, інструкція з ТБ.
Хід уроку
І. Організаційний етап
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.
ІІ. Актуалізація опорних знань
- Якими пристроями можна керувати об’єктами на моніторі?
- Охарактеризуйте їх?
- За допомогою чого може керувати об’єктом миша?
- За допомогою чого може керувати об’єктом клавіатура?
ІІІ. Вивчення нового матеріалу
Екран утворює місток між нашими тілами та сферою ланцюгів та електрики всередині комп'ютерів. Ми керуємо елементами на екрані за допомогою різноманітних пристроїв, таких як сенсорні панелі, трекболи та джойстики, але клавіатура та миша залишаються найпоширенішими пристроями введення для настільних комп’ютерів. Комп’ютерна миша бере свій початок з кінця 1960-х, коли Дуглас Енгельбарт представив пристрій як елемент системи oN-Line (NLS), однієї з перших комп’ютерних систем з відеодисплеєм. Концепція миші отримала подальший розвиток в Дослідницькому центрі Xerox Palo Alto (PARC), але її впровадження в Apple Macintosh в 1984 році стало каталізатором її повсюдного поширення. Дизайн миші зазнав багатьох змін протягом останніх сорока років, але її функція залишалася незмінною.
Об'єкт фізичної миші використовується для управління положенням курсору на екрані та вибору елементів інтерфейсу. Позиція курсора зчитується комп’ютерними програмами як два числа - координата x і координата y. Ці цифри можна використовувати для управління атрибутами елементів на екрані. Якщо ці координати зібрати та проаналізувати, вони можуть бути використані для отримання інформації вищого рівня, наприклад, швидкості та напрямку миші. Ці дані, в свою чергу, можуть бути використані для розпізнавання жестів та шаблонів.
Клавіатура, як правило, використовуються для введення символів для складання документів, електронної пошти та миттєвих повідомлень, але клавіатура має потенціал для використання поза початковим задумом. Міграція клавіатури з друкарської машинки на комп’ютер розширила її функції, дозволяючи запускати програмне забезпечення, переміщатися по меню програмних додатків та переміщатися в 3D-середовищах в іграх. Під час написання власного програмного забезпечення ви можете вільно використовувати дані клавіатури будь-яким способом. Наприклад, основну інформацію, таку як швидкість та ритм пальців, можна визначити за швидкістю натискання клавіш. Ця інформація може контролювати швидкість події або якість руху.
Також можна ігнорувати символи, надруковані на самій клавіатурі, і використовувати розташування кожної клавіші щодо сітки клавіатури як числове положення.
Сучасна клавіатура комп’ютера є прямим нащадком друкарської машинки. Положення клавіш на англомовній клавіатурі успадковується від ранніх друкарських машинок. Цей макет називається QWERTY через порядок верхнього рядка літерних клавіш. Ця більш ніж столітня механічна спадщина все ще впливає на те, як ми сьогодні пишемо програмне забезпечення.
Використання миші
Змінні обробки mouseX та mouseY (зверніть увагу на великі X та Y) зберігають координату x та координату y курсору відносно початку координат у верхньому лівому куті вікна відображення. Щоб побачити фактичні значення, отримані під час переміщення миші, запустіть цю програму, щоб надрукувати значення на консолі:
void draw() {
frameRate(12);
println(mouseX + " : " + mouseY); }
Коли програма запускається, значення mouseX та mouseY дорівнюють 0. Якщо курсор переміщається у вікно відображення, значення встановлюються в поточне положення курсору. Якщо курсор знаходиться ліворуч, значення mouseX дорівнює 0, і значення збільшується, коли курсор рухається вправо. Якщо курсор знаходиться вгорі, значення mouseY дорівнює 0, і воно збільшується, коли курсор рухається вниз. Якщо mouseX і mouseY використовуються в програмах без розіграшу () або якщо noLoop () запущено в setup (), значення завжди будуть 0.
Положення миші найчастіше використовується для управління розташуванням візуальних елементів на екрані. Більш цікаві відносини створюються, коли візуальні елементи по-різному відносяться до значень миші, а не просто імітують поточну позицію. Додавання та віднімання значень із положення миші створює зв’язки, які залишаються незмінними, тоді як множення та ділення цих значень створює змінні візуальні взаємозв’язки між положенням миші та елементами на екрані. У першому з наступних прикладів коло безпосередньо відображається на курсор, у другому додаються і віднімаються числа з положення курсору для створення зсувів, а в третьому множення та ділення використовуються для масштабування зсувів.
void setup() {
size(100, 100);
noStroke(); }
void draw() {
background(126);
ellipse(mouseX, mouseY, 33, 33); }
void setup() {
size(100, 100);
noStroke(); }
void draw() {
background(126);
ellipse(mouseX, 16, 33, 33);
ellipse(mouseX+20, 50, 33, 33);
ellipse(mouseX-20, 84, 33, 33);
}
Щоб інвертувати значення миші, відніміть значення mouseX від ширини вікна і відніміть значення mouseY від висоти екрана.
void setup() {
size(100, 100);
noStroke(); }
void draw() {
float x = mouseX;
float y = mouseY;
float ix = width - mouseX;
float iy = height - mouseY;
background(126);
fill(255, 150);
ellipse(x, height/2, y, y);
fill(0, 159);
ellipse(ix, height/2, iy, iy); }
Змінні обробки pmouseX та pmouseY зберігають значення миші з попереднього кадру. Якщо миша не рухається, значення будуть однаковими, але якщо миша рухається швидко, між значеннями можуть бути великі відмінності. Щоб побачити різницю, запустіть наступну програму та поступово рухайте мишу повільно та швидко.
Використання клавіатури
Обробка реєструє останню натиснуту клавішу та натискання клавіші в даний момент. Логічна змінна keyPress має значення true, якщо натиснута клавіша, і false, якщо ні. Включіть цю змінну до тесту структури if, щоб дозволити рядкам коду запускатися лише за умови натискання клавіші. Змінна keyPress залишається істинною, поки клавіша утримується, і стає хибною лише тоді, коли ключ відпущений.
void setup() {
size(100, 100);
strokeWeight(4);
}
void draw() {
background(204);
if (keyPressed == true) {
line(20, 20, 80, 80);
} else {
rect(40, 40, 20, 20);
}
}
ІV. Інструктаж з техніки безпеки
V. Закріплення вивченого матеріалу
Виконати завдання
- Проведіть лінію від попередньої позиції миші до поточної
void setup() {
size(100, 100);
strokeWeight(8); }
void draw() {
background(204);
line(mouseX, mouseY, pmouseX, pmouseY); }
- Використовуйте змінні mouseX та mouseY зі структурою if, щоб курсор міг робить вибір між різними областями вікна відображення. Перший ділить екран на половинки, а другий - на третини.
void setup() {
size(100, 100);
noStroke();
fill(0);
}
void draw() {
background(204);
if (mouseX < 50) {
rect(0, 0, 50, 100);
} else {
rect(50, 0, 50, 100);
}
}
void setup() {
size(100, 100);
noStroke();
fill(0);
}
void draw() {
background(204);
if (mouseX < 33) {
rect(0, 0, 33, 100);
} else if (mouseX < 66) {
rect(33, 0, 33, 100);
} else {
rect(66, 0, 33, 100);
}
}
- Використовуючи логічний оператор && зі структурою if, щоб вибрати прямокутну область екрану.
void setup() {
size(100, 100);
noStroke();
fill(0);
}
void draw() {
background(204);
if ((mouseX > 40) && (mouseX < 80) &&
(mouseY > 20) && (mouseY < 80)) {
fill(255);
} else {
fill(0);
}
rect(40, 20, 40, 60);
}
- Відобразити на екрані за допомогою функції text ()
void setup () {
Size (100, 100);
textSize (60);
}
void draw() {
fill(0);
Text (key, 20, 75);
}
VІ. Підсумок уроку
Перевірка робіт. Виставлення оцінок.
VІІ. Домашнє завдання
Виконати завдання 4 за посиланням:
https://sites.google.com/d/1Y5cWiizp2CIV81uFH1Ye6OwK2skXUmz1/p/1hVHR9VITOGSpi2I6DP9SCpZOI8JR4w/edit
про публікацію авторської розробки
Додати розробку