יישום אינטרנט זה הופך כל תמונה לחלום רטרו חום - אין Photoshop נדרש

בתוך שלנוTutorial הקודם, למדנו את היישום שלנו לעבוד עם הפרוייקטים והפלטות.כעת הגיע הזמן להוסיף אפשרויות נוספות עבור התאמה מעולה של צבע ואפקטים חזותיים.

בנוסף, אנו נחקור מודל צבע חדש, HSV, אשר עובד עם צבעים באופן שונה מאשר RGB ו- LAB. מודל זה מקל על מניפולציה של מאפיינים כגון צבע, רוויות וקלות, מה שהופך אותו שימושי במיוחד עבור התאמת צבעים בתמונות.

קוד הפרויקט המלא זמין בהקישור הזה→

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

כדי להפוך את תהליך הפילטר גמיש יותר, אנו נוסיף מנוף כדי לשלוט באינטנסיביות של יישום הפאלטה לתמונה.

פשוט בחר את עוצמת המסנן הרצויה ולחץ על "יישום מסנן".

<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) הוא אחד המודלים הצבעוניים הפופולריים ביותר, אשר משמשים לעתים קרובות לייצג צבע במונחים של צבע, רוויות ובהירות.

→
• צבע (צבע): זה מייצג את הצבע העיקרי (כגון אדום, ירוק, כחול, וכו '), נמדד בדרגות מ 0 עד 360.
→
• סיבולת: זה מציין את עוצמת הצבע.סיבולת מושפעת מהכמות של אפור בצבע: 100% הוא צבע רווי לחלוטין, ו 0% הוא אפור.
→
• ערך (בהירות): זה מייצג כמה בהיר הצבע הוא. ערך של 0% נותן שחור, בעוד 100% הוא הגרסה בהירה ביותר של הצבע.
→

Differences from RGB and LAB• :

→
• שלא כמו RGB, שבו צבעים משולבים בהתבסס על האינטנסיביות של אדום, ירוק וכחול, HSV מבוסס על תפיסה חזותית אנושית.
→
• בהשוואה ל-LAB, אשר משתמש במודל מתמטי מורכב יותר לייצוג מדויק של צבעים בתנאים שונים של תאורה, HSV הוא אינטואיטיבי יותר ויעיל יותר לשימוש.
→

דוגמה לקוד כדי להמיר RGB ל 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

עבור אלה שרוצים ליהנות קצת, הוספנו מנוף רעש.הוספת רעש לתמונה מסייעת ליצור אפקט צילום עתיק או לגרום לתמונה להרגיש יותר "חיה".אפקט זה משמש כדי להסתיר חסרונות או להוסיף מגע אמנותי לתמונה.

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• :

ערך אקראי מוסיף לכל פיקסל בטווח מסוים. זה יוצר את ההשפעה של שינויים אקראיים בצבע, נותן לתמונה מראה רעש או זרע. במקרה שלנו, אנחנו פשוט סימולציה של הפרעות, אשר אין שום קשר לזרם סרט אמיתי או רעש.סוני אריקסון W810) עבד על אותו עיקרון.

על ידי שליטה על כמות הרעש, משתמשים יכולים להתנסות ברמות אינטנסיביות שונות כדי להשיג אפקטים יצירתיים שונים או לדמות חוסר שלמות בתמונה.

וכמובן, הוספנו לחצן Reset Settings כדי לנקות את כל המסננים ולחזור לתמונה המקורית.

במהלך המאמרים שלנו, חקרנו את היסודות של תיקון צבעים וחקרנו כלים וטכניקות שונות ליישם אותו.הבדקנו כיצד לחלץ ולהתאים פלטות צבעים, את ההשפעות של ניגודיות, רוויות ורעש, וכיצד לעבוד עם מודלים צבעים שונים - RGB, LAB, ו- HSV.

תיקון צבעים הוא היבט קריטי של עיבוד התמונה, המאפשר לנו לשפר את התפיסה החזותית, להדגיש אלמנטים מסוימים ולהשיג הרמוניה בין צבעים.

חשוב לציין כי התאמות צבע וניגודות לא רק להשפיע על המראה של תמונה אלא גם להשפיע על האופן שבו היא נתפסת.