Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Paper.js로 시작하기: 애니메이션과 이미지

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started With Paper.js.
Getting Started With Paper.js: User Interaction

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

지금까지 저는 이 시리즈에서 Paper.js와 관련한 프로젝트와 아이템, 경로와 기하학, 사용자 인터랙션을 다루었습니다. 여러분은 라이브러리를 이용해 프로젝트에서 다양한 아이템으로 애니메이션도 구현할 수 있습니다. 사용자 입력을 기반으로 이 라이브러리와 동작 기능을 함께 적용한다면, 끝내주는 효과를 제작할 수 있습니다. 이 튜토리얼에서는 Paper.js에서 아이템을 애니메이션하는 방법을 다루겠습니다.

튜토리얼의 후반부에서는 이미지를 수정하고 픽셀마다 색상을 바꾸는 방법도 알려드리겠습니다. 라이브러리는 벡터를 래스터로 만들 수 있는데 이것은 마지막에 다룰 것입니다.

애니메이션 기초 다지기

Paper.js에서 onFrame 이벤트 핸들러가 애니메이션 전부를 제어하고 있습니다. 핸들러 안에 입력된 코드는 초당 60번까지 실행됩니다. 매번 실행 이후 뷰가 자동으로 다시 그려집니다. 함수 안에서 일부 속성들이 서서히 바뀌면서 멋진 효과를 만들어 냅니다.

또한, onFrame 핸들러 함수는 event 객체를 받습니다. 그 객체에는 애니메이션과 연관된 데이터를 제공하는 속성 3개가 있습니다.

첫 번째 속성은 event.count로 핸들러가 실행되는 횟수를 알려줍니다. 두 번째 속성은 event.delta로 핸들러의 마지막 실행 이후에 지나간 총 시간 분량을 전해줍니다. 세 번째 속성은 event.time입니다. 이 이벤트는 첫 번째 프레임 이벤트 이후로 지나간 시간을 전해줍니다.

여러분은 핸들러 안에서 다수의 속성으로 애니메이션 할 수 있습니다. 예제에서 저는 3개의 직사각형을 회전하고 중간 직사각형의 색을 바꿀 것입니다. 아래의 코드를 살펴보세요.

위의 코드에서 명확히 알 수 있듯이, 애니메이션에 필요한 실제 코드는 극히 적습니다. 직사각형 A에 대해 onFrame 핸들러가 실행될 때마다 event.delta의 10배만큼 색도를 증가했습니다. event.delta 값은 보통 0.01에 가깝습니다. 제가 그 값에 10을 곱하지 않았으면, 색상 변화를 인지하는 데 시간이 꽤 오래 걸렸을 것입니다.

그리고 코드가 실행될 때마다 직사각형을 2도씩 회전시켰습니다. event.time 값을 적용해 직사각형을 회전시켰다면, 회전하는 속도는 일정 시간 후에 매우 빨라졌을 것입니다.

경로나 아이템 전체를 한 번에 애니메이션 하는 대신에 부분마다 애니메이션을 할 수도 있습니다. 그 과정은 정말 간단합니다. 경로(path)를 구성하는 모든 부분을 배열로 되돌려주는 path.segments를 사용하면 됩니다. index 값을 제공함으로써 개별 부분에 접근할 수 있습니다. 진도를 더 나가기 전에 아래의 코드를 보시기 바랍니다.

여기서는 Path.RegularPolygon(center, sides, radius) 생성자를 이용해 정사각형을 제작하는 것으로 시작했습니다. sides 매개 변수는 다각형의 면 개수를 결정합니다. radius 매개 변수는 다각형의 크기를 결정합니다. 또한, 각각의 점을 볼 수 있도록 fullySelected 속성값을 true로 설정했습니다.

onFrame 핸들러 안에서는 for loop을 활용해 모든 부분을 반복했으며, index 값을 기준으로 계산된 수치와 같은 값으로 x 좌표를 설정했습니다. Math.sin() 함수 안에 event.time을 이용해도 수치의 과도한 증가와 관련한 문제를 발생시키지 않습니다. Math.sin() 함숫값은 변함없이 -1과 1 사이에 있기 때문이지요.

다음 견본에서 애니메이션 하는 사각형을 보여줍니다. onFrame 핸들러 안에 있는 코드 덕분에 어쨌든 더이상 사각형이 되진 않지만요. 여러분이 다각형 생성자와 sin 함수의 매개 변수에 다른 값을 넣어 테스트해 보고, 결론적으로 견본의 애니메이션이 어떻게 변하는지 이해해보기 바랍니다.

이미지 기초 다지기

Paper.js에서 이미지는 래스터(rasters)를 말합니다. 다른 아이템처럼 래스터 이미지를 변형하거나 움직이게 할 수 있습니다. 프로젝트에서 이미지를 사용하려면 먼저 웹 페이지 마크업에 img 태그를 작성해 추가하고 id를 주어야 합니다. 이 id는 나중에 new Raster(id) 생성자에 전달됩니다.

여러분이 작업 중인 이미지는 이미 로딩된 상태여야 하고 프로젝트와 같은 웹사이트에서 관리되어야 한다는 점을 유념하세요. 다른 도메인에서 관리 되는 이미지를 사용하면 보안상의 에러가 날 것입니다. 이 튜토리얼에서는 아래 이미지를 변경해보겠습니다.

Sample image of robots and sunset

위의 이미지에서 각각의 픽셀 색상에 접근하는 데 픽셀의 x와 y 좌표인 raster.getPixel(x, y) 함수를 사용할 수 있습니다. 아래 코드에서는 왼쪽 위 모서리에 있는 픽셀 색상으로 채워진 7*7 픽셀의 정사각형을 생성합니다.

래스터 이미지가 로딩되고 나서 크기를 80*40 픽셀로 다시 조정합니다. 중첩된 for 루프 안에서는 이 래스터의 개별 픽셀을 살피며 7*7 정사각형을 만듭니다. 래스터 이미지 크기를 키우면 결과가 낫겠지만, 실행 속도는 느려질 것입니다. 왼쪽 위 모서리에 크기가 재조정된 래스터 이미지에 대한 최종 결과는 다음과 같습니다.

크기가 재조정된 래스터 이미지를 숨기고 싶다면 raster.visible 속성을 false로 설정하면 됩니다. 생성된 정사각형의 색상을 수정하는 것도 가능합니다. 예를 들어, 전체 정사각형에서 빨간 성분을 강화하기 위해 아래 코드를 이용할 수 있습니다.

이 경우에 최종 결과는 다음과 같습니다.

아이템 래스터화하기

Paper.js는 벡터 그래픽 라이브러리이지만, 기존 아이템에서 래스터 이미지를 만들 수 있습니다. 그렇게 하려면 item.rasterize() 메서드를 이용해야 합니다. 래스터화를 한 후에도 아이템의 원본은 프로젝트에서 삭제되지 않습니다. 또한, 래스터 이미지의 해상도를 인치당 픽셀로 구체적인 수치를 입력하는 것도 선택 가능합니다. 아래 코드는 다각형에서 만들어진, 서로 다른 해상도가 적용된 두 가지 래스터 이미지를 만들어 줍니다.

가장 오른쪽에 있는 고해상도의 다각형이 중간에 있는 다각형에 비해 여전히 선명합니다. 다음은 최종 결과입니다.

결론

이 시리즈의 튜토리얼을 모두 읽어보았다면, Paper.js로 시작하기에 충분한 지식이 여러분에게 있습니다. 라이브러리의 기본을 배우기는 쉽지만, 개념을 모두 섭렵하려면 어느 정도 열심히 노력해야 합니다. 이 주제에 대해 자세한 정보가 필요할 때마다 해당 공식 웹사이트에 있는 참고자료를 검토해 보세요.

자바스크립트는 웹에서 동작하는 표준 언어 중에 하나가 되었습니다. 새 기술을 익혀야 할 뿐만 아니라 여러분을 늘 바쁘게 할 프레임워크와 라이브러리도 많이 있습니다. 업무상 공부하거나 사용할 부수적인 리소스를 찾고 있다면 Envato Marketplace에서 활용 가능한 리소스를 확인해 보세요.

이 라이브러리를 이용해 흥미로운 것을 제작한다면 아래 댓글에 그 작품을 공유해 주세요.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.