[TIL]24-12-20

오늘은 애니메이션을 구현해보았다.
밑은 내가 강의보고 따라 구현해본 결과물이다.

결과물을 mp4로 뽑기위해 밑의 명령어로 npm을 설치해주고

npm install @ffmpeg-installer/ffmpeg --global

이렇게 서버를 실행해주면 된다.

canvas-sketch sketch-03_animate.js --output=output/03 --stream

ctrl+Shift+S 로 촬영시작, 한번더 단축키 실행하면 끝난다.
그리고 output/03에 저장된다.

배운점

내가 실습하면서 쓰고있는 라이브러리 canvas-sketch 에선
settings 안에 animate:true를 넣어주기만하면 자동으로 애니메이션이 실행이된다.
초당 60 프레임간격으로 함수를 호출하여 실행시킨다.

const settings = {
  dimensions: [1080, 1080],
  animate: true,
};

내부적으로는 requestAnimationFrame() 함수를 호출하여 구현된다고 한다.

//위의 animate: true 내부 동작 함수라고 한다.
const animate = () => {
  console.log("seula");
  requestAnimationFrame(animate);
};

npm install 한것이 무엇인지 궁금해져서 gpt에게 물어봤더니, 패키지 인데 라이브러리 또는 모듈이라고 했다.
그래서 또 물어봤다 내가 설치한 패키지는 라이브러리인지 모듈인지?

라이브러리와 모듈의 차이

모듈

코드의 재사용성과 구조화를 위해 특정 기능을 수행하는 단위로 작성된 코드 묶음.
주로 특정 기능을 제공하며, 다른 프로젝트나 코드에 임포트하여 사용합니다.
예시: 파일 시스템을 제어하거나 데이터 처리를 수행하는 fs, http, @ffmpeg-installer/ffmpeg 등이 있습니다.

라이브러리

특정 문제를 해결하거나 다양한 기능을 제공하기 위해 여러 모듈을 조합한 더 큰 단위의 코드 묶음.
사용자가 호출하여 기능을 사용할 수 있습니다.
예시: 데이터 처리 라이브러리인 lodash, 웹 프레임워크인 express 등이 있습니다.

@ffmpeg-installer/ffmpeg는 모듈!

이 모듈은 FFmpeg(오디오 및 비디오를 변환하거나 처리하는 툴)의 바이너리 파일을 설치하는 역할을 합니다.
프로젝트에서 FFmpeg 명령줄 툴을 쉽게 사용할 수 있도록 FFmpeg 실행 파일의 경로를 제공합니다.

https://github.com/mattdesl/canvas-sketch/blob/master/docs/exporting-artwork.md
그리고 여기 설명을 보니 이 모듈이 필요한 이유가
모듈이 없으면 프레임이 다 사진취급되어서 한장 한장 아웃풋 폴더에 저장이되는데,
모듈로 사진들을 다 묶어서 영상으로 만들기 위해서인듯하다.