プロセシングの2つのスタイル
プロセシングには静止画と動画用の2つのプログラミングスタイルがあります。
静的スケッチ（Static Sketch）は静止画用でシンプルな記述スタイルです。能動的スケッチ（Active Sketch）は動画用で void setup() 初期設定とvoid draw() の繰り返し描画でアニメーションやインタラクションのあるプログラムで使用します。こんな基本的なことを書いていないサイトが多いです。なので始めは混乱しました。
ここでは静的スケッチで書いていきます。スケッチとはプロセシングで作成されたプログラム単位のことです。
スケッチを作るにはプロセシングのファイルメニューから新規を選びます。
なおコードは大文字小文字が区別されます。
直線を描く
LINE-0100 まず直線の描画から始めます。水平線を描いてみましょう。
表示画面の大きさは400×400ピクセルにします。画面を設定するにはsize()を、線を描くにはline()を使います。コードの文末には ; (セミコロン)が必要です。ないとエラーになります。また日本語の空白やセミコロン等もエラーになりますので注意を。
|
1 2 |
size(400, 400); line(50,200,350,200); |
このたった二行で直線が描けてしまいます。背景色はグレー、線幅1ピクセル、線の色は黒がデフォルトで設定不要です。できたらファイルを保存しましょう。
ファイル名に日本語が使えません。英数字、ハイフン、アンダーバー等を使用してください。
構文は以下のような囲みで表示します。またサンプルコードに必要でない構文、パラメータ(3D関係等)は省略している場合があります。
| 構文 | size(width, height) size(width, height, renderer) | size() 関数はスケッチ内で一度しか使用できません。使用しない場合はデフォルトで最小の100 x 100ピクセル。最大値はOSに依存。背景色はデフォルトでグレースケールだと75、RGBなら（R:193 G:193 B:193)。色を変える時はbackground()を使用。 |
| パラメータ | width | （int） 幅（ピクセル）システム変数 |
| height | （int） 高さ（ピクセル）システム変数 | |
| データ型 | int | イント、インテジャー／整数 |
| renderer | レンダリング・エンジンの選択（詳細はリファレンスで） | |
| 戻り値 | void （ボイド） | なし |
表示ウインドウの座標系は左上を原点（0,0）とし、右方向が+のX座標、下方向が+のY座標になります。
変数とは箱のようなものです。箱の中にはデータを入れることができ、何度も入れ替えることができます。変数はメモリに保存され、再利用することができます。
変数には自由に名前が付けられます。（数字から始めるのはNG）また箱によって入れられるデータ型が違います。
変数を作成・使用するには、変数名とデータ型の宣言とその値が必要です。
システム変数とはプロセシングが持つ特殊な変数で、名前を変更することも、ユーザーが独自の変数に同じ名前をつけることもできません。
| 構文 | line(x1,y1,x2, y2) | ２点間に直線を描きます。デフォルトで線幅は1ピクセル、線色は黒（R:0, G:0, B:0）です。 線幅を変えるにはstrokeWeight()、色を変えるにはstroke()を使用します。 |
| パラメータ | x1 | 始点のX座標（ピクセル） |
| y1 | 始点のY座標（ピクセル） | |
| x2 | 終点のX座標 | |
| y2 | 終点の点のY座標 | |
| データ型 | float | フロート／浮動小数点数（小数点以下を含む実数） |
| 戻り値 | void |
関数とは
例えて言えばデータを入力すると何らかの作業をしてくれる専用ロボットのようなものです。()丸括弧はデータを渡すための箱のようなものです。そのデータはパラメータ（引数）と呼びます。関数によって入れられるデータには違いがあります。文字列、整数、浮動小数点数、色や論理値（真か偽）などがあり、これをデータ型と言います。
戻り値(返値)とは関数が処理した結果のデータです。関数によって戻すデータ型には違いがあります。void（ボイド）とは何も返しません。
LINE-0101 次に垂直線を描いてみましょう。
|
1 2 |
size(400, 400); line(200,50,200,350); |
LINE-0102 水平線と垂直線を重ねてみましょう。
|
1 2 3 |
size(400, 400); line(50,200,350,200); line(200,50,200,350); |
LINE-0103 今度は画面いっぱいに中心線を描いてみましょう。size()のシステム変数、widthとheightを使ってその1/2が中心になり、ウインドウの大きさを変えても、座標を数値にしないで中心線が描けます。
|
1 2 3 |
size(400, 400); line(width/2,0, width/2,height); line(0,height/2, width,height/2); |
LINE-0104 応用で対角線を描いてみましょう。
|
1 2 3 |
size(400, 400); line(0,0, width,height); line(width,0, 0,height); |
線幅を設定する
LINE-0105 今度は線の幅を変えてみましょう。線幅を変えるにはstrokeWeight()を使います。
|
1 2 3 4 |
size(400, 400); strokeWeight(20); line(50,200,350,200); line(200,50,200,350); |
| 構文 | strokeWeight(weight) | 点、線、図形の境界線の線幅を設定する |
| パラメータ | weight | 線幅(ピクセル) |
| データ型 | float | 浮動小数点数（小数点以下を含む実数） |
| 戻り値 | void | なし |
先端の形状を設定する
LINE-0106 先端がデフォルトで丸くなっています。先端の形を変えたい場合はstrokeCap()を使います。
|
1 2 3 4 5 |
size(400, 400); strokeWeight(20); strokeCap(PROJECT); line(50,200,350,200); line(200,50,200,350); |
LINE-0107 先端の形(キャップ)は３種類あります。ROUND（ラウンドキャップ）、SQUARE（スクエアキャップ／Adobe illustratorではButt(バット)キャップという）、PROJECT（プロジェクトキャップ／出っ張りという意味）図では形をわかりやすくするために線の中心に赤い線を追加しています。線端の形状によって長さが変わることに留意してください。ROUNDとPROJECTの実際の線の長さは（線の長さ+線幅）になります。
|
1 2 3 4 5 6 7 8 |
size(400, 400); strokeWeight(48.0); strokeCap(ROUND); line(80, 120, 320, 120); strokeCap(SQUARE); line(80, 200, 320, 200); strokeCap(PROJECT); line(80, 280, 320, 280); |
| 構文 | strokeCap(cap) | 線の先端の形状を設定する。 |
| パラメータ | cap | パラメータは大文字 (大文字と小文字は区別されます) ROUND（ラウンドキャップ） SQUARE（スクエアキャップ） PROJECT（プロジェクトキャップ） |
| データ型 | int | 整数 |
| 戻り値 | void | なし |
LINE-0108 線は頂点を同じにすることで次々繋げていくことができます。
|
1 2 3 4 5 |
size(400, 400); strokeWeight(48); line(50,100, 350,100); line(350,100, 50,300); line(50,300, 350,300); |
線に色をつける
LINE-0109 ただし繋がって見えますが、重ね書きしているだけです。それぞれの線に色をつけてみます。線に色をつけるにはstroke()を使います。()内にはR,G,Bそれぞれ 0~255の間の数値を設定します。
|
1 2 3 4 5 6 7 8 |
size(400, 400); strokeWeight(48); stroke(255,0,0); line(50,100, 350,100); stroke(255,125,255); line(350,100, 50,300); stroke(0,125,255); line(50,300, 350,300); |
ラインキャップを変更すると繋がっていないことがはっきりわかると思います。ROUNDでは目立たないのですが。。。繋がった線を描くには vertex()を使用します。vertex()は別ポストにて
色の設定には何種類かの方法があります。デフォルトではstroke(R,G,B)です。
| 構文 | stroke(rgb) | rgb（int）16進法の色値 例）#ff0000 |
| stroke(rgb, alpha) | 上記+alpha（float）不透明度 | |
| stroke(gray) | gray 白から黒の間の値 デフォルトの最大値は 255 | |
| stroke(gray, alpha) | 白から黒の間の値、不透明度 数値はカラーモードの最大値の指定による | |
| stroke(v1, v2, v3) | v1, v2, v3(float)はカラーモードが RGBの場合；R（赤）,G（緑）,B（青） HSBの場合；H（色相）,S（彩度）,B（明度）になる 数値はカラーモードの最大値の指定による | |
| stroke(v1, v2, v3, alpha) | 上記+不透明度 |
色の各種設定の例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
size(400, 640); strokeWeight(48.0); stroke (#ff0000); line(80, 50, 320, 50); stroke (#ff0000,128); line(80, 130, 320, 130); stroke (0); line(80, 210, 320, 210); stroke (0,128); line(80, 290, 320, 290); stroke (0,0,255); line(80, 370, 320, 370); stroke (0,0,255,128); line(80, 450, 320, 450); colorMode(HSB,360,100,100); stroke (270,100,100); line(80, 530, 320, 530); save("colorsample.png"); |
カラーモードはカラーを設定する前に使用します。
| 構文 | colorMode(mode) | カラー・システムを設定します。 |
| colorMode(mode, max) | カラー・システムの設定と色の指定に使用する数値範囲の設定 例） （RGB, 255）（RGB, 100）（RGB, 1.0） （HSB, 100）（HSB, 500） | |
| colorMode(mode, max1, max2, max3) | カラー・システムの設定と色の指定に使用する三値の数値範囲の設定 例） （RGB, 255, 255, 255）（RGB, 1.0, 1.0,1.0） （HSB, 360, 100, 100）（HSB, 1.0, 1.0,1.0） | |
| colorMode(mode, max1, max2, max3, maxA) | カラー・システムの設定と色の指定に使用する三値の数値範囲と不透明度の数値範囲の設定 例） （RGB, 255, 255, 255, 100） （HSB, 360, 100, 100, 1.0） | |
| パラメータ | mode | (int) RGBまたはHSB |
| max | (float) カラー要素の最大値 | |
| max1 | (float) R（赤）またはH（色相）の最大値 | |
| max2 | (float) G（緑）またはS（彩度）の最大値 | |
| max3 | (float) B（青）またはB（明度）の最大値 | |
| maxA | (float) R（赤）またはH（色相）の最大値 | |
| 戻り値 | void |
ここではよく使うデータ型のみ掲載します。データ型とはプログラムに「これは整数です。」「これは文字列です。」と教えてあげて間違いないように取扱いさせるためのものです。任意の変数のデータ型の宣言は最初の一回だけです。
| 構文 | int var int var = value | 整数を表すデータ型。2,147,483,647から-2,147,483,648までの間の整数を扱います。 |
| パラメータ | var | 値を参照する変数名 |
| value | 任意の整数値 | |
| 構文 | float var float var = value | 浮動小数点数。小数点を持つ数値用のデータ型。3.40282347E+38から-3.40282347E+38までの間の小数を扱います。 |
| パラメータ | var | 浮動小数点を参照する変数名 |
| value | 任意の浮動小数点値 | |
| 構文 | color var color var = value | 色の値を格納するためのデータ型。色はget()やcolor()で代入でき、#FFCC00など16進数表記で直接指定することも可能。 |
| パラメータ | var | 値を参照する変数名 |
| value | color(),get(),16進数カラー表記 | |
| 構文 | char var char var = value | 文字のデータ型。Unicode形式で文字や記号を格納します。各文字は2バイト（16ビット）長で、シングルクォートで囲むことで区別されます。 |
| パラメータ | var | 値を参照する変数名 |
| value | 任意のキャラクター |
コメント