Processing

4. 多角形の描画

ここでは多角形の描画について説明します。

矩形を描く

size( 500, 500 );
background( #ffffff );

stroke( #339933 );
rect( 100, 100, 300, 300 );

strokeWeight( 5 );
fill( #ffcc00 );
rect( 150, 150, 200, 200 );

noStroke();
fill( #339933 );
rect( 200, 200, 100, 100 );

5行目、rect()は矩形を描く命令です。デフォルトでは左上の座標と矩形の幅と高さを指定します。

rect( 左上のx座標, 左上のy座標, 矩形の幅, 矩形の高さ );

x座標、y座標、矩形の幅、矩形の高さはピクセルで指定します。

8行目、fill()は塗りの色を指定する命令です。stroke()同様、()の中に色の値を指定します。

11行目、noStroke()とは線を消す（描画しないようにする）命令です。

13行目で描かれている矩形には、線が描画されていません。

塗りを消す（図形を塗らないようにする）には、noFill()という命令を使います。

矩形を描く

ページの先頭へ↑

矩形の描画モード

矩形は描画の基準となる座標を変えることができます。

size( 500, 500 );
background( #ffffff );

noStroke();
fill( #339933 );

rectMode( CORNER );  //デフォルト。左上を基準にする
rect( 0, 0, 100, 100 ); 

rectMode( CENTER );  //中心を基準にする
rect( 250, 250, 100, 100 );

rectMode( CORNERS );  //左上と右下を基準にする
rect( 400, 400, 500, 500 );

rectMode()は、どこの座標を指定して描画するかというモードを決める命令です。()内に、「CORNER」「CENTER」「CORNERS」のいずれかを指定します。

7行目、rectMode( CORNER )はデフォルトですが、左上の座標と矩形の幅と高さを指定するモードです。

10行目、rectMode( CENTER )は、中心の座標と矩形の幅と高さを指定するモードです。こちらが便利な時も多々あります。

13行目、rectMode( CORNERS）は、左上と右下、対角の2つの座標を指定します。

1度モードを変えると、再び変更するまで同じモードが続きます。

矩形の基準点を変える

ページの先頭へ↑

四角形を描く

矩形は4つの角が直角な四角形（正方形を含む長方形）のことですが、Processingにはそれ以外の四角形を描く命令もあります。

size( 500, 500 );
background( #ffffff );

stroke( #339933 );
quad( 40, 60, 470, 30, 460, 470, 60, 440 );

noStroke();
fill( #339933 );
quad( 110, 100, 400, 120, 380, 420, 100, 390 );

stroke( #ffcc00 );
strokeWeight( 6 );
noFill();
quad( 170, 180, 360, 170, 330, 360, 200, 340 );

5、9、14行目、quad()は、4つの頂点の座標を指定して四角形を描く命令です。

四角形を描く

ページの先頭へ↑

多角形を描く

四角形以外でも、三角形、多角形、座標を曲線でつなぐ方法などが用意されています。

size( 500, 500 );
background( #ffffff );

stroke( #339933 );

//三角形を描く
triangle( 50, 450, 250, 50, 450, 450 );

stroke( #cc0000 );

//多角形を描く
beginShape();
vertex( 100, 100 );
vertex( 400, 100 );
vertex( 300, 250 );
vertex( 400, 400 );
vertex( 100, 400 );
vertex( 200, 250 );
endShape( CLOSE );

noFill();
stroke( #0000cc );

//曲線でつなぐ多角形
beginShape();
curveVertex( 100, 100 );
curveVertex( 100, 100 );
curveVertex( 400, 100 );
curveVertex( 300, 250 );
curveVertex( 400, 400 );
curveVertex( 100, 400 );
curveVertex( 200, 250 );
curveVertex( 100, 100 );
curveVertex( 400, 100 );
curveVertex( 400, 100 );
endShape();

詳細はリファレンスなどを参照して下さい。triangle()　besigShape()　vertex()　curveVertex()

多角形を描く

ページの先頭へ↑

＜　3. 点や直線の描画

5. 円や円弧の描画　＞