Tento barevný nástroj promění jakýkoliv obraz ve sen o horečce Wes Anderson

vPrvní část této série, jsme prozkoumali základní principy korekce barev a vysvětlili důležitost práce s barvami při editaci obrázků.RGBaLABbarevných modelů, stejně jako procesextracting palettesz obrázků a pomocí nich vytvořit jedinečné vizuální styly.

Jak jsme viděli v předchozím článku, některé barvy a palety se zobrazovaly jinak, než jsme původně očekávali. To je způsobeno tím, že jsme použili nejjednodušší nástroje – model RGB a Euclidský výpočet vzdálenosti.

Ale nejdřív trochu teorie.

The RGB Model

Dvě nejpopulárnější barvy -RGBaLAB- jsou zásadně odlišné v tom, jak reprezentují a zpracovávají barvy.

TytoRGBModel používáRed, ,Green, aBlueKaždý kanál může mít hodnoty od 0 do 255, což má za následek více než 16 milionů možných barev. Tento model je ideální pro práci s obrazy zobrazenými na obrazovkách, protože počítačové monitory, televizory a smartphony používají tento model.

RGB Key Features:

se
• Používá aditivní proces, při kterém se barvy vytvářejí kombinací červeného, zeleného a modrého světla.
se
• Je jednodušší pochopit a zpracovat na úrovni pixelů.
se
• Je omezen ve své schopnosti reprezentovat všechny barvy přesně, protože nezohledňuje lidské vnímání barvy.
se

The LAB Model

TytoLABModel představuje barvu ve třech kanálech:L (lightness), ,A (a color spectrum from green to red), aB (a color spectrum from blue to yellow)Tento model je blíže k tomu, jak lidé vnímají barvy a odpovídá jak barvě, tak jasu obrazu.

LAB Key Features:

se
• L kanál ovládá jas, což umožňuje úpravy jasu bez změny barvy.
se
• Kanály A a B popisují barevné odstíny, což umožňuje přesnější ovládání širokého spektra barev.
se
• Model LAB je obzvláště užitečný při profesionálním hodnocení barev, protože je více všestranný a umožňuje přesné nastavení barev bez ovlivnění jiných parametrů obrazu.
se

V modelu LAB je jasnost oddělená od barvy, což umožňuje upravit vizuální parametry obrazu bez ovlivnění jeho barevné rovnováhy.

Color Calculation Algorithm and Using LAB

Pro výpočet a aplikaci barev naše aplikace využívácolorjs.ioknihovna, která efektivně pracuje s barvami v modelu LAB. Integrace této knihovny do projektu nám umožňuje provádět přesné výpočty, které pomáhají dosáhnout požadovaných výsledků při zpracování obrazů.

Zde je příklad kódu používaného v naší aplikaci pro práci s barvami v modelu 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;
  }
};

Tento blok kódu se zabývá procesem nalezení nejbližší barvy v dané paletě výpočtem barevné vzdálenosti mezi cílovou barvou a barvami v paletě.RGBneboLABa .

How This Works in Practice:

se
• Režim LAB: barevný prostor LAB je navržen tak, aby odpovídal lidskému vidění a odděloval jasnost (L) od chromatických složek (A a B).Při shodování barev v LAB algoritmus zajišťuje, že barvy jsou srovnávány vnímavě přesným způsobem, což znamená, že dává přednost tomu, jak vnímáme rozdíly barev, a nejen matematické rozdíly RGB.
se
• Režim RGB: barevný prostor RGB jednoduše reprezentuje barvu intenzitou červeného, zeleného a modrého světla.V tomto režimu se vzdálenost vypočítává přímo na základě barevných hodnot, což může vést k menší percepční přesnosti, protože nezohledňuje nuance lidského vnímání barev.
se

V profesionálním hodnocení barev a zpracování obrazu, shodování barev na základěLABje velmi výhodné, protože napodobuje způsob, jakým lidské oko vnímá barvy, což umožňuje přirozenější a vizuálně atraktivnější výsledky. Pomocí této metody může aplikace dosáhnout lepší konzistence při aplikaci barevných palet na obrazy, což usnadňuje shodu barev s požadovanými styly.

Optimization Challenge: LAB Computation

Spolupracovat sLABbarevný model vyžaduje výrazně více výpočetních zdrojů než práce sRGBTo proto, že v LAB je každá barva reprezentována nejen třemi kanály (RGB), ale také zahrnuje další výpočty k získání barevných souřadnic a jejich vzdáleností.

Abychom tento proces optimalizovali, zavedli jsmepalette cachingaby se zabránilo nadbytečným výpočtům. Palety vytvořené vLABrežimy jsou uloženy v paměti, a pokud se obraz nezměnil, systém nebude znovu vypočítat paletu.To pomáhá výrazně urychlit proces, zejména při použití palet na více obrázků, tím, že znovu použijete předběžně vypočtené data, aniž byste museli provádět nákladné výpočty znovu.

// 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
  };
};

Toto vylepšení pomáhá urychlit výkon aplikace, zejména při opakovaném zpracování několika podobných obrazů.

Palette Extraction and Application

Paletová extrakce je proces identifikace nejcharakterističtějších a nejživějších barev z obrazu, který pak lze použít k vytvoření filtrů nebo vizuálních stylů.frequencyBarvy a jejich výskytluminanceUjistěte se, že paleta nezahrnuje barvy, které jsou příliš podobné.

Hlavní mechanismus pro extrakci palety je následující:

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;
  };
};

Tento kód se používá k extrahování palety z obrazu, kde jsou barvy filtrovány podle jasu a rozdílu.

Přidali jsme automatickou generování jmen pro extrahované palety, abychom se vyhnuli překrývání uživatelského rozhraní zbytečnými tlačítky.

Custom Palettes

Jedním z nástrojů v naší aplikaci je vlastní paletový blok. Tato funkce umožňuje uživatelům vytvářet palety vhodné pro různé projekty, které poskytují plnou kontrolu nad barvami.

Proces začíná výběrem barvy přesHexColorPickerUživatel si může vybrat barvu z obrázku nebo z externího zdroje. Každá vybraná barva je automaticky přidána do uživatelova barevného seznamu, ze kterého je vytvořena paleta.

Po výběru několika barev může být paleta uložena s vlastním názvem. Později může být aplikována na nahraný obrázek k dosažení specifického vizuálního stylu.

Color Neutralization with Color Palettes

Color neutralizationDůležitým aspektem jecolor gradingHraje důležitou roli vfilm post-productionJedná se o proces, při kterém jednotlivé scény nebo snímky, pořízené za různých světelných podmínek, mohou být přivedeny do společného barevného tónu.Toto se obvykle provádí, aby se zajistil jednotný vizuální styl v celém filmu a aby scény byly vizuálně konzistentní, bez ohledu na podmínky natáčení.

Prozkoumejme, jak jsou palety aplikovány prostřednictvím dvou ikonických příkladů kinematografického vizuálního jazyka.

Palettes in the Movie “The Matrix”

Filmové“The Matrix”(1999), režírovaný bratry Wachowski, se stal ikonickým díky svému jedinečnému vizuálnímu stylu, který zahrnuje specifickou zelenou barevnou paletu. Tento barevný styl byl navržen tak, aby vizualizoval digitální realitu, ve které hlavní postavy existují.

Main ColorsZelená, černá a kovová

Palette Application:

se
• Extrahování zelených tónů: Chcete-li vytvořit paletu ve stylu Matrix, můžeme ze snímku extrahovat všechny odstíny zelené, černé a šedé. Použitím těchto tónů můžeme dosáhnout efektu „digitální reality“ charakteristického pro film.
se
• Aplikace na nové obrázky: Při aplikaci této palety se barvy obrazu změní a nahradí všechny pixely těmi, které jsou nejblíže vybraným barvám z palety, čímž se vytvoří požadovaný „kodovaný“ styl.
se

Palettes in Wes Anderson’s Works

Wes Andersonje známý svými živými, barevnými a symetrickými vizuálními řešeními.“The Grand Budapest Hotel”,se“Moonrise Kingdom”,a“The French Dispatch”,Všechny mají svůj podpisový styl, který se vyznačuje bohatými pastelovými barvami a pečlivě vybranými paletami.Jeden z klíčových prvků jeho filmů je harmonie a kontrast v barevném designu.

Main Colors: Pastelové odstíny, jasné kontrastní barvy, červená, žlutá, tyrkysová, zelená.

Palette Application:

se
• Extrakce pastelových odstínů: Ve filmech Wese Andersona se často používají pastelové barvy. Například světle růžové, modré a oranžové tóny. Můžeme tyto barvy extrahovat a aplikovat je na nový obraz, abychom vytvořili efekt podobný vintage fotografii nebo zdůraznili stylizovanou atmosféru. V naší aplikaci můžeme extrahovat paletu z obrazu filtrováním barev podle jasu a kontrastu, přičemž zachováváme pouze měkké pastelové odstíny.
se
• Aplikace na nové obrázky: Po extrahování palety lze paletu aplikovat na jakýkoliv obrázek, což mu dává charakteristický vzhled připomínající díla Andersona, s jasnými, ale harmonickými barvami.
se

Nyní, když můžeme extrahovat palety z referencí, je čas na nějaké experimentování!

Vzhledem k tomu, že používáme palety s omezeným počtem barev a spouštíme naši aplikaci v prohlížeči (což znamená, že používáme omezené výpočetní zdroje), neměli bychom očekávat vynikající výsledky.

Zde jsou příklady zpracovaných snímků v režimech RGB a LAB.

Extrahování a aplikace palet je rozhodujícím aspektem vytváření vizuálních stylů, jako je styl „Matrix“, Wes Anderson nebo Denis Villeneuve. Naše aplikace poskytuje vizuální nástroj pro práci s barvami, který umožňuje uživatelům extrahovat palety, aplikovat je a vytvářet jedinečné vizuální efekty.

V závěrečné části se zaměříme na přizpůsobení a optimalizaci barev.