-
여기는 다른 애니메이션이 있네요
이번에는 화면을 가로지르는 공이 있네요
-
그리고 여러분은 어떻게 이것이 완성되었는지 알 것입니다
-
우리는 공의 위치를 알려주는 변수(variable) x와
-
한번에 얼마나 빨리 (즉, 시간당 거리) 움직이는지 알려주는 변수 speed
-
그리고 친숙한 드로우 루프(draw loop)를 가지고 있습니다
-
이 루프는 매번 배경을 다시그리며, 칠할 색을 설정하고
위치 x에 타원형(ellipse)를 매번 그리며
-
매번 x의 값을 예전의 x값에 speed의 값을 더해줍니다
-
즉, speed의 값을 작게 만들수록
천천히 움직이는 것처럼 보일겁니다
-
만일 speed의 값이 음수라면
공은 뒤쪽으로 이동하는 것 처럼 보일겁니다
-
또한 speed의 값이 0이라면
공은 멈춰있는 것처럼 보일겁니다
-
그리고 speed의 값이 0이 아닌 이상
-
언젠가 공은 화면에서 사라질 겁니다
-
Restart버튼을 이용하여 다시 돌아오게 할 수 있습니만
그러고 나면 언젠가는 다시 예전처럼 사라질것입니다
-
그러므로 Restart버튼을 다시 누르고
또 Restart를 누르고...
-
이것을 어떻게 해야할까요?
공이 화면의 오른쪽 경계(edge)에 닿으면
-
화면의 뒤로 사라지는 대신
다시 되돌아 오도록 만들고 싶습니다
-
그리고 단순히 speed를 -5로 설정하는 것으로
공을 되돌아오게 할 수 있다는 것을 알고 있습니다
-
즉, 공의 속도를 음수로 준다면 그 공은 돌아올 겁니다
하지만 이 방법에도 문제가 있습니다
-
나는 단지 만일 공이 오른쪽 경계에 닿으면
공의 speed를 바꾸기를 원해요
-
지금 이야기 했던 것을 다시한번 생각해보죠
-
만일(if) 공이 오른쪽 경계에 닿으면
공의 speed를 바꾸기를 원해요
-
제 생각에 이것은 if 문(if Statement)를 말하는 것 같아요
-
지금까지 우리는 오직 주어진 컴퓨터 커맨드(commands)를
그것이 무엇이든 실행하는 것만 해보았습니다
-
하지만 if문은 다음과 같은 방법을 이야기합니다
-
"나는 네가 오직 특정한 상황일때만 이 코드를 실행하기를 원해"
-
"그러므로 오직 공이 오른쪽 경계에 닿았을때만
공의 speed를 바꾸고 싶어"
-
그러면 여기서 코드가 어떤 모습인지 보도록 하죠
-
이것은 "IF"라는 글자와 한쌍의 괄호 ( () )
그리고 한쌍의 중괄호 ( {} )로 이루어져있습니다
-
괄호 안에는 프로그램이 실행되기 위한 조건(condition)을 넣고
-
중괄호 안에는 실행되어야하는 코드를 넣습니다
-
이것이 작동하는 방법을 간단하게 말해보면
" 조건이 참이면 코드를 실행하고, 거짓이라면 그냥둔다"
-
그러므로 지금 상황에서 조건은 공이 우측 경계에 닿는 것이고
-
그럼 어떻게 공이 오른쪽 경계에 닿는다는 것을 알 수 있을까요?
-
우리는 공이 어디있는지 나타내는 변수(variable) x를 가지고 있고
캔버스의 경계는 x가 400이 될때라는 것을 이미 알고있어요
-
그러므로 x가 400보다 커지면,
우리는 공이 우측 경계를 조금이나 넘어갔다는 것을 알수 있죠
-
그러면 이것이 어떻게 작동하는지 봅시다
-
코드가 실행되면 전에 이야기 한 것 처럼
우리는 단지 speed의 값을 바꿀거에요
-
speed를 -5가 되도록 하고
Restart 버튼을 누르고 어떤일이 일어나는지 보죠
-
자 이번에는 공이 오른쪽 경계에 닿고
이것은 튀어나오게 되요!!!
-
하지만 여전히 화면에서 사라지는 것은 여전하네요
-
하지만 괜찮아요 반대쪽 경계에서도 똑같이 설정하면 될거에요
-
그러므로 만일 공이 왼쪽 경계에
닿았는지도 체크하도록 해볼게요
-
만일 x가 0보다 작아진다면,
speed의 값을 양수인 5로 만들어줍시다
-
모든것이 준비되면 Restart버튼을 눌러봅시다
-
비융
-
띠옹
-
디용
-
정상적으로 작동하네요!!!
-
보면 알겠지만 우리는 공을 경계에서 튀어나오도록 설정했지만
경계에서 조금 지난 곳에서 튀어나오는 것처럼 느껴지고 있어요
-
그리고 어떠한 타원형을 어느위치에 그릴지 결정하는
두개의 파라미터(parameter)가 있었다는것을 기억하나요?
-
그러므로 지금까지는 공의 중앙부분이 경계에 닿을때
즉 공의 반정도가 경계를 넘어간 상태를 체크하고 있는 것이죠
-
그러므로 이것을 고치기 위해서는
공을 조금 더 일찍 멈추어야해요
-
즉 공의 중심이 아닌 경계지점의 위치가
400이 되면 멈추어야 하는 것이죠
-
타원형을 그리는 함수의 형태를 잘 보면
타원형의 너비(width)는 50인 것을 볼 수 있어요
-
이것은 타원의 중심부터 경계까지의 값이 25라는 것을 의미하죠
-
그러므로 우리는 타원형의 중심이 375일때 멈추기를 원합니다
왜냐면 400에서 25를 뺀 값이 375이기 때문이죠
-
그러므로 x가 400보다 클지를 체크하는것 대신에
x가 375보다 큰지를 체크하고
-
x가 0보다 작을때를 체크하는것 대신에
x스가 25보다 작을때를 체크합니다
-
저기 튀어나오는 공들을 보세요!
이제 모든것이 아주 완벽해요!