[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.99,0:00:03.30,Default,,0000,0000,0000,,무언가를 움직이는 것처럼 \N보이는 방법은 여러가지가 있어요
Dialogue: 0,0:00:03.30,0:00:05.24,Default,,0000,0000,0000,,하지만 기본적인 원리는 항상 같습니다
Dialogue: 0,0:00:05.24,0:00:07.48,Default,,0000,0000,0000,,만일 여러분이 처음부터 끝까지\N한 묶음의 그림들을 가지고 있는데
Dialogue: 0,0:00:07.48,0:00:09.73,Default,,0000,0000,0000,,그림들이 조금씩 다르다고 했을 때
Dialogue: 0,0:00:09.73,0:00:11.46,Default,,0000,0000,0000,,그림을 빠르게 넘긴다면
Dialogue: 0,0:00:11.46,0:00:13.27,Default,,0000,0000,0000,,마치 움직이는 것 처럼 보일것이에요
Dialogue: 0,0:00:13.27,0:00:16.17,Default,,0000,0000,0000,,예전에는 모두 일일히 손으로 그려야 했어요
Dialogue: 0,0:00:16.17,0:00:19.70,Default,,0000,0000,0000,,그러다보니 3초정도의 애니메이션을 \N만들기에도 긴 시간이 필요했지요
Dialogue: 0,0:00:19.70,0:00:22.80,Default,,0000,0000,0000,,하지만 운이 좋게도 \N우리는 그때보다 미래에 살고있네요
Dialogue: 0,0:00:22.80,0:00:25.96,Default,,0000,0000,0000,,간단한 애니메이션은 코드를 이용하여 \N매우 쉽게 만들 수 있거든요
Dialogue: 0,0:00:25.96,0:00:28.32,Default,,0000,0000,0000,,이제부터 어떻게 해야하는지 보여드리죠
Dialogue: 0,0:00:28.32,0:00:31.88,Default,,0000,0000,0000,,오른쪽을 보면 작은 자동차와 \N예쁜 노랑색 배경이 보일거에요
Dialogue: 0,0:00:31.88,0:00:34.96,Default,,0000,0000,0000,,이 자동차는 제가 그렸어요
Dialogue: 0,0:00:34.96,0:00:38.58,Default,,0000,0000,0000,,아무튼 정말 멋진 배경색이 \N설정되어 있는 것을 볼 수 있는데요
Dialogue: 0,0:00:38.58,0:00:42.77,Default,,0000,0000,0000,,자동차에는 외곽선이 그려져 있지 않아요\N아마도 {\i1}noStorke(){\i0}(noStroke함수) 때문이겠죠
Dialogue: 0,0:00:42.77,0:00:46.15,Default,,0000,0000,0000,,먼저 자동차의 위치를 저장할 \N새로운 변수(variable) {\b1}x{\b0}를 만들거에요
Dialogue: 0,0:00:46.15,0:00:48.92,Default,,0000,0000,0000,,그리고 맨 처음의 값은 10으로 줄게요\N그리고 이 값을 바꾸면
Dialogue: 0,0:00:48.92,0:00:51.90,Default,,0000,0000,0000,,자동차가 앞 뒤로 움직입니다
Dialogue: 0,0:00:51.90,0:00:53.81,Default,,0000,0000,0000,,일단은 10으로 세팅할게요
Dialogue: 0,0:00:53.81,0:00:56.31,Default,,0000,0000,0000,,이곳을 보면 자동차의 색을 선택할 수 있어요
Dialogue: 0,0:00:56.31,0:00:58.82,Default,,0000,0000,0000,,그리고 자동차의 몸체가 \N두개의 사각형으로 그려진 것을 알 수 있죠
Dialogue: 0,0:00:58.82,0:01:02.33,Default,,0000,0000,0000,,첫번째 사각형은 아래쪽을 그리고\N두번째 사각형이 위쪽 부분을 그리고 있어요
Dialogue: 0,0:01:02.33,0:01:05.03,Default,,0000,0000,0000,,여기를 보면 똑같은 형태인 바퀴 2개가 있죠
Dialogue: 0,0:01:05.03,0:01:07.19,Default,,0000,0000,0000,,색을 선택하고 두개의 타원형(Ellipse)을 그립니다
Dialogue: 0,0:01:07.19,0:01:08.71,Default,,0000,0000,0000,,하나는 {\i1}x+25{\i0}에 위치에
Dialogue: 0,0:01:08.71,0:01:10.19,Default,,0000,0000,0000,,나머지는 {\i1}x+75{\i0}에 말이죠
Dialogue: 0,0:01:10.19,0:01:12.83,Default,,0000,0000,0000,,마지막으로 새로운 요소를 사용해야 해요
Dialogue: 0,0:01:12.83,0:01:15.17,Default,,0000,0000,0000,,이것은 function definition(함수 정의)라고 합니다.
Dialogue: 0,0:01:15.17,0:01:16.69,Default,,0000,0000,0000,,나중에 자세히 배울테니
Dialogue: 0,0:01:16.69,0:01:18.84,Default,,0000,0000,0000,,지금은 기억만 해주세요
Dialogue: 0,0:01:18.84,0:01:23.93,Default,,0000,0000,0000,,이 부분은 draw라는 단어와 \N괄호들로 이루어져 있는데요
Dialogue: 0,0:01:23.93,0:01:25.19,Default,,0000,0000,0000,,여기서 괄호를 열고있고
Dialogue: 0,0:01:25.19,0:01:26.75,Default,,0000,0000,0000,,여기서 괄호를 닫았습니다
Dialogue: 0,0:01:26.75,0:01:30.53,Default,,0000,0000,0000,,이것을 드로우 루프(draw loop)나\N애니메이션 루프(animation loop) 라고 부를게요
Dialogue: 0,0:01:30.53,0:01:35.30,Default,,0000,0000,0000,,이 괄호들 사이에 있는 내용들은\N매우 빠르게 반복하여 수행되는데
Dialogue: 0,0:01:35.30,0:01:36.70,Default,,0000,0000,0000,,그것이 루프라고 부르는 이유입니다
Dialogue: 0,0:01:36.70,0:01:41.79,Default,,0000,0000,0000,,괄호 밖에있는 것들은 \N프로그램이 시작할 때 한번만 실행됩니다
Dialogue: 0,0:01:41.79,0:01:45.53,Default,,0000,0000,0000,,따라서 애니메이션의 첫 단계는\N괄호 안으로 코드들을 모두 옮기는 것이에요
Dialogue: 0,0:01:45.53,0:01:47.83,Default,,0000,0000,0000,,그림이 계속해서 그려지도록 하기 위해서 말이죠
Dialogue: 0,0:01:47.83,0:01:51.66,Default,,0000,0000,0000,,그림을 그리는 코드를 모두 가져와서
Dialogue: 0,0:01:51.66,0:01:53.68,Default,,0000,0000,0000,,이 루프안에 넣어주세요
Dialogue: 0,0:01:53.68,0:01:57.01,Default,,0000,0000,0000,,코드들이 괄호 안으로 옮긴 것을 기억하도록
Dialogue: 0,0:01:57.01,0:02:02.47,Default,,0000,0000,0000,,이것을 선택하고 탭키를 눌러 \N들여쓰기(indent)를 해줍시다
Dialogue: 0,0:02:02.47,0:02:05.75,Default,,0000,0000,0000,,그러면 이 코드들이 괄호 안에 있다는 것을 \N쉽게 알 수 있습니다
Dialogue: 0,0:02:05.75,0:02:10.44,Default,,0000,0000,0000,,그러고나서 보면 모든 것이 같고,\N아무것도 변하지 않았다고 할 수있어요
Dialogue: 0,0:02:10.44,0:02:12.44,Default,,0000,0000,0000,,왜냐하면 처음으로 \N드로우 루프를 실행하면 컴퓨터는
Dialogue: 0,0:02:12.44,0:02:14.41,Default,,0000,0000,0000,,'새로운 변수 x를 만들고 10으로 설정 후,
Dialogue: 0,0:02:14.41,0:02:17.21,Default,,0000,0000,0000,,두개의 사각형과 두개의 타원형을 그리자' 라며 \N작업할 거에요
Dialogue: 0,0:02:17.21,0:02:20.82,Default,,0000,0000,0000,,일을 마치면 다시 맨 위로 돌아가서\N'좋아 새로운 변수 x를 만들고 10으로 설정한 다음
Dialogue: 0,0:02:20.82,0:02:24.29,Default,,0000,0000,0000,,두개의 사각형과 두개의 타원형을 그리자' \N라며 작업하고
Dialogue: 0,0:02:24.29,0:02:28.38,Default,,0000,0000,0000,,다시 '좋아 새로운 변수 x를 만들고 10으로 설정한 다음 두개의...'라며 계속 똑같이 작업할거에요
Dialogue: 0,0:02:28.38,0:02:31.15,Default,,0000,0000,0000,,아무것도 바뀌지 않았어요\N이것은 애니메이션으로 보이지도 않죠
Dialogue: 0,0:02:31.15,0:02:34.66,Default,,0000,0000,0000,,단순히 똑같은 사각형과 타원형을 \N계속해서 반복하여 그렸습니다
Dialogue: 0,0:02:34.66,0:02:40.40,Default,,0000,0000,0000,,움직이는 것처럼 보이고 싶다면 그림이 \N조금씩 바뀌어야 한다고 했던 것을 기억하죠?
Dialogue: 0,0:02:40.40,0:02:42.76,Default,,0000,0000,0000,,그러므로 이 자동차를 앞으로 움직이게 하고싶다면
Dialogue: 0,0:02:42.76,0:02:45.36,Default,,0000,0000,0000,,이 변수(variable) {\b1}x{\b0} 의 값을 바꾸어 주어야 해요
Dialogue: 0,0:02:45.36,0:02:48.05,Default,,0000,0000,0000,,그러니까 이것을 11로 바꾸어보죠
Dialogue: 0,0:02:48.05,0:02:51.12,Default,,0000,0000,0000,,그렇게 하면 맨 처음 한번만 11이 되네요
Dialogue: 0,0:02:51.12,0:02:57.56,Default,,0000,0000,0000,,컴퓨터가 실행을 할 때마다 계속해서 {\i1}x{\i0}의 값을 \N변경하여 가져오려면 어떻게 해야할까요?
Dialogue: 0,0:02:57.56,0:02:59.88,Default,,0000,0000,0000,,좋아요 여기서 마법같은 트릭을 보여드리죠
Dialogue: 0,0:02:59.88,0:03:02.79,Default,,0000,0000,0000,,var x가 새로운 변수를 만드는 것을 기억하시죠?
Dialogue: 0,0:03:02.79,0:03:08.06,Default,,0000,0000,0000,,드로우 루프(draw loop) 안에 있을때 {\i1}x{\i0}라 불리는 \N새로운 변수를 매 루프마다 만들고 있어요
Dialogue: 0,0:03:08.06,0:03:10.47,Default,,0000,0000,0000,,이 변수를 루프의 바깥쪽에서 만들 수도 있는데요
Dialogue: 0,0:03:10.47,0:03:13.47,Default,,0000,0000,0000,,그 변수는 오직 한번만 만들어지게 되겠지요
Dialogue: 0,0:03:13.47,0:03:19.77,Default,,0000,0000,0000,,그러면 컴퓨터가 그 코드를 실행하고 \N변수 {\i1}x{\i0}를 볼 때마다 마지막으로 사용했던 변수와
Dialogue: 0,0:03:19.77,0:03:22.77,Default,,0000,0000,0000,,똑같은 변수를 다시 사용할 수 있습니다
Dialogue: 0,0:03:22.77,0:03:31.30,Default,,0000,0000,0000,,이처럼 이 변수를 드로우 루프의 바깥쪽에 만들어서\N변수를 오직 한번만 생성하도록 만들고
Dialogue: 0,0:03:31.30,0:03:35.61,Default,,0000,0000,0000,,이 코드가 실행될때 그 안의 변수 {\i1}x{\i0}는 계속해서 \N밖에서 만든 같은 변수를 다시 사용하게 될겁니다
Dialogue: 0,0:03:35.61,0:03:38.27,Default,,0000,0000,0000,,마지막으로 사용한 변수는 \N우리가 지정한대로 11일거에요
Dialogue: 0,0:03:38.27,0:03:41.76,Default,,0000,0000,0000,,이대로 놔두면 항상 11로 남아있을테니 \N지금부터 마법을 부려볼게요
Dialogue: 0,0:03:41.76,0:03:52.98,Default,,0000,0000,0000,,드로우 루프의 어디서든 {\i1}x{\i0}의 값을 조금만 바꿔보죠\N예를 들면 다음과 같이 엑스값에 1을 더해봅시다
Dialogue: 0,0:03:52.98,0:03:54.93,Default,,0000,0000,0000,,좋아요 작동하네요!
Dialogue: 0,0:03:54.93,0:03:59.82,Default,,0000,0000,0000,,하지만 매우 이상해요 이런 결과를 원하지 않았어요
Dialogue: 0,0:03:59.82,0:04:02.82,Default,,0000,0000,0000,,드로우 루프 안에서 \N배경을 그리는 부분이 빠졌네요
Dialogue: 0,0:04:02.82,0:04:04.15,Default,,0000,0000,0000,,자동차를 계속해서 그리고 있지만 \N예전에 그렸던 차를 그대로 둔 상태로
Dialogue: 0,0:04:04.15,0:04:07.15,Default,,0000,0000,0000,,새로운 차를 예전에 그렸던 차 위에 \N그리고 있는 것을 볼 수 있는 것이죠
Dialogue: 0,0:04:07.15,0:04:12.19,Default,,0000,0000,0000,,드로우 루프의 맨 위쪽에 \N다음과 같은 코드를 넣어주세요
Dialogue: 0,0:04:12.19,0:04:15.98,Default,,0000,0000,0000,,그리고 {\i1}Restart{\i0}버튼을 누른 다음 \N다시 한번 자동차를 봅시다
Dialogue: 0,0:04:15.98,0:04:18.27,Default,,0000,0000,0000,,좋아요! 완벽해요!
Dialogue: 0,0:04:18.27,0:04:22.39,Default,,0000,0000,0000,,만일 조금 더 빠르게 만들고 싶다면\N{\i1}x{\i0}의 값을 많이 바꾸면 돼요
Dialogue: 0,0:04:22.39,0:04:26.53,Default,,0000,0000,0000,,값을 10으로 변경해보면 화면에서 사라지네요\N반대로 숫자를 빼보면 어떻게 될까요
Dialogue: 0,0:04:26.53,0:04:28.86,Default,,0000,0000,0000,,예를 들어 "x-10"을 하면
Dialogue: 0,0:04:28.86,0:04:34.55,Default,,0000,0000,0000,,자동차가 다시 나타났어요!\N만일 다시 숫자를 더하면... 다시 가버리네요
Dialogue: 0,0:04:34.55,0:04:36.55,Default,,0000,0000,0000,,지금까지 배운 것 중 \N중요한 사항들을 기억하세요
Dialogue: 0,0:04:36.55,0:04:43.32,Default,,0000,0000,0000,,이것들은 드로우 루프(draw loop)라고 불리며 \N코드를 넣으면 계속해서 그림을 그리게 되요
Dialogue: 0,0:04:43.32,0:04:46.29,Default,,0000,0000,0000,,그리고 변수는 드로우 루프의 밖에 만들어야 합니다
Dialogue: 0,0:04:46.29,0:04:52.02,Default,,0000,0000,0000,,루프 안에서 매번 마지막에 사용한 변수를 \N다시 사용할 수 있도록 하는 것입니다
Dialogue: 0,0:04:52.02,0:04:55.85,Default,,0000,0000,0000,,드로우 루프 안에서 변수의 값을 \N조금씩 바꾸어보세요
Dialogue: 0,0:04:55.85,0:05:02.32,Default,,0000,0000,0000,,기존에 가지고 있던 값에 작은 수를 \N더하거나 빼는 식으로 설정합니다
Dialogue: 0,0:05:02.32,0:05:07.33,Default,,0000,0000,0000,,그림 그리는 코드에 변수를 사용한다면\N매번 조금씩 달라보이게 되므로
Dialogue: 0,0:05:07.33,0:05:09.79,Default,,0000,0000,0000,,움직이는 것처럼 보일거에요!