色：グレースケール、RGB、透明度を使ってみよう

Processingはその視覚的な表現が得意です。図形の描画に加えて色の操作もProcessingの強みの一つです。この記事では、色の表現について学び、グレースケール、RGB、透明度の概念を理解しましょう。

グレースケール（モノクロ）

グレースケール（白黒）は最もシンプルな色の表現方法で、明るさのみで色を定義します。0は完全な黒、255は完全な白を表します。

以下に、グレースケールを使って画面全体を塗りつぶすシンプルなコードを示します。

//processing
void setup() {
  size(500, 500);
  noLoop();
}

void draw() {
  background(127); // 画面をグレーに塗りつぶす
}

background(127)は画面全体を中間のグレーで塗りつぶします。

RGB色空間

RGB色空間は赤（Red）、緑（Green）、青（Blue）の3原色を組み合わせて色を作り出します。各色は0から255の範囲の値で表され、0はその色成分が全くない（暗い）ことを、255はその色成分が最大（明るい）ことを表します。

次に、RGB色空間を使って色を定義する例を見てみましょう。

void setup() {
  size(500, 500);
  noLoop();
}

void draw() {
  background(255, 0, 0); // 画面を赤色に塗りつぶす
}

このコードは、赤色成分が最大で、緑色と青色成分がない状態で、画面全体を塗りつぶします。

透明度（アルファ）

透明度は色の「見え方」を制御します。これはアルファとも呼ばれ、完全に不透明（見えない）である0から完全に透明（全く見えない）である255までの値で表されます。

RGBと同様に、透明度も色を定義する際に使うことができます。これを実現するためには、background()関数に4つ目の引数として透明度を追加します。

//processing
void setup() {
  size(500, 500);
  noLoop();
}

void draw() {
  background(255, 0, 0, 127); 
// 画面を半透明の赤色色に塗りつぶす
}

この例では、赤色成分が最大で、緑色と青色成分がない状態で、画面全体を半透明の赤色で塗りつぶします。 ## プログラムに色を追加する では、これまでに学んだことを用いて、Processingスケッチに色を追加してみましょう。

void setup() {
  size(500, 500);
  noLoop();
}

void draw() {
  background(255); // 画面を白に塗りつぶす
  fill(0); // 次に描画される図形の色を黒に設定
  ellipse(250, 250, 200, 200); // 中心が(250, 250)で半径が200の円を描画

  fill(255, 0, 0); // 次に描画される図形の色を赤に設定
  ellipse(250, 250, 100, 100); // 中心が(250, 250)で半径が100の円を描画
}

上記のコードは、大きな黒い円の中に小さな赤い円を描画します。 fill()関数を使って色を変更し、その後の描画に影響を与えます。
色の概念はグラフィックプログラミングの重要な部分で、Processingはその概念を探索し実験するのに理想的なツールです。グレースケール、RGB、透明度を使って自由に色を使い、独自のビジュアル表現を作り出すことができます。