2017プログラミング講座４：Processingによる基本図形の描画

Processingには、あらかじめ基本的な図形を描く関数が用意されています。以下に基本的な図形の描画方法を記載します。

点
point(x座標, y座標);

線
line(x座標1, y座標1, x座標2, y座標2);

方形
rect(x座標, y座標, 幅, 高さ);

三角形
triangle(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3);

楕円形
ellipse(x座標, y座標, 幅, 高さ);

四辺形
quad(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3, x座標4, y座標4);

描線の太さ
図形の描線の太さを変更できます。描線のデフォルトは1ピクセルですが、strokeWeight関数を使って変更できます。
以下のように記述します。

int x = 200;
int y = 200;
int w = 100;
int h = 100;

void setup(){
  
  size(400,400);
  
}

void draw(){
  
  strokeWeight(8);
  ellipse(x, y, w, h);
  
}

描画の順序
プログラムはコードの先頭１行目から順に読み込まれていくため、コードを書く順番は図形の重なり順などに大きく影響します。
重なり合う複数の図形がある場合は、最後に描かれた図形が一番上に重なって表示されます。

描画モード
図形を描画する際に、描画の基準点を設定することができます。
例えば方形の記述ではrectMode関数を使用して以下のように基準点を設定できます。

・rectMode(CORNER) rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ);　//デフォルトではこの基準点を使う
・rectMode(CORNERS) rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標);
・rectMode(CENTER) rect(中心のx座標, 中心のy座標, 幅, 高さ);
・rectMode(RADIUS) rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分);

コードは以下のように記述します。

int x = 200;
int y = 200;
int w = 100;
int h = 100;

void setup(){
  
  size(400,400);
  rectMode(CENTER);
  
}

void draw(){
  
  rect(x, y, w, h);
  
}

練習
基本的な図形を組み合わせてグラフィック作品を作成してみましょう。