-
여러분들은 변수를 새로 만들고
사용하는 법을 배웠습니다
-
이제 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에 대한
설명을 마치겠습니다
