1
00:00:00,000 --> 00:00:06,254
지난 시간에 draw()함수와 if구문을 통해
공 튀기기를 해봤어요

2
00:00:06,254 --> 00:00:08,010
복습 한번 할게요

3
00:00:08,010 --> 00:00:12,257
먼저 공의 위치변수와 속도변수에
초기값을 설정해요

4
00:00:12,257 --> 00:00:17,240
그리고 반복 호출되는 draw()함수를 통해

5
00:00:17,240 --> 00:00:20,907
배경을 다시 칠하고 
타원을 그리는 과정을 반복해요

6
00:00:20,907 --> 00:00:27,779
타원의 위치는 위치변수값과 속도변수값의
상호작용에 의해 결정돼요

7
00:00:27,779 --> 00:00:31,195
if문 없이는 공이 앞으로만 계속 갈거에요

8
00:00:31,195 --> 00:00:33,142
재시작을 하기 전까지는 말이죠

9
00:00:33,142 --> 00:00:36,021
그래서 밑에다가 if문을 두개 추가했습니다

10
00:00:36,021 --> 00:00:40,605
그렇게 해서 공이 오른쪽벽이나 왼쪽벽에 가까워진다면

11
00:00:40,606 --> 00:00:45,309
그 공이 반대쪽으로 튕겨나갈 수 있게
속도를 양수나 음수로 바꿔줍니다

12
00:00:45,309 --> 00:00:50,071
공은 이제 계속 앞뒤로 움직일겁니다

13
00:00:50,071 --> 00:00:53,671
멋지네요
이것을 응용할 수 있는 애니메이션은 많이 있어요

14
00:00:53,671 --> 00:00:57,515
그렇지만 지금은 유저와의 상호작용을
추가하고싶어요

15
00:00:57,515 --> 00:01:00,071
아직은 이 프로그램이 TV쇼를 보는것같아요

16
00:01:00,071 --> 00:01:04,765
프로그램을 친구에게 줘도 친구가 프로그램 
할 줄도 모르고 그래서 상호작용할 수가 없으니까

17
00:01:04,765 --> 00:01:06,736
눈으로 보기만 했었죠 
그것도 괜찮긴 하지만

18
00:01:06,736 --> 00:01:10,240
보기만 하는 것보다
직접 해보는게 더 신날 것 같아요

19
00:01:10,240 --> 00:01:13,230
그래서 유저가 조작할 수 있게
방법을 제시해야겠어요

20
00:01:13,230 --> 00:01:20,156
이전에 mouseX와 mouseY라는 전역변수에 대해 배웠어요

21
00:01:20,156 --> 00:01:25,462
현재 마우스 위치를 알아내는 변수에요

22
00:01:25,462 --> 00:01:28,779
이것을 이용하면 프로그램이 보다 쌍방향적으로 돼요

23
00:01:28,779 --> 00:01:31,239
그걸 어떤 방법으로 사용할까요?

24
00:01:31,239 --> 00:01:34,029
draw()함수 안에서 사용하면 돼요

25
00:01:34,029 --> 00:01:39,503
프로그램이 실행될 때
draw()함수만 반복 호출되기 때문이에요

26
00:01:39,503 --> 00:01:44,551
draw()함수를 제외하고는 한번만 호출돼요

27
00:01:44,551 --> 00:01:48,136
반복 호출되지 않으면

28
00:01:48,136 --> 00:01:51,243
유저가 mouseX와 mouseY를 이용해
상호작용을 할 수 없게 됩니다

29
00:01:51,243 --> 00:01:57,280
draw()함수를 통해
200 픽셀 위치에 공을 그릴거에요

30
00:01:57,280 --> 00:02:02,732
y좌표니까 mouseY를 이용하는 것은 어떨까요?

31
00:02:02,739 --> 00:02:08,530
그랬더니 공이 움직일 때 마우스 y위치가 적용되네요

32
00:02:08,530 --> 00:02:14,362
이것 좀 봐요! 마우스를 위아래로 움직이면 
공이 움직이는 라인을 위아래로 바꿀 수 있어요

33
00:02:14,362 --> 00:02:18,196
멋지네요
이제 mouseX를 사용해볼 차례입니다

34
00:02:18,196 --> 00:02:19,863
어떻게할까요?

35
00:02:19,863 --> 00:02:22,445
좌우가 아닌 위아래로 움직이는

36
00:02:22,445 --> 00:02:25,945
또다른 공을 만드는 것이 어떨까요?

37
00:02:25,945 --> 00:02:30,030
유저가 공의 x좌표를 조작할 수 있게 하고요

38
00:02:30,030 --> 00:02:32,612
인자를 반대로 하면 되겠네요

39
00:02:32,612 --> 00:02:39,506
elipse(mouseX, position, 50, 50)
이렇게 말이죠

40
00:02:39,506 --> 00:02:41,470
확인해보세요

41
00:02:41,470 --> 00:02:46,906
수직 방향으로 움직이는 2개의 공을
제가 지금 제어하고 있어요

42
00:02:46,906 --> 00:02:50,075
그래도 좀 부족한 것 같아요

43
00:02:50,075 --> 00:02:53,445
유저가 더 조작할 수 있게 하고싶어요

44
00:02:53,445 --> 00:02:56,944
2번째 공이 보이게 하는 권한을 유저에게 주고싶어요

45
00:02:56,944 --> 00:03:01,407
마우스 클릭한 지점에서 시작하도록 말이죠

46
00:03:01,407 --> 00:03:07,340
그럼 유저가 마우스를 눌렀는지 알아내야 하네요

47
00:03:07,340 --> 00:03:12,945
다행히 그 역할을 할 bool형태의 변수가 이미 있어요

48
00:03:12,945 --> 00:03:19,362
mouseIsPressed라고 불리는데
if문 안에 사용할 수 있어요

49
00:03:19,362 --> 00:03:22,339
두번째 공을 보세요

50
00:03:22,339 --> 00:03:31,945
if(mouseIsPressed) 를 적고
그 곳에 elipse(...)를 이동시킵니다

51
00:03:31,945 --> 00:03:40,863
이것이 하는 일은 If 조건이 true이면
타원을 그리게 하는 거에요

52
00:03:40,863 --> 00:03:46,030
유저가 마우스를 누르면
mouseIsPressed가 true가 되고요

53
00:03:46,030 --> 00:03:48,195
그럼 같이 해봐요

54
00:03:48,195 --> 00:03:49,688
짜잔!

55
00:03:49,688 --> 00:03:53,362
마우스 클릭할 때마다 공이 보이네요

56
00:03:53,362 --> 00:03:58,407
평면에서 공이 튀어나와요

57
00:03:58,407 --> 00:04:00,029
멋져요!

58
00:04:00,029 --> 00:04:04,740
mouseIsPressed변수는 흥미로워요

59
00:04:04,740 --> 00:04:08,805
프로그램에 기반한 것이 아닌
유저의 행동에 기반해서 작동하니까요

60
00:04:08,805 --> 00:04:13,195
그리고 draw()함수가 반복호출되는 것 때문에

61
00:04:13,195 --> 00:04:16,171
프로그램의 결과는 계속해서

62
00:04:16,171 --> 00:04:18,740
유저의 단순한 입력에 따라 바뀔거에요

63
00:04:18,740 --> 00:04:22,029
if 구문과 mouseIsPressed변수의 조합의 힘 때문에

64
00:04:22,029 --> 00:04:26,670
버튼과 그리기 프로그램 처럼
멋진 것을 그릴 수 있게 되었어요

65
00:04:26,670 --> 00:04:29,000
유후!