画面上部メニューバーのHelp>Referenceを選ぶと、プログラミングで使用される言語や関数がカテゴリーごとに列挙されているページが現れます（ProcessingのサイトにもReferenceのページがあります）。すべての言語を覚えるのは大変なので、必要に応じて辞書のように参照しながら、プログラムを書いていきます。それぞれの言語（関数）をクリックすれば、使用法のサンプルページが出てきます。
例えば、Shapeのカテゴリーの2D Primitivesの中のrect()という関数は、長方形を描くためのものです。
rect(10,30,40,20);
と書けば、X座標が10で、Y座標が30の場所に、幅40で高さ20（単位：ピクセル）の長方形を描くということになります。
カッコの中の４つの数値はそれぞれ順番にX座標、Y座標、幅、高さに対応しています。
四つの数値の間のカンマや最後のセミコロンを忘れないように書いてください。
大文字、小文字（半角英字）も間違わないように書いてください。
ちなみに、画面上の(0,0)座標は左上の角となります。左から右へX座標はプラスになっていきますが、注意しなければいけないことは、Y座標に関しては、上から下へ向けてプラスになるので、いわゆる数学で扱われる座標の向きとは異なります。
とりあえず、rect(10,30,40,20);をプログラムを書く欄に記入して、左側にあるRunボタンもしくはメニューバーのSketch>Runをクリックすれば、プログラムが開始され、その結果が別画面で現れます。その画面を閉じれば、そのプログラムは終了します。
以下のようにもう一行追加すれば、
size(200,300);
rect(10,30,40,20);
表示画面の大きさを幅200、高さ300ピクセルと指定して先ほどの長方形を描くことができます。
size()のカッコの中の二つの数値は画面の幅と高さに対応しています。もし、画面サイズを指定せず何も書かなければ、自動的に初期設定のサイズ（100x100ピクセル）が適用されることになります。
さらに、もう一行追加して、
size(200,300);
background(100);
rect(10,30,40,20);
と書けば、表示画面の背景色を指定して描画されます。
background()のカッコの中には、0から255までの数値が入ります。0は黒、255は白、その間の数値は段階ごとのグレーになります。background(255,100,30);のように３つの数値をカンマで区切って入れれば、それぞれの数値はRed,Green,Blueに対応しRGB色を指定することができます。例えば、赤ならbackground(255,0,0);で黄色ならbackground(255,255,0);です。
このような細かな設定については、冒頭で述べた「画面上部メニューバーのHelp>Reference」のページへ行き、それぞれの言語の使用法から調べることができます。
投稿
