1
00:00:01,082 --> 00:00:02,115
У попередньому відео, ми показали як

2
00:00:02,115 --> 00:00:04,588
ви можете мультиплікувати м'яч,
щоб він відскакував від стін

3
00:00:04,588 --> 00:00:07,175
використовуючи функцію "draw"
та умовні оператори "if".

4
00:00:07,175 --> 00:00:08,223
Пригадаймо все.

5
00:00:08,493 --> 00:00:11,996
Спочатку, ми визначаємо початкові змінні
для визначення розташування і швидкості м'яча.

6
00:00:12,196 --> 00:00:14,744
Тоді, у фінкції "draw",
що є спеціальною функцією

7
00:00:14,744 --> 00:00:17,197
яка викликається кожного разу, коли 
виконується програма,

8
00:00:17,287 --> 00:00:20,731
ми змінюємо колір фону
і малюємо еліпс в редакторі

9
00:00:20,731 --> 00:00:23,536
і визначаємо розташування цього еліпса
на основі змінних "position"

10
00:00:23,536 --> 00:00:26,848
та "speed"
і як вони впливають один на одного.

11
00:00:27,468 --> 00:00:28,905
Тепер, без умовного оператора "if"

12
00:00:28,905 --> 00:00:31,116
наш м'яч буде просто безперервно рухатись

13
00:00:31,116 --> 00:00:32,921
доки ми не натиснемо кнопку "перезапустити".

14
00:00:32,921 --> 00:00:36,823
Тому ми додали 2 умовних оператори "if" 
тут знизу, щоб перевірити і побачити

15
00:00:36,823 --> 00:00:39,134
чи був м'яч близько до правої сторони екрану

16
00:00:39,134 --> 00:00:40,329
або до лівої сторони екрану.

17
00:00:40,329 --> 00:00:43,263
І якщо так, ми змінюєм швидкість на
додатнє або від'ємне значення

18
00:00:43,263 --> 00:00:45,442
так, щоб м'яч
міг просто відскакувати назад.

19
00:00:45,442 --> 00:00:49,455
Отже, тепер у нас є просто м'яч,
що відскакуватиме вічно, вперед і назад.

20
00:00:49,955 --> 00:00:51,095
Це було досить круто

21
00:00:51,095 --> 00:00:52,398
і насправді існує ще багато 
класних анімацій

22
00:00:52,398 --> 00:00:53,805
які ми можемо використати.

23
00:00:53,805 --> 00:00:57,117
А зараз, я хочу додати інтерфейс
користувача до цієї програми.

24
00:00:57,477 --> 00:00:59,936
Погляньте, прямо зараз,
ця програма виглядає як Телешоу.

25
00:01:00,086 --> 00:01:01,314
Якщо ви поділились нею зі своїми друзями,

26
00:01:01,494 --> 00:01:03,122
і вони не знають як
програмувати,

27
00:01:03,122 --> 00:01:04,817
вони не зможуть з нею взаємодіяти.

28
00:01:04,817 --> 00:01:07,435
Все, що вони могли б робити - це
спостерігати, що є досить непогано,

29
00:01:07,435 --> 00:01:09,933
але було б трохи краще, якби
вони могли б зробити хоть щось.

30
00:01:10,193 --> 00:01:12,744
Що ж, спробуймо надати користувачу 
способи управління нею.

31
00:01:13,264 --> 00:01:15,335
Пам'ятаєте, раніше ми дізналися

32
00:01:15,335 --> 00:01:20,032
про дві спеціальні глобальні змінні,
що називаються "mouseX" і "mouseY".

33
00:01:20,901 --> 00:01:22,708
Вони повертають числа,

34
00:01:22,708 --> 00:01:25,790
що вказують нам на поточне розташування
миші користувача

35
00:01:25,790 --> 00:01:27,857
і вони є хорошим способом,
щоб зробити програму більш інтерактивною.

36
00:01:28,867 --> 00:01:30,811
Тож, подивімось як ми можем 
використати їх.

37
00:01:30,811 --> 00:01:34,201
Що ж, нам потрібно використати їх
десь всередині функції "draw".

38
00:01:34,631 --> 00:01:36,153
Тому що це єдиний код,

39
00:01:36,183 --> 00:01:38,582
що викликається щоразу,
коли запускається програма.

40
00:01:39,272 --> 00:01:42,557
Все, що знаходиться за межами функції "draw",
викликається тільки один раз,

41
00:01:42,557 --> 00:01:44,572
при першому запуску програми.

42
00:01:44,623 --> 00:01:47,594
Тому, немає сенсу використовувати
там змінні "mouseX" та "mouseY".

43
00:01:47,594 --> 00:01:50,242
Користувач не матиме можливості
взаємодіяти з нею.

44
00:01:50,862 --> 00:01:56,769
Зараз у функції "draw" ми малюємо м'яч на відстані
200 пікселів від нижньої частини екрана.

45
00:01:56,969 --> 00:02:00,204
Чому б нам не замінити цей параметр
змінною "mouseY"?

46
00:02:00,944 --> 00:02:02,440
Оскільки це позиція "Y", чи не так?

47
00:02:02,440 --> 00:02:07,832
В такий спосіб ми додамо "Y" позицію, що
залежить від позиції "Y" користувача.

48
00:02:07,832 --> 00:02:09,511
Чи не так? Тож оцініть.

49
00:02:09,831 --> 00:02:11,661
Рухаючи свій курсор вниз і вгору

50
00:02:11,661 --> 00:02:14,226
я можу змінювати лінію
уздовж якої рухається м'яч.

51
00:02:14,226 --> 00:02:14,940
Це досить не погано.

52
00:02:15,850 --> 00:02:19,906
Але я хочу, також використати "mouseX" 
Отже, як мені це зробити?

53
00:02:19,906 --> 00:02:22,068
А чому б нам не створити ще один м'яч

54
00:02:22,068 --> 00:02:26,268
і матимемо м'ячі, що рухатимуться у 
протилежних напрямках: вгору та вниз.

55
00:02:26,988 --> 00:02:31,035
І ми матимемо елемент для користувацького
управління позицією "X".

56
00:02:31,035 --> 00:02:38,270
Таким чином, ми просто зробимо навпаки.
Еліпсу присвоїмо параметри: mouseX, position, 50, 50.

57
00:02:39,967 --> 00:02:41,970
Отже, погляньте.

58
00:02:41,970 --> 00:02:48,544
У мене є два м'ячі, які я контролюю,
і вони рухаються в перпендикулярних напрямках.

59
00:02:48,731 --> 00:02:53,429
Але, я все ще не задоволена. Я хочу, 
надати користувачеві ще більший контроль.

60
00:02:53,429 --> 00:02:56,845
Я хочу надати користувачу здатність
запускати другий м'яч.

61
00:02:56,845 --> 00:03:00,900
Щоб фактично створювати його клацаючи
мишею.

62
00:03:02,000 --> 00:03:03,621
Тоді мені потрібно з'ясувати

63
00:03:03,621 --> 00:03:06,759
як повідомити, що користувач 
клацає мишею.

64
00:03:07,760 --> 00:03:12,524
На щастя, для цього у нас є супер спеціальна 
логічна змінна.

65
00:03:12,674 --> 00:03:18,336
Вона називається "mouseIsPressed" і ми
можемо використати її в операторі "if".

66
00:03:19,126 --> 00:03:21,707
Що ж, погляньмо. Це наш другий м'яч.

67
00:03:21,797 --> 00:03:26,920
То ми можемо написати "if" 
"mouseIsPressed"

68
00:03:28,330 --> 00:03:30,995
і тоді ми переставимо код еліпса туди.

69
00:03:31,898 --> 00:03:33,930
Отже, те що ми робимо тут,

70
00:03:33,930 --> 00:03:39,301
це говоримо програмі, що ми лише хочемо
намалювати цей еліпс

71
00:03:39,301 --> 00:03:43,603
якщо оператор "if" істинний і
"mouseIsPressed" буде тільки істинна,

72
00:03:43,603 --> 00:03:45,483
якщо користувач натискає мишею.

73
00:03:45,483 --> 00:03:49,222
Отже, спробуймо. Та дааам!

74
00:03:49,702 --> 00:03:52,697
Тож тепер я можу змусити м'яч з'являтися
кожного разу, коли я натискаю клавішу миші.

75
00:03:52,697 --> 00:03:54,950
І він з'являється з паралельного всесвіту.

76
00:03:55,050 --> 00:03:58,963
З'явись! З'явись! З'явись! 
Це приголомшливо!

77
00:03:59,806 --> 00:04:04,500
Отже, найцікавіше про змінну 
"mouseIsPressed"

78
00:04:04,500 --> 00:04:07,254
це те, що вона виконується в залежності
від дій користувача,

79
00:04:07,254 --> 00:04:09,523
а не від дій нашої програми.

80
00:04:09,523 --> 00:04:13,362
і так як функція "draw"
викликається повторювано знову і знову,

81
00:04:13,362 --> 00:04:16,004
результат нашої програми буде змінюватись
з плином часу.

82
00:04:16,004 --> 00:04:17,684
з невеликим вводом даних від користувача.

83
00:04:18,605 --> 00:04:22,264
Разом з оператором "mouseIsPressed"
та змінною "mouseIsPressed",

84
00:04:22,264 --> 00:04:23,201
ви маєте все, що вам потрібно

85
00:04:23,301 --> 00:04:26,427
щоб зробити дивовижні речі такі як кнопки,
та прогами, що малюють.

86
00:04:26,566 --> 00:04:32,606
Переклад на українську мову виконав Соломаха Іван, Благодійний фонд "MagneticOne.org"