คำแนะนำการเขียนโปรแกรมการประมวลผลที่น่าสนใจสำหรับนักออกแบบ--การควบคุมสี: 10 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

ในบทที่แล้ว เราได้พูดคุยกันมากขึ้นเกี่ยวกับการใช้โค้ดเพื่อสร้างรูปร่าง แทนที่จะเป็นจุดความรู้เกี่ยวกับสี ในบทนี้ เราจะสำรวจแง่มุมของความรู้นี้อย่างลึกซึ้งยิ่งขึ้น

ขั้นตอนที่ 1: ความรู้พื้นฐานเกี่ยวกับสี

ในบางแง่มุม สีมีมากกว่าสัญชาตญาณของมนุษย์ สีสันที่สวยงามต่างๆ ที่เราเห็นด้วยตาเปล่านั้นจริงๆ แล้วประกอบด้วยองค์ประกอบที่เหมือนกัน ด้วยแสงสามสีเท่านั้น ได้แก่ สีแดง สีเขียว และสีน้ำเงิน เราสามารถสร้างสีทั้งหมดที่ตามนุษย์มองเห็นผ่านส่วนผสมได้

หน้าจอมือถือและหน้าจอคอมพิวเตอร์ที่คุณเห็นในปัจจุบันถูกสร้างขึ้นบนพื้นฐานของหลักการนี้ สีแดง สีเขียว และสีน้ำเงินเรียกว่าแสงสีดั้งเดิมสามสี ด้วยอัตราส่วนขององค์ประกอบทั้งสาม เราสามารถรับประกันสีที่แน่นอนได้ วิธีการอธิบายนี้เรียกอีกอย่างว่าโหมด RGB ในหมู่มัน สีแดงคือ R สีเขียวคือ G และสีน้ำเงินคือ B

ยกเว้นโหมด RGB มีโหมดอื่นที่เรียกว่าโหมด CMYK มักจะรวมกับการพิมพ์ ในการพิมพ์มีสามสีดั้งเดิมด้วย อย่างไรก็ตาม มันแตกต่างจากแสงสามสีดั้งเดิม แยกเป็นสีแดง เหลือง และน้ำเงิน ในจำนวนนี้ C คือสีน้ำเงิน M สำหรับสีม่วงแดงและ Y สำหรับสีเหลือง ในทางทฤษฎี มีเพียง CMY เท่านั้น เราสามารถผสมสีส่วนใหญ่ได้ แต่เนื่องจากเทคนิคการผลิตวัตถุดิบ เราแทบจะไม่สามารถทำให้ความอิ่มตัวของ CMY ได้ถึง 100% หากเราผสมสามสีนี้เข้าด้วยกัน เราก็จะไม่ได้สีดำที่เข้มพอ ดังนั้นจึงมี K พิเศษซึ่งใช้สำหรับหมึกพิมพ์สีดำเป็นส่วนเสริมของการพิมพ์

สำหรับ RGB และ CMYK คุณเพียงแค่ต้องรู้ว่ามีความแตกต่างที่ชัดเจนที่สุดในธรรมชาติ RGB เป็นโหมดสีบวก ซึ่งเพิ่มความสว่างด้วยการผสมสีให้มากขึ้น ในขณะที่ CMYK เป็นโหมดลบสี ซึ่งเพิ่มความมืดด้วยการผสมสีให้มากขึ้น ในภาพด้านล่าง เราสามารถเห็นความเหมือนและความแตกต่างของทั้งสองโหมดด้วยสายตา ภาพซ้ายมือ เรานึกภาพออกว่าเป็นบ้านมืดที่มีไฟฉายสามสีเปิดอยู่ ภาพทางขวามือ เราสามารถมองมันเป็นกระดาษสีน้ำหลังจากทับซ้อนกันด้วยสีแดง เขียว และน้ำเงินสามสี

หากคุณต้องการทราบความสัมพันธ์ที่สัมพันธ์กันระหว่างโหมดสีต่างๆ อย่างลึกซึ้งยิ่งขึ้น คุณสามารถเปิด Photoshop และเลือกตัวเลือกสีได้ จากนั้น คุณจะเห็นค่าสีของสีเดียวกันภายใต้โหมดสีต่างๆ อย่างสังหรณ์ใจ

สุดท้ายนี้ เราขอแนะนำโหมดสีทั่วไปอีกโหมดหนึ่งสำหรับคุณ นั่นคือ HSB HSB ไม่มีแนวคิดเรื่อง “Original Color” จำแนกตามความรู้สึกของดวงตามนุษย์สำหรับสี H ย่อมาจาก hue, 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 ของถนน Jingshan Front Street เขตตงเฉิง ปักกิ่ง หรือคุณสามารถพูดได้ว่าอยู่ที่ 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);

ร = 255;

ก. = 0;

ข = 0;

}

ถือเป็นโมฆะวาด (){

พื้นหลัง(0);

โหมดแก้ไข (CENTER);

เติม(r, g, b);

ตรง(กว้าง/2,สูง/2,100,100);

}

[/cceN_cpp]

สำหรับสีที่มีแนวโน้มของสี เราต้องสร้างตัวแปรสามตัวเพื่อเก็บข้อมูลในช่องสามสี ได้แก่ สีแดง สีเขียว และสีน้ำเงินตามลำดับ ต่อมาถ้าเราต้องการเรียกใช้ชุดข้อมูลสีนี้ เราต้องเขียนลงในสีเติมหรือเส้นขีด

แต่คุณจะพบว่ามันลำบากเกินไปที่จะทำเช่นนั้นเพราะข้อมูลเชื่อมต่อถึงกัน หากคุณมีความคิดที่จะแพ็คของในการใช้งานจะสะดวกกว่า ดังนั้นสีจึงถูกสร้างขึ้น

ตัวอย่างโค้ด (9-2):

[cceN_cpp theme="dawn"] สี myColor;

การตั้งค่าเป็นโมฆะ (){

ขนาด (400, 400);

myColor = สี (255, 0, 0);

}

ถือเป็นโมฆะวาด (){

พื้นหลัง(0);

โหมดแก้ไข (CENTER);

กรอก (myColor);

ตรง(กว้าง/2,สูง/2,100,100);

} [/cceN_cpp]

เช่นเดียวกับประเภทข้อมูลเช่น int เราต้องใช้ "color myColor" ที่จุดเริ่มต้นเพื่อสร้างตัวแปร

ในการตั้งค่า เราใช้ “myColor = color(255, 0, 0)” เพื่อกำหนดค่าให้กับตัวแปร myColor ในขณะที่สีของฟังก์ชัน (a, b, c) แสดงให้เห็นอย่างถูกต้องว่าชุดข้อมูลนี้สร้างประเภทสีเพื่อนำเข้าตัวแปร myColor หากคุณเขียน "myColor = (255, 0, 0)" โปรแกรมจะผิดพลาด

สุดท้ายนี้ เราใช้ fill() เพื่อให้ทราบถึงการทำงานของการเติมสี ฟังก์ชัน fill() และ stroke() สามารถทับซ้อนกันได้ ตามปริมาณและชนิดของพารามิเตอร์ จะมีผลแตกต่างกัน การนำเข้าตัวแปรจำนวนเต็มเพียงตัวเดียว ซึ่งแสดงว่าเป็นสีที่มีระดับสีเทาเท่านั้น ขณะนำเข้าสีตัวแปร หมายความว่าช่วงสีจะใหญ่ขึ้น คุณยังสามารถนำเข้าตัวแปรสีและตัวแปรจำนวนเต็ม เปลี่ยนฟังก์ชัน fill() ในด้านบนเป็น fill(myColor, 150) จากนั้นคุณสามารถควบคุมอัลฟาด้วยพารามิเตอร์ตัวที่สอง

ขั้นตอนที่ 3: วิธีการทับซ้อนกันของ Fill

จังหวะ พื้นหลังมีวิธีการทับซ้อนเดียวกันกับการเติม

อ่านค่าช่องสี

นอกเหนือจากการกำหนดแล้ว คุณยังสามารถรับค่า RGB ในตัวแปรสีได้อย่างอิสระอีกด้วย

ตัวอย่างโค้ด (9-3):

[cceN_cpp theme="dawn"] สี myColor;

การตั้งค่าเป็นโมฆะ (){

myColor = สี (255, 125, 0);

println(สีแดง(myColor));

println(สีเขียว(myColor));

println(สีน้ำเงิน(myColor));

}

[/cceN_cpp]

ผลลัพธ์ในคอนโซล: 255, 125, 0.

ฟังก์ชัน red(), green(), blue() จะคืนค่ากลับมาเป็นค่าของช่อง red, green และ blue ใน 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);

โหมดแก้ไข (CENTER);

ไม่มีจังหวะ ();

backColor = #395b71;

สีA = #c4d7fb;

สีB = #f4a7b4;

สีC = #f9e5f0;

}

ถือเป็นโมฆะวาด (){

พื้นหลัง (backColor);

เติม(สีA);

ตรง(200, 200, 90, 300);

เติม(colorB);

ตรง (100, 200, 90, 300);

เติม(colorC);

ตรง (300, 200, 90, 300);

} [/cceN_cpp]

ตอนนี้ สีดูสบายตาขึ้นมากพร้อมเอฟเฟกต์ที่ดีกว่าการป้อนค่าแบบสุ่ม

เพิ่ม # ก่อนค่าสีฐานสิบหก จากนั้นคุณสามารถกำหนดค่าให้กับสีตัวแปรได้โดยตรง

ขั้นตอนที่ 4: โหมด HSB

ข้างโหมด RGB ต่อไปเราจะพูดถึงโหมด HSB ต่อไปนี้แสดงวิธีการกำหนดค่าของโหมด HSB

ตัวอย่างโค้ด (9-5):

[cceN_cpp theme="dawn"] การตั้งค่าเป็นโมฆะ () {

ขนาด (400, 400);

โหมดสี (HSB);

}

โมฆะวาด () {

พื้นหลัง(0);

โหมดแก้ไข (CENTER);

สำหรับ (int i = 0; i < 20; i++) {

สี col = สี(i/20.0 * 255, 255, 255);

เติม(col);

ตรง(i * 20 + 10, ความสูง/2, 10, 300);

}

} [/cceN_cpp]

ในการประมวลผล เพื่อที่จะเปลี่ยนโหมด HSB เราเพียงเพิ่มประโยคของ colorMode(HSB) การใช้ฟังก์ชัน colorMode() คือการเปลี่ยนโหมดสี หากเราเขียนคำว่า “HSB” ในวงเล็บ ก็จะถูกตั้งค่าเป็นโหมด HSB ขณะที่เราเขียน “RGB” ก็จะเปลี่ยนเป็นโหมด RGB

สิ่งที่ควรค่าแก่การพิจารณาคือเมื่อเราเขียน colorMode(HSB) ค่าสูงสุดเริ่มต้นของ HSB คือ 255 ซึ่งค่อนข้างแตกต่างกับค่าสูงสุดใน Photoshop ใน Photoshop ค่าสูงสุดของ H คือ 360 ค่าสูงสุดของ S และ B คือ 100 ดังนั้นเราจึงต้องทำการแปลง

หากค่า HSB ใน Photoshop คือ (55, 100, 100) เมื่อแปลงเป็น Processing ค่านี้ควรเป็น (55 / 360 × 255, 255, 255) เช่น (40, 255, 255)

colorMode() เป็นฟังก์ชันที่สามารถทับซ้อนกันได้ ต่อไปเราจะมาแนะนำคุณอย่างละเอียด

ขั้นตอนที่ 5: วิธีการซ้อนทับกันของ ColorMode

ดังนั้น หากคุณไม่ต้องการแปลงค่า HSB ใน Photoshop ด้วยตนเอง คุณสามารถเขียน “colorMode()” เป็น “colorMode(HSB, 360, 100, 100)” ได้

กรณีสมัครโหมด HSB 1

เนื่องจากโหมด RGB ไม่ค่อยสะดวกในการควบคุมการเปลี่ยนแปลงของเฉดสี ในตอนนี้ หากคุณต้องการควบคุมสีให้ยืดหยุ่นมากขึ้น คุณอาจพิจารณาใช้โหมด HSB

ตัวอย่างโค้ด (9-6):

[cceN_cpp theme="dawn"] การตั้งค่าเป็นโมฆะ () {

ขนาด (800, 800);

พื้นหลัง(0);

โหมดสี (HSB);

}

โมฆะวาด () {

จังหวะน้ำหนัก(2);

จังหวะ(int(มิลลิวินาที()/1000.0 * 10)%255, 255, 255);

ลอยใหม่X, ใหม่Y;

newX = mouseX + (สัญญาณรบกวน(มิลลิวินาที()/1000.0 + 1.2) - 0.5) * 800;

ใหม่Y = mouseY + (สัญญาณรบกวน(มิลลิวินาที()/1000.0) - 0.5) * 800;

บรรทัด (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

เมื่อเราควบคุม H(hues) ในจังหวะ เราใช้ millis() โดยจะได้เวลาดำเนินการตั้งแต่ต้นจนถึงปัจจุบัน ดังนั้น เมื่อเวลาผ่านไป ค่าของ H(hue) จะเพิ่มขึ้นโดยอัตโนมัติ จากนั้นสีจะเปลี่ยนไป

หน่วยของมิลลิวินาที () คือ ms ดังนั้นเมื่อโปรแกรมทำงานเป็นเวลา 1 วินาที ค่าที่ส่งคืนจะเป็น 1000 ซึ่งจะนำไปสู่ค่าที่มากเกินไป เราต้องหารมันด้วย 1000.0.

เนื่องจากเราหวังว่าสีจะแสดงการหมุนเวียนเป็นระยะ เราจึงต้องดำเนินการแบบโมดูโลเมื่อเราเขียนพารามิเตอร์แรกในจังหวะสุดท้าย เพื่อให้แน่ใจว่าจะเริ่มจาก 0 อีกครั้งเมื่อ H(hue) มีค่าเกิน 255

ฟังก์ชัน strokeWeight() สามารถควบคุมความหนาของเส้นได้ หน่วยที่สอดคล้องกันสำหรับพารามิเตอร์ภายในวงเล็บคือพิกเซล

ขั้นตอนที่ 6: กรณีสมัครโหมด 2

ตัวอย่างโค้ด (9-7):

[cceN_cpp theme="dawn"] จำนวนเต็ม; // จำนวนเส้นที่วาดในปัจจุบัน

ลอย posX_A, posY_A; // พิกัดของจุด A

ลอย posX_B, posY_B; // พิกัดของจุด B

มุมลอยA, ความเร็วA; // มุมของจุด A, ความเร็ว

มุมลอยB ความเร็วB; // มุมของจุด B ความเร็ว

รัศมีลอยX_A, รัศมีY_A; // รัศมีวงรีที่เกิดจากจุด A ในแกน X(Y)

รัศมีลอยX_B, รัศมีY_B; // เขารัศมีวงรีที่เกิดจากจุด B ในแกน X(Y)

การตั้งค่าเป็นโมฆะ () {

ขนาด (800, 800);

โหมดสี (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 = บาป (มุม A) * รัศมีY_A;

posX_B = cos(angleB) * รัศมีX_B;

posY_B = บาป (มุมB) * รัศมีY_B;

จังหวะ(int(num/500.0) % 255, 255, 255, 10);

บรรทัด (posX_A, posY_A, posX_B, posY_B);

เบอร์++;

}

} [/cceN_cpp]

ผลการปฏิบัติงาน:

รูปภาพที่ส่งออก:

รูปแบบที่คุณเห็นเกิดจากเส้นเคลื่อนที่ผ่านการทับซ้อนกันอย่างต่อเนื่อง ร่องรอยของจุดสิ้นสุดทั้งสองของเส้นนั้นเป็นวงกลมสองวงแยกจากกัน

ผ่านโหมด HSB เราได้ควบคุมการเปลี่ยนแปลงของสี ด้วยการเพิ่มเส้น เฉดสีจะชดเชย เมื่อเส้นขนาดใหญ่ครึ่งโปร่งใสซ้อนทับกัน จะทำให้เกิดการไล่ระดับสีที่สมบูรณ์มาก

เราได้ฝัง for loop ลงในฟังก์ชัน draw โดยมีวัตถุประสงค์เพื่อใช้ for loop เพื่อควบคุมปริมาณของเส้น เทียบเท่ากับที่เราได้ควบคุมความเร็วในการวาด การเพิ่มมูลค่าของเงื่อนไขการตัดสินใน for loop จะเป็นการเพิ่มการซึมของภาพวาด

ด้านล่างเป็นรูปแผนผัง คุณสามารถเห็นร่องรอยการเคลื่อนที่ของวงกลมได้ชัดเจนยิ่งขึ้น

ปรับความเร็วและรัศมีต่างกัน รูปแบบที่เกิดขึ้นก็จะต่างกันด้วย ลองเปลี่ยนตัวแปร เช่น มุม ความเร็ว รัศมี X รัศมี Y แล้วดูว่าจะเกิดอะไรขึ้น

ขั้นตอนที่ 7: โหมดการผสมเลเยอร์

โหมดสีต่างๆ ที่เราได้พูดคุยกันก่อนหน้านี้ ล้วนใช้สำหรับส่วนประกอบกราฟิกสี นอกจากจะใช้วิธีนี้ในการควบคุมสีแล้ว การประมวลผลสามารถใช้โหมดการผสมของเลเยอร์ต่างๆ เช่น Photoshop ได้

เปิดหน้าต่างเลเยอร์ใน PS คลิกเพื่อเลือกโหมดการผสมของเลเยอร์ จากนั้นเราจะเห็นตัวเลือกเหล่านี้

โหมดเหล่านี้เป็นโหมดเลเยอร์ที่มีอยู่ใน PS พูดง่ายๆ คือ โหมดการผสมถือได้ว่าเป็นโหมดการคำนวณสีชนิดหนึ่ง จะตัดสินว่าสีใดจะถูกสร้างขึ้นในช่วงสุดท้ายเมื่อ "สี A" บวก "สี B" ในที่นี้ “color A” หมายถึงสีที่อยู่เบื้องหลังเลเยอร์ปัจจุบัน (เรียกอีกอย่างว่าสีฐาน) “color B” หมายถึงสีของเลเยอร์ปัจจุบัน (เรียกอีกอย่างว่าสีผสม) โปรแกรมจะคำนวณเพื่อให้ได้สี C ตามค่า RGB และอัลฟาของสี A และ B โดยจะแสดงที่หน้าจอเป็นสีผลลัพธ์

โหมดเลเยอร์ที่แตกต่างกันหมายถึงวิธีการคำนวณที่แตกต่างกัน ในครึ่งหลังของบทความชุดนี้ เราจะอธิบายในรายละเอียดต่อไป ตอนนี้เราต้องรู้การใช้งานก่อนเท่านั้น

มาดูตัวอย่างการใช้ Add Mode ในโปรแกรมกัน

ตัวอย่างโค้ด (9-8):

[cceN_cpp theme="dawn"] รูปภาพ image1, image2;

การตั้งค่าเป็นโมฆะ (){

ขนาด(800, 400);

image1 = loadImage("1.jpg");

image2 = loadImage("2.jpg");

}

ถือเป็นโมฆะวาด (){

พื้นหลัง(0);

ผสมผสานโหมด (เพิ่ม);

รูปภาพ(ภาพที่1, 0, 0, 400, 400);

รูปภาพ (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);

ผสมผสานโหมด (เพิ่ม);

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 ค่อนข้างคล้ายกันแม้ว่าจะเหมือนกันเพื่อให้สว่าง แต่ก็มีความแตกต่างเล็กน้อย คุณสามารถแทนที่มันเป็นหน้าจอและทำการเปรียบเทียบ หลังจากซ้อนทับกัน ความบริสุทธิ์และความสว่างของ ADD จะสูงขึ้น เหมาะสำหรับการเทียบเอฟเฟกต์แสง

ส่วนเรื่องสีก็มาถึงตอนจบในบทนี้แล้ว สำหรับ "ภาษา" นี้ คุณได้เข้าใจคำศัพท์เพียงพอแล้ว ตอนนี้ รีบใช้โค้ดเพื่อสนุกไปกับโลกแห่งรูปทรงและสีสัน!

ขั้นตอนที่ 10: แหล่งที่มา

บทความนี้มาจาก:https://www.elecfreaks.com/11462.html

หากคุณมีคำถามใด ๆ คุณสามารถติดต่อ: [email protected]