前回に引き続きProcessingの話し。今度はProcessing.jsではなく本家のProcessingについてです。
こちらのほうは単体で使えるProcessingインタプリタ。JAVAでできているそうで、JAVAがインストールされていれば使用できます。

Processingの書き方は、基本的にProcessing.jsと同じです。同じようなコードを使えば図形を描画できます。

main.pde(いちおう、Processing側の拡張子は、pjsではなくpdeのようです)

void setup(){
  // 設定初期化を行うコードブロック。最初に１回だけ呼び出される(size()関数はここでしか呼べない？)
  size(120, 120);
}

void draw(){
  // 描画を行うコードブロック。毎フレームごとに呼び出されるので、アニメーションも可能
  background(255);
  smooth();
  strokeWeight(10);
  stroke(#7799dd);
  ellipse(width / 2, height / 2, width / 2 - 10, height / 2 - 10);
}

これを実行した結果は、次のようになります。

デフォルトの設定だとコメントが文字化けしますので、渓谷が表示されることがありますが、動作に問題はありません(気になる場合、ファイル＞設定よりフォントを日本語フォントに変更することで、日本語が表示できるようになります)。

作成した画像を保存する

作成した画像を保存する場合は、save()メソッドを使います。第一引数にはファイル名を指定します。png, jpg, tif, tga形式で保存できるそうです。

引数にはC:\からはじまるフルパスか、相対パスが指定できます。相対パスを指定する場合、ファイルの保存場所に注意(ファイル＞名前をつけて保存でファイルを保存した場合、Processingは指定した名前のフォルダを作成し、その中にファイルを保存します)。

いろいろなサイズの画像を保存する

複数サイズのアイコン作成など、同じスクリプトから複数サイズの画像を保存したいケースもあると思います。そのような場合、画面に直接描画するのではなく、PGraphicsオブジェクトを使うのが便利です。

main.pde

void setup(){
  PGraphics pg = createGraphics(120, 120);　// (1)
  pg.beginDraw(); // (2)
  pg.background(255);
  pg.smooth();
  pg.strokeWeight(10);
  pg.stroke(#7799dd);
  pg.ellipse(width / 2, height / 2, width / 2 - 10, height / 2 - 10);
  pg.endDraw(); // (2)
  pg.save(保存したいパス);
}

PGraphicsオブジェクトは、createGraphicsメソッドを使って作成できます(1)。引数は、size()メソッドと同じ。
また、作成したPGraphicsオブジェクトに描画を行う場合は、最初にbeginDraw()メソッド、最後にendDraw()メソッドを呼び出します(2)。そして、save()メソッドで画像を保存できます(画面のimage()メソッドを使えば、画面に画像を表示することもできます)。

Windowsストアアプリなどだと似たようなアイコンを大量に生成する必要があるため、ストアアプリのアイコンをProcessingで書くようにすると、後々楽そう。

Processingを使う(＆画像を保存する)

作成した画像を保存する

いろいろなサイズの画像を保存する