W naszymPoprzedni Tutorial, nauczyliśmy naszą aplikację pracy z referencjami i paletami. Teraz nadszedł czas, aby dodać więcej opcji do subtelnego dostosowywania kolorów i efektów wizualnych.
Wprowadzimy kilka nowych narzędzi, które pozwalają na bardziej elastyczną manipulację obrazem. Ponadto będziemy badać nowy model kolorów, HSV, który działa z kolorami inaczej niż RGB i LAB. Ten model ułatwia manipulowanie cechami takimi jak odcień, nasycenie i lekkość, co czyni go szczególnie przydatnym do dostosowywania kolorów w obrazach.
Pełny kod projektu dostępny jest naTen link...
Ten linkAdjusting the Number of Colors in the Extracted Palette
Widzieliśmy już, jak ograniczenie palety może zmienić wygląd obrazu.
Aby uzyskać bardziej elastyczne ustawienia filtrów i przetwarzania obrazu, dodamy możliwość sterowania liczbą kolorów pobranych z obrazu. Teraz możesz precyzyjnie ustawić, ile kolorów jest podkreślonych w obrazie, co pozwala na lepszą kontrolę nad efektami wizualnymi. ta funkcja jest szczególnie przydatna podczas pracy z paletami do tworzenia filtrów, ponieważ zmiana liczby kolorów ma zastosowanie do szerokiego zakresu zadań projektowych.
Aplikacja ma teraz przełącznik, który pozwala wybrać liczbę kolorów wyodrębnionych z obrazu (od 10 do 20).
<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>
Będziemy eksperymentować z niesamowitą fotografią So SasakiWygraj TokioPosiada szeroką gamę kolorów i odcieni, co czyni go idealnym przedmiotem do naszej eksploracji.
Poniżej możesz porównać, jak wygląda obraz z paletą różnych rozmiarów.
Filter Intensity Slider
Aby proces filtrowania stał się bardziej elastyczny, dodamy przełącznik do sterowania intensywnością aplikacji palety do obrazu.
Wystarczy wybrać pożądaną intensywność filtra i kliknąć „Zastosuj filtr”.
<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?
Gdy intensywność zostanie ustawiona na 100%, obraz zostanie całkowicie przekształcony przy użyciu kolorów z wybranej palety.Im niższa wartość intensywności, tym mniejszy wpływ paleta ma na obraz, co pozwala zachować więcej oryginalnych kolorów.
HSV Color Model
HSV (Hue, Saturation, Value) to jeden z najpopularniejszych modeli kolorów, często używany do reprezentowania koloru pod względem odcienia, nasycenia i jasności.
- Odcień (kolor): reprezentuje kolor podstawowy (np. czerwony, zielony, niebieski itp.), mierzony w stopniach od 0 do 360.
- Na nasycenie wpływa ilość szarości w kolorze: 100% jest całkowicie nasyconym kolorem, a 0% jest szarym.
- Wartość (jaśniejsza): oznacza to, jak jasny jest kolor. Wartość 0% daje czarny, podczas gdy 100% jest najjaśniejszą wersją koloru.
Differences from RGB and LAB• :
- W przeciwieństwie do RGB, gdzie kolory są łączone na podstawie intensywności czerwonego, zielonego i niebieskiego, HSV opiera się na ludzkiej percepcji wizualnej.
- W porównaniu z LAB, który wykorzystuje bardziej złożony model matematyczny do precyzyjnego przedstawienia kolorów w różnych warunkach oświetlenia, HSV jest bardziej intuicyjny i przyjazny dla użytkownika.
Przykładowy kod do konwersji 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];
}
Poniżej znajdują się przykłady obrazów w tej samej palecie, ale w różnych modelach kolorystycznych.
Contrast Slider
Kontrast odnosi się do różnicy między najjaśniejszymi i najciemniejszymi punktami na zdjęciu. Dostosowanie kontrastu pozwala zwiększyć lub zmniejszyć tę różnicę.Im wyższy kontrast, tym bardziej wyraźne będą jasne i ciemne obszary.
How does contrast adjustment work?
Gdy kontrast jest zwiększony, ciemne obszary obrazu stają się jeszcze ciemniejsze, a obszary światła stają się jeszcze jaśniejsze.
Przykładowy kod do zmiany 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• :
Algorytm kontrastu wykorzystuje współczynnik, który zależy od bieżącej wartości kontrastu. Ten współczynnik jest stosowany do każdego składnika koloru (czerwony, zielony i niebieski), dostosowując ich jasność w zależności od poziomu kontrastu.
Noise Slider
Dodawanie hałasu do obrazu pomaga stworzyć efekt vintage fotograficzny lub sprawia, że obraz czuje się bardziej „żywy”.
How does the noise work?
Przeglądarka hałasu pozwala kontrolować ilość przypadkowych zmian zastosowanych do koloru każdego piksela w obrazie.Im wyższa wartość hałasu, tym większa ilość przypadkowych zmian zastosowanych do obrazu.
Gdy do obrazu dodaje się hałas, do wartości RGB każdego piksela wprowadzane są małe, losowe odmiany, co powoduje efekt ziarnisty. Ten efekt może być subtelny lub wyraźny, w zależności od ilości zastosowanego hałasu.
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• :
Wartość losowa jest dodawana do każdego piksela w określonym zakresie. Stwarza to efekt losowych zmian koloru, nadając obrazowi hałaśliwy lub ziarnisty wygląd. W naszym przypadku po prostu symulujemy zniekształcenia, które nie mają nic wspólnego z prawdziwym ziarnem filmu lub hałasem.Nowy Sony Ericsson W810) działał na tej samej zasadzie.
Kontrolując ilość hałasu, użytkownicy mogą eksperymentować z różnymi poziomami intensywności, aby osiągnąć różne efekty twórcze lub symulować niedoskonałości na zdjęciu.
I oczywiście dodaliśmy przycisk Resetuj ustawienia, aby wyczyścić wszystkie filtry i powrócić do oryginalnego obrazu.
Przez cały nasz artykuł zagłębiliśmy się w podstawy korekty kolorów i zbadaliśmy różne narzędzia i techniki do jej zastosowania.Badaliśmy, jak wyodrębnić i dostosować palety kolorów, efekty kontrastu, nasycenia i hałasu oraz jak pracować z różnymi modelami kolorów – RGB, LAB i HSV.
Korekcja kolorów jest kluczowym aspektem przetwarzania obrazu, umożliwiającym poprawę percepcji wizualnej, podkreślenie pewnych elementów i osiągnięcie harmonii między kolorami.Demonstrowaliśmy, jak dostosowanie liczby kolorów w palecie lub modyfikacja ustawień kontrastu może całkowicie przekształcić obraz, czyniąc go bardziej ekspresyjnym i dynamicznym.
Ważne jest, aby pamiętać, że korekty kolorów i kontrastu nie tylko wpływają na wygląd obrazu, ale także wpływają na to, jak jest postrzegany.
