動画の高級化
高級化と言えば画像を高密度にしてきれいな画質にすることが考えられます。ここでは目を引くような動画で間接的に高級化する方法を模索しています。
前回、「動画を縁取り加工」にて夜空の雲の形をしたスクリーン上に花火が打ち上がる動画の作成を述べました。
先の手法は体験で発見した重ね書きを用いましたが、Canvasで描画する際には、「要素同士が重なる部分のブレンドモードを指定する」にまとめられているように、Canvasの機能として体系づけられていました。
前回の方法は泥臭い方法で、今回の手法がスマートで発展性に富みます。
動画を重ね合わせる手法
動画と言えども、静止画像の延長線上にあります。そこで静止画像の重ね合わせについて考えてみます。先に紹介の記事にありますが、2つの画像を重ね合わせるブレンドモードは以下の図に示した12パターン存在するようです。
以下の図はマゼンタ色の四角形を先に描き、その後、黄色の円を重なるように描いたとき、条件設定により最終結果がどのように表示されるかを示しています。
使い方は上記のサイトにていねいにまとめられています。白黒の映画をカラー化する方法は、ひょっとして上記のような技術(globalCompositeOperation)を採用しているのでしょうか。
動画加工の一例
加工のしくみとコード
動画そのものを加工することには問題が多過ぎます。そこで既存の画像を改良する操作を加えます。2つの画像が重なるとき、初期状態では上の図のsource-overの形すなわち、後で描いた画像が表示されます。
対して先に描いた画像を優先するには、destination-overを指定します。これら12パターンを用いて、縁取り画像などを作ります。
コードの一部を掲げます。
if((cnt % 4)==0){ //4回に一度、ブレンド効果を変更する
ctx.beginPath();
ctx.globalCompositeOperation = 'source-over'; //規定値で描く
ctx.drawImage(src_video, 0, 0, src_video.width, src_video.height); // W, H
ctx.globalCompositeOperation = 'destination-in';//新しい図形と重なる部分のみを描画
var p = Math.floor(w / 20);
var q = w % 20;
var v = (p % 2) ? 20 - q : q;
ctx.moveTo(4*v+160, 0); //6角形を描く
ctx.lineTo(640, 0);
ctx.lineTo(640, 360-3*v); //
ctx.lineTo(480-4*v, 480); //
ctx.lineTo(0, 480);
ctx.lineTo(0, 3*v+120); //
ctx.fill();
ctx.closePath();
//console.log("W=%d %d", w, v);
++w;
}
else ctx.drawImage(src_video, 0, 0, src_video.width, src_video.height); // W, H
cnt++;
4行目のdrawImegeで描かれる画像が通常表示になるように、3行目で’source-over’を指定します。7~16行で表示される6角形領域だけが浮き彫りになるように6行目で’destination-in’を指定します。
1~22行の処理は繰り返し実行されるので、3行目に示したglobalCompositeOperationの設定を省略すると正しい描画になりません。
動画は完全無料の動画再生ソフトGOM Playerの公式サイトのmp4_h264_aac.mp4を使わせていただきました。
編集の発展性
今回の動画を編集する例は、大きな画像サイズをわざわざ狭めるようで有意性は小さいですが、目を引く効果があります。
また、上部の一部を全面削除する際に使えます。
WindowsVista用に作られたMovie Maker2.6が持つ画像切り替え効果を自作するヒントになりそうです。