Táto webová aplikácia premieňa akýkoľvek obraz na retro horúčku - nie je potrebný žiadny Photoshop

V našejPredchádzajúci tutorial, naučili sme našu aplikáciu pracovať s referenciami a paletami. Teraz je čas pridať ďalšie možnosti pre jemné nastavenie farieb a vizuálnych efektov.

Okrem toho budeme skúmať nový farebný model, HSV, ktorý pracuje s farbami inak ako RGB a LAB. Tento model uľahčuje manipuláciu s charakteristikami, ako je odtieň, saturácia a ľahkosť, čo je obzvlášť užitočné pre úpravu farieb v obrázkoch. Táto inovácia otvorí nové kreatívne možnosti a príležitosti na experimentovanie.

Kompletný kód projektu je k dispozícii nathis link→

Adjusting the Number of Colors in the Extracted Palette

Už sme videli, ako obmedzenie palety môže zmeniť vzhľad obrazu.

Pre flexibilnejšie nastavenia filtrov a spracovania obrazu pridáme možnosť ovládať počet farieb extrahovaných z obrazu. Teraz môžete presne nastaviť, koľko farieb je zvýraznených v obraze, čo umožňuje lepšiu kontrolu nad vizuálnymi efektmi. Táto funkcia je obzvlášť užitočná pri práci s paletami na vytvorenie filtrov, pretože zmena počtu farieb sa vzťahuje na širokú škálu úloh dizajnu.

Aplikácia teraz obsahuje posuvník, ktorý vám umožní vybrať počet farieb extrahovaných z obrazu (od 10 do 20).Toto nastavenie ovplyvňuje výsledky filtrov a pomáha dosiahnuť lepšie vizuálne efekty.

<div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

Budeme experimentovať s ohromujúcou fotografiou So Sasaki preVoid TokioMá širokú škálu farieb a odtieňov, čo z neho robí ideálny predmet pre naše preskúmanie.

Nižšie si môžete porovnať, ako vyzerá obrázok s paletou rôznych veľkostí.

Filter Intensity Slider

Aby bol proces filtrovania flexibilnejší, pridáme posuvník na ovládanie intenzity aplikácie palety na obrázok. Tento posuvník vám umožňuje nastaviť rovnováhu medzi pôvodným obrázkom a paletou.

Jednoducho vyberte požadovanú intenzitu filtra a kliknite na "Aplikovať filter".

<div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

How does it work?

Keď je intenzita nastavená na 100%, obraz sa úplne premení pomocou farieb z vybranej palety.Čím nižšia je hodnota intenzity, tým menší vplyv má paleta na obraz, čo vám umožní zachovať viac pôvodných farieb.

HSV Color Model

HSV (Hue, saturation, Value) je jedným z najpopulárnejších farebných modelov, často používaných na reprezentáciu farby z hľadiska odtieňa, saturácie a jasu.

→
• Odtieň (farba): Toto predstavuje primárnu farbu (ako je červená, zelená, modrá atď.), Merané v stupňoch od 0 do 360.
→
• Nasýtenie je ovplyvnené množstvom šedej farby: 100% je plne nasýtená farba a 0% je šedá.
→
• Hodnota (jasnosť): Toto vyjadruje, aká jasná je farba. Hodnota 0% dáva čiernu, zatiaľ čo 100% je najjasnejšia verzia farby.
→

Differences from RGB and LAB: →

→
• Na rozdiel od RGB, kde sú farby kombinované na základe intenzity červenej, zelenej a modrej, HSV je založený na ľudskom vizuálnom vnímaní.
→
• V porovnaní s LAB, ktorý používa zložitejší matematický model pre presné farebné zobrazenie v rôznych svetelných podmienkach, je HSV intuitívnejší a užívateľsky príjemnejší.
→

Vzorový kód pre konverziu RGB na HSV:

function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}

Nižšie sú uvedené príklady obrázkov v rovnakej palete, ale v rôznych farebných modeloch.

Contrast Slider

Kontrast sa vzťahuje na rozdiel medzi najľahšími a najtemnejšími bodmi na obrázku. Nastavenie kontrastu vám umožňuje buď zvýšiť alebo znížiť tento rozdiel.Čím vyšší je kontrast, tým výraznejšie budú svetlé a tmavé oblasti.

How does contrast adjustment work?

Keď sa zvýši kontrast, tmavé oblasti obrazu sa stávajú ešte tmavšími a svetlé oblasti sa stávajú ešte jasnejšími.Tento efekt môže spraviť, že obraz vyzerá živšie a ostrejšie, čo zvyšuje jeho vizuálny vplyv.

Príklad kódu na zmenu kontrastu:

const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};

Algorithm Description: →

Tento faktor sa aplikuje na každú farebnú zložku (červenú, zelenú a modrú) a upravuje ich jas na základe úrovne kontrastu.

Noise Slider

Pre tých, ktorí chcú mať trochu zábavy, sme pridali posúvač hluku. Pridanie hluku do obrazu pomáha vytvoriť vintage fotografický efekt alebo aby sa obraz cítil viac „živý“. Tento efekt sa používa na skrytie nedokonalostí alebo pridávanie umeleckého dotyku k obrazu.

How does the noise work?

Hlukový posuvník umožňuje ovládať množstvo náhodných zmien aplikovaných na farbu každého pixelu v obraze.Čím vyššia je hodnota hluku, tým väčšie množstvo náhodných zmien aplikovaných na obrázok.

Keď sa do obrazu pridáva hluk, do hodnôt RGB každého pixelu sa vkladajú malé, náhodné variácie, čo vedie k zrnitému efektu.Tento efekt môže byť jemný alebo výrazný v závislosti od množstva použitého hluku.To môže pomôcť dať obrazu textúrovaný vzhľad alebo simulovať vzhľad starej fotografie s nízkym rozlíšením.

const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};

Algorithm Description: →

Na každý pixel v špecifikovanom rozsahu sa pridá náhodná hodnota. To vytvára efekt náhodných farebných zmien, čo dáva obrazu hlučný alebo zrnitý vzhľad. V našom prípade jednoducho simulujeme deformácie, ktoré nemajú žiadny vzťah k skutočnému filmovému zrnu alebo hluku.Príslušenstvo pre Sony Ericsson W810) pracoval na rovnakom princípe.

Ovládaním množstva hluku môžu používatelia experimentovať s rôznymi úrovňami intenzity, aby dosiahli rôzne kreatívne efekty alebo simulovali nedokonalosti vo fotografii.

A samozrejme, pridali sme tlačidlo Reset Settings na vymazanie všetkých filtrov a návrat k pôvodnému obrázku.

V priebehu našich článkov sme sa ponorili do základov farebnej korekcie a preskúmali rôzne nástroje a techniky na jej aplikáciu. preskúmali sme, ako extrahovať a upravovať farebné palety, účinky kontrastu, saturácie a hluku a ako pracovať s rôznymi farebnými modelmi - RGB, LAB a HSV.

Korekcia farieb je kľúčovým aspektom spracovania obrazu, ktorý nám umožňuje zlepšiť vizuálne vnímanie, zvýrazniť určité prvky a dosiahnuť harmóniu medzi farbami.Demonštrovali sme, ako prispôsobenie počtu farieb v palete alebo úprava nastavení kontrastu môže úplne premeniť obraz, čo ho robí výraznejším a dynamickejším.

Je dôležité poznamenať, že farebné a kontrastné úpravy ovplyvňujú nielen vzhľad obrazu, ale aj to, ako je vnímaný.