v , jsme prozkoumali základní principy korekce barev a vysvětlili důležitost práce s barvami při editaci obrázků. a barevných modelů, stejně jako proces z obrázků a pomocí nich vytvořit jedinečné vizuální styly. První část této série RGB LAB extracting palettes 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 - a - jsou zásadně odlišné v tom, jak reprezentují a zpracovávají barvy. RGB LAB Tyto Model používá , , , a Kaž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 Red Green Blue RGB Key Features: se se se se Používá aditivní proces, při kterém se barvy vytvářejí 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. The LAB Model Tyto Model představuje barvu ve třech kanálech: , , , a Tento model je blíže k tomu, jak lidé vnímají barvy a odpovídá jak barvě, tak jasu obrazu. LAB L (lightness) A (a color spectrum from green to red) B (a color spectrum from blue to yellow) LAB Key Features: se se se se L kaná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é nastavení barev bez ovlivnění jiných parametrů obrazu. 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á knihovna, 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ů. colorjs.io 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ě. nebo a . RGB LAB How This Works in Practice: se se 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. 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. V profesionálním hodnocení barev a zpracování obrazu, shodování barev na základě je 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. LAB Optimization Challenge: LAB Computation Spolupracovat s barevný model vyžaduje výrazně více výpočetních zdrojů než práce s To 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í. LAB RGB Abychom tento proces optimalizovali, zavedli jsme aby se zabránilo nadbytečným výpočtům. Palety vytvořené v rež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. palette caching LAB // 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ů. Barvy a jejich výskyt Ujistěte se, že paleta nezahrnuje barvy, které jsou příliš podobné. frequency luminance 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řes 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. HexColorPicker 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 Neutralizace barev pomocí barevných palet Důležitým aspektem je Hraje důležitou roli v Jedná 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í. Color neutralization color grading film post-production 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é (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í. “The Matrix” Zelená, černá a kovová Main Colors Palette Application: se se 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. 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. Palettes in Wes Anderson’s Works je známý svými živými, barevnými a symetrickými vizuálními řešeními. se a 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. Wes Anderson “The Grand Budapest Hotel”, “Moonrise Kingdom”, “The French Dispatch”, : Pastelové odstíny, jasné kontrastní barvy, červená, žlutá, tyrkysová, zelená. Main Colors Palette Application: se se 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. 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. 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.

Read My Stories

Tento zvuk je produkován v původním jazyce příběhu!

Příliš dlouho; Číst

Make resilience your competitive advantage

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

About Author

KOMENTÁŘE

ZAVĚŠIT ZNAČKY

TENTO ČLÁNEK BYL PŘEDSTAVEN V

Related Stories

Coinshift Launches csUSDL, Announces Strategic Partnerships

Coinshift Launches csUSDL, Announces Strategic Partnerships

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps