四辺形を描く４つのスタイル
プロセシングで四辺形を描くには、square() 正方形（矩形）、rect() 長方形、quad() 四角形、vertex()で４頂点を結ぶ方法で４種類あります。vertex()は04 線を描いてみようーvertexを使うで紹介しました。
square()で正方形を描く
QUAD-0100 正方形は幅と高さが同じで、各辺の角度は90度の四辺形です。
|
1 2 3 4 5 6 7 8 9 |
//=========================================== // 正方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日13:50:16 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 //==================メイン==================== square(0,0,180); //正方形を描画 |
QUAD-0101 画面のセンターに描きたかったのですが、左上が原点のようです。rectMode()で正方形の中心を原点にします。
|
1 2 3 4 5 6 7 8 9 10 |
//=========================================== // 正方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日13:54:34 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 //==================メイン==================== rectMode(CENTER); //四辺形が描画される場所を変更 square(0,0,180); //正方形を描画 |
正方形を描く
| 構文 | sqare(x, y, extent) | x,yの位置（デフォルトで左上）に大きさ extentの正方形を描く。 |
| パラメータ | x, | (float) デフォルトでX座標 |
| y | (float) デフォルトでY座標 | |
| extent | (float) 正方形の幅と高さ (extent: 範囲) | |
| 戻り値 | void | なし |
四辺形が描画される場所や大きさの解釈を変更する
| 構文 | rectMode(mode) | 四辺形のパラメータの解釈を変更します。 |
| パラメータ | mode | (int) CORNER, CORNERS, CENTERまたは RADIUS |
| 戻り値 | void | なし |
rectModeについて
|
1 |
<span class="swl-bg-color has-swl-deep-03-background-color">QUAD-0102</span> rectModeのCORNERはsqare(x, y, extent<strong><span class="swl-inline-color has-swl-main-color">)</span></strong>、rect(x,y,w,h)のx,yをデフォルトで左上を原点とします。extent,w,hは幅と高さで変更はありません。<br>CORNERSはx,yを1つのコーナーの位置として解釈し、extent,w,hのパラメータを反対側のコーナーの位置として解釈します。見た目的にはCORNERと同じ結果となります。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//=========================================== // 正方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日14:13:28 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#8FADD3); //==================メイン==================== rectMode(CORNER); //四辺形が描画される場所を変更 square(0,0,180); //正方形を描画 save("square03.png"); |
QUAD-0103 CENTERはx,yを四辺形の中心と解釈し、extent,w,hは幅と高さで変更はありません。
|
1 2 3 4 5 6 7 8 9 10 11 |
//=========================================== // 正方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日14:57:35 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#8FADD3); //==================メイン==================== rectMode(CENTER); //四辺形が描画される場所を変更 square(0,0,180); //正方形を描画 |
QUAD-0104 RADIUSはx,yを四辺形の中心と解釈し、extent,w,hは幅と高さの半分と解釈します。
|
1 2 3 4 5 6 7 8 9 10 11 |
//=========================================== // 正方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日15:00:16 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#8FADD3); //==================メイン==================== rectMode(RADIUS); //四辺形が描画される場所を変更 square(0,0,180); //正方形を描画 |
rect()で長方形を描く
QUAD-0105 長方形はすべての角度が90度の四辺形です。角丸を付けることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
//=========================================== // 長方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日15:28:27 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#CC8FD3); //==================メイン==================== rectMode(CORNER); //四辺形が描画される場所を変更 rect(0,0,180,120); //長方形を描画 |
QUAD-0106 rectModeでセンターに描きます。
|
1 2 3 4 5 6 7 8 9 10 11 |
//=========================================== // 長方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日15:32:07 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#CC8FD3); //==================メイン==================== rectMode(CENTER); //四辺形が描画される場所を変更 rect(0,0,180,120); //長方形を描画 |
QUAD-0107 角丸長方形を描きます。
|
1 2 3 4 5 6 7 8 9 10 11 |
//=========================================== // 長方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日15:34:06 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#CC8FD3); //==================メイン==================== rectMode(CENTER); //四辺形が描画される場所を変更 rect(0,0,240,180,30); //角丸長方形を描画 |
QUAD-0108 角丸長方形は全ての辺の角丸の大きさを変えることができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
//=========================================== // 長方形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日15:37:38 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#CC8FD3); //==================メイン==================== rectMode(CENTER); //四辺形が描画される場所を変更 rect(0,0,240,180,60,30,20,10); //角丸長方形を描画 |
長方形を描く
| 構文 | rect(x, y, w, h) rect(x, y, w, h, r) rect(x, y, w, h, tl, tr, br, bl) | x,yの位置（デフォルトで左上）に大きさ w, hの長方形を描く。パラメータは公式サイトの表記ではa,b,c,d…となっています。これはrectModeで解釈によって変わるためです。ここではわかりやすいようにx,y,w,hにしています。 |
| パラメータ | x | (float) デフォルトでX座標 |
| y | (float) デフォルトでY座標 | |
| w | (float) デフォルトで幅 | |
| h | (float) デフォルトで高さ | |
| r | (float) 四隅すべての角丸半径(radius) | |
| tl | (float) 左上の角丸半径(top-left) | |
| tr | (float) 右上の角丸半径(top-right) | |
| br | (float) 右下の角丸半径(bottom-right) | |
| bl | (float) 左下の角丸半径(bottom-left) | |
| 戻り値 | void | なし |
quad()で四角形を描く
QUAD-0109 四角形は90度という角度の制限がありません。菱形や台形や不定形な四角形などが描けます。作例で黒点を付けたところが最初の頂点となります。赤点が二番目のコーナーになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//=========================================== // 四角形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日16:24:22 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#76B291); //==================メイン==================== quad(-150,50,50,150,120,-180,-180,-160); //四角形を描画 strokeWeight(10); point(-150,50); //最初の頂点 stroke(255,0,0); point(50,150); //2番目の頂点 |
QUAD-0110 頂点を交差させてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//=========================================== // 四角形を描く //=========================================== // CreationDate: 2025年2月27日 木曜日16:43:08 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 fill(#76B291); //==================メイン==================== quad(-120,-120,120,-120,-120,120,120,120); //四角形を描画 strokeWeight(10); point(-120,-120); //最初の頂点 stroke(255,0,0); point(120,-120); //2番目の頂点 |
四角形を描く
| 構文 | quad(x1, y1, x2, y2, x3, y3, x4, y4) | 4つのコーナーの座標を設定して四角形を描きます。 |
| パラメータ | x1, y1 | (float) 最初のコーナーのX, Y座標 |
| x2, y2 | (float) 2番目のコーナーのX, Y座標 | |
| x3, y3 | (float) 3番目のコーナーのX, Y座標 | |
| x4, y4 | (float) 4番目のコーナーのX, Y座標 | |
| 戻り値 | void | なし |
コメント