Processingのはじめかた

プログラムを書く その2

エディタ(Processing Development Editor)にプログラムを記述します。

この記事では、以下の3点を説明します。

  1. ドキュメントサイズの設定
  2. 簡単な図形の表示
  3. 図形、背景への彩色
  4. 保存する

ドキュメントサイズの設定

Processingでは、ドキュメントサイズの設定を行わなければ、幅100ピクセル×高さ100ピクセルのドキュメントサイズの中に、プログラムの結果を表示します。

表示するのドキュメントのサイズを設定する命令は以下です。

size(幅のピクセル数 , 高さのピクセル数);

また、ドキュメントの背景色も設定をしない限り、灰色で設定されます。

表示するドキュメントの背景の設定は以下です。

background(色の設定);

Processingでは、RGB、またはHSVのいずれかで色を指定します。初期設定ではRGBでの色の設定です。

簡単な図形を描く

では、Processingで四角を表示するプログラムを作成します。
プログラムを入力する欄に以下の四角を作成する命令を記述します。

rect(四角の左上のx座標,四角の左上のy座標,四角の右下のx座標,四角の右下のy座標);

ドキュメントのサイズを幅200ピクセル、高さ200ピクセルを変更し、その中に四角を表示する以下のプログラムを記述します。

size(200,200);
rect(10,10,60,60);

実行ボタンを押すと表示するドキュメントサイズが200ピクセル四方に変わり、その中に、四角が描かれます。

Processingでは、四角、円、三角、点、線やベジェ曲線を使った図形等、ひと通りの図形を描くための命令が用意されています。

図形への彩色

先ほど作成した四角形に色をつけます。

図形の「線分の部分」と「面の部分への塗り」の色を指定することができます。

線分については、線分の太さ、形状を指定できます。

先ほどの命令に、以下の面の部分への色(塗り)を行う命令を記載します。

今回はRGBで図形の塗りを行います。

RGBの値はそれぞれ0から255までの範囲で設定します。

fill(R, G, B);

ここでは赤い色がつくように、以下の命令を追記します。

fill(255,0,0);

上記の命令は図形を描く前に記述してください。
「実行ボタン」を押すと次のようになります。

色を設定する命令を使うときは、命令の記述順番に注意してください。

例えば、図形を描く命令のあとに「fill();」の命令を記述しても、図形の面の部分に色は適用されません。
「実行ボタン」しても、以下のような表示結果になります。

次に、図形を描く境界線を追加します。
図形に青い10ピクセルの線を追加する命令をプログラムを記述します。

stroke(0,0,255);
strokeWeight(10); 

実行すると次のようになります。

Processingを保存する

「保存」を押してファイルを保存します。

作成したProcessingのファイルは、基本、ドキュメントフォルダ(OS Xでは書類フォルダ)に作成される「Processing」フォルダにフォルダとして保存されます。

保存したフォルダ内に同じ名前で拡張子「.pde」がついたファイルが作成されます。保存する際は、あとでわかる名称をつけて保存してください。

Processingのはじめかた トップページへ

このページの上へ
Dreamweaverでゴォ! 制作著作/ノンピリオド:村山秀明