ドミナントカラー検出アルゴリズムの解説

ドミナントカラー検出の仕組み

ドミナントカラー検出は画像内の最も目立つ色を特定するプロセスです。人間は画像を一目見て主な色を言い当てることができますが、コンピューターは同じ結果を達成するために構造化されたアルゴリズムが必要です。最も一般的なアプローチは色量子化 — 画像内の数百万の可能な色を小さな代表的なセットに減らすことです。

メディアンカットアルゴリズム

1982年にPaul Heckbertが導入したメディアンカットアルゴリズムは、最も広く使用されている色量子化手法の1つです。色空間を再帰的に小さな領域に分割することで機能します：

1. すべてのピクセルを1つの3Dボックス（R、G、B軸）に配置
2. 最大範囲を持つ軸を見つける（例：赤が最も変動が大きい）
3. その軸に沿ってピクセルをソート
4. 中央点でボックスを2つのボックスに分割
5. N個のボックス（目的のパレットサイズ）になるまでステップ2-4を繰り返す
6. 各ボックス内の色を平均して最終パレットを取得

なぜメディアンカットがうまく機能するか

このアルゴリズムにはパレット抽出に効果的ないくつかの特性があります：

• 適応的： 色が最も変化する領域を分割し、重要な区別を保持
• 重み付き： より大きなカラークラスターが代表色を生成し、支配性を反映
• 決定論的： 同じ画像は常に同じパレットを生成（ランダム性なし）
• 効率的： ピクセルサンプリングによるO(n log n)の時間複雑度

他のアルゴリズムとの比較

アルゴリズム	速度	品質	決定論的
メディアンカット	高速	良好	はい
K-Means	低速	優秀	いいえ
Octree	高速	良好	はい
Popularity	非常に高速	低	はい

パフォーマンスのためのピクセルサンプリング

高解像度画像のすべてのピクセルを処理すると非常に遅くなります。代わりに、アルゴリズムは一定間隔でピクセルをサンプリングします：

// 画像サイズに基づいてN番目ごとのピクセルをサンプリング
const step = Math.max(1, Math.floor(totalPixels / 50000));
for (let i = 0; i < data.length; i += step * 4) {
  const r = data[i], g = data[i+1], b = data[i+2];
  // ピクセルを処理...
}

4000x3000の画像（1200万ピクセル）でも、約50,000ピクセルのサンプリングで正確な結果を得ながら、秒単位ではなくミリ秒単位で実行できます。

カラースペース量子化

メディアンカット実行前に、ノイズを減らすために類似色を丸めてグループ化します：

const r = Math.round(pixel.r / 4) * 4; // 4単位以内の色をグループ化
const g = Math.round(pixel.g / 4) * 4;
const b = Math.round(pixel.b / 4) * 4;

この事前量子化ステップにより、わずかなバリエーション（JPEG圧縮アーティファクトなど）が数百のほぼ同一のカラーエントリを作成することを防ぎます。