0:00:00.000,0:00:04.406
여기는 다른 애니메이션이 있네요[br]이번에는 화면을 가로지르는 공이 있네요
0:00:04.406,0:00:07.532
그리고 여러분은 어떻게 이것이 완성되었는지 알 것입니다
0:00:07.532,0:00:10.420
우리는 공의 위치를 알려주는 변수(variable) x와[br]
0:00:10.420,0:00:14.168
한번에 얼마나 빨리 (즉, 시간당 거리) 움직이는지 알려주는 변수 speed
0:00:14.168,0:00:17.417
그리고 친숙한 드로우 루프(draw loop)를 가지고 있습니다
0:00:17.417,0:00:22.395
이 루프는 매번 배경을 다시그리며, 칠할 색을 설정하고[br]위치 x에 타원형(ellipse)를 매번 그리며
0:00:22.395,0:00:25.976
매번 x의 값을 예전의 x값에 speed의 값을 더해줍니다
0:00:25.976,0:00:32.104
즉, speed의 값을 작게 만들수록[br]천천히 움직이는 것처럼 보일겁니다
0:00:32.104,0:00:34.782
만일 speed의 값이 음수라면[br]공은 뒤쪽으로 이동하는 것 처럼 보일겁니다
0:00:34.782,0:00:38.210
또한 speed의 값이 0이라면[br]공은 멈춰있는 것처럼 보일겁니다
0:00:38.210,0:00:40.481
그리고 speed의 값이 0이 아닌 이상
0:00:40.481,0:00:43.790
언젠가 공은 화면에서 사라질 겁니다
0:00:43.800,0:00:49.250
Restart버튼을 이용하여 다시 돌아오게 할 수 있습니만[br]그러고 나면 언젠가는 다시 예전처럼 사라질것입니다
0:00:49.250,0:00:52.407
그러므로 Restart버튼을 다시 누르고[br]또 Restart를 누르고...
0:00:52.407,0:00:55.738
이것을 어떻게 해야할까요?[br]공이 화면의 오른쪽 경계(edge)에 닿으면
0:00:55.738,0:00:59.509
화면의 뒤로 사라지는 대신[br]다시 되돌아 오도록 만들고 싶습니다
0:00:59.509,0:01:06.047
그리고 단순히 speed를 -5로 설정하는 것으로[br]공을 되돌아오게 할 수 있다는 것을 알고 있습니다
0:01:06.047,0:01:11.738
즉, 공의 속도를 음수로 준다면 그 공은 돌아올 겁니다[br]하지만 이 방법에도 문제가 있습니다
0:01:11.738,0:01:16.743
나는 단지 만일 공이 오른쪽 경계에 닿으면[br]공의 speed를 바꾸기를 원해요
0:01:16.743,0:01:19.519
지금 이야기 했던 것을 다시한번 생각해보죠
0:01:19.519,0:01:24.335
만일(if) 공이 오른쪽 경계에 닿으면[br]공의 speed를 바꾸기를 원해요
0:01:24.335,0:01:27.493
제 생각에 이것은 if 문(if Statement)를 말하는 것 같아요
0:01:27.493,0:01:31.840
지금까지 우리는 오직 주어진 컴퓨터 커맨드(commands)를[br]그것이 무엇이든 실행하는 것만 해보았습니다
0:01:31.840,0:01:34.598
하지만 if문은 다음과 같은 방법을 이야기합니다
0:01:34.598,0:01:38.516
"나는 네가 오직 특정한 상황일때만 이 코드를 실행하기를 원해"
0:01:38.516,0:01:42.004
"그러므로 오직 공이 오른쪽 경계에 닿았을때만[br]공의 speed를 바꾸고 싶어"
0:01:42.004,0:01:44.838
그러면 여기서 코드가 어떤 모습인지 보도록 하죠
0:01:44.838,0:01:50.947
이것은 "IF"라는 글자와 한쌍의 괄호 ( () ) [br]그리고 한쌍의 중괄호 ( {} )로 이루어져있습니다
0:01:50.947,0:01:54.253
괄호 안에는 프로그램이 실행되기 위한 조건(condition)을 넣고
0:01:54.253,0:01:57.480
중괄호 안에는 실행되어야하는 코드를 넣습니다
0:01:57.480,0:02:03.484
이것이 작동하는 방법을 간단하게 말해보면[br]" 조건이 참이면 코드를 실행하고, 거짓이라면 그냥둔다"
0:02:03.484,0:02:06.777
그러므로 지금 상황에서 조건은 공이 우측 경계에 닿는 것이고
0:02:06.777,0:02:10.210
그럼 어떻게 공이 오른쪽 경계에 닿는다는 것을 알 수 있을까요?
0:02:10.210,0:02:20.454
우리는 공이 어디있는지 나타내는 변수(variable) x를 가지고 있고[br]캔버스의 경계는 x가 400이 될때라는 것을 이미 알고있어요
0:02:20.454,0:02:28.489
그러므로 x가 400보다 커지면,[br]우리는 공이 우측 경계를 조금이나 넘어갔다는 것을 알수 있죠
0:02:28.489,0:02:31.067
그러면 이것이 어떻게 작동하는지 봅시다
0:02:31.067,0:02:35.250
코드가 실행되면 전에 이야기 한 것 처럼[br]우리는 단지 speed의 값을 바꿀거에요
0:02:35.250,0:02:41.253
speed를 -5가 되도록 하고 [br]Restart 버튼을 누르고 어떤일이 일어나는지 보죠
0:02:41.253,0:02:44.971
자 이번에는 공이 오른쪽 경계에 닿고[br]이것은 튀어나오게 되요!!!
0:02:44.971,0:02:47.813
하지만 여전히 화면에서 사라지는 것은 여전하네요
0:02:47.813,0:02:50.284
하지만 괜찮아요 반대쪽 경계에서도 똑같이 설정하면 될거에요
0:02:50.284,0:02:53.065
그러므로 만일 공이 왼쪽 경계에[br]닿았는지도 체크하도록 해볼게요
0:02:53.065,0:03:03.047
만일 x가 0보다 작아진다면,[br]speed의 값을 양수인 5로 만들어줍시다
0:03:03.047,0:03:08.108
모든것이 준비되면 Restart버튼을 눌러봅시다
0:03:08.108,0:03:11.715
비융
0:03:11.715,0:03:13.815
띠옹
0:03:13.815,0:03:14.502
디용
0:03:14.502,0:03:16.686
정상적으로 작동하네요!!!
0:03:16.686,0:03:23.163
보면 알겠지만 우리는 공을 경계에서 튀어나오도록 설정했지만 [br]경계에서 조금 지난 곳에서 튀어나오는 것처럼 느껴지고 있어요
0:03:23.163,0:03:29.265
그리고 어떠한 타원형을 어느위치에 그릴지 결정하는[br]두개의 파라미터(parameter)가 있었다는것을 기억하나요?
0:03:29.265,0:03:35.279
그러므로 지금까지는 공의 중앙부분이 경계에 닿을때[br]즉 공의 반정도가 경계를 넘어간 상태를 체크하고 있는 것이죠
0:03:35.279,0:03:38.773
그러므로 이것을 고치기 위해서는 [br]공을 조금 더 일찍 멈추어야해요
0:03:38.773,0:03:45.035
즉 공의 중심이 아닌 경계지점의 위치가[br]400이 되면 멈추어야 하는 것이죠
0:03:45.035,0:03:52.017
타원형을 그리는 함수의 형태를 잘 보면[br]타원형의 너비(width)는 50인 것을 볼 수 있어요
0:03:52.017,0:03:58.639
이것은 타원의 중심부터 경계까지의 값이 25라는 것을 의미하죠
0:03:58.639,0:04:05.528
그러므로 우리는 타원형의 중심이 375일때 멈추기를 원합니다[br]왜냐면 400에서 25를 뺀 값이 375이기 때문이죠
0:04:05.528,0:04:10.980
그러므로 x가 400보다 클지를 체크하는것 대신에[br]x가 375보다 큰지를 체크하고
0:04:10.980,0:04:16.528
x가 0보다 작을때를 체크하는것 대신에[br]x스가 25보다 작을때를 체크합니다
0:04:16.528,0:04:22.432
저기 튀어나오는 공들을 보세요![br]이제 모든것이 아주 완벽해요!