We briefly discussed how to manipulate colors in Computing Colors. On this page, we will look more into the different ways of what we do quite often in making pictures and graphics - mixing colors. With code, we can emulate, experiment, and explore how colors combine beyond the limitations of the traditional palette and brush.

「色を計算する」で色の操作方法について簡単に説明しました。このページでは、画像やグラフィックの作成でよく使う様々な混色方法について、より詳しく見ていきます。コードを使えば、伝統的なパレットや筆の制約を超えて、色がどのように組み合わさるかを模倣、実験、研究することができます。

At their core, colors on digital platforms are mere numbers. Although our eyes and brains perceive colors in a certain way, we can program various models and interpretations of these numbers. As a result, the output can range anywhere from realistic to surreal.

デジタルプラットフォーム上の色は、本質的には単なる数字です。目と脳は色をある特定の方法で認識しますが、コンピュータ上ではこの数字について様々なモデルを考えたり解釈をすることで、リアルなものから非現実的なものまで様々な結果を得ることができます。

Your paints don’t have to follow the reality あなたの絵具が現実に従う必要はありません

Mixing RGB Colors

RGBの混色

Let's start by mixing colors represented by RGB values. This is the most straightforward method because RGB aligns very well with how most of our screens display colors, as every pixel on these screens consists of tiny bits of red, green, and blue lights. Mixing colors in the RGB space is also a pretty good approximation of blending lights in the real world. You can read more about how our perception of light relates to the RGB color model in the Spectrum and Cones.

まず、RGB値で表された色を混ぜてみましょう。ほとんどのスクリーンは画素ごとに小さな赤、緑、青の光の点で構成されているので、RGBはスクリーン上での色の表示方法に直感的に対応しています。RGB空間での混色は、実世界での光を混ぜ合わせることのかなりよい近似でもあります。スペクトルと錐体のページで、光の知覚がRGBカラーモデルとどのように関係しているかについてもっと詳しく説明しています。

<aside> 💡 Note that, however, since most display devices are gamma-corrected, the RGB values are not directly proportional to the brightness of the pixel. ただし、ほとんどのディスプレイデバイスはガンマ補正されているため、RGB値とピクセルの明るさは単純には比例しません。

</aside>

You can mix two RGB colors by simply interpolating each of RGB channels.

RGBの色を混ぜるには、単に各RGBチャンネルを補間します。

// p5js already has the lerp function implemented, but just to be explicit.
function lerp(v0, v1, t) {
	return v0 * (1 - t) + v1 * t;
}

function rgbLerp(ca, cb, t) {
return {
    r: lerp(ca.r, cb.r, t),
    g: lerp(ca.g, cb.g, t), 
    b: lerp(ca.b, cb.b, t)
  }
}