processingの備忘録　-png、gifの生成- - プログラミングの備忘録

こんにちは。
今回は「実行結果の保存～png、gif編～」です。

私事ながらTwitterを始めました。~~フォローよろしくお願いします~~

そこで自分のプログラムを載せたいとなったときに、画像であれば以前 (processingの備忘録 -キーの検知- - プログラミングの備忘録) に紹介した方法でpngを生成して載せれば良いのですが、動画のときはOBSで撮ったものをmp4で載せていました。
しかしmp4だと重かったり画質が明らかに落ちているので、変えた方がいいなと感じてgifに手を出してみることにしました。

pngの生成
gifの生成
- ライブラリ「gifAnimation」
- 使い方
まとめ

pngの生成

先程も挙げましたが、以前 (processingの備忘録 -キーの検知- - プログラミングの備忘録) に画像の保存方法を紹介しました。
そのときには無かった、複数枚撮れるバージョンもつくってみました。

int k = 0;
void keyPressed(){
    if(key == 's'){
        k ++;
        saveFrame("image" + k + ".png");
        println("Saved.");
    }
}

sキーを押すたびにkに1が足され、それがファイル名にも反映されるようにしました。
本文にkが使われていると競合するので変えて使ってください。

こちらは1つつくっておけば、それを撮りたいプログラムの入ったフォルダに入れれば使えるというものなので便利です。

gifの生成

ライブラリ「gifAnimation」

gifの生成には「gifAnimation」というライブラリを使います。

ライブラリは、新たな関数やクラスを追加するためのものです。processingにデフォルトであるものだと足りないなと感じたときに自分でつくるのもいいですが、それはなかなか大変なので誰かがつくってくれたものを利用しようという感じです。

ライブラリを使うのは初めてなので、導入方法も紹介しておきます。
processingのウィンドウの上の方にある「スケッチ」から「ライブラリをインポート」「ライブラリの追加…」を選び、「Libraries」タブで「gifAnimation」と検索して出てくるものを「Install」すれば完了です。

実際に使う際はコードの始めに

import gifAnimation.*;

と追加します。

使い方

ではつくってみます。
と言っても、それほど複雑ではないので完成形だけ載せておきます。

import gifAnimation.*; //ライブラリの読み込み
int fc;
boolean movie;

GifMaker gif; //GifMakerクラスのgifさんをつくる

void setup(){
    //撮りたいプログラムのコード

    //

    frameRate(50); //50 fpsに設定

    //gifさんの設定
    gif = new GifMaker(this, "animation.gif"); //名前を決める
    gif.setRepeat(0); //リピート回数の設定（0は無限ループ）
    gif.setQuality(10); //クオリティ（デフォルトで10）
    gif.setDelay(20); //アニメーション画像1枚1枚の間隔を20 ms (50 fps) に設定
    //gif.setTransparent(0); //透過する色の設定（RGBαで指定でき、指定した色を透明にする）
}

void draw(){
    //撮りたいプログラムのコード

    //

    if(keyPressed == true && key == 'g'){ //「g」キーが押されたとき
        fc = frameCount; //フレーム数を保存
        println("Started."); //「Started.」と表示
        movie = true; //撮っていることを表す
    }
    if(movie == true){ //撮っているとき
        if(frameCount <= fc + 50*5){ //「g」キーを押した瞬間から5秒間撮影
            gif.addFrame(); //アニメーション画像をつくっていく
        } else { //5秒経ったら
            gif.finish(); //終了してgifを保存
            println("saved"); //「saved」と表示
            movie = false; //撮っていないことを表す
        }
    }
}

これでgキーを押したときに撮影が開始され、指定した時間だけ撮ってくれます。
撮っている間は動きがゆっくりになりますが問題ありません。

ただ、2回目以降を連続して撮りたいとなったときはgキーを押しても撮ってくれないので、一度閉じて再度実行してから撮影するか、コードを書き換える必要があります。
また、画像の生成のときとは違って別にファイルをつくって同じフォルダに入れればいいという形ではないので少し面倒ですし、このままだと生成ファイル名が同じなので何回とっても上書きされて、残るのは一番最後に撮ったものになることに注意してください。

以前 (processingの備忘録 -LJポテンシャル- - プログラミングの備忘録) につくったブラウン運動のプログラムを撮ってみました。
（なぜか赤線がチカチカする…）

追記（2021/12/04）
撮りたいコードに上のコードを貼り付けることで撮れるようにはなりますが、何行もあるものを移すとなると移す途中でコードが書き換わってしまったり、そもそも面倒だったりと問題がありました。
なので、それぞれ関数としてまとめてしまって、移すとしても少量になるようにしてみました。
（今の知識では撮りたいコードに何か書き加えないとgifの生成ができないので最小限に…）

import gifAnimation.*;
int fc;
boolean movie;
GifMaker gif;

void gifSetting(){
    frameRate(50);
    gif = new GifMaker(this, "animation.gif");
    gif.setRepeat(0);
    gif.setQuality(10);
    gif.setDelay(20);
}

void gifRecord(){
    if(keyPressed == true && key == 'g'){
        fc = frameCount;
        println("Started.");
        movie = true;
    }
    if(movie == true){
        if(frameCount <= fc + 50*5){
            gif.addFrame();
        } else {
            gif.finish();
            println("Saved.");
            movie = false;
        }
    }
}