p5.js 애니메이션을 위한 프레임 개념 및 frameRate(), frameCount

애니메이션의 원리

여러 장의 연속적인 이미지를 일정한 속도로 보여주게 되면 우리 두뇌는 망막에 남은 잔상으로 인해 이미지가 움직이는 것처럼 착각하게 된다고 한다.

위의 애니메이션은 총 6개의 프레임으로 이루어져 있다.

출처 :  https://ko.wikipedia.org/wiki/애니메이션

 

빨간 공이 움직이는 애니메이션은 연속된 정지 사진 6장의 모음으로 볼 수 있는데, 각각의 정지된 이미지 하나를 '프레임'이라 부른다.
이런 이미지가 1초에 몇 장 보이는지 프레임을 넘기는 속도를 가리켜 'Frame Rate', 우리말로 옮기면 프레임률이라 하며, 단위로는 'fps' 혹은 국제 표준인 'Hz'를 쓴다.

 

출처:  https://namu.wiki/w/FPS

 

 

sketch.js 파일의 기본 구조

p5.js 에디터에서 Sketch Files를 클릭해 보면 html, js, css로 파일로 나뉘어 있고,
그중에 sketch.js 파일을 보면 아래와 같이 한 번만 실행되는 setup() 함수와 반복 실행되는 draw() 함수로 구성돼 있다.

p5.js 에디터에서 본 파일 구조

 

 

draw() 함수는 종료되기 전까지 내부의 코드를 위에서 아래로 무한 반복 실행하게 되는데, 기본 설정은 초당 60 프레임으로 되어 있다. 

 

 

frameRate() - 초당 프레임(fps) 속도 설정 변경

이와 같이 1초에 60 프레임으로 설정돼 있는 p5.js의 초당 프레임 속도의 설정을 변경할 수 있는 것이  frameRate() 함수이다.

frameRate() 함수의 기본 문법은 frameRate(fps)이다. (숫자가 낮으면 속도가 느리고 높을수록 빠름)

 

setup() 함수 내에서 프레임 속도를 설정하는 것을 권장하고 있으며, 24 프레임 정도면 애니메이션을 부드럽게 재생할 수 있다고 한다. (일반적인 애니메이션은 초당 24~30 프레임 정도임)

 

 

frameRate() 함수의 fps 수치에 따라  다른 색상을 적용한 애니메이션

let rectY = 0;
let fr = 120;
let clr;

function setup() {
  createCanvas(500, 500);
  frameRate(fr); // frameRate = 120
  clr = color(0, 200, 255); // 초기 색상
}

function draw() {
  background(0);
  rectY = rectY += 1;  // y좌표 1씩 증가

  if (rectY >= height) {
   // If you go off screen.
    if (fr === 120) { 
      clr = color(255, 0, 100);
      fr = 60;
      frameRate(fr); // frameRate = 60
    } else {
      clr = color(0, 200, 255);
      fr = 120;
      frameRate(fr); // frameRate = 120;
    }
    rectY = 0;
  }
  fill(clr);
  rectMode(CENTER);
  rect(width/2, rectY, 100);
}

 

 

frameCount - 화면에 나타난 프레임 개수 계산

시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정한다.
setup() 함수의 기본값은 0이고, draw() 함수의 루프가 처음 실행될 때 frameCount 값은 1, 두 번째는 2 이런 식으로 반복 실행할 때마다 1씩 증가함.

 

 

frameCount를 이용한 애니메이션

도형에 움직임을 주려면 x, y 좌표가 고정되지 않고 변경돼야 하는데, 이 예제에서는 frameCount가 증가하는 것에 착안해 움직임을 주었다.

/* https://www.codecademy.com/courses/learn-p5js 예제 참고 */

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);

  fill(255);
  //frameCount가 증가함에 따라 원이 화면 우측으로 이동
  ellipse(frameCount, height / 2, 300, 300);

  //원이 화면 우측으로 다 이동했을 경우 다시 화면 좌측으로 이동시켜줌
  if (frameCount > width) {
    frameCount = -150;
  }

  fill(205, 0, 150);
  // frameCount를 화면에 텍스트로 표시
  textSize(72);
  textAlign(CENTER);
  text(frameCount, width / 2, height / 2);
}

 

예제에 새로 나온 함수들

위의 예제에서 새롭게 나온 함수들에 대해 간단히 알아보자. 
텍스트와 관련된 내용은 다음에 다시 한번 다루도록 하고, 오늘은 이런 것도 있구나 하고 가볍게 한 번 슥~읽어보기 바란다.

windowWidth() - 사용자의 윈도우 화면 너비 값을 저장

windowHeight() - 사용자의 윈도우 화면 높이값을 저장

textSize()  - 현재 폰트 크기를 받아오거나 설정 (픽셀 단위)

설정된 크기는 text() 함수 이후에 호출되는 모든 함수들에 적용됨

 

text() - 화면에 텍스트를 나타냄

text 함수의 기본 문법은 text(str, x, y, [x2], [y2])이다.
fill() 함수로 텍스트의 색상을 변경할 수 있으며, stroke() 및 strokeWeight() 함수로 텍스트의 윤곽선을 변경할 수 있다.

• str : 문자열 | 객체 | 배열 | 숫자 | 불리언 등을 표시할 영숫자 기호
• x 숫자: 텍스트의 x좌표값
• y 숫자: 텍스트의 y좌표값
• x2 숫자: 기본값은 텍스트 상자의 너비 (선택 사항)
• y2 숫자: 기본값은 텍스트 상자의 높이 (선택 사항)

 

textAlign() - 텍스트 정렬

textAlign 함수의 기본 문법은 textAlign(horizAlign, [vertAlign])이다. 

• horizAlign 상수: 가로 정렬, LEFT, CENTER, RIGHT 중 하나
• vertAlign 상수: 세로 정렬, TOP, BOTTOM, CENTER, BASELINE 중 하나

horizAlign은 text() 함수의 x값을, vertAlign은 y값을 참조함

* p5.js를 공부하면서 정리한 내용입니다. 잘못된 내용이 있다면 댓글로 알려주세요!

p5.js 온라인 웹 에디터

p5.js Web Editor

p5.js 온라인 웹 에디터 사용법