WEBVTT 00:00:00.869 --> 00:00:03.972 여러분들은 변수를 새로 만들고 사용하는 법을 배웠습니다 00:00:03.972 --> 00:00:10.790 이제 mouseX, mouseY라는 새로운 변수들에 대해 배워봅시다 00:00:10.790 --> 00:00:16.658 이 변수들은 이미 존재하기 때문에 새로 만들 필요가 없습니다 00:00:16.658 --> 00:00:22.501 보이지않게 프로그램이 이 변수에 대한 값을 정하고 있어요 00:00:22.501 --> 00:00:27.551 mouseX의 값은 여러분의 마우스의 x위치이고 mouseY 값은 여러분의 마우스의 y위치입니다 00:00:27.551 --> 00:00:33.278 이것은 사용자의 마우스 위치를 기반으로 상호작용을 원활하게 해줍니다 00:00:33.278 --> 00:00:36.508 여기 제가 그리고 있는 타원을 봅시다 00:00:36.508 --> 00:00:41.192 저는 지금 200, 200위치에 그리고 있습니다 00:00:41.192 --> 00:00:49.718 특별한 변수인 mouseX와 mouseY를 이용한다면 mouseX와 mouseY 위치에 그릴 수 있습니다 00:00:49.718 --> 00:00:55.760 제가 마우스를 캔버스 위로 움직일 때마다 타원은 마우스 위치에 그려집니다 00:00:55.760 --> 00:00:58.510 그리고 저의 마우스를 따라 다니죠 00:00:58.510 --> 00:01:01.310 제가 무엇을 그리는지 아시겠나요? 00:01:01.310 --> 00:01:10.839 변수 mouseX와 mouseY를 사용하기 위해 반드시 draw=function() 안에서 사용해야 합니다 00:01:10.839 --> 00:01:13.839 이 코드 2줄을 draw=function()밖에서 사용하면 이렇게 됩니다 00:01:13.839 --> 00:01:15.173 보이시나요? 00:01:15.173 --> 00:01:26.893 이 코드는 단 한번만 수행되어 타원을 그리므로 초기 마우스가 위치했던 곳에 그려집니다 00:01:26.893 --> 00:01:32.673 그렇기 때문에 그것을 draw=function() 안에 두어야 해요 00:01:32.673 --> 00:01:38.185 왜냐하면 draw=function()은 계속 반복해서 수행되는 function이기 때문입니다. 00:01:38.185 --> 00:01:43.301 그 function이 불려지면 mouseX와 mouseY의 현재 값을 확인하고 그 위치에 타원을 그립니다 00:01:43.301 --> 00:01:49.961 생각해보면 애니메이션과 배우 비슷해요 조금씩 변해가요 물론 다른 방식이긴 하지만요 00:01:49.961 --> 00:01:52.957 이제 우리는 재밌는 다양한 일들을 할 수 있습니다 00:01:52.957 --> 00:01:58.711 mouseX와 mouseY 위치에 그리지 않고 mouseX는 그대로 사용하고 00:01:58.711 --> 00:02:03.871 mouseY만 300에 고정한다면 어떻게 될까요 00:02:03.871 --> 00:02:10.589 여러분들은 타원이 y값에 관계없이 x값만을 따르는 것을 알 수 있습니다 00:02:10.589 --> 00:02:21.647 다시 돌아와서 mouseX와 mouseY에 그리지만 배경 부분을 잠시 없애보면 00:02:21.647 --> 00:02:27.433 그러면 이렇게 이상한 붓질을 하게 되는 것처럼 되죠! 00:02:27.433 --> 00:02:39.049 배경을 다시 불러오고 mouseX와 mouseY 변수를 맞바꾼다면 어떻게 될까요? 00:02:39.049 --> 00:02:45.907 마우스 조정이 우리의 의도와 다르게 기능합니다 00:02:45.907 --> 00:02:53.400 마우스를 거꾸로 사용하게 해서 뭔가를 그리는 전혀 새로운 게임을 만들 수도 있겠네요 00:02:53.400 --> 00:02:59.808 이것으로 mouseX와 mouseY에 대한 설명을 마치겠습니다