1 00:00:00,869 --> 00:00:03,972 여러분들은 변수를 새로 만들고 사용하는 법을 배웠습니다 2 00:00:03,972 --> 00:00:10,790 이제 mouseX, mouseY라는 새로운 변수들에 대해 배워봅시다 3 00:00:10,790 --> 00:00:16,658 이 변수들은 이미 존재하기 때문에 새로 만들 필요가 없습니다 4 00:00:16,658 --> 00:00:22,501 보이지않게 프로그램이 이 변수에 대한 값을 정하고 있어요 5 00:00:22,501 --> 00:00:27,551 mouseX의 값은 여러분의 마우스의 x위치이고 mouseY 값은 여러분의 마우스의 y위치입니다 6 00:00:27,551 --> 00:00:33,278 이것은 사용자의 마우스 위치를 기반으로 상호작용을 원활하게 해줍니다 7 00:00:33,278 --> 00:00:36,508 여기 제가 그리고 있는 타원을 봅시다 8 00:00:36,508 --> 00:00:41,192 저는 지금 200, 200위치에 그리고 있습니다 9 00:00:41,192 --> 00:00:49,718 특별한 변수인 mouseX와 mouseY를 이용한다면 mouseX와 mouseY 위치에 그릴 수 있습니다 10 00:00:49,718 --> 00:00:55,760 제가 마우스를 캔버스 위로 움직일 때마다 타원은 마우스 위치에 그려집니다 11 00:00:55,760 --> 00:00:58,510 그리고 저의 마우스를 따라 다니죠 12 00:00:58,510 --> 00:01:01,310 제가 무엇을 그리는지 아시겠나요? 13 00:01:01,310 --> 00:01:10,839 변수 mouseX와 mouseY를 사용하기 위해 반드시 draw=function() 안에서 사용해야 합니다 14 00:01:10,839 --> 00:01:13,839 이 코드 2줄을 draw=function()밖에서 사용하면 이렇게 됩니다 15 00:01:13,839 --> 00:01:15,173 보이시나요? 16 00:01:15,173 --> 00:01:26,893 이 코드는 단 한번만 수행되어 타원을 그리므로 초기 마우스가 위치했던 곳에 그려집니다 17 00:01:26,893 --> 00:01:32,673 그렇기 때문에 그것을 draw=function() 안에 두어야 해요 18 00:01:32,673 --> 00:01:38,185 왜냐하면 draw=function()은 계속 반복해서 수행되는 function이기 때문입니다. 19 00:01:38,185 --> 00:01:43,301 그 function이 불려지면 mouseX와 mouseY의 현재 값을 확인하고 그 위치에 타원을 그립니다 20 00:01:43,301 --> 00:01:49,961 생각해보면 애니메이션과 배우 비슷해요 조금씩 변해가요 물론 다른 방식이긴 하지만요 21 00:01:49,961 --> 00:01:52,957 이제 우리는 재밌는 다양한 일들을 할 수 있습니다 22 00:01:52,957 --> 00:01:58,711 mouseX와 mouseY 위치에 그리지 않고 mouseX는 그대로 사용하고 23 00:01:58,711 --> 00:02:03,871 mouseY만 300에 고정한다면 어떻게 될까요 24 00:02:03,871 --> 00:02:10,589 여러분들은 타원이 y값에 관계없이 x값만을 따르는 것을 알 수 있습니다 25 00:02:10,589 --> 00:02:21,647 다시 돌아와서 mouseX와 mouseY에 그리지만 배경 부분을 잠시 없애보면 26 00:02:21,647 --> 00:02:27,433 그러면 이렇게 이상한 붓질을 하게 되는 것처럼 되죠! 27 00:02:27,433 --> 00:02:39,049 배경을 다시 불러오고 mouseX와 mouseY 변수를 맞바꾼다면 어떻게 될까요? 28 00:02:39,049 --> 00:02:45,907 마우스 조정이 우리의 의도와 다르게 기능합니다 29 00:02:45,907 --> 00:02:53,400 마우스를 거꾸로 사용하게 해서 뭔가를 그리는 전혀 새로운 게임을 만들 수도 있겠네요 30 00:02:53,400 --> 00:02:59,808 이것으로 mouseX와 mouseY에 대한 설명을 마치겠습니다