0:00:00.000,0:00:06.254
지난 시간에 draw()함수와 if구문을 통해[br]공 튀기기를 해봤어요

0:00:06.254,0:00:08.010
복습 한번 할게요

0:00:08.010,0:00:12.257
먼저 공의 위치변수와 속도변수에[br]초기값을 설정해요

0:00:12.257,0:00:17.240
그리고 반복 호출되는 draw()함수를 통해

0:00:17.240,0:00:20.907
배경을 다시 칠하고 [br]타원을 그리는 과정을 반복해요

0:00:20.907,0:00:27.779
타원의 위치는 위치변수값과 속도변수값의[br]상호작용에 의해 결정돼요

0:00:27.779,0:00:31.195
if문 없이는 공이 앞으로만 계속 갈거에요

0:00:31.195,0:00:33.142
재시작을 하기 전까지는 말이죠

0:00:33.142,0:00:36.021
그래서 밑에다가 if문을 두개 추가했습니다

0:00:36.021,0:00:40.605
그렇게 해서 공이 오른쪽벽이나 왼쪽벽에 가까워진다면

0:00:40.606,0:00:45.309
그 공이 반대쪽으로 튕겨나갈 수 있게[br]속도를 양수나 음수로 바꿔줍니다

0:00:45.309,0:00:50.071
공은 이제 계속 앞뒤로 움직일겁니다

0:00:50.071,0:00:53.671
멋지네요[br]이것을 응용할 수 있는 애니메이션은 많이 있어요

0:00:53.671,0:00:57.515
그렇지만 지금은 유저와의 상호작용을[br]추가하고싶어요

0:00:57.515,0:01:00.071
아직은 이 프로그램이 TV쇼를 보는것같아요

0:01:00.071,0:01:04.765
프로그램을 친구에게 줘도 친구가 프로그램 [br]할 줄도 모르고 그래서 상호작용할 수가 없으니까

0:01:04.765,0:01:06.736
눈으로 보기만 했었죠 [br]그것도 괜찮긴 하지만

0:01:06.736,0:01:10.240
보기만 하는 것보다[br]직접 해보는게 더 신날 것 같아요

0:01:10.240,0:01:13.230
그래서 유저가 조작할 수 있게[br]방법을 제시해야겠어요

0:01:13.230,0:01:20.156
이전에 mouseX와 mouseY라는 전역변수에 대해 배웠어요

0:01:20.156,0:01:25.462
현재 마우스 위치를 알아내는 변수에요

0:01:25.462,0:01:28.779
이것을 이용하면 프로그램이 보다 쌍방향적으로 돼요

0:01:28.779,0:01:31.239
그걸 어떤 방법으로 사용할까요?

0:01:31.239,0:01:34.029
draw()함수 안에서 사용하면 돼요

0:01:34.029,0:01:39.503
프로그램이 실행될 때[br]draw()함수만 반복 호출되기 때문이에요

0:01:39.503,0:01:44.551
draw()함수를 제외하고는 한번만 호출돼요

0:01:44.551,0:01:48.136
반복 호출되지 않으면

0:01:48.136,0:01:51.243
유저가 mouseX와 mouseY를 이용해[br]상호작용을 할 수 없게 됩니다

0:01:51.243,0:01:57.280
draw()함수를 통해[br]200 픽셀 위치에 공을 그릴거에요

0:01:57.280,0:02:02.732
y좌표니까 mouseY를 이용하는 것은 어떨까요?

0:02:02.739,0:02:08.530
그랬더니 공이 움직일 때 마우스 y위치가 적용되네요

0:02:08.530,0:02:14.362
이것 좀 봐요! 마우스를 위아래로 움직이면 [br]공이 움직이는 라인을 위아래로 바꿀 수 있어요

0:02:14.362,0:02:18.196
멋지네요[br]이제 mouseX를 사용해볼 차례입니다

0:02:18.196,0:02:19.863
어떻게할까요?

0:02:19.863,0:02:22.445
좌우가 아닌 위아래로 움직이는

0:02:22.445,0:02:25.945
또다른 공을 만드는 것이 어떨까요?

0:02:25.945,0:02:30.030
유저가 공의 x좌표를 조작할 수 있게 하고요

0:02:30.030,0:02:32.612
인자를 반대로 하면 되겠네요

0:02:32.612,0:02:39.506
elipse(mouseX, position, 50, 50)[br]이렇게 말이죠

0:02:39.506,0:02:41.470
확인해보세요

0:02:41.470,0:02:46.906
수직 방향으로 움직이는 2개의 공을[br]제가 지금 제어하고 있어요

0:02:46.906,0:02:50.075
그래도 좀 부족한 것 같아요

0:02:50.075,0:02:53.445
유저가 더 조작할 수 있게 하고싶어요

0:02:53.445,0:02:56.944
2번째 공이 보이게 하는 권한을 유저에게 주고싶어요

0:02:56.944,0:03:01.407
마우스 클릭한 지점에서 시작하도록 말이죠

0:03:01.407,0:03:07.340
그럼 유저가 마우스를 눌렀는지 알아내야 하네요

0:03:07.340,0:03:12.945
다행히 그 역할을 할 bool형태의 변수가 이미 있어요

0:03:12.945,0:03:19.362
mouseIsPressed라고 불리는데[br]if문 안에 사용할 수 있어요

0:03:19.362,0:03:22.339
두번째 공을 보세요

0:03:22.339,0:03:31.945
if(mouseIsPressed) 를 적고[br]그 곳에 elipse(...)를 이동시킵니다

0:03:31.945,0:03:40.863
이것이 하는 일은 If 조건이 true이면[br]타원을 그리게 하는 거에요

0:03:40.863,0:03:46.030
유저가 마우스를 누르면[br]mouseIsPressed가 true가 되고요

0:03:46.030,0:03:48.195
그럼 같이 해봐요

0:03:48.195,0:03:49.688
짜잔!

0:03:49.688,0:03:53.362
마우스 클릭할 때마다 공이 보이네요

0:03:53.362,0:03:58.407
평면에서 공이 튀어나와요

0:03:58.407,0:04:00.029
멋져요!

0:04:00.029,0:04:04.740
mouseIsPressed변수는 흥미로워요

0:04:04.740,0:04:08.805
프로그램에 기반한 것이 아닌[br]유저의 행동에 기반해서 작동하니까요

0:04:08.805,0:04:13.195
그리고 draw()함수가 반복호출되는 것 때문에

0:04:13.195,0:04:16.171
프로그램의 결과는 계속해서

0:04:16.171,0:04:18.740
유저의 단순한 입력에 따라 바뀔거에요

0:04:18.740,0:04:22.029
if 구문과 mouseIsPressed변수의 조합의 힘 때문에

0:04:22.029,0:04:26.670
버튼과 그리기 프로그램 처럼[br]멋진 것을 그릴 수 있게 되었어요

0:04:26.670,0:04:29.000
유후!