הנחיית תכנות עיבוד מעניינת למעצב-בקרת צבעים: 10 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:12

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

שלב 1: ידע בסיסי על צבע

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

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

למעט מצב RGB, יש מצב אחר שנקרא מצב CMYK. בדרך כלל הוא משולב עם הדפסה. בהדפסה יש גם שלושה צבעים מקוריים. עם זאת, הוא שונה משלושת צבעי האור המקוריים. הם אדומים, צהובים וכחולים בנפרד. ביניהם, C הוא עבור ציאן, M הוא עבור מגנטה, ו- Y הוא עבור צהוב. תיאורטית, רק על ידי CMY, אנו יכולים לערבב את רוב הצבעים. אבל בגלל טכניקת הייצור של חומר הגלם, אנחנו בקושי יכולים לגרום לרוויה של CMY להשיג 100%. אם נערבב את שלושת הצבעים הללו, לא נוכל להשיג צבע שחור כהה מספיק. אז יש תוספת K, שמיועדת לדיו הדפסה שחורה, כתוספת להדפסה.

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

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

לאחרונה, נרצה להציג מצב צבע נפוץ נוסף עבורך, HSB. ל- HSB אין מושג של "צבע מקורי". הוא מסווג לפי תחושות עיני האדם לצבעים. H מייצג גוון, S לרוויה, ו- B הוא בהירות.

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

הרוויה פירושה טוהר הצבע. טוהר גבוה יותר מביא צבע עז יותר. ערכו ב- PS נע בין 0 ל -100.

בהירות פירושה דרגת הבהירות של הצבע, הנע בין 0 ל -100.

בהשוואה למצב RGB, שלושת הממדים של HSB תואמים הרבה יותר את תחושת העיניים האנושיות לצבעים. תסתכל רק על ערכי HSB, אתה יכול לדמיין בדרך כלל איזה צבע זה.

באשר לאותו צבע, ערך הצבע במצב RGB הוא (255, 153, 71), בעוד ב- HSB הוא (27, 72, 100).

קשה לשפוט איך זה ייראה לאחר ערבוב שלושת הצבעים המקוריים יחד אם נסתכל רק על RGB. אבל HSB שונה. אתה רק צריך להכיר את גווני הצבעים כמו אדום הוא 0, כתום הוא 30 וצהוב הוא 60, אז תדע שזה יהיה צבע כתום רווי יחסית עם בהירות גבוהה וקצת קרוב לאדום כאשר H הוא 27.

לאחר מכן, נתאים את שלושת הממדים של שני המצבים ל- x, y, x בחלל ונצייר קוב מעצב לביצוע השוואה.

RGB ו- HSB הן פשוט שיטות שונות לתיאור צבעים. אנו יכולים להתייחס לכתובת כמטאפורה. נניח שאם אתה רוצה לספר לאנשים אחרים את עמדת הארמון הקיסרי, אתה יכול לומר שהוא נמצא במס '4 ברחוב ג'ינגשאן פרונט, אזור דונגצ'נג, בייג'ינג. או שאפשר לומר שזה נמצא ב -15 שניות, 55 דקות, 39 מעלות בקו הרוחב הצפוני ו -26 שניות, 23 דקות, 116 מעלות באורך המזרח. שיטת התיאור של HSB דומה לזו הראשונה. אם אתה מכיר את האזור היחסי, אתה יכול בדרך כלל לדעת את המיקום של הכתובת. RGB אמנם מדויק יותר, אך הוא מופשט מאוד.

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

במפורט לעיל, אנו מציגים שלושה מצבי צבע: RGB, HSB, CMYK. בתוכנית, עליך להתמקד רק בשני מצבים: RGB ו- HSB. יש להם יתרונות משלהם ויישומים משלהם בו זמנית. אם אתה מכיר את זה, זה יענה על דרישות העיצוב שלך ביותר.

שלב 2: סוג נתונים לאחסון צבעים

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

הזכרנו בעבר כי בעיבוד, למעט R, G, B, אנו יכולים לייעד אלפא (שקיפות) לצבעים. אבל אלפא אינו שייך למרכיב הצבע. קיומו הוא תערובת נוחה עם צבעים מאחור. מכאן שכדי שמחשבים יתארו סוג מסוים של צבע במדויק, עלינו לשלוט בשלושת המשתנים המרכזיים בלבד.

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

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

דוגמת קוד (9-1):

[cceN_cpp theme = "dawn"] int r, g, b;

הגדרת בטל () {

גודל (400, 400);

r = 255;

g = 0;

b = 0;

}

צייר חלל () {

רקע (0);

rectMode (CENTER);

מילוי (r, g, b);

rect (רוחב/2, גובה/2, 100, 100);

}

[/cceN_cpp]

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

אבל תמצא שזה יותר מדי בעייתי לעשות זאת מכיוון שהנתונים מחוברים זה לזה. אם יש לך רעיון לארוז אותם בשימוש, זה יהיה נוח יותר. לכן נוצר צבע.

דוגמא לקוד (9-2):

[cceN_cpp theme = "dawn"] צבע myColor;

הגדרת בטל () {

גודל (400, 400);

myColor = color (255, 0, 0);

}

צייר חלל () {

רקע (0);

rectMode (CENTER);

fill (myColor);

rect (רוחב/2, גובה/2, 100, 100);

} [/cceN_cpp]

אותו דבר עם סוגי נתונים כמו int, עלינו להשתמש "color myColor" בהתחלה כדי ליצור משתנים.

בהגדרה אנו משתמשים "myColor = color (255, 0, 0)" כדי להקצות ערך למשתנה myColor. בעוד שצבע הפונקציה (a, b, c) מייצג בצדק שקבוצת הנתונים הזו יצרה סוג צבע כדי לייבא משתנה myColor. אם אתה כותב "myColor = (255, 0, 0)", התוכנית תשתבש.

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

שלב 3: שיטת מילוי חופפת

שבץ, רקע יש את אותה שיטת חפיפה עם מילוי.

קרא ערך הערך של צבע

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

דוגמא לקוד (9-3):

[cceN_cpp theme = "dawn"] צבע myColor;

הגדרת בטל () {

myColor = color (255, 125, 0);

println (אדום (myColor));

println (ירוק (myColor));

println (כחול (myColor));

}

[/cceN_cpp]

תוצאה בקונסולה: 255, 125, 0.

הפונקציה אדום (), ירוק (), כחול () תחזור יחסית לערך הערוץ האדום, הירוק והכחול ב- myColor.

הקצאה הקסדצימלי

למעט שימוש במספרים עשרוניים להצגת RGB, נוכל גם להשתמש בהקסדצימלי. דצימלי פירושו להגדיל 1 כאשר הוא פוגש 10. בעוד שהקסדצימלי פירושו להגדיל 1 כאשר הוא נפגש עם 16. יחסיו היחסים עם עשרוני הם: "0 עד 9" תואם את "0 ל- 9 "," A עד F "תואמים ל-" 10 עד 15 ".

התמונה למטה היא המחשה של שיטת ההמרה.

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

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

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

דוגמא לקוד (9-4):

[cceN_cpp theme = "dawn"] צבע backColor, colorA, colorB, colorC;

הגדרת בטל () {

גודל (400, 400);

rectMode (CENTER);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

צייר חלל () {

רקע (backColor);

מילוי (colorA);

rect (200, 200, 90, 300);

מילוי (colorB);

rect (100, 200, 90, 300);

מילוי (colorC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

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

הוסף "#" לפני ערך הצבע ההקסדצימלי, ולאחר מכן תוכל להקצות ערך לצבע המשתנה ישירות.

שלב 4: מצב HSB

לצד מצב RGB, הבא נדבר על מצב HSB. להלן מוצגת שיטת הקצאת הערכים במצב HSB.

דוגמה לקוד (9-5):

[cceN_cpp theme = "dawn"] הגדרת חלל () {

גודל (400, 400);

colorMode (HSB);

}

צייר חלל () {

רקע (0);

rectMode (CENTER);

עבור (int i = 0; i <20; i ++) {

color col = color (i/20.0 * 255, 255, 255);

מילוי (קול);

rect (i * 20 + 10, גובה/2, 10, 300);

}

} [/cceN_cpp]

בעיבוד, על מנת לעבור למצב HSB, עלינו להוסיף רק משפט של colorMode (HSB). השימוש בפונקציה colorMode () הוא לשינוי מצב הצבע. אם נכתוב "HSB" בסוגריים, הוא יוגדר למצב HSB; בזמן שאנו כותבים "RGB", הוא יועבר למצב RGB.

מה שכדאי לשים לב הוא כאשר אנו כותבים colorMode (HSB), הערך המרבי המוגדר כברירת מחדל של HSB הוא 255. זה שונה לגמרי מהערך המקסימלי בפוטושופ. בפוטושופ, הערך המרבי של H הוא 360, הערך המרבי של S ו- B הוא 100. אז עלינו לבצע המרה.

אם ערך HSB בפוטושופ הוא (55, 100, 100), בעת המרה לעיבוד, ערך זה צריך להיות (55 /360 × 255, 255, 255), כלומר (40, 255, 255).

colorMode () היא פונקציה שניתן לחפוף. בהמשך, נציג לך אותו בפירוט.

שלב 5: שיטת חפיפה של ColorMode

לכן, אם אינך רוצה להמיר ערך HSB בפוטושופ באופן ידני, תוכל לכתוב "colorMode ()" ל- "colorMode (HSB, 360, 100, 100)".

מקרה יישום מצב HSB 1

מכיוון שמצב RGB לא ממש נוח לשלוט בשינויי הגוון, בשלב זה, אם ברצונך לשלוט בגוונים בצורה גמישה יותר, תוכל לשקול את מצב HSB.

דוגמא לקוד (9-6):

[cceN_cpp theme = "dawn"] הגדרת חלל () {

גודל (800, 800);

רקע (0);

colorMode (HSB);

}

צייר חלל () {

strokeWeight (2);

שבץ (int (millis ()/1000.0 * 10)%255, 255, 255);

צף newX, newY;

newX = mouseX + (רעש (מילי ()/1000.0 + 1.2) - 0.5) * 800;

newY = עכבר Y + (רעש (מילי ()/1000.0) - 0.5) * 800;

line (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

כאשר אנו שולטים ב- H (גוונים) בשבץ, השתמשנו באלמי (). הוא יקבל את זמן הפעולה מההתחלה ועד היום. כך, כמו עם התקדמות הזמן, הערך של H (גוון) יעלה באופן אוטומטי, ואז הצבע ישתנה.

היחידה של מילי () היא ms. לכן, כאשר התוכנית פועלת למשך שנייה אחת, ערך ההחזרה יהיה 1000. הדבר יוביל לערך גדול מדי. אז עלינו לחלק אותו ב- 1000.0.

מכיוון שאנו מקווים שהצבעים יציגו מחזוריות תקופתית, ולכן עלינו לבצע פעולת מודולו כשסוף סוף נכתוב את הפרמטר הראשון בשבץ. זה יכול לוודא שהוא יתחיל מ -0 שוב כאשר H (גוון) יעלה על 255.

Function strokeWeight () יכול לשלוט בעובי הקווים. היחידה המתאימה לפרמטרים בתוך הסוגר היא פיקסל.

שלב 6: מקרה יישום מצב 2

דוגמא לקוד (9-7):

[cceN_cpp theme = "dawn"] int num; // כמות הקווים המצוירים כרגע

צף posX_A, posY_A; // מתאם נקודה א

צף posX_B, posY_B; // מתאם נקודה ב

זווית צף A, מהירות A; // זווית נקודה A, מהירות

זווית צף B, מהירות B; // זווית נקודה B, מהירות

רדיוס צף X_A, רדיוס Y_A; // רדיוס הסגלגל שנוצר מנקודה A בציר X (Y).

רדיוס צף X_B, רדיוס Y_B; // רדיוס הסגלגל שנוצר על ידי נקודה B בציר X (Y).

הגדרת בטל () {

גודל (800, 800);

colorMode (HSB);

רקע (0);

מהירות A = 0.0009;

מהירות B = 0.003;

רדיוס X_A = 300;

רדיוס Y_A = 200;

רדיוס X_B = 200;

רדיוס Y_B = 300;

}

צייר חלל () {

תרגם (רוחב/2, גובה/2);

עבור (int i = 0; i <50; i ++) {

זווית A += מהירות A;

זווית B += מהירות B;

posX_A = cos (זווית A) * רדיוס X_A;

posY_A = sin (זווית A) * רדיוס Y_A;

posX_B = cos (זווית B) * רדיוס X_B;

posY_B = sin (זווית B) * רדיוס Y_B;

שבץ (int (num/500.0) % 255, 255, 255, 10);

קו (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

אפקט המבצע:

תמונת פלט:

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

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

הטמענו לולאה עבור ציור פונקציות במטרה להשתמש בלולאה כדי לשלוט בכמות הקו. זה שווה לזה שיש לנו מהירות ציור מבוקרת. הגדלת ערך תנאי השיפוט עבור לולאה, זה יגדיל את ציור ה- seepd.

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

התאם מהירות ורדיוס שונים, גם הדפוסים שנוצרו יהיו שונים. נסה לשנות משתנים כמו זווית, מהירות, רדיוס X, רדיוס Y ותראה מה יקרה.

שלב 7: מצב מיזוג שכבות

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

פתח את חלון השכבות ב- PS, לחץ כדי לבחור את מצב המיזוג של השכבות, ואז נוכל לראות את האפשרויות האלה.

אלה מצבי שכבה קיימים ב- PS. אם לדבר בפשטות, ניתן לראות במצב מיזוג כסוג של מצב חישוב צבע. הוא יחליט איזה צבע ייווצר לאחרונה כאשר "צבע A" ועוד "צבע B". כאן "צבע A" פירושו הצבע שמאחורי השכבה הנוכחית (נקרא גם צבע בסיס). "צבע B" פירושו צבע השכבה הנוכחית (נקרא גם צבע מעורב). התוכנית תחשב כדי להשיג צבע C בהתאם לערך RGB ואלפא של צבע A ו- B. הוא יוצג במסך כצבע תוצאה.

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

בואו נסתכל על דוגמא לשימוש במצב הוספה בתוכנית.

דוגמא לקוד (9-8):

[cceN_cpp theme = "dawn"] PImage image1, image2;

הגדרת בטל () {

גודל (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

צייר חלל () {

רקע (0);

blendMode (ADD);

תמונה (תמונה 1, 0, 0, 400, 400);

image (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

תוֹצָאָה:

פונקציית blendMode () משמשת להגדרת מצב מיזוג של גרפיקה. אנו ממלאים ADD מאחורי האמצעים שהגדרנו מצב הוספה.

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

מצב ADD שייך ל- "Brighten Class". לאחר השימוש בו תקבל אפקט מואר.

להלן מצב מיזוג שניתן להשתמש בו בעיבוד.

שלב 8: עיבוד מצב מיזוג

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

כאשר דוגמה (9-8) אימצה מצב חפיפה (הרקע צריך להיות לבן):

לאחר שימוש במצב חיתוך (הרקע צריך להיות לבן):

שלב 9: מקרה יישום מצב מיזוג שכבות

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

דוגמא לקוד (9-9):

[cceN_cpp theme = "dawn"] הגדרת חלל () {

גודל (400, 400);

}

צייר חלל () {

רקע (0);

blendMode (ADD);

int num = int (3000 * mouseX/400.0);

עבור (int i = 0; i <num; i ++) {

אם (אקראי (1) <0.5) {

מילוי (0, 50, 0);

}אַחֵר{

מילוי (50);

}

אליפסה (אקראית (50, רוחב - 50), אקראית (50, גובה - 50), 20, 20);

}

}

[/cceN_cpp]

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

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

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

שלב 10: מקור

מאמר זה הוא מתוך:

אם יש לך שאלות, תוכל ליצור קשר עם: [email protected].