* 2016/07/23 *

＜このページの要約＞・processingのいくつかのライブラリに感動したから、ソースコードを紹介するよ。・技術系ブログじゃないから適当に書くよ⊂(^(工)^)⊃ ・感動してる模様をお届けするよ。 感想だよ /* ------------------------------------------------------------------------------------------------------*/ processingで以下のライブラリを使った感想が最強すぎワロタ！ｗ

「ControlP5」・2画面出るから（掲示板にあったコードrunしたら2画面出て感動した⊂(^(工)^)⊃）・スライドが便利すぎるから・これ使えば「なんかそれなりに特徴ある画像編集ソフトできそう」だとそこはかとなく感じたから「Video Export(by Abe Pazos)」・録画できるから（ただし音はこれじゃ録画されないらしい）・録画したやつの画質良すぎワロタから・これ使えば「なんかそれなりに特徴ある動画編集ソフトできそう」だとそこはかとなく感じたから・あとは動画を読み込むライブラリあったらできるね！・で読み込んだ動画に編集かけるみたいな（読込はprocessingのvideoっていうライブラリでいける）・動画の時間軸をControlP5のスライダーで触ったりね？ ソース紹介だよ（ControlP5） /* ------------------------------------------------------------------------------------------------------*/ （何が起こるか？それは「なんかSFっぽい画面が出る」だけです） ※以下のソースコードを起動する方法（手順は3つだよ） ①インストール・processingというソフトをインストールして、起動する ②ControlP5というライブラリ（＝拡張機能だよ）をprocessingにインストールする・processingの画面で下記の手順を踏めばインストールできるよ「スケッチ -> ライブラリをインポート -> ライブラリを追加 -> 左上の検索窓で「ControlP5」と入力 -> 出たのをインストールだよ」 ③ソースコードを入力し、起動・processingの画面に、下記の紫色の文全部をコピペして、左上の実行ってボタン押してね・これで仲間入りだよ

/*---------------------------------------------------------------------
＜留意事項＞
・現在の設定ではサブ画面のうち「SPEED」のスライダくらいしか機能していない（以下の文だけ）
  cp5.addSlider("speed").plugTo(parent, "speed").setRange(0, 0.1).setValue(0.01).setPosition(100, 260).setSize(200,20);
・なぜそのスライダだけが機能して他のが機能していないかというのは、「plugTo(parent, "speed")」の所に答えがある
      ・その"speed"の部分が、「メイン画面で変数名として使われている時」、そのコントロールは機能する
      ・その"speed"に当たる部分が「メイン画面で変数名として使われてない時」、そのコントロールは機能しない（むしろerrorっぽいの出る）（出力先が無いから）
・他の機能も使いたい時は、そこに注意して設定すること。場合によっては変数名も自分好みのに変えてもいい
----------------------------------------------------------------------*/

/* インポート */
import controlP5.*;

/* 変数宣言 */
ControlFrame cf;    //コントロール用フレーム
float speed;        //スピード
float pos;          //ポジション
color c;

void settings() {
  size(600,500,P3D);    //メイン画面サイズ
}

void setup(){
  cf = new ControlFrame(this, 400, 500, "Controls");    //サブ画面大きさ
  surface.setLocation(414,10);                          //メイン画面初期位置

}

void draw() {
  /* 設定処理 */
  background(0);                  //背景
  translate(width/2,height/2);    //位置調整

  /* 編集処理 */
  pos =pos+ speed;  //回転の速さ
  rotateY(pos);     //回転
  
  /* 表示処理 */
  box(100);        //箱
}

/* 以下のような使い方をしないとprocessing3ではcontrolP5は動かせないのでこういう書き方してね */
class ControlFrame extends PApplet {    //もう一つPAppletを作成（サブ画面）（使い方はコンストラクタ以外はメインの書き方と同じ）

  /* グローバル変数宣言 ------------------------------------------------------------------------------ */
  int w, h;          //サブ画面のカンバスサイズ
  PApplet parent;    //親画面
  ControlP5 cp5;     //

  /* コンストラクタ ---------------------------------------------------------------------------------- */
  public ControlFrame(PApplet _parent, int _w, int _h, String _name) {
    super();                                                               //PAppletコンストラクタ呼び出し
    parent = _parent;                                                      //
    w=_w;                                                                  //width
    h=_h;                                                                  //height
    PApplet.runSketch(new String[]{this.getClass().getName()}, this);      //サブ画面起動
  }

  /* void settings() ---------------------------------------------------------------------------------- */
  public void settings() {
    size(w,h);                //サブ画面のカンバスサイズ
  }

  /* void setup() ------------------------------------------------------------------------------------- */
  public void setup() {
    surface.setLocation(10,10);  //サブ画面初期位置
    cp5 = new ControlP5(this);
    cp5.addButton("Choose file").plugTo(parent,"chooseFile").setPosition(10,10);
    cp5.addButton("Save Frame").plugTo(parent, "saveFrame").setPosition(10,40);
    cp5.addToggle("auto").plugTo(parent, "auto").setPosition(10,70);
    cp5.addToggle("blend").plugTo(parent, "blend").setPosition(10,110);
    cp5.addNumberbox("seed").plugTo(parent, "seed").setRange(0, 360).setValue(1).setPosition(100, 10).setSize(100,20);
    cp5.addNumberbox("color").plugTo(parent, "c").setRange(0, 125).setValue(1).setPosition(100, 35).setSize(100,20);
    cp5.addNumberbox("color2").plugTo(parent, "c2").setRange(0, 1000).setValue(1).setPosition(100, 60).setSize(100,20);
    cp5.addSlider("speed").plugTo(parent, "speed").setRange(0, 0.1).setValue(0.01).setPosition(100, 260).setSize(200,20);
  }

  /* void draw() -------------------------------------------------------------------------------------- */
  void draw() {
    background(40);    //サブ画面の背景色
  }
}

ソース紹介だよ（Video Export） /* ------------------------------------------------------------------------------------------------------*/ （何が起こるか？それは「なんか画質良い動画がどっかにできる」だけです） ※以下のソースコードを起動する方法（手順は4つだよ） ①インストール・processingというソフトをインストールして、起動する（もうしてるなら飛ばしてね）・もう一個インストール（ダウンロードだけかも）するよ。「ffmpeg」ってものを検索してインストールしてね・それでできるffmpeg.exeっていうソフトを使って録画するプログラムだから、使うんだよ・インストールしなくちゃだめか、ダウンロードだけでいいかは、「普通に忘れた」 ②Video Exportというライブラリ（＝拡張機能だよ）をprocessingにインストールする・processingの画面で下記の手順を踏めばインストールできるよ「スケッチ -> ライブラリをインポート -> ライブラリを追加 -> 左上の検索窓で「Video Export」と入力 -> 出たのをインストールだよ」 ③ソースコードを入力し、起動・processingの画面に、下記の紫色の文全部をコピペして、左上の実行ってボタン押してね ④選択画面が突然出るから、ffmpeg.exeを探して、ok ・実行したら、なんか選択画面が出るんだよ。そしたらffmpeg.exeを探し出して、okしてね・ffmpeg.exeの場所は、頑張って探してね。どっかにあるよ・ちなみにその画面でffmpeg.exeじゃないのを選択したりとかすると、エラー出るよ・これ、ffmpeg.exeってものを使って録画するソフトなんだよね、だからそれ選択しないと、なんかまあ、終わるんだよね・そうなっちゃった場合、このページの下のFAQってとこ置いてあるコードをコピペして、実行してね・そうすればまた選択画面が出るようになるよ。今度はちゃんと探して選択してね・またミスった場合、また一番下に置いてあるコードを実行してね・ちなみに下のFAQってとこに置いてあるコードは、毎回「ffmpeg.exeの場所を探す」っていう操作も入っちゃってるから、　一回ちゃんとffmpeg.exeを選択してokできたら、後はもう、このちょい下のソースを実行しただけでokだよ

import com.hamoid.*;

VideoExport videoExport;

void setup() {
  size(600, 600);
  videoExport = new VideoExport(this, "basic.mp4");
}
void draw() {
  background(#224488);
  rect(frameCount * frameCount % width, 0, 40, height);

  videoExport.saveFrame();
}

FAQだよ /* ------------------------------------------------------------------------------------------------------*/ ●controlP5がprocessing3じゃ動かないっぽい・・・・・・なんかprocessing3になってから仕様変わったせいで、今までの書き方じゃ動かなくなったらしいよ・で作者が「↑のような書き方すれば動くよ」って教えてくれてるページあったよ・でそれコピペしたら動いたわけ・だから↑のような書き方すればprocessing3でも動くわけこれ ●controlP5のインストールの仕方わからない・・・・・・[processing開く -> スケッチ -> ライブラリをインポート -> ライブラリを追加 -> 左上の検索窓で「ControlP5」と入力 -> 出るよ！」 ●procesingって何？・なんかジェネラティヴアートをイージーに作れるやつだよ ●Video Exportのインストールの仕方わからない・・・・・・[processing開く -> スケッチ -> ライブラリをインポート -> ライブラリを追加 -> 左上の検索窓で「Video Export」と入力 -> 出るよ！」 ●Video Exportの方のソースコード動かしてみたらなんか画面出たけど、それでどうすればいいの？何をどうすれば？・その画面で「ffmpeg.exe」を選択してokすればいいんだよ！・そのソフトを使うやつなんだよ。だからffmpegをインストールしてなかったら、ググってインストールして！ ●Video Exportのそのソース動かしてみた最初の画面で違うファイル選択したらエラー出ちゃった・・・・・・以下のソース試したらもっかいその画面出るからもっかい試してみて！

import com.hamoid.*;

VideoExport videoExport;

void setup() {
  size(600, 600);
  videoExport = new VideoExport(this, "basic.mp4");
  videoExport.forgetFfmpegPath();                       //←この位置にこの文挿入すれば、また新たにffmpeg.exeを選択する画面出るようになるよ！
}                                                       //ちゃんとffmpeg.exe選択できたら、この文だけ消してね！もう要らないから！
void draw() {
  background(#224488);
  rect(frameCount * frameCount % width, 0, 40, height);

  videoExport.saveFrame();
}

●できた！・／(◞‸◟)＼ ●で、動画どこにできてるんだよ・[スケッチ -> スケッチフォルダーを開く]ってやれば、フォルダ出てくるよ、そこにmp4あるから、それだよ ●別にすごくないねこの動画・せやな・僕が感動しているのは「画質の良さ」と「動画をこんな簡単に出力できちゃうんだ」ってことです・でControlP5の方で出てきた「スライダー」とか？それらを使えば動画編集のパラメータに使えるじゃん？・それなりのソフトできそうじゃん・ʅ(◔౪◔)ʃ ●あれ、急にVideo Exportの方がエラーするようになった！！・俺がなった・なんだこれはって思って、とりあえずググったけど答え見つからなかったから、　もう一回ライブラリ入ってるか確認したらそれっぽいの見つからなくて、　ということは・・・・・インストールされてないことになってるんじゃ・・・・・？って思って探したら、　やっぱそうだった。新たにインストールしたらエラー出なくなった。・もしかしたらこのライブラリ、こういうことよく起こっちゃう系かもしれない・だから「あれ、エラー出るようになった」と思ったらまずもっかいインストールしてみる画面出して、　インストールされてるかされてないか確認してくれよ ●出力された動画見ても開けない！・俺がなった・何回か録画繰り返してみたら、開けるのができた・なんかあるんだと思う。対処法としては何回かやってみるってことしか浮かばないよ。・こういうことあるんですよねパソコン界は。 疲れたよ /* ------------------------------------------------------------------------------------------------------*/ ・めっさ初心者に向けて書いてしまった・初心者お断りな技術系ブログに苦しめられてきた代償がこんなところでも出てしまった（丁寧に書いてしまう）・processingの理念もたしか「初心者でもとっつきやすいように」的なものあったから、合わせましたみたいなことでいい・普通に共感するし・と言いますか、自分も初心者だし 疲れたよ2 /* ------------------------------------------------------------------------------------------------------*/ ・ｵｹﾞ・タイピング大好き～・くっそ長いタイピングするの大好き～・意識が徐々に昇華してくるよね