주요 내용
Pixar in a Box
코스: Pixar in a Box > 단원 9
단원 2: 캐릭터 코딩하기시작하기
lesson 소개
코드를 배울 준비가 됐나요?
이 lesson에서는 간단한 눈사람 모델을 만들고 javascript를 이용해 조작해 보겠습니다. 그리고 이 모델을 마지막 프로젝트에서 만들 캐릭터에 적용해 볼 수 있습니다.
이 lesson에서는 픽사에서 사람들이 소프트웨어를 다루는 방식과 비슷하게 훨신 큰 프로그램의 일부분을 채우게 됩니다.
수업 개요
먼저 객체를 사용해 원들을 만듭니다.
그리고 여러 도형을 객체의 배열을 통해 합쳐봅니다.
마지막으로 deformer 함수를 작성해 만든 모델을 움직여 봅니다.
이를 마치고 나면 마지막 프로젝트에 준비가 될 것입니다.
시작하기 전에 어떤 것을 알아야 하나요?
- 프로그래밍을 해본 적이 없다면, 칸아카데미의 JS란?에서 변수, 배열, 함수, 객체에 대한 개념을 배우는 것을 추천합니다. 그리고 당연하지만 준비가 되면 여기로 돌아오세요!
- 칸아카데미에서는 아니지만 프로그래밍을 해본 적이 있다면 여기에 새 프로그램을 만들어 칸아카데미 환경에 적응하는 것을 추천합니다.
- 칸아카데미에서 프로그래밍을 배웠다면 완벅합니다! 다음 개념을 복습하고 기억이 잘 나지 않는 개념을 연습하세요.
- 이 lesson은 기하학적 변환 같은 수학 개념을 사용하고 8학년 이상에게 적합합니다. 이 개념은 세트와 연출 lesson에서 복습할 수 있습니다.
보게 될 프로그래밍 개념에 대한 간단한 복습
변수
- 이는 start color #6495ed, start text, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed라는 변수를 생성하고 start color #28ae7b, 15, end color #28ae7b라는 값을 저장합니다.
배열
- 이는 start color #6495ed, start text, a, g, e, s, end text, end color #6495ed라는 배열을 생성하고 start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd 세 값을 저장합니다.
- start color #6495ed, start text, a, g, e, s, end text, end color #6495ed, open bracket, 1, close bracket은 start color #ff00af, 4, end color #ff00af라는 값을 가지고 있습니다.
함수
start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, start color #ff00af, 100, end color #ff00af, comma, start color #ff00af, 200, end color #ff00af, right parenthesis, ;
right brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, start color #ff00af, 100, end color #ff00af, comma, start color #ff00af, 200, end color #ff00af, right parenthesis, ;
right brace
- 이는 start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed라는 함수를 만들고 호출되었을 때 start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text를 화면 left parenthesis, start color #ff00af, 100, comma, 200, end color #ff00af, right parenthesis 위치에 출력합니다.
start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, space, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, ;
right brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, space, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, ;
right brace
- 이 start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed 함수는 이제 텍스트의 좌표를 정의할 두 개의 입력 매개변수 start color #ff00af, x, end color #ff00af and start color #ff00af, y, end color #ff00af가 있습니다.
객체
- 이는 start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed라는 비어있는 객체를 생성합니다.
start text, v, a, r, end text, start color #6495ed, start text, space, s, n, o, w, m, a, n, end text, end color #6495ed, equals, left brace
start color #28ae7b, start text, a, g, e, end text, end color #28ae7b, colon, start color #ff00af, 2, end color #ff00af, comma
start color #28ae7b, start text, c, o, l, o, r, end text, end color #28ae7b, colon, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, comma
start color #28ae7b, start text, l, i, k, e, s, end text, end color #28ae7b, colon, open bracket, start color #ff00af, start text, ", m, i, l, k, ", end text, end color #ff00af, comma, space, start color #ff00af, start text, ", c, o, l, d, space, d, a, y, s, ", end text, end color #ff00af, close bracket
right brace
start color #28ae7b, start text, a, g, e, end text, end color #28ae7b, colon, start color #ff00af, 2, end color #ff00af, comma
start color #28ae7b, start text, c, o, l, o, r, end text, end color #28ae7b, colon, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, comma
start color #28ae7b, start text, l, i, k, e, s, end text, end color #28ae7b, colon, open bracket, start color #ff00af, start text, ", m, i, l, k, ", end text, end color #ff00af, comma, space, start color #ff00af, start text, ", c, o, l, d, space, d, a, y, s, ", end text, end color #ff00af, close bracket
right brace
- 객체 start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed는 이제 다음 세 개의 프로퍼티가 생깁니다: start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, a, g, e, end color #28ae7b, end text, equals, start color #ff00af, 2, end color #ff00af, start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, c, o, l, o, r, end color #28ae7b, end text, equals, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af. start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, end text의 세 번째 프로퍼티는 start text, start color #28ae7b, l, i, k, e, s, end color #28ae7b, end text란 이름의 배열입니다.