GUIライブラリのcontrolP5を使ってみる[Processing]

　Processingで何か作ろうかと思ったが，何も思いつかない。とりあえずProcessingでボタンやリストボックスなどのGUIのアプリケーションには必須のコントロールと呼ばれるものの使い方を覚えようと思う。

1.controlP5のインストール

ProcessingではcontrolP5というライブラリを使うことでボタンなどを扱う事ができる。Processingを起動し，上のメニューバーから「スケッチ」→「ライブラリのインポート」→「ライブラリの追加」を選択。

　上のテキストボックスにcontrolP5と入力して，選択してinstallをクリック。

2.スライドとボタンを使ってみる

exampleのプログラムを打ってボタンを配置して終わるのもつまらないのでこの間やったフラクタル図形のパラメータをいじるように設定してみる。

import controlP5.*;

/* Hフラクタル用のパラメータ */
int N = 5;
int L = 128;
/* コントロールを扱うControlP5クラス */
ControlP5 cp5;

void setup() {
  size(512, 512);

  /* コントロールの初期化 */
  cp5 = new ControlP5(this);

  /* Nの値を変化させるスライダーを追加 */
  cp5.addSlider("N")
    .setPosition(10, 10)/*位置*/
    .setSize(256, 10)/*大きさ*/
    .setRange(1, 8);/*値の範囲*/

  /* Lの値を変化させるスライダーを追加 */
  cp5.addSlider("L")
    .setPosition(10, 30)/*位置*/
    .setSize(256, 10)/*大きさ*/
    .setRange(10, 1024);/*値の範囲*/

  /* 押されたらbutton1_Clickを実行するボタンを追加 */
  cp5.addButton("button1_Click")
    .setPosition(10, 50)/*位置を設定*/
    .setSize(256, 10);/*大きさを設定*/
}

/* ボタンをクリックした際に呼び出される関数 */
public void button1_Click(){
  /* 画面を保存する */
  saveFrame("###.png");
}

void draw() {
  /* 背景を黒で塗りつぶす */
  background(0);
  /* 線の色を緑に指定 */
  stroke(0, 255, 0);

  /* 再帰関数を呼び出す */
  step(width/2, height/2, 0);
}

/* H-フラクタルを描く関数 */
void step(float x, float y, int n) {
  if ( n >= N )
    return;

  float len = L * pow(0.5, n);

  line(x-len, y, x+len, y);
  line(x-len, y-len, x-len, y+len);
  line(x+len, y-len, x+len, y+len);

  step(x-len, y-len, n+1);
  step(x-len, y+len, n+1);
  step(x+len, y-len, n+1);
  step(x+len, y+len, n+1);
}

　これでこの前やったHフラクタルのパラメータをいじれるようになった。