ProcessingのControlP5ライブラリを使ってみました。
こういったライブラリの存在を今まで知らなくて、ボタンやグラフなどのGUIは自前でゴリゴリ作成していました。使い方を覚えてしまえば結構便利です。
さっそくよく使いそうな（使えそうな）GUIを使ってみました。
▼Slider2D、Knob（Processing実行動画）▼
スライダー2D（Slider2D）とノブ（Knob）です。Slider2Dは平面（2軸）上に、Knobは円弧上にビジュアル表現できます。
ControlP5ライブラリにあるGUIは全般的にマウス操作時のイベントが準備されているようです。また各種値、色などいろいろな情報を取得、設定できるため、さまざまな値からリアルタイムにビジュアルを変化させることも可能です。
▼Chart（グラフ）▼
グラフ（chart）も使ってみました。
上動画サンプルソースでは2系列のデータ（正弦波、余弦波）を描画。先ほど作った Slider2D や Knob の位置に合わせて振幅を変化させてます。ここでは紹介してませんが棒グラフや円グラフ等も作成可能です。
グラフのY軸（縦軸）レンジはMax値に合わせて自動で可変できるようクラスを組み合わせで実施してます。
過去にリアルタイムでグラフモニタできるクラスを自作したのですが、もっと早くにこのライブラリを知っていれば作らなかったかもしれません。
▼Slider▼
スライダーも使ってみました。スライダーの動きに合わせてグラフの横軸レンジ（間隔）を可変させてます。青色のグラフのみスピードを変化させてます。
今回はよく使いそうなライブラリを試しに使用してみましたが、他にもいろいろあるようです。私にとってはクラスの使い勝手が微妙なところが少し有りますが、ライブラリ自体は結構便利です。
少し見栄えのするコントローラーやリアルタイムのモニター等に利用できそうです。今後、使用する機会でその都度、使い方を説明できればと思います。
余談ですが・・、今回の記事で紹介したProcessing実行画面の動画ですが、ほんとはHTMLにProcessingソースを埋め込むつもりでした。
サイト上で実際の動きを体験できるようにしたかったのですが、うまく埋め込みができなかったです。過去にこのページでProcessingソースをHTMLへ埋め込んだことがあるのですが、今回は外部ライブラリが原因？？やり方が分からずに結局動画になってしまいました。
コメント