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

V v první části 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ů. V této druhé části se ponoříme do pokročilejších konceptů, jako jsou rozdíly mezi barevnými modely RGB a LAB, stejně jako proces extrakce palet z obrázků a jejich použití k vytvoření jedinečných vizuálních stylů.

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.

RGB model

Dva nejoblíbenější barevné modely - RGB a LAB - se zásadně liší v tom, jak reprezentují a zpracovávají barvy.

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

RGB Klíčové vlastnosti:

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

Výrobní řád

Model LAB představuje barvu ve třech kanálech: L (světlost), A (barevné spektrum od zelené po červenou) a B (barevné spektrum od modré po žlutou).

LAB Klíčové vlastnosti:

• Kanál L ovládá jas, což umožňuje úpravy jasu bez změny barvy.

• Kanály A a B popisují barevné odstíny, což umožňuje přesnější ovládání širokého spektra barev.

• 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é úpravy barev bez ovlivnění jiných parametrů obrazu.

  
  

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

Algoritmus výpočtu barev a použití LAB

Pro výpočet a aplikaci barev naše aplikace využívá knihovnu colorjs.io, 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í obrázků.

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ě.

Jak to funguje v praxi:

• LAB Mode: barevný prostor LAB je navržen tak, aby byl v souladu s lidským viděním 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ímáním přesným způsobem, což znamená, že dává přednost tomu, jak vnímáme barevné rozdíly, a nejen matematické rozdíly RGB.

• RGB Mode: barevný prostor RGB jednoduše reprezentuje barvu intenzitou červeného, zeleného, modrého a modrého světla.

  V profesionálním hodnocení barev a zpracování obrazu je shoda barev založená na LAB velmi výhodná, protože napodobuje, jak lidské oko vnímá barvy, což umožňuje přirozenější a vizuálně atraktivnější výsledky.

  
  

  

  Optimizační výzva: LAB Computation

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

  
  

  Pro optimalizaci tohoto procesu jsme zavedli paletové vyrovnání, abychom se vyhnuli nadbytečným výpočtům. Palety vytvořené v režimu LAB jsou uloženy v paměti a pokud se obraz nezměnil, systém paletu nepřepočítá.

  // 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 obrázků.

  Výroba palet a aplikace

  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ů. extrahujeme top 10 barev (zajišťující rozmanitost) pomocí algoritmu, který bere v úvahu jak frekvenci barevného výskytu, tak jeho luminance, což zajišťuje, že paleta nezahrnuje barvy, které jsou příliš podobné.

  
  

  Hlavní mechanismus pro extrahování 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 obrázku, 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.

  Vlastní palety

  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 prostřednictvím rozhraní HexColorPicker.Už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 lze paletu uložit pomocí vlastního názvu.Následně ji lze aplikovat na nahraný obrázek, aby bylo dosaženo určitého vizuálního stylu.

  
  

  
  

  

  Neutralizace barev s barevnými paletami

  Neutralizace barev s barevnými paletami

  Neutralizace barev je důležitým aspektem hodnocení barev a hraje důležitou roli v postprodukci filmu.Je to 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.

  
  

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

  Palety ve filmu „The Matrix“

  Film The Matrix (1999), režie Wachowskiho, 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í.

  
  

  Hlavní barvy: zelená, černá, kovová.

  Aplikace palety:

  • Extrakce 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é. Aplikací těchto tónů můžeme dosáhnout efektu „digitální reality“ charakteristického pro film.

    V naší aplikaci to lze provést filtrováním podle jasnosti a vzdálenosti, přičemž se zachovají pouze zelené odstíny a ignorují ostatní.

  • Aplikace na nové obrázky: Při aplikaci této palety se barvy obrazu změní a nahradí všechny pixely těmi nejbli

    

    Palety v dílech Wesa Andersona

    Wes Anderson je známý svými živými, barevnými a symetrickými vizuálními řešeními. Jeho díla jako „The Grand Budapest Hotel“, „Moonrise Kingdom“, a „The French Dispatch“, mají svůj podpisový styl, který se vyznačuje bohatými pastelovými barvami a pečlivě vybranými paletami.

    
    

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

    Aplikace palety:

    • Extrakce pastelových odstínů: Ve filmech Wese Andersona se často používají pastelové barvy. Například světlé růžové, modré a oranžové odstí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ž se zachovají pouze měkké pastelové odstíny.

    • Aplikace na nové obrázky: Po extrahování palety lze paletu aplikovat na jakýkoli obraz, což mu dává charakter

      

      
      

      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.

      
      

      

      
      

      

      
      

      Extrakce a aplikace palet je rozhodujícím aspektem při 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 jemné nastavení a optimalizaci barev.