前置き
- Processingで作ったsketchをmp4で出力したい
- 公式IDEのMovieMaker使えば可能だが、GUIでポチポチやるのは面倒くさい
- というかそもそも公式IDEの立ち上げが面倒くさい。
- vscodeでsketch作成から動画出力までやったら楽やん
この投稿で実現したいこと
- vscodeでsketchを書く
- vscodeでsketchを実行する（pngを出力する）
- vscodeでpngからmp4を生成する
- vscodeで不要になったpngを削除する
フォルダ構成
この投稿では以下のフォルダ構成を前提とします1
C:\Users\Public
+ Documents # vscodeのワークスペース
+ .vscode
+ tasks.json
+ Processing
+ sketch1
+ sketch1.pde
+ out # png生成用フォルダ。事前に作成しておく必要はない + Tools
+ Processing
+ processing-java.exe # Processingに同梱されているexe
+ ffmpeg
+ bin
+ ffmpeg.exe
vscodeでsketchを書く
sketchフォルダをvscodeで開いて普通にコードを書きます。この投稿ではsketch実行時にpngを生成し、それを後工程でmp4に変換します。そのためdraw()の中にsaveFrame()を入れておきます。ポイントは以下です。
- 今回はsketchフォルダに
outというフォルダを作ってpngが保存されるようにします - Windowsのパス区切り文字
\がエスケープ文字\とかぶるので、エスケープ文字ではなく円マークなのだとわかるよう\\とします - 四桁の数字の連番でpngが生成されるよう
####を指定します
void draw(){
saveFrame("out\\####.png");
}
vscodeでsketchを実行する
Processingは同梱されているprocessing-java.exeを使うとCLIから実行できるようになります。
C:\Users\Public\Tools\Processing\processing-java.exe --force --sketch="C:\Users\Public\Documents\Processing\sketch1" --run
これとvscodeのタスク機能を使って、公式IDEを使わずにsketchを実行できるようにします。
tasks.jsonを設定する
Ctrl+Shift+P から「タスク：タスクの構成」を実行してtasks.jsonを編集します。
- tasks.jsonの書き方はIntegrate with External Tools via Tasks
で解説されています。 - argsの箇所で使っている${fileDirname}など変数についてはVariable Referenceで解説されています
{
"version": "2.0.0",
"tasks": [
{
"label": "Run Processing Sketch", // わかりやすい名前を付ける
"windows": {
"command": "C:\\Users\\Public\\Tools\\Processing\\processing-java.exe", // ここのパスはご自身の環境に合わせてください
},
"type": "process",
"args": [
"--force",
"--sketch=${fileDirname}", // スケッチのフォルダまで指定する。ファイルは指定しない。
"--run"
],
"group": {
"kind": "build", // Ctrl+Shift+Bで実行したい(=楽したい)のでbuildにする
"isDefault": true
},
"presentation": {
"reveal": "always", // 画面表示を常に行う
"panel": "new" // 新しいterminalで実行する
}
}
]
}
タスクとして実行する
tasks.jsonを設定したうえで、sketch1.pdeを編集中の状態で以下いずれかを実行します。すると、sketchにはsaveFrame()が記述されているのでoutフォルダが作られ、そこに4桁連番のpngが生成されます
-
Ctrl+Shift+B -
Ctrl+Shift+P→ 「ビルドタスクの実行」
vscodeでpngからmp4を生成する
前述の通りMovieMakerを使うのは面倒くさいので、processing-java.exeと同じようにCLIから実行できる動画変換ツールffmpegを使います。ここからダウンロードしておきます
tasks.jsonを設定する
こちらもvscodeのタスクとして実行できるよう、tasks.jsonに設定を追加します。ポイントは以下の通りです
-
powershell.exeの-Commandパラメータにffmpeg.exeを渡す形で実行する2 -
ffmpegの設定は以下を参照
{
"version": "2.0.0",
"tasks": [
{
// processing-java.exeの処理
},
{
"label": "Create mp4 from png", // わかりやすい名前をつける
"windows": {
"command": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
},
"type": "process",
"args": [
"-NoProfile",
"-Command",
// ここからffmpeg
"C:\\Users\\Public\\Tools\\ffmpeg\\bin\\ffmpeg.exe", // ここのパスはご自身の環境に合わせてください
"-r 30", // inputのフレームレート
"-i ${fileDirname}\\out\\%04d.png", // inputとなるpng。.pdeのsaveFrame()で指定したものと同じpathにする
"-crf 18", // 品質。0-50を指定する。小さいほど品質が高い
"-vcodec libx264", // h.264でエンコード
"-pix_fmt yuv420p", // エンコーダに渡すピクセルフォーマット
"-r 60", // outputのフレームレート
"${fileDirname}\\out\\out.mp4"
],
"group": "test", // testにする
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}
タスクとして実行する
tasks.jsonを設定したうえで、sketch1.pdeを編集中の状態で以下を実行するとffmpegが実行され、outフォルダにmp4ファイルが生成されます。
-
Ctrl+Shift+P - 「テスト タスクの実行」を実行
- 「Create mp4 from png」（
tasks.jsonで設定したlabelの名前）を選択
vscodeで不要になったpngを削除する
mp4を生成したらpngはもう不要なのでPowershellのRemove-Itemで削除します。これもtasks.jsonで設定します。
tasks.jsonを設定する
-
powershell.exeの-CommandパラメータにRemove-Itemを渡す形で実行する3
{
"version": "2.0.0",
"tasks": [
{
// processing-java.exeの処理
},
{
// ffmpeg.exeの処理
},
{
"label": "Remove png", // わかりやすい名前を付ける
"type": "process",
"windows": {
"command": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
},
"args": [
"-NoProfile",
"-Command",
"Remove-Item -Path ${fileDirname}\\out\\*png" // pngの削除
],
"group": "test",
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}
タスクとして実行する
tasks.jsonを設定したうえで、sketch1.pdeを編集中の状態で以下を実行するとoutフォルダにあるpngファイルが削除されます。
-
Ctrl+Shift+P - 「テスト タスクの実行」を実行
- 「Remove png」を選択
まとめ
- .pdeに
saveFrame()を書いておく -
tasks.jsonに以下の処理を書く-
processing-java.exeの実行 -
ffmpeg.exeの実行 -
Remove-Itemの実行
-
- vscodeのコマンドパレット（
Ctrl+Shift+P）から、ビルドタスクorテストタスクを実行する
やったー！vscodeだけでmp4出力後のpng削除まで含めて完結したよ！