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