どうも、そらです！
現在、学生でプログラミングを勉強中……
今回は、Processingを使った動画編集の第一弾ということで、Processingを使って画像に動きをつけていくやり方を紹介していきます！
この記事で分かること
・Processingを用いたアニメーションの作り方
・ブラックアウトさせるやり方（サンプル付き）
・画面を切り替えの作り方（サンプル付き）
Processingとは、ビジュアルアート向けの統合開発環境&プログラミング言語です。
Processingの特徴やできることが知りたい方はこちらをどうぞ！↓
Processingは初心者でも簡単に始めることができるプログラミング言語です。
今回使用したサンプルコードとその解説も載せているので、気になる方は実際にコードを動かしてみてくださいね！
※なお本記事で掲載したコードは、Processing4.3の環境で動作することを確認しました。
少しでも Processing に興味のある方や自分でオリジナルのデザイン＆アニメーションを作ってみたいと思っている方はぜひ参考にしてみてください！
作成した動画
今回は２つの短い動画をProcessingで作ってみました！
サンプルとして実際に出力した動画もつけています。
今回作ったものはアニメーションだけですが、Processingの機能にあるムービーメーカーを使えば音楽を挿入することも出来るので、ぜひ色々と試してみてくださいね！
※ムービーメーカーについては、後述の saveFrame()関数の使い方と共に紹介しています。良かったら参考にしてみてください！
ブラックアウト
画面が徐々に黒色に変わっていき、完全に黒くなったところで文字を表示させます！
動画の終わりにつけたりすると良いかも……？、と思い作ってみました。
Processingでは表示させる文字のフォントも様々なものの中から選ぶことができます。
ぜひ色々な使い方を試してみてくださいね！
Processingで出力させた動画がこちら↓
画面切り替え
２枚の画像を間に図形を挟んで切り替えます！
間の図形は円や楕円、三角形などに変更可能です。
他の図形の描写方法は、こちらを参考にしてみてください！↓
最後の画像が反転していますが、これは保存した画像が逆さだっただけなのでお気になさらず……
出力させた動画がこちら↓
サンプルコード
各デザインに使用したプログラムはこちら↓
ブラックアウト
画面切り替え
使用した関数
～変数～
・PImage
・PFont
～初期設定～
・loadImage()
・createFont()
～画像・描画～
・image()
・tint()
・textFont()
・textsize()
・text()
～ファイル保存～
・saveFrame()
～変数～
Processing ではC言語などと同様、変数を用いる際に必ず変数の形式を指定しなければいけません。
慣れるまでは少し書きにくいかもしれませんが、忘れないように記述していきましょう！
PImage
PImage は画像ファイルの情報を書き込む変数形式です。
使い方はint, float などと同様に「PImage (変数の文字);」のような形で記述します。
PFont
PFont は文字のフォントを指定する変数形式です。
使い方はPImageと同様。
一度にたくさんのフォントと使用する際には、リストにして使うこともできます！
～初期設定～
以下の関数は、主に初期設定のためプログラムではsetup()内で使用する関数になります。
loadImage()
書き込んでいるプログラムファイルと同じフォルダーに入っている画像ファイルを読み出します。
読みだしたデータをPImage 形式の変数に代入することで、後述のimage()関数と組み合わせて画像を出力することが可能。
画像のファイル形式は、.gif, .jpg, .tga, .png のものを読みこめるみたいです！
createFont()
使用するフォントを指定できる関数です。
今回はノーマルの”Arial”を使用しました。
～画像・描画～
以下の関数は、座標や図形の書式設定のためにプログラムではdraw()内で利用される関数です。
image()
この関数を使用すれば同フォルダ内の画像を出力することができます。
使い方は、「image(“使用する画像の変数”, “画像の左端のｘ座標”, “画像の左端のｙ座標”, “画像横幅”, ”画像高さ”)」のように５つの情報をカンマで区切って入力します。
tint()
出力する図形の透明度を指定できます。
指定範囲は0~255まで。
255では透明度が０になります。
textFont()
出力する文字のフォントを指定します。
textsize()
文字のサイズを指定できます。
今回使用した文字のサイズは100です。
text()
書きたい文字とその文字の出力位置を指定できます。
～ファイル保存～
saveFrame()
この関数を使用すると、映像を分割した画像がフォルダーに保存されます。
Processing のツールというところを押して、その中にあるムービーメーカーを選択し、出力されたフォルダーを書き込むと動画をすぐに作ることができます！
終わりに
今回は、Processing を用いて短い動画を制作しました！
Processing はプログラミング初心者でも始めやすく、色々なデザインを作ることができます。
少しでも興味のある人は、ぜひ挑戦してみてくださいね！
今後もProcessing で制作したデザインをコードと簡単な解説とともにあげていきたいなと思っています！
今後ともよろしくお願いします！
