-
지난 시간에 draw()함수와 if구문을 통해
공 튀기기를 해봤어요
-
복습 한번 할게요
-
먼저 공의 위치변수와 속도변수에
초기값을 설정해요
-
그리고 반복 호출되는 draw()함수를 통해
-
배경을 다시 칠하고
타원을 그리는 과정을 반복해요
-
타원의 위치는 위치변수값과 속도변수값의
상호작용에 의해 결정돼요
-
if문 없이는 공이 앞으로만 계속 갈거에요
-
재시작을 하기 전까지는 말이죠
-
그래서 밑에다가 if문을 두개 추가했습니다
-
그렇게 해서 공이 오른쪽벽이나 왼쪽벽에 가까워진다면
-
그 공이 반대쪽으로 튕겨나갈 수 있게
속도를 양수나 음수로 바꿔줍니다
-
공은 이제 계속 앞뒤로 움직일겁니다
-
멋지네요
이것을 응용할 수 있는 애니메이션은 많이 있어요
-
그렇지만 지금은 유저와의 상호작용을
추가하고싶어요
-
아직은 이 프로그램이 TV쇼를 보는것같아요
-
프로그램을 친구에게 줘도 친구가 프로그램
할 줄도 모르고 그래서 상호작용할 수가 없으니까
-
눈으로 보기만 했었죠
그것도 괜찮긴 하지만
-
보기만 하는 것보다
직접 해보는게 더 신날 것 같아요
-
그래서 유저가 조작할 수 있게
방법을 제시해야겠어요
-
이전에 mouseX와 mouseY라는 전역변수에 대해 배웠어요
-
현재 마우스 위치를 알아내는 변수에요
-
이것을 이용하면 프로그램이 보다 쌍방향적으로 돼요
-
그걸 어떤 방법으로 사용할까요?
-
draw()함수 안에서 사용하면 돼요
-
프로그램이 실행될 때
draw()함수만 반복 호출되기 때문이에요
-
draw()함수를 제외하고는 한번만 호출돼요
-
반복 호출되지 않으면
-
유저가 mouseX와 mouseY를 이용해
상호작용을 할 수 없게 됩니다
-
draw()함수를 통해
200 픽셀 위치에 공을 그릴거에요
-
y좌표니까 mouseY를 이용하는 것은 어떨까요?
-
그랬더니 공이 움직일 때 마우스 y위치가 적용되네요
-
이것 좀 봐요! 마우스를 위아래로 움직이면
공이 움직이는 라인을 위아래로 바꿀 수 있어요
-
멋지네요
이제 mouseX를 사용해볼 차례입니다
-
어떻게할까요?
-
좌우가 아닌 위아래로 움직이는
-
또다른 공을 만드는 것이 어떨까요?
-
유저가 공의 x좌표를 조작할 수 있게 하고요
-
인자를 반대로 하면 되겠네요
-
elipse(mouseX, position, 50, 50)
이렇게 말이죠
-
확인해보세요
-
수직 방향으로 움직이는 2개의 공을
제가 지금 제어하고 있어요
-
그래도 좀 부족한 것 같아요
-
유저가 더 조작할 수 있게 하고싶어요
-
2번째 공이 보이게 하는 권한을 유저에게 주고싶어요
-
마우스 클릭한 지점에서 시작하도록 말이죠
-
그럼 유저가 마우스를 눌렀는지 알아내야 하네요
-
다행히 그 역할을 할 bool형태의 변수가 이미 있어요
-
mouseIsPressed라고 불리는데
if문 안에 사용할 수 있어요
-
두번째 공을 보세요
-
if(mouseIsPressed) 를 적고
그 곳에 elipse(...)를 이동시킵니다
-
이것이 하는 일은 If 조건이 true이면
타원을 그리게 하는 거에요
-
유저가 마우스를 누르면
mouseIsPressed가 true가 되고요
-
그럼 같이 해봐요
-
짜잔!
-
마우스 클릭할 때마다 공이 보이네요
-
평면에서 공이 튀어나와요
-
멋져요!
-
mouseIsPressed변수는 흥미로워요
-
프로그램에 기반한 것이 아닌
유저의 행동에 기반해서 작동하니까요
-
그리고 draw()함수가 반복호출되는 것 때문에
-
프로그램의 결과는 계속해서
-
유저의 단순한 입력에 따라 바뀔거에요
-
if 구문과 mouseIsPressed변수의 조합의 힘 때문에
-
버튼과 그리기 프로그램 처럼
멋진 것을 그릴 수 있게 되었어요
-
유후!
