Processing
3. 点や直線の描画
ここでは点や直線の描画について説明します。
なお、以降の枠内のプログラミングの部分は、このWebページからコピー＆ペーストすることもできますが、その際に余分なスペースなどが入り、実行できなくなることもあるので注意して下さい。
点や直線を描く
size( 500, 500 ); background( #ffffff ); point( 250, 250 ); line( 50, 50, 50, 450 );
1行目、size()は、画面のサイズ（描画範囲）の大きさを変更する命令です。単位はピクセルで指定します。書式は以下のようになります。
size( 画面の横ピクセル数, 画面の縦ピクセル数 );
2行目、backgroundは画面の背景色を変更する命令です。ここでは白にしています。
4行目、point()は点（ピクセル）を1つ描画する命令です。x座標250、y座標250に1ピクセルの点を打っています（1つだけだとよく見ないと分かりませんが…）。
point( x座標, y座標 );
なおProcessingでは、描画領域の左上端が原点(0,0)で、x座標は右に向い、y座標は下に向い大きくなります。
5行目、line()は線を描画する命令です。線の始点と終点の座標を指定します。
line( 始点のx座標, 始点のy座標, 終点のx座標, 終点のy座標 );
線の太さ、色を変える
size( 500, 500 ); background( #ffffff ); stroke( #339933 ); line( 150, 50, 150, 450 ); strokeWeight( 5 ); line( 250, 50, 250, 450 ); stroke( #ffcc00 ); strokeWeight( 5 ); line( 350, 50, 350, 450 );
4行目、stroke()は線の色を変える命令です。()の中に色の値を指定します。
7行目、strokeWeightは線の太さを変える命令です。()の中に線の太さの値をピクセルで指定します。
10、12行目、同様に線の色と太さを変えています。
ここでは色の値をCSSなどでも良く利用される16進数のRGB値で指定しましたが、それ以外にも色を指定する方法があります（「7. 色の指定」）。
