rectコマンドの使い方～長方形の描き方や引数の設定変更・塗りつぶす色などの変更方法～

Processing

みなさん，こんにちは
おかしょです．

rectangle=長方形を書く際に必要なコマンド”rect”の使い方を解説します．

また，長方形を描く際の線の色や幅などの細かい設定方法も解説します．

この記事を読むと以下のようなことがわかる・できるようになります．

  • rectコマンドの使い方
  • Processingのプグラムの描き方

この記事を読む前に

Processingをまだインストールしていない方は以下の記事を参考にしてください．

[Processing] インストール方法
みなさん，こんにちは．おかしょです． この記事ではProcessingというソフトのインストール方法を説明します． この記事にたどり着いた方はProcessingがどういうソフトなのか知っているとは思いますが，簡単に説明すると，デジタルアー...
okasho-engineer.com
2020.03.09

rectの基本的な使い方

まずは基本的な使い方を解説します．

void setup(){
  size(500, 500);
  rect(60, 150, 380, 200);
}

このプログラムを実行すると以下のようになります．

まず，sizeコマンドで表示するウインドウのサイズを指定します．ここでは幅：500px，高さ：500pxの正方形のウインドウを表示しています．

rectコマンドの引数は左から順番に左上の角のx座標，y座標，長方形の幅(px)，高さ(px)となっています．

したがって，上記のプログラムでは左上の角の座標を(60, 150)として，そこを基準に幅が380px，高さが200pxの長方形を描いています．

rectModeの使い方

上記のプログラムではウインドウの中心に長方形を描けるように左上の角の座標を調整しました．

そんな調整をしなくても中心の座標を指定するだけで長方形が描ければ便利な場合もあります．そのようなときはrectModeを使って引数の設定を変えます．

rectModeで設定できるモードは４種類あります．

  1. rectMode(CORNER)         ：左上角のx座標，y座標，幅，高さ
  2. rectMode(CORNERS)       ：左上角のx座標，y座標，右下角のx座標，y座標
  3. rectMode(CENTER)         ：中心のx座標，y座標，幅，高さ
  4. rectMode(RADIUS)          ：中心のx座標，y座標，幅の半分，高さの半分

これらのコマンドを使用してモードを設定し，rectコマンドで引数に適切な数字を入力することで長方形を描くことができます．デフォルトでは”CORNER”になっています．

先ほどのプログラムのようにウインドウの中心に長方形を描きたい場合は”CENTER”もしくは”RADIUS”を使用すると簡単に長方形を描くことができます．

void setup(){
  size(500, 500);
  rectMode(CENTER);
  rect(250, 250, 380, 200);
}

枠線の色を変える，もしくはなくす

長方形の枠線の色を変えるにはstrokeコマンドを使用します．

void setup(){
  size(500, 500);
  stroke(0, 0, 255);
  rect(60, 150, 380, 200);
}

strokeコマンドの引数は左から順番にRGBで表現できます．数値を0~255の範囲で指定することでさまざまな色を表現することができます．

また，引数を一つだけにした場合はグレースケールで白黒にもすることができます．この場合も数値は0~255の範囲になります．デフォルトでは”stroke(0)”となっています．

また，枠線をなくすには”noStroke()”を使用します．

void setup(){
  size(500, 500);
  noStroke();
  rect(60, 150, 380, 200);
}

塗りつぶす，もしくは塗りつぶさない

何も設定していない状態では上記の通り，白く塗りつぶされています．この塗りつぶす色を変えるにはfillコマンドを使用します．

void setup(){
  size(500, 500);
  fill(0, 0, 255);
  rect(60, 150, 380, 200);
}

fillコマンドの引数は左から順番にRGBで表現できます．数値を0~255の範囲で指定することでさまざまな色を表現することができます．

また，引数を一つだけにした場合はグレースケールで白黒にもすることができます．この場合も数値は0~255の範囲になります．デフォルトでは”fill(255)”となっています．

また，塗りつぶしをせずに透明にしたい場合は”noFill()”を使用します．

void setup(){
  size(500, 500);
  noFill();
  rect(60, 150, 380, 200);
}

枠線の太さを変える

枠線を太くするには”strokeWeight”を使用します．

void setup(){
  size(500, 500);
  strokeWeight(30);
  rect(60, 150, 380, 200);
}

strokeWeightの引数には枠線の幅をpixel単位で入力します．デフォルトではstrokeWeight(1)となっています．

頂点の角を設定する

頂点の角を面取りすることができます．

  1. strokeJoin(MITER)            ：面取りしない
  2. strokeJoin(BEVEL)            ：45度に面取り
  3. strokeJoin(ROUND)         ：丸くする

デフォルトでは面取りをしないstrokeJoin(MITTER)となっています．

void setup(){
  size(500, 500);
  strokeWeight(30);
  strokeJoin(MITER);
  rect(60, 50, 380, 100);
  strokeJoin(BEVEL);
  rect(60, 200, 380, 100);
  strokeJoin(ROUND);
  rect(60, 350, 380, 100);
}

上から順番にMITER・BEVEL・ROUNDとなっています．この設定は枠線の幅が細いとほとんど違いが判らないので注意してください．

まとめ

以上の設定を組み合わせることでさまざまな長方形を描くことができます．

続けて読む

このブログではProcessingで使用する基本的なコマンドの使い方なども解説しています．基本的なコマンドの一つの”line”コマンドの使い方を知りたい方は以下のリンクから読んでみてください．

lineコマンドの使い方～線の書き方や色・太さの変更方法～
みなさん，こんにちはおかしょです． ine=直線を書く際に必要なコマンド”line”の使い方を解説します． また，直線を描く際の線の色や幅などの細かい設定方法も解説します． この記事を読むと以下のようなことがわかる・できるようになります． ...
okasho-engineer.com
2021.09.26

Twitterでは記事の更新情報や活動の進捗などをつぶやいているので気が向いたらフォローしてください．

YouTubeでも制御工学や電子工作などの解説をしているので，ぜひのぞいてみてください．

それでは最後まで読んでいただきありがとうございました．

コメント

タイトルとURLをコピーしました