p5.jsの関数まとめ part.3 lerpColor() ~ 赤と青の間の色は本当に紫なのか ~

この記事は Qiita p5js アドベントカレンダー4日目の記事です。

これはなに

書籍『Generative Design with p5.js』P_1_2_1_01に登場する関数について理解を深める記事です。
今回はlerpColor()です。

lerpColor()

リファレンスより

Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.
The way that colors are interpolated depends on the current color mode.

2つの色をブレンドして、それらの間のどこかにある3番目の色を見つけます。amtパラメータは、2つの値の間を補間する量です。0.0は最初の色と同じ、0.1は最初の色に非常に近い、0.5はその中間、といった具合です。これはLERP()の動作とは異なりますが、範囲外の数値を入力すると奇妙で予期しない色になってしまうので必要です。
色の補間方法は、現在のカラーモードに依存します。（DeepL翻訳）

第一引数と第二引数をブレンドした色を、新しいcolorオブジェクトとして返す関数です。
第三引数でどっちの色に寄せていくかを指定できます。
ほぼリファレンスのままですがそういうことです。

Type

lerpColor(c1: Color, c2: Color, amt: number): Color;

• c1 始まりの色
• c2 終わりの色
• ブレンドした返り値をc1とc2のどちらに寄せるかを0~1の間で指定する

お？Color型ってなんだ？
と思い調べたところ、p5にはColorというクラスがあるようで。
またcolor関数があり、v1, v2, v3はr, g, b。そしてalpha（オプション）を渡すとColor型が返る。

color(v1: number, v2: number, v3: number, alpha?: number): Color;

下記を出力してみると

console.log(color(25, 24, 100))

=> {mode: "hsb", maxes: Object, _array: Array(4), levels: Array(4), toString: ƒ ()…}

hsbはカラーモードのことです。
つまりcolor()を使うことで色の情報を持ったオブジェクト(Colorのインスタンス)が扱えるようになるわけですね。
これは色指定ができる関数にそのままあてることができます。

// 同じ結果
const sampleColor = color(25, 500, 100)
fill(sampleColor)
fill(25, 500, 100)

試してみる

今回は**「赤と青の間の色は本当に紫なのか」**を検証してみます。
まずは以下のようにして赤と青の正方形を用意します。

function setup() {
  createCanvas(800, 800);
  colorMode(RGB);
  noStroke(); // 枠線を隠す
}

function draw() {  
  const color1 = color(255, 0, 0)
  const color2 = color(0, 0, 255)
  
  // 赤の正方形
  fill(color1)
  rect(50, 50, 50, 50)
  // 青の正方形
  fill(color2)
  rect(150, 50, 50, 50)
}

そして赤と青の中間をlerpColorで取得し、３つ目の正方形に色を当ててみます。

function draw() {  
  const color1 = color(255, 0, 0)
  const color2 = color(0, 0, 255)
  // 追加 赤と青の中間色を取得
  const color3 = lerpColor(color1, color2, 0.5)
  
  fill(color1)
  rect(50, 50, 50, 50)
  fill(color2)
  rect(150, 50, 50, 50)
  // 追加
  fill(color3)
  rect(100, 100, 50, 50)
}

紫だ！！
以上。

どんな時に使えそうか

雰囲気を統一したい時にも一役買いそうな関数だと思いました。
白〜グレー〜黒の中で色が変化するモノトーンなアートを作りたい。
そんな時には引数に白と黒を渡し、amtをrandom(0, 1)にしてlerpColorを使うことでシックなグラデーションを表現できると思います。

// 白
const color1 = color(255, 255, 255)
// 黒
const color2 = color(0, 0, 0)
// 白~黒のグラデーションがフレームごとに変化する
const color3 = lerpColor(color1, color2, random(0, 1))