明度と彩度のグラデーション（スタディ）

まず、インターネットから「葉」の画像を集め、幅100 x 高さ200ピクセルの画像をサンプリングする。その際、既存の著作権には十分配慮すること。
サンプリングしたカラーサンプルを、明度順、彩度順に並び替え、それぞれ10個のグラデーションを作成する。

目標

• 彩度、明度の微細な違いをコントロールできるようにする

注意点

• 明度の場合は、左端が1番明度が低く、右端が1番明度が高くなるように配置する。色相・彩度は一定。
• 彩度の場合は、左端が1番彩度が低く、右端が1番彩度が高くなるように配置する。色相・明度は一定。
• サンプリングする場合は、なるべく解像度の高い画像を選ぶ。

Processingでグラデーションのサンプル作ってみました。こんな感じで、上が明度のグラデーション、下が彩度のグラデーションになるように配置します。

int rectW = 100;

size(1000, 400);

//カラーモードをHSBに変換
colorMode(HSB, 360, 100, 100);

//このカラーモードの設定の場合、彩度を0、明度を100にすれば、
//色相はどんな値でも白になる。
background(0, 0, 100);
noStroke();

//明度のグラデーション
for (int x = 0; x < width; x+= rectW) {
    
  fill(0, 100,  x / 10);
  rect(x, 0, rectW, height/2);
}

//彩度のグラデーション
for (int x = 0; x < width; x+= rectW) {
    
  fill(0, x / 10, 70);
  rect(x, height / 2, rectW, height);
}