三次元ユークリッド距離による
高精度な色差判定の実装

1. RGB空間におけるユークリッド距離の応用

デジタル画像において、色は「R（赤）」「G（緑）」「B（青）」の3つの軸を持つ三次元空間上の点として定義できます。指定した色と現在のピクセルの色が「どれくらい近いか」を判定するために、本ツールではこの三次元空間上の直線距離（ユークリッド距離）を算出しています。

メリット： 単純な「色の値の比較」よりも、人間の感覚に近い「似た色」の抽出が可能になります。また、算出した距離をユーザーが操作する「許容範囲（スライダー値）」と比較することで、抽出の厳密さを直感的に調整できる設計にしています。

// ピクセルごとの「色の近さ」を判定するコアアルゴリズム
function isTargetColor(r, g, b, target) {
    // RGB空間におけるユークリッド距離の計算
    // ルート計算の負荷を避けるため、内部的には距離の自乗で比較する場合もあります
    const distance = Math.sqrt(
        Math.pow(r - target.r, 2) + 
        Math.pow(g - target.g, 2) + 
        Math.pow(b - target.b, 2)
    );

    // ユーザー設定のしきい値と比較
    return distance < // 独自のチューニングしきい値;
}

2. Luma（輝度）係数を用いた高品質なモノクロ変換

対象外と判定されたピクセルをモノクロ化する際、RGBの平均値をとるだけでは、人間の目にとって不自然なグレーになってしまいます。本ツールでは、人間の視覚が緑を強く、青を弱く感じる特性を考慮した「Luma（輝度）」の計算式を採用しています。

メリット： 写真の明暗差（コントラスト）を美しく維持したままグレースケール化できるため、残した色がより鮮やかに、かつドラマチックに際立つ仕上がりになります。

// 人間の視覚特性に基づいたモノクロ変換処理
function convertToGrayscale(r, g, b) {
    // Luma係数を用いた重み付け計算
    // 0.299R + 0.587G + 0.114B
    const luma = r * // R係数 + g * // G係数 + b * // B係数;
    
    // RGBすべてを同じ輝度値にセットしてグレーを作る
    return { r: luma, g: luma, b: luma };
}

3. 座標スケーリングと Canvas の最適化

このツールでは、高解像度な元画像（Original）と表示用の軽量なプレビューを完全に分離して管理しています。ユーザーが画面上の「表示されている画像」をタップした際、その座標を正確に「元の高解像度ピクセル」へ変換するためのマッピングを行っています。

メリット： 4Kクラスの巨大な写真であっても、メモリを過剰に消費することなく、ピンポイントで正確な色抽出を可能にします。また willReadFrequently: true オプションにより、頻繁なピクセルデータの読み取り負荷を軽減しています。

// 表示サイズと実ピクセルサイズの差異を吸収する座標変換
const rect = mainCanvas.getBoundingClientRect();
const scaleX = mainCanvas.width / rect.width;
const scaleY = mainCanvas.height / rect.height;

// タップ位置を実ピクセル座標へ変換
const x = Math.floor((clientX - rect.left) * scaleX);
const y = Math.floor((clientY - rect.top) * scaleY);

// オフスクリーンCanvasから対象のピクセルデータを抽出
const pixelData = // ここにピクセル取得処理が入ります;

Developer's Note

「エモい写真」を作りたいというニーズに応えるため、単に色を残すだけでなく、その「境界線」の馴染み具合には特にこだわりました。

スライダーで調整する「許容範囲」は、内部的にはかなり細かなステップで色の距離を判定しています。これにより、例えば「夕焼けのオレンジ」だけを残したい時に、隣接する赤色や黄色をどこまで含めるかを非常に繊細にコントロールできるようにしました。

また、iPhoneの標準形式であるHEICを、サーバーを介さずブラウザ内でJPEG変換する仕組みの実装は、当サイトの「完全ローカル処理」というアイデンティティを守るために不可欠な挑戦でした。

推しカラーを際立たせたり、何気ない日常を映画のワンシーンのように変えたり。あなたの創造力を支えるツールとして活用していただければ幸いです。