Panduan Pengaturcaraan Pemprosesan Menarik untuk Pereka - Kawalan Warna: 10 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:07

Dalam bab-bab sebelumnya, kita telah membincangkan lebih banyak cara menggunakan kod untuk melakukan pembentuk dan bukannya titik pengetahuan mengenai warna. Dalam bab ini, kita akan meneroka aspek pengetahuan ini dengan lebih mendalam.

Langkah 1: Pengetahuan Asas Mengenai Warna

Warna, dalam aspek tertentu, telah melampaui intuisi manusia. Pelbagai warna indah yang kita lihat dengan mata kasar kita sebenarnya terdiri dari komponen yang sama. Hanya dengan tiga warna cahaya iaitu merah, hijau dan biru, kita dapat membuat semua warna yang dapat dilihat oleh mata manusia melalui campuran.

Skrin mudah alih dan skrin komputer yang anda lihat pada masa ini dibuat berdasarkan prinsip ini. Merah, hijau dan biru disebut tiga warna cahaya asli. Melalui nisbah ketiga elemen tersebut, kita dapat memastikan warna tertentu. Kaedah penerangan ini juga disebut mod RGB. Antaranya, merah ialah R, hijau adalah G dan biru adalah B.

Kecuali untuk mod RGB, ada mod lain yang disebut mod CMYK. Ia biasanya digabungkan dengan percetakan. Dalam percetakan, terdapat tiga warna asli juga. Namun, ia berbeza dengan tiga warna cahaya asli. Mereka berwarna merah, kuning dan biru secara berasingan. Di antaranya, C untuk sian, M untuk magenta, dan Y untuk kuning. Secara teorinya, hanya dengan CMY, kita dapat mencampurkan kebanyakan warna. Tetapi kerana teknik pengeluaran bahan mentah, kita hampir tidak dapat membuat ketepuan CMY mencapai 100%. Sekiranya kita mencampurkan tiga warna ini, kita tidak dapat memperoleh warna hitam yang cukup gelap. Jadi ada K tambahan, yang untuk dakwat percetakan hitam, sebagai tambahan pencetakan.

Mengenai RGB dan CMYK, anda hanya perlu mengetahui bahawa terdapat perbezaan yang paling ketara. RGB adalah mod warna plus, yang meningkatkan kecerahan dengan mencampurkan lebih banyak warna. Sementara CMYK adalah mod warna minus, yang meningkatkan kegelapan dengan mencampurkan lebih banyak warna. Dalam gambar di bawah, kita dapat melihat persamaan dan perbezaan kedua-dua mod tersebut secara visual. Gambar kiri, kita boleh bayangkan menjadi rumah gelap dengan tiga warna lampu suluh yang dihidupkan. Gambar di sebelah kanan, kita dapat menganggapnya sebagai kertas cat air setelah bertindih dengan tiga pigmen merah, hijau dan biru.

Sekiranya anda ingin mengetahui hubungan relatifnya antara pelbagai mod warna dengan lebih mendalam, anda boleh membuka kedai gambar anda dan memilih pemilih warna. Kemudian anda dapat melihat nilai warna dengan warna yang sama di bawah mod warna yang berbeza secara intuitif.

Terakhir, kami ingin memperkenalkan mod warna umum lain untuk anda, HSB. HSB tidak mempunyai konsep "Warna Asal". Ia dikelaskan mengikut perasaan mata manusia terhadap warna. H bermaksud rona, S untuk tepu, dan B adalah untuk kecerahan.

Hue mewakili kecenderungan warna. Setiap warna mempunyai kecenderungan warna tertentu hanya jika tidak berwarna putih, putih atau kelabu. Kawasan peralihan warna yang paling kaya pada pemilih warna digunakan untuk menunjukkan rona. Nilainya dalam PS berkisar antara 0 hingga 360.

Ketepuan bermaksud kesucian warna. Kesucian yang lebih tinggi membawa warna yang lebih jelas. Nilainya dalam PS berkisar antara 0 hingga 100.

Kecerahan bermaksud tahap cahaya yang ringan, antara 0 hingga 100.

Berbanding dengan mod RGB, ketiga dimensi HSB jauh lebih sesuai dengan perasaan warna manusia. Lihat sahaja nilai HSB sahaja, secara amnya anda dapat membayangkan jenis warnanya.

Seperti warna yang sama, nilai warna dalam mod RGB adalah (255, 153, 71), sementara di HSB adalah (27, 72, 100).

Sukar untuk menilai seperti apa selepas mencampurkan tiga warna asal jika kita hanya melihat RGB. Tetapi HSB berbeza. Anda hanya perlu membiasakan warna seperti merah adalah 0, oren 30 dan kuning 60, maka anda akan tahu ia akan menjadi warna oren yang agak tepu dengan kecerahan tinggi dan sedikit dekat dengan merah ketika H 27.

Seterusnya, kita akan memadankan tiga dimensi kedua mod menjadi ruang x, y, x dan melukis kubik warna untuk melakukan perbandingan.

RGB dan HSB hanyalah kaedah yang berbeza untuk menggambarkan warna. Kita boleh mengambil alamat sebagai metafora. Andaikan jika anda ingin memberitahu orang lain tentang kedudukan istana Kekaisaran, anda boleh mengatakannya di No.4 Jingshan Front Street, Kawasan Dongcheng, Beijing. Atau anda boleh mengatakannya pada 15 saat, 55 minit, 39 darjah pada garis lintang Utara dan 26 saat, 23 minit, 116 darjah pada garis bujur Timur. Kaedah penerangan HSB serupa dengan yang sebelumnya. Sekiranya anda biasa dengan kawasan relatif, secara amnya anda dapat mengetahui kedudukan alamatnya. Walaupun RGB mungkin lebih tepat, tetapi sangat abstrak.

Mod HSB wujud dengan tujuan untuk membantu kami menerangkan warna dengan lebih mudah. Untuk memaparkan jenis warna tertentu di layar, kita harus mengubahnya menjadi mod RGB terlebih dahulu.

Di atas, kami memperkenalkan tiga mod warna: RGB, HSB, CMYK. Dalam program ini, anda hanya perlu fokus pada dua mod: RGB dan HSB. Mereka mempunyai kelebihan dan aplikasi mereka sendiri pada masa yang sama. Sekiranya anda sudah biasa dengannya, ia akan memenuhi keperluan reka bentuk anda yang paling banyak.

Langkah 2: Jenis Data untuk Menyimpan Warna

Untuk menunjukkan warna dalam program, kebanyakan kita menggunakan mod RGB sebelumnya. Namun, hanya dengan mengendalikan ketiga sifat, dapatkah kita menampilkan warna? Dalam komputer, ia seperti ini.

Kami telah merujuk sebelumnya dalam Pemprosesan, kecuali R, G, B, kami dapat menetapkan alpha (transparansi) untuk warna. Tetapi alpha bukan tergolong dalam komponen warna. Keberadaannya adalah untuk campuran yang mudah dengan warna di belakang. Oleh itu, agar komputer dapat menerangkan jenis warna tertentu dengan tepat, kita harus mengurus tiga pemboleh ubah utama sahaja.

Berikut ini, kami mulai memperkenalkan jenis data jenis Color, yang terutama digunakan untuk menyimpan warna. Ia serupa dengan jenis data yang disebut sebelumnya seperti boolena, int, float.

Di sini, izinkan saya terus menerangkan mengenai penggunaan warna sebenar terlebih dahulu. Bayangkan ini: andaikan jika kita hanya dapat menggunakan kaedah yang dikuasai sebelumnya untuk menyimpan data tertentu, apa yang harus kita lakukan?

Contoh Kod (9-1):

[cceN_cpp tema = "fajar"] int r, g, b;

batal persediaan () {

saiz (400, 400);

r = 255;

g = 0;

b = 0;

}

undian tidak sah () {

latar belakang (0);

rectMode (PUSAT);

isi (r, g, b);

segiempat tepat (lebar / 2, tinggi / 2, 100, 100);

}

[/cceN_cpp]

Mengenai warna yang mempunyai kecenderungan warna, kita perlu membuat tiga pemboleh ubah untuk menyimpan data dalam tiga saluran warna masing-masing merah, hijau dan biru. Kemudian, jika kita ingin menggunakan kumpulan data warna ini, kita harus menuliskannya menjadi isian atau coretan.

Tetapi anda akan merasa terlalu sukar untuk melakukannya kerana data saling berkaitan. Sekiranya anda mempunyai idea untuk mengemasnya, akan lebih senang. Oleh itu, warna diciptakan.

Contoh Kod (9-2):

[cceN_cpp tema = "fajar"] warna myColor;

batal persediaan () {

saiz (400, 400);

myColor = warna (255, 0, 0);

}

undian tidak sah () {

latar belakang (0);

rectMode (PUSAT);

isi (myColor);

segiempat tepat (lebar / 2, tinggi / 2, 100, 100);

} [/cceN_cpp]

Sama dengan jenis data seperti int, kita harus menggunakan "warna myColor" pada awalnya untuk membuat pemboleh ubah.

Dalam penyediaan, kami menggunakan "myColor = color (255, 0, 0)" untuk menetapkan nilai ke variabel myColor. Sementara warna fungsi (a, b, c) dengan tepat menunjukkan bahawa kumpulan data ini telah membentuk jenis warna sehingga dapat mengimpor variabel myColor. Sekiranya anda menulis “myColor = (255, 0, 0)”, program akan menjadi salah.

Pada yang terakhir, kami menggunakan fill () untuk merealisasikan operasi pelapisan warna. Fungsi mengisi () dan strok () kedua-duanya memungkinkan untuk bertindih. Mengikut kuantiti dan jenis parameter, ia akan memberi kesan yang berbeza. Mengimport hanya satu pembolehubah bilangan bulat, yang menunjukkannya adalah warna dengan skala kelabu sahaja. Semasa mengimport warna berubah-ubah, ini bermaksud julat warna akan lebih besar. Anda juga boleh mengimport pemboleh ubah warna dan pemboleh ubah integer, mengubah fungsi isi () di atas menjadi isi (myColor, 150), maka anda dapat mengawal alpha dengan parameter kedua.

Langkah 3: Kaedah Isi Bertindih

strok, latar belakang mempunyai kaedah pertindihan yang sama dengan isian.

Baca Nilai Saluran Warna

Selain tugas, anda juga dapat memperoleh nilai RGB secara bebas dalam pemboleh ubah warna

Contoh Kod (9-3):

[cceN_cpp tema = "fajar"] warna myColor;

batal persediaan () {

myColor = warna (255, 125, 0);

println (merah (myColor));

println (hijau (myColor));

println (biru (myColor));

}

[/cceN_cpp]

Hasil dalam konsol: 255, 125, 0.

Fungsi merah (), hijau (), biru () secara relatif akan kembali ke nilai saluran merah, hijau dan biru di myColor.

Tugasan Perenambelasan

Kecuali untuk menggunakan nombor perpuluhan untuk menunjukkan RGB, kita juga dapat menggunakan heksadesimal. Perpuluhan bermaksud meningkatkan 1 ketika memenuhi 10. Sementara heksadesimal bermaksud meningkatkan 1 ketika bertemu 16. Hubungan relatifnya dengan perpuluhan adalah: "0 hingga 9" sesuai dengan "0 hingga 9 "," A hingga F "sesuai dengan" 10 hingga 15 ".

Gambar di bawah adalah gambaran kaedah penukaran.

Sudah tentu, jika kita mendapat satu set nilai heksadesimal seperti ff7800, kita tidak perlu menukarnya secara manual. Program ini akan memberikan nilai kepada pemboleh ubah warna secara langsung. Ia sangat senang.

Kita dapat melihat banyak kad warna dalam talian semuanya menggunakan kaedah heksadesimal untuk memaparkan warna.

Seperti dribbble komuniti reka bentuk, karya seni akan dilampirkan palet warna. Sekiranya anda melihat pewarnaan kegemaran, anda boleh menerapkannya ke program.

Contoh Kod (9-4):

[cceN_cpp tema = "fajar"] warna belakangColor, colorA, colorB, colorC;

batal persediaan () {

saiz (400, 400);

rectMode (PUSAT);

noStroke ();

warna belakang = # 395b71;

colorA = # c4d7fb;

warnaB = # f4a7b4;

warnaC = # f9e5f0;

}

undian tidak sah () {

latar belakang (backColor);

isi (warnaA);

tepat (200, 200, 90, 300);

isi (warnaB);

tepat (100, 200, 90, 300);

isi (colorC);

tepat (300, 200, 90, 300);

} [/cceN_cpp]

Sekarang, warnanya lebih selesa dengan kesan yang lebih baik daripada memasukkan nilai secara rawak.

Tambahkan "#" sebelum nilai warna heksadesimal, maka anda dapat memberikan nilai ke warna berubah secara langsung.

Langkah 4: Mod HSB

Di samping mod RGB, seterusnya kita akan membincangkan mod HSB. Berikut menunjukkan kaedah penetapan nilai mod HSB.

Contoh Kod (9-5):

[cceN_cpp tema = "fajar"] batal persediaan () {

saiz (400, 400);

colorMode (HSB);

}

undian tidak sah () {

latar belakang (0);

rectMode (PUSAT);

untuk (int i = 0; i <20; i ++) {

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

isi (col);

segiempat tepat (i * 20 + 10, tinggi / 2, 10, 300);

}

} [/cceN_cpp]

Dalam Pemprosesan, untuk menukar mod HSB, kita hanya perlu menambahkan ayat colorMode (HSB). Penggunaan fungsi colorMode () adalah untuk menukar mod warna. Sekiranya kita menulis "HSB" dalam kurungan, maka ia akan ditetapkan ke mod HSB; sementara kita menulis "RGB", ia akan beralih ke mod RGB.

Apa yang perlu diperhatikan adalah ketika kita menulis colorMode (HSB), nilai maksimum default HSB adalah 255. Ini sangat berbeza dengan nilai maksimum di Photoshop. Di Photoshop, nilai maksimum H adalah 360, nilai maksimum S dan B adalah 100. Oleh itu, kita perlu melakukan penukaran.

Sekiranya nilai HSB di Photoshop adalah (55, 100, 100), apabila ditukar ke Pemprosesan, nilai ini seharusnya (55/360 × 255, 255, 255), iaitu (40, 255, 255).

colorMode () adalah fungsi yang boleh ditindih. Berikut ini, kami akan memperkenalkannya secara terperinci kepada anda.

Langkah 5: Kaedah tumpang tindih ColorMode

Oleh itu, jika anda tidak mahu menukar nilai HSB di Photoshop secara manual, anda boleh menulis "colorMode ()" menjadi "colorMode (HSB, 360, 100, 100)".

Kes Permohonan Mod HSB 1

Kerana mod RGB tidak begitu mudah untuk mengawal perubahan rona, pada masa ini, jika anda ingin mengawal warna dengan lebih fleksibel, anda mungkin mempertimbangkan mod HSB.

Contoh Kod (9-6):

[cceN_cpp tema = "fajar"] batal persediaan () {

saiz (800, 800);

latar belakang (0);

colorMode (HSB);

}

undian tidak sah () {

berat badan (2);

strok (int (millis () / 1000.0 * 10)% 255, 255, 255);

terapung newX, newY;

newX = mouseX + (bunyi (milis () / 1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (bunyi (milis () / 1000.0) - 0.5) * 800;

garis (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Semasa kita mengawal H (rona) dalam strok, kita telah menggunakan millis (). Ia akan memperoleh masa operasi dari awal hingga sekarang. Oleh itu, seiring berjalannya waktu, nilai H (rona) akan meningkat secara automatik, kemudian warna berubah.

Unit millis () ialah ms. Oleh itu, apabila program berjalan selama 1 saat, nilai pulangan akan menjadi 1000. Ini akan membawa kepada nilai yang terlalu besar. Oleh itu, kita mesti membahagikannya dengan 1000.0.

Kerana kami berharap warna akan memberikan peredaran berkala, jadi kami harus melakukan operasi modulo ketika akhirnya kami menulis parameter pertama dalam stroke. Ini dapat memastikan bahawa ia akan bermula dari 0 lagi apabila H (rona) telah melepasi 255.

Fungsi strokeWeight () dapat mengawal ketebalan garis. Unit yang sesuai untuk parameter dalam kurungan adalah piksel.

Langkah 6: Kes Permohonan Mod 2

Contoh Kod (9-7):

[cceN_cpp tema = "fajar"] int num; // kuantiti garis yang dilukis pada masa ini

terapung posX_A, posY_A; // Koordinat titik A

terapung posX_B, posY_B; // Koordinat titik B

sudut apunganA, kelajuanA; // Sudut titik A, kelajuan

sudut apunganB, kelajuanB; // Sudut titik B, kelajuan

jejari terapungX_A, jejariY_A; // Jejari bujur dibentuk oleh titik A di gandar X (Y).

jejari terapungX_B, jejariY_B; // dia jejari bujur yang dibentuk oleh titik B pada gandar X (Y).

batal persediaan () {

saiz (800, 800);

colorMode (HSB);

latar belakang (0);

kelajuanA = 0.0009;

kelajuanB = 0.003;

jejariX_A = 300;

jejariY_A = 200;

jejariX_B = 200;

jejariY_B = 300;

}

undian tidak sah () {

terjemahkan (lebar / 2, tinggi / 2);

untuk (int i = 0; i <50; i ++) {

sudutA + = kelajuanA;

sudutB + = kelajuanB;

posX_A = cos (angleA) * jejariX_A;

posY_A = sin (angleA) * jejariY_A;

posX_B = cos (angleB) * jejariX_B;

posY_B = sin (angleB) * jejariY_B;

strok (int (num / 500.0)% 255, 255, 255, 10);

garis (posX_A, posY_A, posX_B, posY_B);

angka ++;

}

} [/cceN_cpp]

Kesan Operasi:

Gambar Keluaran:

Corak yang anda lihat dihasilkan oleh garis gerakan melalui pertindihan berterusan. Jejak dua titik akhir garis adalah dua bulatan secara berasingan.

Melalui mod HSB, kami telah mengawal perubahan rona. Dengan pertambahan garis, rona akan mengimbangi. Apabila garis separuh telus yang besar bertindih, ia akan menghasilkan kecerunan warna yang sangat kaya.

Kami telah memasukkan fungsi loop untuk draw dengan tujuan untuk menggunakan loop untuk mengawal kuantiti garis. Ia setara dengan kelajuan lukisan yang dikawal. Menambah nilai keadaan penilaian untuk loop, ia akan meningkatkan seepd gambar.

Berikut adalah rajah skematik. Anda dapat melihat jejak pergerakan bulatan dengan lebih jelas.

Sesuaikan kelajuan dan jejari yang berbeza, corak yang dibentuk juga akan berbeza. Cuba ubah pemboleh ubah seperti sudut, kelajuan, radiusX, radiusY dan lihat apa yang akan berlaku.

Langkah 7: Mod Pengadunan Lapisan

Pelbagai mod warna yang kita bicarakan sebelumnya semuanya digunakan untuk mewarnai komponen grafik. Kecuali menggunakan kaedah ini untuk mengawal warna, Pemprosesan dapat menggunakan mod campuran pelbagai lapisan seperti Photoshop.

Buka tetingkap lapisan di PS, klik untuk memilih mod campuran lapisan, maka kita dapat melihat pilihan ini.

Ini adalah mod lapisan yang ada di PS. Secara sederhana, mod campuran boleh dianggap sebagai jenis mod pengiraan warna. Ini akan memutuskan warna mana yang akan dibuat pada saat terakhir ketika "warna A" ditambah "warna B". Di sini "warna A" bermaksud warna di sebalik lapisan semasa (juga disebut warna asas). "Warna B" bermaksud warna lapisan semasa (juga disebut warna campuran). Program akan mengira untuk mendapatkan warna C mengikut nilai RGB dan alpha warna A dan B. Ia akan dipaparkan di skrin sebagai warna hasilnya.

Mod lapisan berbeza bermaksud kaedah pengiraan yang berbeza. Pada separuh bahagian seterusnya dari siri artikel ini, kami akan terus menerangkannya secara terperinci. Sekarang kita hanya perlu mengetahui penggunaannya terlebih dahulu.

Mari kita lihat contoh penggunaan Mode Tambah dalam program.

Contoh Kod (9-8):

[cceN_cpp tema = "fajar"] Gambar gambar1, gambar2;

batal persediaan () {

saiz (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

undian tidak sah () {

latar belakang (0);

blendMode (ADD);

gambar (gambar1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Keputusan:

Fungsi blendMode () digunakan untuk mengatur mod pencampuran grafik. Kami mengisi ADD di belakang bermaksud kami telah menetapkan Mode Tambah.

Dalam program, tidak ada konsep lapisan. Tetapi kerana terdapat urutan melukis komponen grafik, maka ketika menggabungkan gambar, gambar 1 dianggap sebagai warna dasar dan gambar 2 sebagai warna campuran.

Mod ADD tergolong dalam "Brighten Class". Setelah menggunakannya, anda akan mendapat kesan yang cerah.

Di bawah ini adalah mod pencampuran yang boleh digunakan dalam Pemprosesan.

Langkah 8: Memproses Mod Pengadunan

Kita boleh cuba menukar mod pencampuran yang berbeza untuk melihat kesannya.

Apabila contoh (9-8) telah menggunakan mod tumpang tindih (latar belakang harus diset putih):

Setelah menggunakan Substrak Mode (latar belakang harus diatur menjadi putih):

Langkah 9: Kes Aplikasi Mode Blending Layer

Mod campuran tidak hanya dapat digunakan untuk gambar, tetapi juga sesuai untuk semua komponen grafik di kanvas. Di bawah ini telah menunjukkan penggunaan mengenai Mode Tambah. Ia boleh digunakan untuk analog pelbagai kesan pencahayaan.

Contoh Kod (9-9):

[cceN_cpp tema = "fajar"] batal persediaan () {

saiz (400, 400);

}

undian tidak sah () {

latar belakang (0);

blendMode (ADD);

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

untuk (int i = 0; i <num; i ++) {

jika (rawak (1) <0.5) {

isi (0, 50, 0);

} lain {

isi (50);

}

elips (rawak (50, lebar - 50), rawak (50, tinggi - 50), 20, 20);

}

}

[/cceN_cpp]

Di sini, melalui fungsi secara rawak, kita telah menggabungkan warna hijau dan warna putih, yang telah membawa alpha, ke dalam zarah. Kita boleh menggunakan tetikus untuk mengawal kuantiti bulatan dan melihat kesan tumpang tindih.

ADD dan SCREEN agak serupa. Walaupun sama untuk mencerahkan, ada perbezaan yang halus. Anda boleh menggantinya menjadi SCREEN dan membuat perbandingan. Setelah bertindih, kemurnian dan kecerahan ADD akan menjadi lebih tinggi. Ia sesuai untuk menganalisa kesan pencahayaan.

Mengenai warna, di sini kita telah mengakhiri bab ini. Untuk "bahasa" ini, anda sudah cukup menguasai perbendaharaan kata. Sekarang, cepat gunakan kod untuk menikmati dunia bentuk dan warna!

Langkah 10: Sumber

Artikel ini berasal dari:

Jika ada pertanyaan, Anda dapat menghubungi: [email protected].