ProcessingのlerpColor()でグラデーションを作る

OpenProcessingでlerpColor()という便利な関数を教えてもらったので、メモ代わりにまとめておきます。

lerpColor()は簡単に言うと、lerp()というある2つの値の間を0.0〜1.0の比率で指定して取得することができる関数の色版みたいなもの。

例えば、横方向に変化するグラデーションを作るには、以下のように書く。

color c1, c2;
for(float w = 0; w < width; w += 5){
    color c = lerpColor(c1, c2, w / width);
    fill(c);
    rect(w, 0, 5, height);
}

これを、lerpColor()を使わずに書くとこうなり、RGBを分割してそれぞれ計算しなければならないため、若干めんどくさい。

color c1, c2;
for(float w = 0; w < width; w += 5){
　float r = map(w, 0, width, red(c1), red(c2));
　float g = map(w, 0, width, green(c1), green(c2));
　float b = map(w, 0, width, blue(c1), blue(c2));
    fill(r, g, b);
    rect(w, 0, 5, height);
}

以下、lerpColor()を使って、いくつかのグラデーションをつくってみた。

左から右へのグラデーション

void setup(){
  size(500, 500);
  noStroke();
  color c1 = color(255, 140, 0);
  color c2 = color(0, 255, 255);
  for(float w = 0; w < width; w += 5){
      color c = lerpColor(c1, c2, w / width);
      fill(c);
      rect(w, 0, 5, height);
  }
}

左上から右下へのグラデーション

void setup(){
  size(500, 500);
  noStroke();
  color c1 = color(255, 140, 0);
  color c2 = color(0, 255, 255);
  for(float w = 0; w < width; w += 5){
    for(float h = 0; h < height; h += 5){
      color c = lerpColor(c1, c2, (w + h) / (width + height));
      fill(c);
      rect(w, h, 5, 5);
    }
  }
}

円状のグラデーション

void setup(){
  size(500, 500);
  background(255);
  noStroke();
  color c1 = color(255, 140, 0);
  color c2 = color(0, 255, 255);
  for(float d = 400; d > 0; d -= 5){
    color c = lerpColor(c1, c2, d / 400.0);
    fill(c);
    ellipse(width / 2, height / 2, d, d);
  }
}