මෙම වෙබ් යෙදුම ඕනෑම ඡායාරූපයක් Retro Fever Dream බවට පත් කරයි - Photoshop අවශ්ය නොවේ

අපගේපසුගිය Tutorial, අපි අපේ යෙදුම සබැඳි හා පැලට් සමග වැඩ කිරීමට ඉගෙන ගත්තා.දැන්, වර්ණ හා දර්ශන බලපෑම් සඳහා වඩාත් විකල්ප එකතු කිරීමට කාලයයි.

මීට අමතරව, අපි වර්ණ ආකෘතිය, HSV, RGB හා LAB වඩා වෙනස් ආකාරයෙන් වර්ණ සමග ක්රියා කරයි. මෙම ආකෘතිය වර්ණ වර්ණ, saturation, හා ආලෝකය වැනි විශේෂාංග ක්රියාත්මක කිරීමට පහසු කරයි, එය විශේෂයෙන්ම වර්ණ ආකෘති කිරීම සඳහා ප්රයෝජනවත් කරයි.

සම්පූර්ණ ව් යාපෘති කේතය ලබා ගත හැකිය atමේ link එක

Adjusting the Number of Colors in the Extracted Palette

අපි දැනටමත් දැකලා තියෙනවා පලාතය සීමා කිරීමෙන් පින්තූරයේ පෙනුම වෙනස් කළ හැකි ආකාරය.

වඩාත් මෘදු ෆිල්ටර් සහ ඡායාරූප සැකසුම් සඳහා, අපි ඡායාරූපයෙන් ලබා ගන්නා වර්ණ සංඛ්යාව පාලනය කිරීමට හැකියාව එකතු කරනු ඇත. දැන්, ඔබ ඡායාරූපයේ වර්ණ ගණන කොපමණ ප්රදර්ශනය කර ඇති බව නිශ්චිතව ස්ථාපනය කළ හැකි අතර, දර්ශන බලපෑම් පිළිබඳ වඩාත් හොඳ පාලනය කිරීමට ඉඩ ඇත. මෙම විශේෂාංගය ෆිල්ටර් නිර්මාණය කිරීම සඳහා පැලට් සමග වැඩ කරන විට විශේෂයෙන් ප්රයෝජනවත් වන අතර වර්ණ සංඛ්යාව වෙනස් කිරීම විවිධ නිර්මාණ කාර්යයන් සඳහා අදාළ වේ.

මෙම යෙදුම දැන් පින්තූරයෙන් ලබා ගත හැකි වර්ණ ගණන (10 සිට 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>

අපි සෝ සසකීගේ පුදුමාකාර ඡායාරූපය සමඟ අත්හදා බැලීමට යමුටෝකියෝ ටෝකියෝඑය විවිධ වර්ණ හා වර්ණවල ප්රමාණයක් ඇත, එය අපගේ පර්යේෂණ සඳහා පරිපූර්ණ මාතෘකාව බවට පත් කරයි.

පහත දැක්වෙන්නේ ඔබ විවිධ ප්රමාණයේ පලාත සමඟ පින්තූරයට පෙනෙන ආකාරයයි.

Filter Intensity Slider

ෆයිල්ටර් ක්රියාවලිය වඩාත් මෘදුකාංගයක් කිරීමට, අපි පින්තූරයට පැලට් යෙදුම ශක්තිය පාලනය කිරීම සඳහා ස්ලිඩර් එකතු කරනු ඇත. මෙම ස්ලිඩර් ඔබ මූලික පින්තූර හා පැලට් අතර සංසන්දනය සකස් කිරීමට ඉඩ ඇත.

අවශ් ය ෆයිල්ටර් ආකෘතිය තෝරාගෙන “Apply 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?

ශක්තිය 100% දක්වා ස්ථාපනය කරන විට, තෝරාගත් පැල්ටුවේ වර්ණ භාවිතා කිරීමෙන් රූපය සම්පූර්ණයෙන්ම පරිවර්තනය කරනු ඇත. ශක්තිය වටිනාකම අඩු වේ නම්, පැල්ටුවේ පින්තූරයට ඇති බලපෑම අඩු වන අතර, ඔබ ප්රථම වර්ණවලට වඩා වැඩි ප්රමාණයක් තබාගත හැකිය.

HSV Color Model

HSV (Hue, Saturation, Value) යනු වඩාත් ජනප්රිය වර්ණ ආකෘති වලින් එකක් වන අතර, නිතරම එහි වර්ණ, saturation සහ ආලෝකය අනුව වර්ණ ප්රදර්ශනය කිරීම සඳහා භාවිතා වේ.

නුඹ
• වර්ණ ( වර්ණ): මෙම ප්රධාන වර්ණ (උදාහරණයක් ලෙස රතු, රතු, නිල්, ආදිය) 0 සිට 360 දක්වා මට්ටමක ප්රමාණවත් වේ.
නුඹ
• වර්ණයේ රතු ප් රමාණයෙන් බලපානු ලැබේ: 100% සම්පූර්ණයෙන්ම රතු වර්ණයක් සහ 0% රතු වර්ණයකි.
නුඹ
• අගය (දර්ශනය): මෙම වර්ණය කොපමණ ආලෝකයදැයි ප්රදර්ශනය කරයි. 0% අගය කළු ලබා දෙයි, නමුත් 100% වර්ණය වඩාත් ආලෝකය ප්රදර්ශනය කරයි.
නුඹ

Differences from RGB and LAB:

නුඹ
• රතු, රතු, සහ නිල් පාට උෂ්ණත්වය මත පදනම්ව වර්ණ එකතු කරන RGB වෙනුවට, HSV මිනිස් දර්ශන හැඟීම මත පදනම්ව වේ.
නුඹ
• විවිධ ආලෝකකරණ කොන්දේසි තුළ නිශ්චිත වර්ණ ප්රදර්ශනය සඳහා වඩා සංකීර්ණ සංඛ්යාත ආකෘතිය භාවිතා කරන LAB වලට සමානව, HSV වඩාත් සංවේදී හා පරිශීලක මිත්රයකි.
නුඹ

RGB to 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];
}

පහත දැක්වෙන්නේ එකම ආකෘතියක පින්තූර උදාහරණ, නමුත් වෙනස් වර්ණ ආකෘති.

Contrast Slider

කොන්දේසි සකස් කිරීමෙන් ඔබට මෙම වෙනස වැඩි කිරීමට හෝ අඩු කිරීමට ඉඩ සලසනු ඇත. කොන්දේසි ඉහළ නම්, ආලෝකය සහ අඳුරු ප්රදේශ වඩාත් පැහැදිලි වනු ඇත.

How does contrast adjustment work?

කොන්දේසි වැඩි විට, පින්තූරයේ අඳුරු ප්රදේශ තවදුරටත් අඳුරු වනු ඇත, හා ආලෝකය ප්රදේශ තවදුරටත් ආලෝකය.

වෙනස් කිරීම සඳහා උදාහරණ කේතය:

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:

මෙම කොන්දේසි සෑම වර්ණ කොටසක් (රතු, රතු, සහ නිල්) මත ක්රියාත්මක වන අතර, කොන්දේසි මට්ටම මත පදනම්ව ඔවුන්ගේ ආලෝකය අනුකූල කරයි.

Noise Slider

ටිකක් විනෝද වීමට කැමති අය සඳහා, අපි ශබ්ද ස්ලයිඩර් එකතු කර ඇත. ඡායාරූපයට ශබ්ද එකතු කිරීම vintage ඡායාරූප බලපෑමක් නිර්මාණය කිරීම හෝ ඡායාරූපය වඩාත් "ජීවී" හැඟීමක් ඇති කිරීම සඳහා උපකාරී වේ.

How does the noise work?

ශබ්ද ස්ලයිඩර් ඔබට පින්තූරයේ සෑම පින්තූරයකම වර්ණයට අදාළ අසාමාන්ය වෙනස්කම් ප්රමාණය පාලනය කිරීමට ඉඩ සලසයි.විශාල ශබ්ද වටිනාකම වැඩි නම්, පින්තූරයට අදාළ අසාමාන්ය වෙනස්කම් ප්රමාණය වැඩි වේ.

පින්තූරයට ශබ්දයක් එකතු කරන විට, සෑම පින්තූරයකම RGB වටිනාකම සඳහා කුඩා, අසාමාන්ය වෙනස්කම් ඇතුළත් කර ඇති අතර, මෙම බලපෑම පුළුල් හෝ පැහැදිලි විය හැක, පින්තූරයට අදාළ ශබ්ද ප් රමාණයට අනුව.

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:

නිශ්චිත ප්රමාණයක් ඇතුළත සෑම පික්සලයකට අසාමාන්ය වටිනාකමක් එකතු වේ.මේක අසාමාන්ය වර්ණ වෙනස් කිරීමේ බලපෑමක් නිර්මාණය කරයි, පින්තූරයට ශබ්දයක් හෝ හිරිහැර පෙනුමක් ලබා දෙයි.අපේ අවස්ථාවලදී, අපි සැබෑ ෆිල්ම් බිත්තරය හෝ හිරිහැරයට කිසිදු සම්බන්ධයක් නොමැති අතර, අපගේ අවස්ථාවලදී, සැබෑ ෆිල්ම් බිත්තරය හෝ හිරිහැරයට කිසිදු සම්බන්ධයක් නැත.ඒත්, පළමු ඩිජිටල් ෆයිල්ටර් (උදාහරණයක් වශයෙන් මුල් ජංගම දුරකථනවල භාවිතා කරන අය වැනිSony Ericsson W810 ප් රදර්ශනය) එකම මූලධර්මය මත ක් රියාත්මක විය.

ශබ්ද ප්රමාණය පාලනය කිරීමෙන්, පරිශීලකයින් ඡායාරූපයේ විවිධ නිර්මාණශීලි බලපෑම් ලබා ගැනීමට විවිධ මට්ටම් සමඟ අත්හදා බැලීමට හෝ අසාර්ථකතා සකසා ගත හැකිය.

සහ ඇත්ත වශයෙන්ම, අපි සියලු ෆයිල්ටර් පිරිසිදු කිරීම සහ මුල් රූපයට ආපසු යාම සඳහා Reset Settings බොත්තම එකතු කර ඇත.

අපගේ ලිපි තුළදී, අපි වර්ණ නිවැරදි කිරීම පිළිබඳ මූලික කරුණු සොයාගෙන ඇති අතර, එය භාවිතා කිරීම සඳහා විවිධ මෙවලම් සහ තාක්ෂණයන් පරීක්ෂා කර ඇත.We have examined how to extract and adjust color palettes, the effects of contrast, saturation, and noise, and how to work with different color models - RGB, LAB, and HSV.

වර්ණ නිවැරදි කිරීම ඡායාරූප පරිශීලකරණයේ ප්රධාන අංගයක් වන අතර එය අපට දර්ශනීය හැඟීම වැඩි දියුණු කිරීමට ඉඩ සලසයි, සමහර අමුද්රව්යයන් අවබෝධ කර ගැනීම සහ වර්ණ අතර හවුල්භාවය සාර්ථක කර ගැනීම.අපි පෙන්නුම් කර ඇති අතර, පැල්ටියේ වර්ණ සංඛ්යාව අනුකූල කිරීම හෝ කොන්දේසි සැකසුම් වෙනස් කිරීමෙන් ඡායාරූපය සම්පූර්ණයෙන්ම වෙනස් කළ හැකි අතර එය වඩාත් ප්රකාශශීලී හා දෛනික වේ.

වර්ණ සහ සංසන්දනය අනුපාතය පින්තූරයේ පෙනුම බලපාන පමණක් නොව, එය හැඟෙන්නේ කෙසේද යන්නටත් බලපාන බව සැලකිලිමත් කිරීම වැදගත් වේ.