0:00:00.989,0:00:03.303
무언가를 움직이는 것처럼 [br]보이는 방법은 여러가지가 있어요

0:00:03.303,0:00:05.241
하지만 기본적인 원리는 항상 같습니다

0:00:05.241,0:00:07.482
만일 여러분이 처음부터 끝까지[br]한 묶음의 그림들을 가지고 있는데

0:00:07.482,0:00:09.726
그림들이 조금씩 다르다고 했을 때

0:00:09.726,0:00:11.462
그림을 빠르게 넘긴다면

0:00:11.462,0:00:13.267
마치 움직이는 것 처럼 보일것이에요

0:00:13.267,0:00:16.167
예전에는 모두 일일히 손으로 그려야 했어요

0:00:16.167,0:00:19.696
그러다보니 3초정도의 애니메이션을 [br]만들기에도 긴 시간이 필요했지요

0:00:19.696,0:00:22.797
하지만 운이 좋게도 [br]우리는 그때보다 미래에 살고있네요

0:00:22.797,0:00:25.960
간단한 애니메이션은 코드를 이용하여 [br]매우 쉽게 만들 수 있거든요

0:00:25.960,0:00:28.318
이제부터 어떻게 해야하는지 보여드리죠

0:00:28.318,0:00:31.878
오른쪽을 보면 작은 자동차와 [br]예쁜 노랑색 배경이 보일거에요

0:00:31.878,0:00:34.965
이 자동차는 제가 그렸어요

0:00:34.965,0:00:38.575
아무튼 정말 멋진 배경색이 [br]설정되어 있는 것을 볼 수 있는데요

0:00:38.575,0:00:42.771
자동차에는 외곽선이 그려져 있지 않아요[br]아마도 <i>noStorke()</i>(noStroke함수) 때문이겠죠

0:00:42.771,0:00:46.151
먼저 자동차의 위치를 저장할 [br]새로운 변수(variable) <b>x</b>를 만들거에요

0:00:46.151,0:00:48.916
그리고 맨 처음의 값은 10으로 줄게요[br]그리고 이 값을 바꾸면

0:00:48.916,0:00:51.895
자동차가 앞 뒤로 움직입니다

0:00:51.895,0:00:53.811
일단은 10으로 세팅할게요

0:00:53.811,0:00:56.314
이곳을 보면 자동차의 색을 선택할 수 있어요

0:00:56.314,0:00:58.823
그리고 자동차의 몸체가 [br]두개의 사각형으로 그려진 것을 알 수 있죠

0:00:58.823,0:01:02.333
첫번째 사각형은 아래쪽을 그리고[br]두번째 사각형이 위쪽 부분을 그리고 있어요

0:01:02.333,0:01:05.027
여기를 보면 똑같은 형태인 바퀴 2개가 있죠

0:01:05.027,0:01:07.189
색을 선택하고 두개의 타원형(Ellipse)을 그립니다

0:01:07.189,0:01:08.708
하나는 <i>x+25</i>에 위치에

0:01:08.708,0:01:10.191
나머지는 <i>x+75</i>에 말이죠

0:01:10.191,0:01:12.828
마지막으로 새로운 요소를 사용해야 해요

0:01:12.828,0:01:15.169
이것은 function definition(함수 정의)라고 합니다.

0:01:15.169,0:01:16.691
나중에 자세히 배울테니

0:01:16.691,0:01:18.835
지금은 기억만 해주세요

0:01:18.835,0:01:23.932
이 부분은 draw라는 단어와 [br]괄호들로 이루어져 있는데요

0:01:23.932,0:01:25.190
여기서 괄호를 열고있고

0:01:25.190,0:01:26.750
여기서 괄호를 닫았습니다

0:01:26.750,0:01:30.530
이것을 드로우 루프(draw loop)나[br]애니메이션 루프(animation loop) 라고 부를게요

0:01:30.530,0:01:35.295
이 괄호들 사이에 있는 내용들은[br]매우 빠르게 반복하여 수행되는데

0:01:35.295,0:01:36.702
그것이 루프라고 부르는 이유입니다

0:01:36.702,0:01:41.792
괄호 밖에있는 것들은 [br]프로그램이 시작할 때 한번만 실행됩니다

0:01:41.792,0:01:45.529
따라서 애니메이션의 첫 단계는[br]괄호 안으로 코드들을 모두 옮기는 것이에요

0:01:45.529,0:01:47.833
그림이 계속해서 그려지도록 하기 위해서 말이죠

0:01:47.833,0:01:51.661
그림을 그리는 코드를 모두 가져와서

0:01:51.661,0:01:53.681
이 루프안에 넣어주세요

0:01:53.681,0:01:57.011
코드들이 괄호 안으로 옮긴 것을 기억하도록

0:01:57.011,0:02:02.471
이것을 선택하고 탭키를 눌러 [br]들여쓰기(indent)를 해줍시다

0:02:02.471,0:02:05.746
그러면 이 코드들이 괄호 안에 있다는 것을 [br]쉽게 알 수 있습니다

0:02:05.746,0:02:10.438
그러고나서 보면 모든 것이 같고,[br]아무것도 변하지 않았다고 할 수있어요

0:02:10.438,0:02:12.438
왜냐하면 처음으로 [br]드로우 루프를 실행하면 컴퓨터는

0:02:12.438,0:02:14.411
'새로운 변수 x를 만들고 10으로 설정 후,

0:02:14.411,0:02:17.214
두개의 사각형과 두개의 타원형을 그리자' 라며 [br]작업할 거에요

0:02:17.214,0:02:20.824
일을 마치면 다시 맨 위로 돌아가서[br]'좋아 새로운 변수 x를 만들고 10으로 설정한 다음

0:02:20.824,0:02:24.289
두개의 사각형과 두개의 타원형을 그리자' [br]라며 작업하고

0:02:24.289,0:02:28.383
다시 '좋아 새로운 변수 x를 만들고 10으로 설정한 다음 두개의...'라며 계속 똑같이 작업할거에요

0:02:28.383,0:02:31.151
아무것도 바뀌지 않았어요[br]이것은 애니메이션으로 보이지도 않죠

0:02:31.151,0:02:34.660
단순히 똑같은 사각형과 타원형을 [br]계속해서 반복하여 그렸습니다

0:02:34.660,0:02:40.395
움직이는 것처럼 보이고 싶다면 그림이 [br]조금씩 바뀌어야 한다고 했던 것을 기억하죠?

0:02:40.395,0:02:42.761
그러므로 이 자동차를 앞으로 움직이게 하고싶다면

0:02:42.761,0:02:45.361
이 변수(variable) <b>x</b> 의 값을 바꾸어 주어야 해요

0:02:45.361,0:02:48.052
그러니까 이것을 11로 바꾸어보죠

0:02:48.052,0:02:51.117
그렇게 하면 맨 처음 한번만 11이 되네요

0:02:51.117,0:02:57.564
컴퓨터가 실행을 할 때마다 계속해서 <i>x</i>의 값을 [br]변경하여 가져오려면 어떻게 해야할까요?

0:02:57.564,0:02:59.877
좋아요 여기서 마법같은 트릭을 보여드리죠

0:02:59.877,0:03:02.789
var x가 새로운 변수를 만드는 것을 기억하시죠?

0:03:02.789,0:03:08.061
드로우 루프(draw loop) 안에 있을때 <i>x</i>라 불리는 [br]새로운 변수를 매 루프마다 만들고 있어요

0:03:08.061,0:03:10.467
이 변수를 루프의 바깥쪽에서 만들 수도 있는데요

0:03:10.467,0:03:13.467
그 변수는 오직 한번만 만들어지게 되겠지요

0:03:13.467,0:03:19.770
그러면 컴퓨터가 그 코드를 실행하고 [br]변수 <i>x</i>를 볼 때마다 마지막으로 사용했던 변수와

0:03:19.770,0:03:22.770
똑같은 변수를 다시 사용할 수 있습니다

0:03:22.770,0:03:31.295
이처럼 이 변수를 드로우 루프의 바깥쪽에 만들어서[br]변수를 오직 한번만 생성하도록 만들고

0:03:31.295,0:03:35.612
이 코드가 실행될때 그 안의 변수 <i>x</i>는 계속해서 [br]밖에서 만든 같은 변수를 다시 사용하게 될겁니다

0:03:35.612,0:03:38.269
마지막으로 사용한 변수는 [br]우리가 지정한대로 11일거에요

0:03:38.269,0:03:41.757
이대로 놔두면 항상 11로 남아있을테니 [br]지금부터 마법을 부려볼게요

0:03:41.757,0:03:52.984
드로우 루프의 어디서든 <i>x</i>의 값을 조금만 바꿔보죠[br]예를 들면 다음과 같이 엑스값에 1을 더해봅시다

0:03:52.984,0:03:54.931
좋아요 작동하네요!

0:03:54.931,0:03:59.823
하지만 매우 이상해요 이런 결과를 원하지 않았어요

0:03:59.823,0:04:02.823
드로우 루프 안에서 [br]배경을 그리는 부분이 빠졌네요

0:04:02.823,0:04:04.147
자동차를 계속해서 그리고 있지만 [br]예전에 그렸던 차를 그대로 둔 상태로

0:04:04.147,0:04:07.147
새로운 차를 예전에 그렸던 차 위에 [br]그리고 있는 것을 볼 수 있는 것이죠

0:04:07.147,0:04:12.190
드로우 루프의 맨 위쪽에 [br]다음과 같은 코드를 넣어주세요

0:04:12.190,0:04:15.984
그리고 <i>Restart</i>버튼을 누른 다음 [br]다시 한번 자동차를 봅시다

0:04:15.984,0:04:18.269
좋아요! 완벽해요!

0:04:18.269,0:04:22.386
만일 조금 더 빠르게 만들고 싶다면[br]<i>x</i>의 값을 많이 바꾸면 돼요

0:04:22.386,0:04:26.532
값을 10으로 변경해보면 화면에서 사라지네요[br]반대로 숫자를 빼보면 어떻게 될까요

0:04:26.532,0:04:28.862
예를 들어 "x-10"을 하면

0:04:28.862,0:04:34.552
자동차가 다시 나타났어요![br]만일 다시 숫자를 더하면... 다시 가버리네요

0:04:34.552,0:04:36.550
지금까지 배운 것 중 [br]중요한 사항들을 기억하세요

0:04:36.550,0:04:43.325
이것들은 드로우 루프(draw loop)라고 불리며 [br]코드를 넣으면 계속해서 그림을 그리게 되요

0:04:43.325,0:04:46.290
그리고 변수는 드로우 루프의 밖에 만들어야 합니다

0:04:46.290,0:04:52.015
루프 안에서 매번 마지막에 사용한 변수를 [br]다시 사용할 수 있도록 하는 것입니다

0:04:52.015,0:04:55.854
드로우 루프 안에서 변수의 값을 [br]조금씩 바꾸어보세요

0:04:55.854,0:05:02.315
기존에 가지고 있던 값에 작은 수를 [br]더하거나 빼는 식으로 설정합니다

0:05:02.315,0:05:07.333
그림 그리는 코드에 변수를 사용한다면[br]매번 조금씩 달라보이게 되므로

0:05:07.333,0:05:09.793
움직이는 것처럼 보일거에요!