※ Qiita では、本文部分のみの印刷に苦労します。そのため、同じ内容を以下のページにも掲載しています。プリンツアウトしたり PDF 化したい人は、こちらのページを利用して下しさい（同じ内容です）：
はじめに：四角形を描く
上の画像は Piet Mondrian の作品 Composition in Color A (1917 年)で、https://www.wikiart.org/en/piet-mondrian/composition-in-color-a-1917
で見ることができます。
直線の描き方については 前の章で説明しました。単に四角形の輪郭を描くだけであれば、line 関数を 4 回呼べば描画できます。
この章では、そのような描画方法ではなく、中を塗りつぶす四角形、つまり領域としての四角形の描き方について説明を行います。
基本的な四角形の描き方
ウィンドウに対し、横線と縦線がそれぞれ平行な四角形の描画には rect 関数を使います。
rect 関数の引数は rect(x,y,w,h) で、それぞれ
x = 四角形の左上頂点の x 座標
y = 四角形の左上頂点の y 座標
w = 四角形の横幅
h = 四角形の高さ
となります。
rect による四角形の描画は、strokeWeight による線幅の設定、ならびに stroke による線の色の影響を受けます
background(250,250,250);
size(500,500);
strokeWeight(10); // line width: 10 pixels.
stroke(0,64,255); // line color: light blue.
rect(100,150,200,100);
四角形内部の描画色は fill 関数で指定できます。この関数も stroke 関数と同様に様々な使用方法がありますが、RGB 値を指定する方法 fill(r,g,b) という使い方をここでは紹介します。
次に示すプログラムリストでは、輪郭線は先程のプログラムと同様に青色とし、内部を赤色で塗りつぶすよう指定しています。
background(250,250,250);
size(500,500);
strokeWeight(10); // line width: 10 pixels.
stroke(0,64,255); // line color: light blue.
fill(255,0,0); // <--- fill color: red.
rect(100,150,200,100);
このように、四角形の描画では輪郭線の色と内部を塗りつぶす 2 種類の色についてきちんと管理しなければなりません。
めんどくさいなぁ、と感じるかもしれませんが、プログラミングとはそういう作業の連続となります。なんともまぁ、地味で細かく、かつ、めんどくさい作業ですよね。なので、プログラマの人には優しくしてあげて下さい（いやホントに…）。
このセクションの終わりとして、輪郭線を描かない方法を考えてみたいと思います。さて、どうすれば良いと思いますか？ 色々な考えがあるかと思います。
そもそも輪郭線を描かないように Processing に指示を出したら良いのでは？ と考えた人もいれば、輪郭線の幅を 0 とすれば消えるのでは？等など。これらの意見はどちらも正解です。
このように、プログラミングにおいては、同じ効果を得る手段として複数の方法が存在します。
もちろん、場合によっては実行速度が異なる場合もあり、厳密には全く同じというものは少ないかもしれません。
しかし、実際のプログラミングでは、同じゴールに辿り着くために様々な方法が存在するというのはよくあることです。
輪郭線をオフにする関数として noStroke 関数があります。これは引数を必要としない関数なので、実際のプログラムでは stroke(); として使用します。無効にした輪郭線を有効にするためには stoke 関数で輪郭線の色を指定して下さい。
noStroke 関数にて輪郭線をオフにしても、輪郭線の幅に関する情報はそのまま残っていますので、 2 番目の rect 関数にて描画される四角形の輪郭線は 10 ピクセルのままになっています。
background(250,250,250);
size(500,500);
strokeWeight(10); // line width: 10 pixels.
stroke(0,64,255); // set color, but disabled by noStroke
fill(255,0,0);
noStroke();
rect(100,150,200,100);
stroke(0,64,255); // stroke ON (line color: light blue.)
rect(100,400,50,80);
