p5.js 애니메이션을 위한 변형(transform) 함수 1 - 객체 위치 이동 translate()

p5.js 애니메이션을 위한 변형(transform) 함수 1 - 객체 위치 이동 translate()

p5.js 애니메이션을 위한 변형(transform) 함수에는 translate(), scale(), rotate()가 있다.

 

이미 css를 다룰 줄 안다면 이들 함수가 어떤 역할을 하는지 대략 짐작이 갈 것이다.

 

x, y, z 축으로 객체의 위치를 이동시킬 수 있는 translate, 객체의 크기를 확대 및 축소시킬 수 있는 scale, 객체를 회전시키는 rotate 이 세 가지 변형 함수들에 대해서 알아보자.

 

translate() - 객체 위치 이동

translate 함수의 기본 문법은 translate(x, y, [z])이다.

X축 : 좌우 이동

Y축 : 상하 이동

Z축 : 앞뒤 이동 (WebGL 모드용)

 

* WebGL 이란?
WebGL은 웹 기반의 그래픽 라이브러리이다. 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공된다. (출처: 위키 백과 ko.wikipedia.org/wiki/WebGL)

 

X, Y축은 2D에서 사용되는(지금까지 사용해온) 좌표이고 Z 축은 깊이감을 나타낼 수 있는 평면화면의 앞/뒤 이동을 위한 축으로 아래 그림을 보면 좀 더 이해가 잘 될 것 같다. 

출처 : https://www.slideshare.net/MichaelPlank/workflows-for-next-gen-3d-games-and-interaction-gotoandski-conference-2012/17-COORDINATE_SYSTEM_2D_3D_right

p5.js 레퍼런스 페이지를 보면 변형(transformation) 함수는 호출된 뒤 후속적으로 호출된 모든 변형 함수에 적용되어, 그 효과가 축적된다고 한다.

예를 들어 translate(100, 100)를 호출한 뒤 translate(100, 100)를 또 호출하면 결과적으로 translate(200, 200)와 동일한 효과를 갖는다.

 

translate(100,100)을 세 번 호출했을 때의 도형 위치 이동 결과

 

위의 그림에서와 같이 translate(100,100)을 세 번 호출하면 좌표의 x, y 지점이 기존 좌표 위치에서 합산되어 이동하는 것을 알 수 있다.

그렇다면 좌표의 마지막 위치가 현재 (300,300)에 있는 상태에서 이어서 또 다른 도형을 그리려면 어떻게 해야 할까?

 

 

캔버스의 우측 상단에 원을 그리고 싶다고 가정하자.
우선 ellipse 함수는 rect 함수와 달리 중심이 되는 지점이 원의 가운데라는 것을 떠올려야 할 것이다. 

ellipse(200,200,300) 함수를 실행한 화면

 

위의 그림은 지난번 타원 그리기에 사용된 것으로, p5.js에서는 타원을 그릴 때 기준점이 원의 중앙인 CENTER로 기본 설정되어 있다.

좌표 계산의 편의성을 위해 기준점이 좌측 상단으로 변경되도록 ellipseMode(CORNER)로 설정해 주면 rect처럼 좌측 상단을 기준으로 기준점이 변경된다. 

그 후 translate(0,-300) 함수를 추가로 호출해주면 캔버스의 우측 상단에 원을 그릴 수 있게 된다.

 

trnaslate를 추가 호출 한 경우와 하지 않은 경우 타원의 위치 이동 결과 차이

 

 

 

이제 사각형을 그렸던 것처럼 사선 방향으로 원을 추가로 더 그려보자. 
translate(-100, 100) 함수를 3번 호출해주면 X좌표는 -100씩 / Y좌표는 +100씩 합산되면서 도형이 그려진다.

 

trnaslate 호출에 따른 타원의 위치 변화

 

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  // 사각형 그리기
  rect(0,0,100);
  translate(100,100);
  rect(0,0,100);
  translate(100,100);
  rect(0,0,100);
  translate(100,100);
  rect(0,0,100);
  // 원 그리기
  ellipseMode(CORNER); // 원 중심점 변경
  translate(0,-300);
  ellipse(0,0,100);
  translate(-100,100);
  ellipse(0,0,100);
  translate(-100,100);
  ellipse(0,0,100);
  translate(-100,100);
  ellipse(0,0,100);
 }

 

translate 위치 이동 예제

examples | p5.js

 

위의 링크로 들어가면 translate를 이용한 애니메이션 예제가 있고 코드는 아래와 같다. 

p5js.org에서 제공하는 translate 예제 코드

 

2번과 3번 코드 부분을 보면 width와 height가 나오는데
이것은 createCanvas에서 설정한 캔버스의 너비와 높이값을 저장하는 시스템 변수로써, 아무것도 설정하지 않았을 때의 기본값은 100*100이다.

// 흰색 사각형 
translate(x, height / 2 - dim / 2);  // x=0.8, y=160 (200-40)
fill(255);
rect(-dim / 2, -dim / 2, dim, dim);  
 
// 검은색 사각형
translate(x, dim);  // x=1.6, y=80
fill(0); 
rect(-dim / 2, -dim / 2, dim, dim);  

변형 함수는 값을 축적(합산)한다고 했기 때문에 검은색 사각형의 X좌표는 흰색 사각형의 X좌표의 2배가 되어 2배 빠른 속도로 이동하게 된다. 

 

 

* p5.js를 공부하면서 그 내용을 기록하는 글입니다. 잘못된 내용이 있다면 댓글로 알려주세요!

p5.js 기본 도형 그리기 - 타원 그리기

p5.js 기본 도형 그리기 - 직사각형 그리기