1
00:00:00,000 --> 00:00:04,406
여기는 다른 애니메이션이 있네요
이번에는 화면을 가로지르는 공이 있네요
2
00:00:04,406 --> 00:00:07,532
그리고 여러분은 어떻게 이것이 완성되었는지 알 것입니다
3
00:00:07,532 --> 00:00:10,420
우리는 공의 위치를 알려주는 변수(variable) x와
4
00:00:10,420 --> 00:00:14,168
한번에 얼마나 빨리 (즉, 시간당 거리) 움직이는지 알려주는 변수 speed
5
00:00:14,168 --> 00:00:17,417
그리고 친숙한 드로우 루프(draw loop)를 가지고 있습니다
6
00:00:17,417 --> 00:00:22,395
이 루프는 매번 배경을 다시그리며, 칠할 색을 설정하고
위치 x에 타원형(ellipse)를 매번 그리며
7
00:00:22,395 --> 00:00:25,976
매번 x의 값을 예전의 x값에 speed의 값을 더해줍니다
8
00:00:25,976 --> 00:00:32,104
즉, speed의 값을 작게 만들수록
천천히 움직이는 것처럼 보일겁니다
9
00:00:32,104 --> 00:00:34,782
만일 speed의 값이 음수라면
공은 뒤쪽으로 이동하는 것 처럼 보일겁니다
10
00:00:34,782 --> 00:00:38,210
또한 speed의 값이 0이라면
공은 멈춰있는 것처럼 보일겁니다
11
00:00:38,210 --> 00:00:40,481
그리고 speed의 값이 0이 아닌 이상
12
00:00:40,481 --> 00:00:43,790
언젠가 공은 화면에서 사라질 겁니다
13
00:00:43,800 --> 00:00:49,250
Restart버튼을 이용하여 다시 돌아오게 할 수 있습니만
그러고 나면 언젠가는 다시 예전처럼 사라질것입니다
14
00:00:49,250 --> 00:00:52,407
그러므로 Restart버튼을 다시 누르고
또 Restart를 누르고...
15
00:00:52,407 --> 00:00:55,738
이것을 어떻게 해야할까요?
공이 화면의 오른쪽 경계(edge)에 닿으면
16
00:00:55,738 --> 00:00:59,509
화면의 뒤로 사라지는 대신
다시 되돌아 오도록 만들고 싶습니다
17
00:00:59,509 --> 00:01:06,047
그리고 단순히 speed를 -5로 설정하는 것으로
공을 되돌아오게 할 수 있다는 것을 알고 있습니다
18
00:01:06,047 --> 00:01:11,738
즉, 공의 속도를 음수로 준다면 그 공은 돌아올 겁니다
하지만 이 방법에도 문제가 있습니다
19
00:01:11,738 --> 00:01:16,743
나는 단지 만일 공이 오른쪽 경계에 닿으면
공의 speed를 바꾸기를 원해요
20
00:01:16,743 --> 00:01:19,519
지금 이야기 했던 것을 다시한번 생각해보죠
21
00:01:19,519 --> 00:01:24,335
만일(if) 공이 오른쪽 경계에 닿으면
공의 speed를 바꾸기를 원해요
22
00:01:24,335 --> 00:01:27,493
제 생각에 이것은 if 문(if Statement)를 말하는 것 같아요
23
00:01:27,493 --> 00:01:31,840
지금까지 우리는 오직 주어진 컴퓨터 커맨드(commands)를
그것이 무엇이든 실행하는 것만 해보았습니다
24
00:01:31,840 --> 00:01:34,598
하지만 if문은 다음과 같은 방법을 이야기합니다
25
00:01:34,598 --> 00:01:38,516
"나는 네가 오직 특정한 상황일때만 이 코드를 실행하기를 원해"
26
00:01:38,516 --> 00:01:42,004
"그러므로 오직 공이 오른쪽 경계에 닿았을때만
공의 speed를 바꾸고 싶어"
27
00:01:42,004 --> 00:01:44,838
그러면 여기서 코드가 어떤 모습인지 보도록 하죠
28
00:01:44,838 --> 00:01:50,947
이것은 "IF"라는 글자와 한쌍의 괄호 ( () )
그리고 한쌍의 중괄호 ( {} )로 이루어져있습니다
29
00:01:50,947 --> 00:01:54,253
괄호 안에는 프로그램이 실행되기 위한 조건(condition)을 넣고
30
00:01:54,253 --> 00:01:57,480
중괄호 안에는 실행되어야하는 코드를 넣습니다
31
00:01:57,480 --> 00:02:03,484
이것이 작동하는 방법을 간단하게 말해보면
" 조건이 참이면 코드를 실행하고, 거짓이라면 그냥둔다"
32
00:02:03,484 --> 00:02:06,777
그러므로 지금 상황에서 조건은 공이 우측 경계에 닿는 것이고
33
00:02:06,777 --> 00:02:10,210
그럼 어떻게 공이 오른쪽 경계에 닿는다는 것을 알 수 있을까요?
34
00:02:10,210 --> 00:02:20,454
우리는 공이 어디있는지 나타내는 변수(variable) x를 가지고 있고
캔버스의 경계는 x가 400이 될때라는 것을 이미 알고있어요
35
00:02:20,454 --> 00:02:28,489
그러므로 x가 400보다 커지면,
우리는 공이 우측 경계를 조금이나 넘어갔다는 것을 알수 있죠
36
00:02:28,489 --> 00:02:31,067
그러면 이것이 어떻게 작동하는지 봅시다
37
00:02:31,067 --> 00:02:35,250
코드가 실행되면 전에 이야기 한 것 처럼
우리는 단지 speed의 값을 바꿀거에요
38
00:02:35,250 --> 00:02:41,253
speed를 -5가 되도록 하고
Restart 버튼을 누르고 어떤일이 일어나는지 보죠
39
00:02:41,253 --> 00:02:44,971
자 이번에는 공이 오른쪽 경계에 닿고
이것은 튀어나오게 되요!!!
40
00:02:44,971 --> 00:02:47,813
하지만 여전히 화면에서 사라지는 것은 여전하네요
41
00:02:47,813 --> 00:02:50,284
하지만 괜찮아요 반대쪽 경계에서도 똑같이 설정하면 될거에요
42
00:02:50,284 --> 00:02:53,065
그러므로 만일 공이 왼쪽 경계에
닿았는지도 체크하도록 해볼게요
43
00:02:53,065 --> 00:03:03,047
만일 x가 0보다 작아진다면,
speed의 값을 양수인 5로 만들어줍시다
44
00:03:03,047 --> 00:03:08,108
모든것이 준비되면 Restart버튼을 눌러봅시다
45
00:03:08,108 --> 00:03:11,715
비융
46
00:03:11,715 --> 00:03:13,815
띠옹
47
00:03:13,815 --> 00:03:14,502
디용
48
00:03:14,502 --> 00:03:16,686
정상적으로 작동하네요!!!
49
00:03:16,686 --> 00:03:23,163
보면 알겠지만 우리는 공을 경계에서 튀어나오도록 설정했지만
경계에서 조금 지난 곳에서 튀어나오는 것처럼 느껴지고 있어요
50
00:03:23,163 --> 00:03:29,265
그리고 어떠한 타원형을 어느위치에 그릴지 결정하는
두개의 파라미터(parameter)가 있었다는것을 기억하나요?
51
00:03:29,265 --> 00:03:35,279
그러므로 지금까지는 공의 중앙부분이 경계에 닿을때
즉 공의 반정도가 경계를 넘어간 상태를 체크하고 있는 것이죠
52
00:03:35,279 --> 00:03:38,773
그러므로 이것을 고치기 위해서는
공을 조금 더 일찍 멈추어야해요
53
00:03:38,773 --> 00:03:45,035
즉 공의 중심이 아닌 경계지점의 위치가
400이 되면 멈추어야 하는 것이죠
54
00:03:45,035 --> 00:03:52,017
타원형을 그리는 함수의 형태를 잘 보면
타원형의 너비(width)는 50인 것을 볼 수 있어요
55
00:03:52,017 --> 00:03:58,639
이것은 타원의 중심부터 경계까지의 값이 25라는 것을 의미하죠
56
00:03:58,639 --> 00:04:05,528
그러므로 우리는 타원형의 중심이 375일때 멈추기를 원합니다
왜냐면 400에서 25를 뺀 값이 375이기 때문이죠
57
00:04:05,528 --> 00:04:10,980
그러므로 x가 400보다 클지를 체크하는것 대신에
x가 375보다 큰지를 체크하고
58
00:04:10,980 --> 00:04:16,528
x가 0보다 작을때를 체크하는것 대신에
x스가 25보다 작을때를 체크합니다
59
00:04:16,528 --> 00:04:22,432
저기 튀어나오는 공들을 보세요!
이제 모든것이 아주 완벽해요!