p5.js 애니메이션을 위한 변형(transform) 함수 3 - 객체 회전 rotate()

p5.js 애니메이션을 위한 변형(transform) 함수 3 - 객체 회전 rotate()

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

지난 포스팅의 scale 함수에 이어 이번에는 rotate 함수에 대해 알아보자.

 

rotate() - 객체 회전

scale 함수의 기본 문법은 rotate(angle, [axis])이다. 

 

• angle : 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 회전각.
  양수를 입력할 경우 시계 방향으로 객체를 회전 시킴
  
  
• axis : p5.Vector|숫자 배열[]: (3D의 경우,) 회전축 (선택 사항)

 

 

translate, scale 함수와 마찬가지로 rotate 함수도 변형 함수이기 때문에 호출된 뒤 후속적으로 호출된 모든 변형 함수에 적용되어, 그 효과가 축적된다.

예를 들어 rotate(QUARTER_PI)를 호출한 뒤 rotate(QUARTER_PI)를 호출하면, 결과적으로 rotate(HALF_PI)와 동일한 효과를 갖는다.

 

rotate 함수 적용 예시 

rorate 호출에 따른 사각형의 회전 각도 변화

function setup() {
  createCanvas(400, 400);
  background('#f0f0f0');
}
function draw() {
  // 사각형 그리기
  fill(0);
  translate(width/2, height/3);  //x:200, y:133.33
  rotate(QUARTER_PI);  //45도
  rectMode(CENTER);
  rect(0, 0, 100, 100);

  fill(255);
  translate(width/4, height/4);  //x:100  y:100
  rotate(QUARTER_PI);  //45도
  rect(0, 0, 100, 100);
}

 

 

RADIANS 각도 값의 이해

p5.js에서의 기본 angleMode는 원주호를 이용한 각도 값인 RADIANS로 설정되어 있다. 
RADIANS 각도값에 관해서는 아래 그림과 호(arc) 그리기를 참조해 주기 바란다.

arc()함수에서의 각도 값

 

p5.js 기본 도형 그리기 - 호(arc) 그리기

 

이 RADIANS 각도 값(0~2PI)에 익숙하지 않아 각도를 도(0-360) 단위로 표현하고 싶다면 angleMode(DEGREES)로 변경하면 된다.

 

 

 

rotate 회전 예제

examples | p5.js

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

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

 

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

설정한 캔버스 크기를 2로 나눈 값이기 때문에 translate(360, 200)이 적용되어 화면의 중앙으로 도형의 위치가 이동된다.

 

2번 second() 함수는 컴퓨터의 시계와 통신해서 현재 초를 0부터 59에 해당하는 값으로 반환한다.
여기서 사용된 조건식 if(second() % 2 === 0) 은 홀수와 짝수를 판별하는 것으로, 

second함수에서 반환하는 값을 2로 나눈 것의 나머지가 0이면 조건을 충족하기 때문에 { } 안에 있는 실행문이 실행된다.

* 나머지 연산자(%) : 피제수가 제수에 의해 나누어진 후, 그 나머지를 반환함

 

 

3번 random() 함수는 인수의 지정에 따라 아래와 같은 랜덤한 요소를 반환한다.

• 별도의 인수를 지정하지 않을 경우 : 0 ~ 1 미만 사이의 랜덤한 수를 반환
• 1개의 인수를 숫자로 지정한 경우 : 0 ~ 해당 숫자 미만 사이의 랜덤한 수를 반환
• 1개의 인수를 배열로 지정한 경우 : 해당 배열로부터 임의의 요소를 반환
• 2개의 인수를 지정한 경우 : 1번째 인수 ~ 2번째 인수 미만 사이의 랜덤한 수를 반환

예제에서는 random(-0.1, 0.1)로 인수를 2개 지정했기 때문에 -0.1~0.1 사이의 랜덤한 수가 반환된다.

 

 

4번 cos()는 각도의 코사인을 계산하는 함수로 현재 설정된 angleMode를 반영한다. 
angleMode의 기본값은 RADIANS이고 DEGREES로 변경할 수 있다.
값은 -1부터 1까지의 범위 내에서 반환된다는데, 대략 그 값이 어느 정도인지 알아보려면 아래 링크의 온라인 계산기를 이용해 보길 바란다. 

 

 

sine/cosine 값을 계산할 수 있는 온라인 계산기

온라인 계산기 : 웹 계산기 | RAKKOTOOLS🔧

cos() 레퍼런스 예제

reference | p5.js

 

scale 함수 알아보기

p5.js 애니메이션을 위한 변형(transform) 함수 2 - 객체 크기 조정 scale()

 

translate 함수 알아보기

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

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