だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ: Processing

#つぶやきProcessing - Twitter検索 / Twitter
↑面白いので皆様もぜひ!



Processingで音声付き動画を再生する方法と、フェードアウト/フェードインっぽいエフェクトをかける方法をまとめました。
検証環境はmac OS 10.13、Processing3.5.3 です。

動画の再生
Processingで動画を再生したい場合、Videoライブラリを利用します。
おそらくデフォルトで開発環境の中に入っていると思いますが、無ければ スケッチ > ライブラリをインポート > ライブラリの追加 で「Video」と検索すれば出てきます。

ひとまずリファレンスを参考に以下のようにコードを書きます。
Movie::play() \ Language (API) \ Processing 3+
import processing.video.*;
Movie myMovie;

void setup() {
size(200, 200);
myMovie = new Movie(this, "video.mp4");
myMovie.play();
}

void draw() {
image(myMovie, 0, 0);
}

void movieEvent(Movie m) {
m.read();
}
コードをいったん保存したら保存先のディレクトリを開き(Processing開発環境上であれば Command+K で開けます)、pdeファイルと同じ階層に「Data」ディレクトリを作ります。
そのDataディレクトリの中に再生したい動画を保存します。今回は動画名をvideo.mp4としておきます。
上記Processingのコードを実行し、映像や音が再生されればOKです。

サイズの調整
上記コードの状態だと、映像のサイズとProcessingの画面サイズが合っていないので調整します。
size() は変数で指定できないので surface.setSize() で指定します。
こうしておくと後で「画面の大きさをn倍にしたい…」みたいな時に役に立ちます。
int movieWidth = 1280;
int movieHeight = 720;

void setup() {
size(0, 0);
surface.setSize(movieWidth, movieHeight);

myMovie = new Movie(this, "video.mp4");
myMovie.play();
}

動画のループ
動画の再生が終わると停止したままになってしまっているので、ループするよう設定します。
void setup() {
size(0, 0);
surface.setSize(movieWidth, movieHeight);

myMovie = new Movie(this, "video.mp4");
myMovie.loop();
myMovie.play();
}

動画のコントロール
キーボードから適当なキーを押したら一時停止、マウスでクリックしたら再生するようにしてみます。
import processing.video.*;
Movie myMovie;

int movieWidth = 1280;
int movieHeight = 720;

void setup() {
size(0, 0);
surface.setSize(movieWidth, movieHeight);

myMovie = new Movie(this, "video.mp4");
myMovie.loop();
myMovie.play();
}

void draw() {
image(myMovie, 0, 0, width, height);
}

void movieEvent(Movie m) {
m.read();
}

void keyPressed() {
myMovie.pause();
}

void mousePressed() {
myMovie.play();
}

動画のフェードアウト
フェードアウトのように見せるため、動画の前に動画と同じ大きさの黒い四角を敷き、その透明度を操作します。
四角は最初は透明な状態で、だんだん暗くなっていく…というしくみでフェードアウトを表現します。
適当なキーを押したらフェードアウトして動画が停止(正確には一時停止)するようにしてみます。
import processing.video.*;
Movie myMovie;

int movieWidth = 1280;
int movieHeight = 720;

boolean isFadeout = false;
float rectAlpha = 0;
float fadeSpeed = 1;

void setup() {
size(0, 0);
surface.setSize(movieWidth, movieHeight);

myMovie = new Movie(this, "video.mp4");
myMovie.loop();
myMovie.play();
}

void draw() {
image(myMovie, 0, 0, width, height);

noStroke();
fill(0, 0, 0, rectAlpha);
rect(0, 0, width, height);

if (isFadeout) {
fadeout();
}
}

void movieEvent(Movie m) {
m.read();
}

void fadeout() {
rectAlpha += fadeSpeed;

if (rectAlpha > 255) {
rectAlpha = 255;
isFadeout = false;
myMovie.pause();
}
}

void keyPressed() {
if (!isFadeout) {
isFadeout = true;
}
}

音声のフェードアウト
上記のコードだと動画がゆっくりと暗くなって、最後に真っ暗になった時に音声がブチッと切れるので、音声も動画と同じようにフェードアウトするようにしてみます。
音声ボリュームを四角の透明度操作に合わせてだんだんと小さくなるように操作するしくみです。
import processing.video.*;
Movie myMovie;

int movieWidth = 1280;
int movieHeight = 720;

boolean isFadeout = false;
float rectAlpha = 0;
float fadeSpeed = 1;

void setup() {
size(0, 0);
surface.setSize(movieWidth, movieHeight);

myMovie = new Movie(this, "video.mp4");
myMovie.loop();
myMovie.play();
}

void draw() {
image(myMovie, 0, 0, width, height);

noStroke();
fill(0, 0, 0, rectAlpha);
rect(0, 0, width, height);

if (isFadeout) {
fadeout();
}
}

void movieEvent(Movie m) {
m.read();
}

void fadeout() {
rectAlpha += fadeSpeed;
myMovie.volume(map(rectAlpha, 0, 255, 1, 0));

if (rectAlpha > 255) {
rectAlpha = 255;
isFadeout = false;
myMovie.pause();
}
}

void keyPressed() {
if (!isFadeout) {
isFadeout = true;
}
}

動画と音声のフェードイン
フェードインはフェードアウトの逆のことをするだけです。
フェードアウト後に動画が止まっている状態でマウスをクリックしたらフェードインしながら動画と音声が再生されるようにしてみます。
import processing.video.*;
Movie myMovie;

int movieWidth = 1280;
int movieHeight = 720;

boolean isFadeout = false;
boolean isFadein = false;
float rectAlpha = 0;
float fadeSpeed = 1;

boolean isPaused = false;

void setup() {
size(0, 0);
surface.setSize(movieWidth, movieHeight);

myMovie = new Movie(this, "video.mp4");
myMovie.loop();
myMovie.play();
}

void draw() {
image(myMovie, 0, 0, width, height);

noStroke();
fill(0, 0, 0, rectAlpha);
rect(0, 0, width, height);

if (isFadeout) {
fadeout();
}
if (isFadein) {
fadein();
}
}

void movieEvent(Movie m) {
m.read();
}

void fadeout() {
rectAlpha += fadeSpeed;
myMovie.volume(map(rectAlpha, 0, 255, 1, 0));

if (rectAlpha > 255) {
rectAlpha = 255;
myMovie.pause();
isFadeout = false;
isPaused = true;
}
}

void fadein() {
rectAlpha -= fadeSpeed;
myMovie.volume(map(rectAlpha, 255, 0, 0, 1));

if (rectAlpha < 0) {
rectAlpha = 0;
isFadein = false;
}
}

void keyPressed() {
if (!isFadeout) {
isFadeout = true;
}
}

void mousePressed() {
if (!isFadein && isPaused) {
myMovie.play();
isPaused = false;
isFadein = true;
}
}

参考URL
Video \ Libraries \ Processing.org
Processingで動画を再生したりなんやかんやする - 生存報告書
How disable sound in Movie? - Processing Forum
Sound::volume() \ Language (API) \ Processing 3+











このお仕事を通してProcessingの色んな一面を見た気がします。
ツイートにもありますが、技術的に書けることは書いていく予定です!よろしくお願いします!








JSによる作品やパフォーマンスが募集されていたのでp5.jsスケッチを応募したところ、
6月7日に開催されたカンファレンスでの展示作品のひとつとして選ばれました。
とても嬉しく、光栄に思っています!

【追記】

↑このページのトップヘ