WEBVTT

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

00:00:06.254 --> 00:00:08.010
복습 한번 할게요

00:00:08.010 --> 00:00:12.257
먼저 공의 위치변수와 속도변수에
초기값을 설정해요

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

00:00:17.240 --> 00:00:20.907
배경을 다시 칠하고 
타원을 그리는 과정을 반복해요

00:00:20.907 --> 00:00:27.779
타원의 위치는 위치변수값과 속도변수값의
상호작용에 의해 결정돼요

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

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

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

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

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

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

00:00:50.071 --> 00:00:53.671
멋지네요
이것을 응용할 수 있는 애니메이션은 많이 있어요

00:00:53.671 --> 00:00:57.515
그렇지만 지금은 유저와의 상호작용을
추가하고싶어요

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

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

00:01:04.765 --> 00:01:06.736
눈으로 보기만 했었죠 
그것도 괜찮긴 하지만

00:01:06.736 --> 00:01:10.240
보기만 하는 것보다
직접 해보는게 더 신날 것 같아요

00:01:10.240 --> 00:01:13.230
그래서 유저가 조작할 수 있게
방법을 제시해야겠어요

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

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

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

00:01:28.779 --> 00:01:31.239
그걸 어떤 방법으로 사용할까요?

00:01:31.239 --> 00:01:34.029
draw()함수 안에서 사용하면 돼요

00:01:34.029 --> 00:01:39.503
프로그램이 실행될 때
draw()함수만 반복 호출되기 때문이에요

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

00:01:44.551 --> 00:01:48.136
반복 호출되지 않으면

00:01:48.136 --> 00:01:51.243
유저가 mouseX와 mouseY를 이용해
상호작용을 할 수 없게 됩니다

00:01:51.243 --> 00:01:57.280
draw()함수를 통해
200 픽셀 위치에 공을 그릴거에요

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

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

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

00:02:14.362 --> 00:02:18.196
멋지네요
이제 mouseX를 사용해볼 차례입니다

00:02:18.196 --> 00:02:19.863
어떻게할까요?

00:02:19.863 --> 00:02:22.445
좌우가 아닌 위아래로 움직이는

NOTE Paragraph

00:02:22.445 --> 00:02:25.945
또다른 공을 만드는 것이 어떨까요?

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

00:02:30.030 --> 00:02:32.612
인자를 반대로 하면 되겠네요

00:02:32.612 --> 00:02:39.506
elipse(mouseX, position, 50, 50)
이렇게 말이죠

00:02:39.506 --> 00:02:41.470
확인해보세요

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

00:02:46.906 --> 00:02:50.075
그래도 좀 부족한 것 같아요

00:02:50.075 --> 00:02:53.445
유저가 더 조작할 수 있게 하고싶어요

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

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

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

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

00:03:12.945 --> 00:03:19.362
mouseIsPressed라고 불리는데
if문 안에 사용할 수 있어요

00:03:19.362 --> 00:03:22.339
두번째 공을 보세요

00:03:22.339 --> 00:03:31.945
if(mouseIsPressed) 를 적고
그 곳에 elipse(...)를 이동시킵니다

00:03:31.945 --> 00:03:40.863
이것이 하는 일은 If 조건이 true이면
타원을 그리게 하는 거에요

00:03:40.863 --> 00:03:46.030
유저가 마우스를 누르면
mouseIsPressed가 true가 되고요

00:03:46.030 --> 00:03:48.195
그럼 같이 해봐요

00:03:48.195 --> 00:03:49.688
짜잔!

00:03:49.688 --> 00:03:53.362
마우스 클릭할 때마다 공이 보이네요

00:03:53.362 --> 00:03:58.407
평면에서 공이 튀어나와요

00:03:58.407 --> 00:04:00.029
멋져요!

00:04:00.029 --> 00:04:04.740
mouseIsPressed변수는 흥미로워요

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

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

00:04:13.195 --> 00:04:16.171
프로그램의 결과는 계속해서

00:04:16.171 --> 00:04:18.740
유저의 단순한 입력에 따라 바뀔거에요

00:04:18.740 --> 00:04:22.029
if 구문과 mouseIsPressed변수의 조합의 힘 때문에

00:04:22.029 --> 00:04:26.670
버튼과 그리기 프로그램 처럼
멋진 것을 그릴 수 있게 되었어요

00:04:26.670 --> 00:04:29.000
유후!