0:00:00.869,0:00:03.972
여러분들은 변수를 새로 만들고 [br]사용하는 법을 배웠습니다

0:00:03.972,0:00:10.790
이제 mouseX, mouseY라는 [br]새로운 변수들에 대해 배워봅시다

0:00:10.790,0:00:16.658
이 변수들은 이미 존재하기 때문에 [br]새로 만들 필요가 없습니다

0:00:16.658,0:00:22.501
보이지않게 프로그램이 [br]이 변수에 대한 값을 정하고 있어요

0:00:22.501,0:00:27.551
mouseX의 값은 여러분의 마우스의 x위치이고 [br]mouseY 값은 여러분의 마우스의 y위치입니다

0:00:27.551,0:00:33.278
이것은 사용자의 마우스 위치를 기반으로[br]상호작용을 원활하게 해줍니다

0:00:33.278,0:00:36.508
여기 제가 그리고 있는 타원을 봅시다

0:00:36.508,0:00:41.192
저는 지금 200, 200위치에 그리고 있습니다

0:00:41.192,0:00:49.718
특별한 변수인 mouseX와 mouseY를 이용한다면 [br]mouseX와 mouseY 위치에 그릴 수 있습니다

0:00:49.718,0:00:55.760
제가 마우스를 캔버스 위로 움직일 때마다 [br]타원은 마우스 위치에 그려집니다

0:00:55.760,0:00:58.510
그리고 저의 마우스를 따라 다니죠

0:00:58.510,0:01:01.310
제가 무엇을 그리는지 아시겠나요?

0:01:01.310,0:01:10.839
변수 mouseX와 mouseY를 사용하기 위해 반드시 [br]draw=function() 안에서 사용해야 합니다

0:01:10.839,0:01:13.839
이 코드 2줄을 draw=function()밖에서 [br]사용하면 이렇게 됩니다

0:01:13.839,0:01:15.173
보이시나요?

0:01:15.173,0:01:26.893
이 코드는 단 한번만 수행되어 타원을 그리므로 [br]초기 마우스가 위치했던 곳에 그려집니다

0:01:26.893,0:01:32.673
그렇기 때문에 그것을 [br]draw=function() 안에 두어야 해요

0:01:32.673,0:01:38.185
왜냐하면 draw=function()은 계속 [br]반복해서 수행되는 function이기 때문입니다.

0:01:38.185,0:01:43.301
그 function이 불려지면 mouseX와 mouseY의 [br]현재 값을 확인하고 그 위치에 타원을 그립니다

0:01:43.301,0:01:49.961
생각해보면 애니메이션과 배우 비슷해요[br]조금씩 변해가요 물론 다른 방식이긴 하지만요

0:01:49.961,0:01:52.957
이제 우리는 재밌는 다양한 일들을 할 수 있습니다

0:01:52.957,0:01:58.711
mouseX와 mouseY 위치에 그리지 않고 [br]mouseX는 그대로 사용하고

0:01:58.711,0:02:03.871
mouseY만 300에 고정한다면 어떻게 될까요

0:02:03.871,0:02:10.589
여러분들은 타원이 y값에 관계없이 [br]x값만을 따르는 것을 알 수 있습니다

0:02:10.589,0:02:21.647
다시 돌아와서 mouseX와 mouseY에 그리지만 [br]배경 부분을 잠시 없애보면

0:02:21.647,0:02:27.433
그러면 이렇게 이상한 [br]붓질을 하게 되는 것처럼 되죠!

0:02:27.433,0:02:39.049
배경을 다시 불러오고 mouseX와 mouseY 변수를 맞바꾼다면 어떻게 될까요?

0:02:39.049,0:02:45.907
마우스 조정이 우리의 의도와 다르게 기능합니다

0:02:45.907,0:02:53.400
마우스를 거꾸로 사용하게 해서 뭔가를 그리는 [br]전혀 새로운 게임을 만들 수도 있겠네요

0:02:53.400,0:02:59.808
이것으로 mouseX와 mouseY에 대한 [br]설명을 마치겠습니다