애니메이션 적용 방법 소개

이 영상은 영상의 자막 및 번역을 위해서 준비되었으며,
보다 자세한 사항은 다음의 링크를 참고해주세요.
https://www.khanacademy.org/cs/programming/

무언가를 움직이는 것처럼
보이는 방법은 여러가지가 있어요

하지만 기본적인 원리는 항상 같습니다

만일 여러분이 처음부터 끝까지
한 묶음의 그림들을 가지고 있는데

그림들이 조금씩 다르다고 했을 때

그림을 빠르게 넘긴다면

마치 움직이는 것 처럼 보일것이에요

예전에는 모두 일일히 손으로 그려야 했어요

그러다보니 3초정도의 애니메이션을
만들기에도 긴 시간이 필요했지요

하지만 운이 좋게도
우리는 그때보다 미래에 살고있네요

간단한 애니메이션은 코드를 이용하여
매우 쉽게 만들 수 있거든요

이제부터 어떻게 해야하는지 보여드리죠

오른쪽을 보면 작은 자동차와
예쁜 노랑색 배경이 보일거에요

이 자동차는 제가 그렸어요

아무튼 정말 멋진 배경색이
설정되어 있는 것을 볼 수 있는데요

자동차에는 외곽선이 그려져 있지 않아요
아마도 noStorke()(noStroke함수) 때문이겠죠

먼저 자동차의 위치를 저장할
새로운 변수(variable) x를 만들거에요

그리고 맨 처음의 값은 10으로 줄게요
그리고 이 값을 바꾸면

자동차가 앞 뒤로 움직입니다

일단은 10으로 세팅할게요

이곳을 보면 자동차의 색을 선택할 수 있어요

그리고 자동차의 몸체가
두개의 사각형으로 그려진 것을 알 수 있죠

첫번째 사각형은 아래쪽을 그리고
두번째 사각형이 위쪽 부분을 그리고 있어요

여기를 보면 똑같은 형태인 바퀴 2개가 있죠

색을 선택하고 두개의 타원형(Ellipse)을 그립니다

하나는 x+25에 위치에

나머지는 x+75에 말이죠

마지막으로 새로운 요소를 사용해야 해요

이것은 function definition(함수 정의)라고 합니다.

나중에 자세히 배울테니

지금은 기억만 해주세요

이 부분은 draw라는 단어와
괄호들로 이루어져 있는데요

여기서 괄호를 열고있고

여기서 괄호를 닫았습니다

이것을 드로우 루프(draw loop)나
애니메이션 루프(animation loop) 라고 부를게요

이 괄호들 사이에 있는 내용들은
매우 빠르게 반복하여 수행되는데

그것이 루프라고 부르는 이유입니다

괄호 밖에있는 것들은
프로그램이 시작할 때 한번만 실행됩니다

따라서 애니메이션의 첫 단계는
괄호 안으로 코드들을 모두 옮기는 것이에요

그림이 계속해서 그려지도록 하기 위해서 말이죠

그림을 그리는 코드를 모두 가져와서

이 루프안에 넣어주세요

코드들이 괄호 안으로 옮긴 것을 기억하도록

이것을 선택하고 탭키를 눌러
들여쓰기(indent)를 해줍시다

그러면 이 코드들이 괄호 안에 있다는 것을
쉽게 알 수 있습니다

그러고나서 보면 모든 것이 같고,
아무것도 변하지 않았다고 할 수있어요

왜냐하면 처음으로
드로우 루프를 실행하면 컴퓨터는

'새로운 변수 x를 만들고 10으로 설정 후,

두개의 사각형과 두개의 타원형을 그리자' 라며
작업할 거에요

일을 마치면 다시 맨 위로 돌아가서
'좋아 새로운 변수 x를 만들고 10으로 설정한 다음

두개의 사각형과 두개의 타원형을 그리자'
라며 작업하고

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

아무것도 바뀌지 않았어요
이것은 애니메이션으로 보이지도 않죠

단순히 똑같은 사각형과 타원형을
계속해서 반복하여 그렸습니다

움직이는 것처럼 보이고 싶다면 그림이
조금씩 바뀌어야 한다고 했던 것을 기억하죠?

그러므로 이 자동차를 앞으로 움직이게 하고싶다면

이 변수(variable) x 의 값을 바꾸어 주어야 해요

그러니까 이것을 11로 바꾸어보죠

그렇게 하면 맨 처음 한번만 11이 되네요

컴퓨터가 실행을 할 때마다 계속해서 x의 값을
변경하여 가져오려면 어떻게 해야할까요?

좋아요 여기서 마법같은 트릭을 보여드리죠

var x가 새로운 변수를 만드는 것을 기억하시죠?

드로우 루프(draw loop) 안에 있을때 x라 불리는
새로운 변수를 매 루프마다 만들고 있어요

이 변수를 루프의 바깥쪽에서 만들 수도 있는데요

그 변수는 오직 한번만 만들어지게 되겠지요

그러면 컴퓨터가 그 코드를 실행하고
변수 x를 볼 때마다 마지막으로 사용했던 변수와

똑같은 변수를 다시 사용할 수 있습니다

이처럼 이 변수를 드로우 루프의 바깥쪽에 만들어서
변수를 오직 한번만 생성하도록 만들고

이 코드가 실행될때 그 안의 변수 x는 계속해서
밖에서 만든 같은 변수를 다시 사용하게 될겁니다

마지막으로 사용한 변수는
우리가 지정한대로 11일거에요

이대로 놔두면 항상 11로 남아있을테니
지금부터 마법을 부려볼게요

드로우 루프의 어디서든 x의 값을 조금만 바꿔보죠
예를 들면 다음과 같이 엑스값에 1을 더해봅시다

좋아요 작동하네요!

하지만 매우 이상해요 이런 결과를 원하지 않았어요

드로우 루프 안에서
배경을 그리는 부분이 빠졌네요

자동차를 계속해서 그리고 있지만
예전에 그렸던 차를 그대로 둔 상태로

새로운 차를 예전에 그렸던 차 위에
그리고 있는 것을 볼 수 있는 것이죠

드로우 루프의 맨 위쪽에
다음과 같은 코드를 넣어주세요

그리고 Restart버튼을 누른 다음
다시 한번 자동차를 봅시다

좋아요! 완벽해요!

만일 조금 더 빠르게 만들고 싶다면
x의 값을 많이 바꾸면 돼요

값을 10으로 변경해보면 화면에서 사라지네요
반대로 숫자를 빼보면 어떻게 될까요

예를 들어 "x-10"을 하면

자동차가 다시 나타났어요!
만일 다시 숫자를 더하면... 다시 가버리네요

지금까지 배운 것 중
중요한 사항들을 기억하세요

이것들은 드로우 루프(draw loop)라고 불리며
코드를 넣으면 계속해서 그림을 그리게 되요

그리고 변수는 드로우 루프의 밖에 만들어야 합니다

루프 안에서 매번 마지막에 사용한 변수를
다시 사용할 수 있도록 하는 것입니다

드로우 루프 안에서 변수의 값을
조금씩 바꾸어보세요

기존에 가지고 있던 값에 작은 수를
더하거나 빼는 식으로 설정합니다

그림 그리는 코드에 변수를 사용한다면
매번 조금씩 달라보이게 되므로

움직이는 것처럼 보일거에요!