四角形を描画するには

◆PROCESSING 逆引きリファレンス

 カテゴリー:図形描画

四角形を描画するには

【解説】
PROCESSINGは、様々な図形を簡単に描画できるのが特徴です。
その1つに四角形を描画する命令があります。

【構文】
rect( x, y, w, h );
rect( x, y, w, h, r )
rect( x, y, w, h, tl, tr, br, bl)

【パラメータ】
r  :float:四角形の四隅を丸くする半径(0なら直角。90で ほぼ丸)
tl     :float:上左端を丸くする半径(0なら直角。90で ほぼ丸)
tr    :float:上右端を丸くする半径(0なら直角。90で ほぼ丸)
br   :float:下右端を丸くする半径(0なら直角。90で ほぼ丸)
bl    :float:下左端を丸くする半径(0なら直角。90で ほぼ丸)

x, y, w, h については、rectMode()の指定により意味が異なります。
下図を参考にしてください(クリックすると、拡大します)。

rectModeとrect【戻り値】
なし

【注意】
PROCESSINGの座標系は以下のようになっています(クリックすると拡大します)。
座標
xとyは通常は四角形の左上座標ですが、rectModeで指定された場合は意味が異なります。同じようにwとhも通常は四角形の幅と高さですが、rectModeで指定された場合は意味が異なります。

初期値(デフォルト)のrectModeは CORNER です。

【関連記事】
第2章:図形を描いてみよう


●rectMode(CORNER)と、rectMode(CORNERS)の例:

<出力結果>
rect_sample01

CORNERの例が白い四角になります。
(50, 50)から幅と高さが100ある四角形を描画するので、四角形の右端と下端は 50 + 100=150の位置になります。

CORNERSの例が灰色の四角になります。
(50, 50)と(100, 100)を対角線にもつ四角形を描くので、四角形の右端と下端は共に100になります。

 

●rectMode(CENTER)とrectMode(RADIUS)の例:

<出力結果>
rect_sample02
RADIUSの例が白い四角になります。
(100, 100)を中心に、上下左右に60の幅と高さがある四角形を描画します。ですので、四角形の右端と下端は100 + 60 = 160になります。

CENTERの例が灰色の四角になります。
(100, 100)を中心に、高さと幅が60ある四角形を描画します。ですので、四角形の右端と下端の座標は 100 + (60/2) = 130になります。

 

●応用例

<出力結果>
rect_samole03
マウスでクリックされた位置を中心に、3つの四角形がグルグルと回転し、美しい図形を描画します。

 


PROCESSING逆引きリファレンス一覧 へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)