Processingで簡単な図形を描こう！

こんにちは！前回の記事(Processingを始めよう）ではProcessingのインストール方法について解説しました。今回は、そのProcessingを使っていくつかの基本的な図形を描いてみましょう。コードと一緒に説明しますので、Processingを起動して実際にコードを書いてみてください。

また図形を描く関数について、より詳しい解説を知りたい場合は公式リファレンスを参照してみてください。関数の引数の意味やサンプルコードを読むことでより深い理解が得られると思います。

Reference / Processing

https://processing.org/reference/

円を描く

まずは最もシンプルな形、円を描いてみましょう。

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
  ellipse(250, 250, 100, 100);
}

このコードではellipse関数を使って、(250, 250)の位置に直径が100の円を描きます。

長方形を描く

次に、長方形を描いてみましょう。

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
  rect(200, 200, 100, 50);
}

rect関数を使って、左上の角が(200, 200)で、幅が100、高さが50の長方形を描きます。

線を描く

線を描いてみましょう。

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
  line(50, 50, 450, 450);
}

line関数を使って、始点が(50, 50)で終点が(450, 450)の線を描きます。

任意の形状を描く

円や長方形のような決まった形ではなく、もう少し複雑な図形を描きたい場合は、頂点を指定して頂点同士を線で結ぶことで任意の図形を描くことができます。

Processingのvertex関数を使えば、任意の形状の図形を描くことができます。vertex関数は頂点（vertex）の座標を指定し、それらを線でつなげることで図形を描きます。頂点を指定する順番が、図形を描く順番となります。

まず、ProcessingのbeginShapeとendShape関数を使って、描きたい形状の始まりと終わりを定義します。次に、その間にvertex関数を使って頂点を追加します。以下に、三角形を描く簡単な例を示します。

void setup() {
  size(500, 500);
  background(255);
}

void draw() {
  beginShape();
  vertex(100, 100);
  vertex(400, 100);
  vertex(250, 400);
  endShape(CLOSE);
}

上記の例では、vertex関数を3回呼び出して、三角形の3つの頂点を定義しています。頂点は(100, 100), (400, 100), (250, 400)の3点です。

最後にendShape(CLOSE)を呼び出すことで、最初の頂点と最後の頂点がつながり、閉じた図形となります。CLOSEを省略すると、始点と終点がつながらず開いた図形となります。

これで、Processingのvertex関数を使って独自の図形を描く方法を学びました。さまざまな頂点を組み合わせて、自分だけの図形を作ってみてください。今回紹介した以外にも曲線の描き方、3D図形の描き方などもリファレンスを参考に色々と実験してみることをお勧めします！