1
00:00:00,989 --> 00:00:03,303
무언가를 움직이는 것처럼
보이는 방법은 여러가지가 있어요
2
00:00:03,303 --> 00:00:05,241
하지만 기본적인 원리는 항상 같습니다
3
00:00:05,241 --> 00:00:07,482
만일 여러분이 처음부터 끝까지
한 묶음의 그림들을 가지고 있는데
4
00:00:07,482 --> 00:00:09,726
그림들이 조금씩 다르다고 했을 때
5
00:00:09,726 --> 00:00:11,462
그림을 빠르게 넘긴다면
6
00:00:11,462 --> 00:00:13,267
마치 움직이는 것 처럼 보일것이에요
7
00:00:13,267 --> 00:00:16,167
예전에는 모두 일일히 손으로 그려야 했어요
8
00:00:16,167 --> 00:00:19,696
그러다보니 3초정도의 애니메이션을
만들기에도 긴 시간이 필요했지요
9
00:00:19,696 --> 00:00:22,797
하지만 운이 좋게도
우리는 그때보다 미래에 살고있네요
10
00:00:22,797 --> 00:00:25,960
간단한 애니메이션은 코드를 이용하여
매우 쉽게 만들 수 있거든요
11
00:00:25,960 --> 00:00:28,318
이제부터 어떻게 해야하는지 보여드리죠
12
00:00:28,318 --> 00:00:31,878
오른쪽을 보면 작은 자동차와
예쁜 노랑색 배경이 보일거에요
13
00:00:31,878 --> 00:00:34,965
이 자동차는 제가 그렸어요
14
00:00:34,965 --> 00:00:38,575
아무튼 정말 멋진 배경색이
설정되어 있는 것을 볼 수 있는데요
15
00:00:38,575 --> 00:00:42,771
자동차에는 외곽선이 그려져 있지 않아요
아마도 noStorke()(noStroke함수) 때문이겠죠
16
00:00:42,771 --> 00:00:46,151
먼저 자동차의 위치를 저장할
새로운 변수(variable) x를 만들거에요
17
00:00:46,151 --> 00:00:48,916
그리고 맨 처음의 값은 10으로 줄게요
그리고 이 값을 바꾸면
18
00:00:48,916 --> 00:00:51,895
자동차가 앞 뒤로 움직입니다
19
00:00:51,895 --> 00:00:53,811
일단은 10으로 세팅할게요
20
00:00:53,811 --> 00:00:56,314
이곳을 보면 자동차의 색을 선택할 수 있어요
21
00:00:56,314 --> 00:00:58,823
그리고 자동차의 몸체가
두개의 사각형으로 그려진 것을 알 수 있죠
22
00:00:58,823 --> 00:01:02,333
첫번째 사각형은 아래쪽을 그리고
두번째 사각형이 위쪽 부분을 그리고 있어요
23
00:01:02,333 --> 00:01:05,027
여기를 보면 똑같은 형태인 바퀴 2개가 있죠
24
00:01:05,027 --> 00:01:07,189
색을 선택하고 두개의 타원형(Ellipse)을 그립니다
25
00:01:07,189 --> 00:01:08,708
하나는 x+25에 위치에
26
00:01:08,708 --> 00:01:10,191
나머지는 x+75에 말이죠
27
00:01:10,191 --> 00:01:12,828
마지막으로 새로운 요소를 사용해야 해요
28
00:01:12,828 --> 00:01:15,169
이것은 function definition(함수 정의)라고 합니다.
29
00:01:15,169 --> 00:01:16,691
나중에 자세히 배울테니
30
00:01:16,691 --> 00:01:18,835
지금은 기억만 해주세요
31
00:01:18,835 --> 00:01:23,932
이 부분은 draw라는 단어와
괄호들로 이루어져 있는데요
32
00:01:23,932 --> 00:01:25,190
여기서 괄호를 열고있고
33
00:01:25,190 --> 00:01:26,750
여기서 괄호를 닫았습니다
34
00:01:26,750 --> 00:01:30,530
이것을 드로우 루프(draw loop)나
애니메이션 루프(animation loop) 라고 부를게요
35
00:01:30,530 --> 00:01:35,295
이 괄호들 사이에 있는 내용들은
매우 빠르게 반복하여 수행되는데
36
00:01:35,295 --> 00:01:36,702
그것이 루프라고 부르는 이유입니다
37
00:01:36,702 --> 00:01:41,792
괄호 밖에있는 것들은
프로그램이 시작할 때 한번만 실행됩니다
38
00:01:41,792 --> 00:01:45,529
따라서 애니메이션의 첫 단계는
괄호 안으로 코드들을 모두 옮기는 것이에요
39
00:01:45,529 --> 00:01:47,833
그림이 계속해서 그려지도록 하기 위해서 말이죠
40
00:01:47,833 --> 00:01:51,661
그림을 그리는 코드를 모두 가져와서
41
00:01:51,661 --> 00:01:53,681
이 루프안에 넣어주세요
42
00:01:53,681 --> 00:01:57,011
코드들이 괄호 안으로 옮긴 것을 기억하도록
43
00:01:57,011 --> 00:02:02,471
이것을 선택하고 탭키를 눌러
들여쓰기(indent)를 해줍시다
44
00:02:02,471 --> 00:02:05,746
그러면 이 코드들이 괄호 안에 있다는 것을
쉽게 알 수 있습니다
45
00:02:05,746 --> 00:02:10,438
그러고나서 보면 모든 것이 같고,
아무것도 변하지 않았다고 할 수있어요
46
00:02:10,438 --> 00:02:12,438
왜냐하면 처음으로
드로우 루프를 실행하면 컴퓨터는
47
00:02:12,438 --> 00:02:14,411
'새로운 변수 x를 만들고 10으로 설정 후,
48
00:02:14,411 --> 00:02:17,214
두개의 사각형과 두개의 타원형을 그리자' 라며
작업할 거에요
49
00:02:17,214 --> 00:02:20,824
일을 마치면 다시 맨 위로 돌아가서
'좋아 새로운 변수 x를 만들고 10으로 설정한 다음
50
00:02:20,824 --> 00:02:24,289
두개의 사각형과 두개의 타원형을 그리자'
라며 작업하고
51
00:02:24,289 --> 00:02:28,383
다시 '좋아 새로운 변수 x를 만들고 10으로 설정한 다음 두개의...'라며 계속 똑같이 작업할거에요
52
00:02:28,383 --> 00:02:31,151
아무것도 바뀌지 않았어요
이것은 애니메이션으로 보이지도 않죠
53
00:02:31,151 --> 00:02:34,660
단순히 똑같은 사각형과 타원형을
계속해서 반복하여 그렸습니다
54
00:02:34,660 --> 00:02:40,395
움직이는 것처럼 보이고 싶다면 그림이
조금씩 바뀌어야 한다고 했던 것을 기억하죠?
55
00:02:40,395 --> 00:02:42,761
그러므로 이 자동차를 앞으로 움직이게 하고싶다면
56
00:02:42,761 --> 00:02:45,361
이 변수(variable) x 의 값을 바꾸어 주어야 해요
57
00:02:45,361 --> 00:02:48,052
그러니까 이것을 11로 바꾸어보죠
58
00:02:48,052 --> 00:02:51,117
그렇게 하면 맨 처음 한번만 11이 되네요
59
00:02:51,117 --> 00:02:57,564
컴퓨터가 실행을 할 때마다 계속해서 x의 값을
변경하여 가져오려면 어떻게 해야할까요?
60
00:02:57,564 --> 00:02:59,877
좋아요 여기서 마법같은 트릭을 보여드리죠
61
00:02:59,877 --> 00:03:02,789
var x가 새로운 변수를 만드는 것을 기억하시죠?
62
00:03:02,789 --> 00:03:08,061
드로우 루프(draw loop) 안에 있을때 x라 불리는
새로운 변수를 매 루프마다 만들고 있어요
63
00:03:08,061 --> 00:03:10,467
이 변수를 루프의 바깥쪽에서 만들 수도 있는데요
64
00:03:10,467 --> 00:03:13,467
그 변수는 오직 한번만 만들어지게 되겠지요
65
00:03:13,467 --> 00:03:19,770
그러면 컴퓨터가 그 코드를 실행하고
변수 x를 볼 때마다 마지막으로 사용했던 변수와
66
00:03:19,770 --> 00:03:22,770
똑같은 변수를 다시 사용할 수 있습니다
67
00:03:22,770 --> 00:03:31,295
이처럼 이 변수를 드로우 루프의 바깥쪽에 만들어서
변수를 오직 한번만 생성하도록 만들고
68
00:03:31,295 --> 00:03:35,612
이 코드가 실행될때 그 안의 변수 x는 계속해서
밖에서 만든 같은 변수를 다시 사용하게 될겁니다
69
00:03:35,612 --> 00:03:38,269
마지막으로 사용한 변수는
우리가 지정한대로 11일거에요
70
00:03:38,269 --> 00:03:41,757
이대로 놔두면 항상 11로 남아있을테니
지금부터 마법을 부려볼게요
71
00:03:41,757 --> 00:03:52,984
드로우 루프의 어디서든 x의 값을 조금만 바꿔보죠
예를 들면 다음과 같이 엑스값에 1을 더해봅시다
72
00:03:52,984 --> 00:03:54,931
좋아요 작동하네요!
73
00:03:54,931 --> 00:03:59,823
하지만 매우 이상해요 이런 결과를 원하지 않았어요
74
00:03:59,823 --> 00:04:02,823
드로우 루프 안에서
배경을 그리는 부분이 빠졌네요
75
00:04:02,823 --> 00:04:04,147
자동차를 계속해서 그리고 있지만
예전에 그렸던 차를 그대로 둔 상태로
76
00:04:04,147 --> 00:04:07,147
새로운 차를 예전에 그렸던 차 위에
그리고 있는 것을 볼 수 있는 것이죠
77
00:04:07,147 --> 00:04:12,190
드로우 루프의 맨 위쪽에
다음과 같은 코드를 넣어주세요
78
00:04:12,190 --> 00:04:15,984
그리고 Restart버튼을 누른 다음
다시 한번 자동차를 봅시다
79
00:04:15,984 --> 00:04:18,269
좋아요! 완벽해요!
80
00:04:18,269 --> 00:04:22,386
만일 조금 더 빠르게 만들고 싶다면
x의 값을 많이 바꾸면 돼요
81
00:04:22,386 --> 00:04:26,532
값을 10으로 변경해보면 화면에서 사라지네요
반대로 숫자를 빼보면 어떻게 될까요
82
00:04:26,532 --> 00:04:28,862
예를 들어 "x-10"을 하면
83
00:04:28,862 --> 00:04:34,552
자동차가 다시 나타났어요!
만일 다시 숫자를 더하면... 다시 가버리네요
84
00:04:34,552 --> 00:04:36,550
지금까지 배운 것 중
중요한 사항들을 기억하세요
85
00:04:36,550 --> 00:04:43,325
이것들은 드로우 루프(draw loop)라고 불리며
코드를 넣으면 계속해서 그림을 그리게 되요
86
00:04:43,325 --> 00:04:46,290
그리고 변수는 드로우 루프의 밖에 만들어야 합니다
87
00:04:46,290 --> 00:04:52,015
루프 안에서 매번 마지막에 사용한 변수를
다시 사용할 수 있도록 하는 것입니다
88
00:04:52,015 --> 00:04:55,854
드로우 루프 안에서 변수의 값을
조금씩 바꾸어보세요
89
00:04:55,854 --> 00:05:02,315
기존에 가지고 있던 값에 작은 수를
더하거나 빼는 식으로 설정합니다
90
00:05:02,315 --> 00:05:07,333
그림 그리는 코드에 변수를 사용한다면
매번 조금씩 달라보이게 되므로
91
00:05:07,333 --> 00:05:09,793
움직이는 것처럼 보일거에요!