インこのシリーズの第1部, we explored the fundamental principles of color correction and explained the importance of working with colors when editing images. この第二部では、我々は、画像の間の違いなどのより高度な概念に潜入します。RGBそしてLAB色のモデル、そしてそのプロセスextracting palettes画像から、それらを使用してユニークなビジュアルスタイルを作成します。
前回の記事で見たように、いくつかの色とパレットは、当初予想していたものとは異なり、最も単純なツール、すなわちRGBモデルとユークリッド距離計算を使用しました。
まず、ちょっとした理論。
The RGB Model
最も人気のある2つのカラーモデルは、RGBそしてLAB彼らがどのように色を表し、処理するかによって根本的に異なる。
THERGBモデルは、TheRedで、Greenそして、Blueカラーを表すチャンネル 各チャンネルは0から255までの値を有し、1600万色を超える可能性があります。このモデルは、コンピュータモニター、テレビ、スマートフォンがこのモデルを使用しているため、画面に表示される画像と作業するのに最適です。
RGB Key Features:
- ♪
- それは、赤、緑、青の光を組み合わせることによって色を生成する添加プロセスを使用します。 ♪
- ピクセルレベルで理解し処理するのが簡単です。 ♪
- すべての色を正確に表す能力は限られているため、人間の色の感覚を反映していない。 ♪
The LAB Model
THELABモデルは、3つのチャンネルで色を表します。L (lightness)で、A (a color spectrum from green to red)そして、B (a color spectrum from blue to yellow)このモデルは、人間がどのように色を認識するかに近いものであり、画像の色と明るさの両方に影響を及ぼします。
LAB Key Features:
- ♪
- Lチャンネルは明るさを制御し、色を変えることなく明るさの調整を可能にします。 ♪
- AおよびBチャンネルは色の色彩を記述し、幅広い色スペクトルのより正確な制御を可能にします。 ♪
- LABモデルは、プロフェッショナルなカラー評価において特に有用であり、より多様性があり、他の画像パラメータに影響を及ぼさずに正確なカラー調整を可能にします。 ♪
LABモデルでは、明るさは色から分離され、画像の視覚パラメータを、その色のバランスを損なうことなく調整することが可能になります。
Color Calculation Algorithm and Using LAB
色を計算し、適用するために、当社のアプリケーションは、colorjs.ioこの図書館をプロジェクトに統合すると、画像処理時に望ましい結果を達成するのに役立つ正確な計算を実行することができます。
以下は、LAB モデルの色で作業するためにアプリで使用されるコードの例です。
// Sample code for using colorjs.io in LAB model
const findClosestColor = (r, g, b) => {
if (mode === "lab") {
const color1 = new Color({ coords: [r / 255, g / 255, b / 255], space: "srgb" }).to("lab");
let minDist = Infinity;
let closest = [r, g, b];
for (let i = 0; i < paletteLAB.length; i++) {
const color2 = paletteLAB[i];
const dist = color1.distance(color2); // Calculating the distance between colors in LAB space
if (dist < minDist) {
minDist = dist;
closest = palette[i];
}
}
return closest;
} else {
// RGB calculations
let minDist = Infinity;
let closest = [r, g, b];
for (let [pr, pg, pb] of palette) {
const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
if (dist < minDist) {
minDist = dist;
closest = [pr, pg, pb];
}
}
return closest;
}
};
このコードブロックは、特定のパレットで最も近い色を見つけるプロセスを処理し、ターゲット色とパレット内の色の間の色距離を計算します。RGBまたはLABで。
How This Works in Practice:
- ♪
- LABモード: LABカラースペースは人間のビジョンと一致するように設計され、輝度(L)をクロマティックコンポーネント(AおよびB)から分離します。LABで色を一致させるとき、アルゴリズムは、色が感覚的に正確な方法で比較されることを保証します。 ♪
- RGBモード:RGBカラースペースは単に赤、緑、青の光の強度で色を表します。このモードでは、距離はカラー値に直接基づいて計算されます。 ♪
プロフェッショナルなカラーグレードと画像処理では、カラーを基に合わせてLAB人間の目がどのように色を感知するかを模し、より自然で視覚的に魅力的な結果を生み出すため、この方法を使用することで、アプリケーションは、イメージに色パレットを適用する際により良い一貫性を達成することができ、望ましいスタイルに色を合わせやすくなります。
Optimization Challenge: LAB Computation
働くこと TheLABcolor model requires significantly more computational resources than working withRGBなぜなら、LABでは、各色は3つのチャンネル(RGB)で表されるだけでなく、色の座標とその距離を取得するための追加の計算も含まれているからです。
このプロセスを最適化するために、私たちは導入しました。palette caching余計な計算を避けるために. Palettes created inLABモードはメモリに保存され、画像が変更されていない場合、システムはパレットを再計算しません。これは、複数の画像にパレットを適用する場合に特に、プロセスを大幅に加速するのに役立ちます。
// Optimization with palette caching
const extractPalette = () => {
if (!image || image === lastExtractedImageRef.current) return; // Check for changes
const img = new Image();
img.src = image;
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
const colorMap = new Map();
// Creating a color map
for (let i = 0; i < imageData.length; i += 4) {
const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
colorMap.set(key, (colorMap.get(key) || 0) + 1);
}
const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
const topRaw = sorted.map(([str]) => str.split(",").map(Number));
const topColors = filterColors(topRaw).slice(0, 10);
const randomId = Math.floor(10000 + Math.random() * 90000);
const name = `Palette_${randomId}`;
setPalettes(prev => ({ ...prev, [name]: topColors }));
setSelectedPalette(name);
lastExtractedImageRef.current = image; // Saving cache
};
};
この改善は、アプリケーションのパフォーマンスを加速させるのに役立ち、特に複数の類似画像を繰り返し処理する場合に役立ちます。
Palette Extraction and Application
パレット抽出は、画像から最も特徴的で活気のある色を特定するプロセスであり、その後フィルターやビジュアルスタイルを作成するために使用することができます。frequency色の現象とそのluminanceパレットに、あまり似ている色を含まないようにする。
パレットを抽出する主なメカニズムは次のとおりです。
const extractPalette = () => {
// Check for image changes
if (!image || image === lastExtractedImageRef.current) return;
const img = new Image();
img.src = image;
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
const colorMap = new Map();
// Counting the frequency of occurrence of each color
for (let i = 0; i < imageData.length; i += 4) {
const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
colorMap.set(key, (colorMap.get(key) || 0) + 1);
}
// Sorting by frequency and filtering similar colors
const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
const topRaw = sorted.map(([str]) => str.split(",").map(Number));
const topColors = filterColors(topRaw).slice(0, 10); // Segmentation and filtering
const randomId = Math.floor(10000 + Math.random() * 90000);
const name = `Palette_${randomId}`;
// Saving the palette
setPalettes(prev => ({ ...prev, [name]: topColors }));
setSelectedPalette(name);
lastExtractedImageRef.current = image;
};
};
このコードは、画像からパレットを抽出するために使用され、色は明るさと違いによってフィルタリングされます。
抽出されたパレットのための自動ネーム生成を追加して、不要なボタンでユーザーインターフェイスを混乱させないようにしました。
Custom Palettes
私たちのアプリケーションのツールの1つは、カスタムパレット作成ブロックです。この機能は、ユーザーが様々なプロジェクトに適したパレットを作成することを可能にし、色の完全な制御を提供します。
このプロセスは、色を選択することで始まります。HexColorPickerインターフェイス. ユーザーは、画像からまたは外部のソースから色を選択できます. 選択した各色は自動的にユーザーの色リストに追加され、パレットが作成されます。
いくつかの色を選択した後、パレットはカスタマイズされた名前で保存できます。後に、特定の視覚的なスタイルを達成するためにアップロードされた画像に適用することができます。
Color Neutralization with Color Palettes
色パレットによる色中立化Color neutralization重要な側面はcolor gradingにおいて、重要な役割を果たす。film post-productionそれは、異なる照明条件下で撮影された個々のシーンやショットが共通の色を帯びることができるプロセスであり、これは通常、映画全体で統一された視覚的なスタイルを確保し、撮影条件に関係なく、シーンが視覚的に一貫するようにするために行われます。
パレットが映画視覚言語の2つの象徴的な例を通じてどのように適用されるかを探ってみましょう。
Palettes in the Movie “The Matrix”
映画“The Matrix”(1999年)は、Wachowski兄弟が監督し、そのユニークなビジュアルスタイル、特定の緑色の色のパレットを含むため、アイコンとなりました. この色スタイルは、主人公が存在するデジタル現実を視覚化するために設計されました. 映画のビジュアル効果は、冷たい機械的な色が支配する仮想の感覚を伝えるために作成されました.
Main Colors緑、黒、金属。
Palette Application:
- ♪
- 緑色を抽出する: マトリックススタイルのパレットを作成するには、画像から緑色、黒色、灰色のすべての色合いを抽出することができます。 これらの色合いを適用することで、映画の「デジタル現実」効果を達成できます。 ♪
- 新しい画像に適用:このパレットを適用すると、画像の色が変化し、すべてのピクセルをパレットから選択した色に最も近いものに置き換え、望ましい「コードされた」スタイルを作成します。 ♪
Palettes in Wes Anderson’s Works
Wes Anderson彼の鮮やかでカラフルでシンメトリックなビジュアルソリューションで知られています。“The Grand Budapest Hotel”,♪“Moonrise Kingdom”,そして“The French Dispatch”,彼のすべては、豊富なパステル色と慎重に選択されたパレットを特徴とする彼の署名スタイルを持っています。彼の映画の重要な要素の1つは、カラーデザインの調和と対比です。
Main Colors: パステル色合い、明るい対照的な色、赤、黄色、トルコ色、緑。
Palette Application:
- ♪
- パステル色の抽出:ウェス・アンダーソンの映画では、パステル色がよく使われます。例えば、明るいピンク、青、オレンジ色を抽出して、これらの色を新しいイメージに適用して、ヴィンテージ写真に似た効果を作成したり、スタイリッシュな雰囲気を強調したりすることができます。当社のアプリでは、明るさと対比によって色をフィルタリングして画像からパレットを抽出し、柔らかいパステル色だけを保存することができます。 ♪
- New Images に適用:パレットが抽出された後、それはあらゆる画像に適用され、アンダーソンの作品を思い出させる特徴的な外観を与え、明るいしかし調和した色で。 ♪
参照からパレットを抽出できるようになった今、いくつかの実験の時間です!
私たちは色数で限られたパレットを使用し、ブラウザでアプリケーションを実行しているので(これは限られた計算リソースを使用することを意味します)、我々は優れた結果を期待すべきではありません。
以下は、RGBとLABモードの両方で処理された画像の例です。
パレットの抽出と適用は、「マトリックス」のスタイル、ウェス・アンダーソンやデニス・ヴィルヌーヴのスタイルのようなビジュアルスタイルを作成する上で重要な側面です 私たちのアプリは、ユーザーがパレットを抽出し、適用し、ユニークなビジュアル効果を作成することを可能にする色と作業するためのビジュアルツールを提供します。
最後の部分では、色の調節と最適化に焦点を当てます。
