p5.jsを使ったカラーのブレンド計算
はじめに
p5でカラーのブレンドモードを実装してみました。
各ブレンドモードの公式も載せていますが、すべて [0~1] の範囲のものとなります。
| パラメータ | 説明 |
|---|---|
| 基本色 | |
| 合成色 | |
| 結果色 |
乗算
カラーを乗算をすると、0に近づくため出力されるカラーは黒くなります。
白は(1,1,1)のため、乗算しても黒くなりません。
公式
関数
const Multiply = (c1: Color, c2: Color) => {
return { r: c1.r * c2.r, g: c1.g * c2.g, b: c1.b * c2.b };
};
https://codesandbox.io/embed/color-multiply-p5-6g89uu?fontsize=14&hidenavigation=1&theme=dark
加算
カラーを加算をすると、1に近づくため出力されるカラーは白くなります。
カラーに1以上の値はないので、1を超えないように正規化します。
公式
関数
const Add = (c1: Color, c2: Color) => {
return {
r: Math.min(c1.r + c2.r, 1),
g: Math.min(c1.g + c2.g, 1),
b: Math.min(c1.b + c2.b, 1)
};
};
https://codesandbox.io/embed/color-add-p5-5h7qp2?fontsize=14&hidenavigation=1&theme=dark
スクリーン
カラーにスクリーンを適用すると、色が明るくなります。
乗算の反転を行っていると考えると、結果のカラーが想像しやすくなるかもしれません。
公式
関数
const Screen = (c1: Color, c2: Color) => {
return {
r: c1.r + c2.r - c1.r * c2.r,
g: c1.g + c2.g - c1.g * c2.g,
b: c1.b + c2.b - c1.b * c2.b
};
};
https://codesandbox.io/embed/color-screen-p5-jerg2o?fontsize=14&hidenavigation=1&theme=dark
オーバーレイ
オーバーレイは、基本色の値が0.5以上だと明るくなり、0.5未満だと暗くなります。
2をかけることで、中間値でもなめらかなグラデーションができるようになっています。
公式
関数
const Overlay = (c1: Color, c2: Color) => {
return {
r: Math.min(
c1.r < 0.5 ? c1.r * c2.r * 2 : 2 * (c1.r + c2.r - c1.r * c2.r),1),
g: Math.min(
c1.g < 0.5 ? c1.g * c2.g * 2 : 2 * (c1.g + c2.g - c1.g * c2.g),1),
b: Math.min(
c1.b < 0.5 ? c1.b * c2.b * 2 : 2 * (c1.b + c2.b - c1.b * c2.b),1)
};
};
https://codesandbox.io/embed/color-overlay-p5-fkghu5?fontsize=14&hidenavigation=1&theme=dark
まとめ
- 乗算は暗くなる
- 加算は明るくなる
- スクリーンは明るくなるが加算ほどではない
- オーバーレイは基本色が0.5以上だと明るくなるが、0.5未満だと暗くなる
Table of contents