Strength & Honor

p5-js 로 동영상을 편집 해 보자!!!

블로그 운영하시는 분들을 보면 다시 한번 대단하신 분들이 참 많구나 하는 생각이 듭니다. 직장생활과 독일어 및 프로그램 언어 공부등을 병행 하다보니 웹사이트에 글 하나 올리는 것이 이렇게 힘들다는 것을 새삼 느낍니다.

회사에서 마케팅 업무의 일환으로 SNS 에 편집된 홍보용 영상을 올리곤 하는데 전문 영상 편집가는 본사에 있다보니 법인의 한정된 인력으로 영상 편집 업무까지 하는 것은 만만치 않은 일입니다. 맥에서는 이런 영상 편집을 퀵타임과 아이무비를 이용하면 별도의 유료 프로그램을 사용하지 않고 간단하게 편집, 자막까지 입힐 수 있습니다.

아래는 폐사가 원격으로 상하좌우 조정되는 등기구를 고양 스타디움에 설치하여 RGB 조명 이벤트를 보여주는 영상입니다. 아이무비에서는 fade in/fade out 기능만 있다 보니 왼쪽에서 fade in 으로 나오는 등기구 영상이 아래 보이는 것 처럼 작게 표현되지 못하고 오른쪽에서 fade in 으로 보여지는 코딩을 보여주는 영상처럼 이벤트 영상과 동일한 크기로만 편집을 할 수 밖에 없었습니다.

유료 프로그램 사용 없이 이를 해결하고자 검색을 해 보니 p5-js 를 사용하여 Html 과 JavaScript 로 아래와 같은 영상을 만들 수 가 있었습니다. 코드는 매우 간단합니다. 하지만 이를 구현하고자 p5-js 예제들을 검색하였지만 좀처럼 제가 원하는 코드를 찾을 수 가 없어 반복적인 시행착오를 통해 코드를 완성 할 수 있었습니다.

코드를 보시면 그리 어려운 것은 아니나 가장 큰 핵심이 되는 코드에 대한 설명을 드리자면, 이벤트 영상은 굳이 움직일 필요가 없으니 좌표 75, 0 에서 고정을 시켜줬고 영상 크기는 1191 x 670 으로 설정하였습니다. 움직이는 등기구 영상은 왼쪽에서 fade in 이 되어야 하기에 x 값을 변수로 하여 위치가 좌표 75 까지 도달 할 때까지 5만큼씩 왼쪽에서 움직이도록 하였고 영상의 크기를 좀 작게 구현하고자 첫번째 영상보다 작은 250 x 300 으로 설정하였습니다.

참고로 아래 영상은 제 개인 Linkedin 에 올린 포스트입니다.

Html 코드 입니다.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
    <script src="sketch.js"></script>

</body>
</html>

위 Html 에 삽입된 sketch.js 의 소스 코드 입니다.

				
					let vid;
let vid1;
let playing = true;

function setup() {
    createCanvas(1920, 1080);
    frameRate(30)

  vid = createVideo("RGB_steering.mp4");
  vid.volume(0);
  vid.loop();
  vid.hide(); 

  vid1 = createVideo("RAS_Moving.mp4");
  vid1.volume(0);
  vid1.loop();
  vid1.hide();
  x = -200
}

function draw() {
 background(255, 255, 255);

  let movie = vid.get();
  image(movie, 75, 0, 1191, 670);

  let movie1 = vid1.get();
  x = x + 5
  if (x < 75)
  image(movie1, x, 110, 250, 300);
  else
  image(movie1, 75, 110, 250, 300);
}

비록 짧고 간단한 코드 이지만 제가 원하는 영상을 만들 수 있어 상당히 만족했던 기능이었습니다.

그럼 또 좋은 음악 듣고 가셔야죠. 드라마 수리남에서 배우 황정민님이 좋아하는 노래인 조용필님의 꿈입니다. 비록 악역으로 열연하셨지만 악인도 본인이 원하는 꿈을 꿨겠지요.