지난 시간에 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변수의 조합의 힘 때문에
버튼과 그리기 프로그램 처럼 멋진 것을 그릴 수 있게 되었어요
유후!