ProcessingでターミナルのUIを作る

Processingでカタカタカタッターン！をやりたいとき用にターミナルのUIを作りました。アピールポイントはコマンドの入力履歴機能とメッセージごとに色付けできる機能。

www.youtube.com

コードはgithubに置いておきます。
github.com

ライブラリ化するほどでもないので、クラス化してTerminal.pdeファイルで分けてあります。上の動画のメインのコードは↓こんな感じです。

Terminal term;
int angle = 0;

void setup() {
  size(600, 600);
  term = new Terminal(40, 10);
  term.setTextSize(25);

  // activate the window
  ((java.awt.Canvas) surface.getNative()).requestFocus();
}

void draw() {
  background(50);
  
  // terminal
  translate(40, 30);
  term.draw();

  // box
  translate(260, 400);
  rotate(radians(angle));
  fill(0, 200, 0);
  rectMode(CENTER);
  rect(0, 0, 100, 50);
  rectMode(CORNER);
}

void keyPressed() {
  // get input from terminal
  String input = term.keyEvent();
  if ( input == null ) return;
  if ( input == "" ) return;

  // parse command
  String[] v = split( input, " ");
  String cmd = v[0];

  // help command
  if ( cmd.equals("help") ) {
    term.println("---- HELP ----", color(0, 200, 200));
    term.println("rotate <angle>: rotate the box", color(0, 200, 200));
    term.println("exit : exit this program", color(0, 200, 200) );
  }
  // rotate command
  else if ( cmd.equals("rotate") ) {
    if ( v.length == 2 ) {
      angle += int(trim(v[1]));
    }
  }
  // exit command
  else if ( cmd.equals("exit") ) {
    exit();
  }
  // other
  else {
    term.println("command error.", color(161, 58, 77));
  }
}

Terminalのインスタンス作成時に1行あたりの文字数と行数を指定します。文字サイズは .setTextSize() で指定できるのでご自由に。ターミナルの表示領域の大きさは文字数・行数・文字サイズによって自動的に決まる仕様です。ターミナルの表示は .draw() でできるので、好きな位置に表示してください。

キーボードから入力された文字列を .keyEvent() で取得できるんですが、そこから先のコマンドの解析がちょっと面倒ですね。スペース区切りの文字列をsplit()で分解して、.equals()でコマンド判定して、2番目以降の要素からパラメータを取得して、という感じです。この辺は泥臭くなりがちなのでもう少しスマートに書けるようにしたい。

ターミナルへの文字列の出力は .println() というメソッドでできます。第2引数で文字色も指定できます。エラーメッセージを赤色で表示したりすると雰囲気がでますね。

Imaginary Code

from kougaku-navi.net

ProcessingでターミナルのUIを作る