여러분들은 변수를 새로 만들고 
사용하는 법을 배웠습니다

이제 mouseX, mouseY라는 
새로운 변수들에 대해 배워봅시다

이 변수들은 이미 존재하기 때문에 
새로 만들 필요가 없습니다

보이지않게 프로그램이 
이 변수에 대한 값을 정하고 있어요

mouseX의 값은 여러분의 마우스의 x위치이고 
mouseY 값은 여러분의 마우스의 y위치입니다

이것은 사용자의 마우스 위치를 기반으로
상호작용을 원활하게 해줍니다

여기 제가 그리고 있는 타원을 봅시다

저는 지금 200, 200위치에 그리고 있습니다

특별한 변수인 mouseX와 mouseY를 이용한다면 
mouseX와 mouseY 위치에 그릴 수 있습니다

제가 마우스를 캔버스 위로 움직일 때마다 
타원은 마우스 위치에 그려집니다

그리고 저의 마우스를 따라 다니죠

제가 무엇을 그리는지 아시겠나요?

변수 mouseX와 mouseY를 사용하기 위해 반드시 
draw=function() 안에서 사용해야 합니다

이 코드 2줄을 draw=function()밖에서 
사용하면 이렇게 됩니다

보이시나요?

이 코드는 단 한번만 수행되어 타원을 그리므로 
초기 마우스가 위치했던 곳에 그려집니다

그렇기 때문에 그것을 
draw=function() 안에 두어야 해요

왜냐하면 draw=function()은 계속 
반복해서 수행되는 function이기 때문입니다.

그 function이 불려지면 mouseX와 mouseY의 
현재 값을 확인하고 그 위치에 타원을 그립니다

생각해보면 애니메이션과 배우 비슷해요
조금씩 변해가요 물론 다른 방식이긴 하지만요

이제 우리는 재밌는 다양한 일들을 할 수 있습니다

mouseX와 mouseY 위치에 그리지 않고 
mouseX는 그대로 사용하고

mouseY만 300에 고정한다면 어떻게 될까요

여러분들은 타원이 y값에 관계없이 
x값만을 따르는 것을 알 수 있습니다

다시 돌아와서 mouseX와 mouseY에 그리지만 
배경 부분을 잠시 없애보면

그러면 이렇게 이상한 
붓질을 하게 되는 것처럼 되죠!

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

마우스 조정이 우리의 의도와 다르게 기능합니다

마우스를 거꾸로 사용하게 해서 뭔가를 그리는 
전혀 새로운 게임을 만들 수도 있겠네요

이것으로 mouseX와 mouseY에 대한 
설명을 마치겠습니다