Panduan Pemrograman Pemrosesan yang Menarik untuk Perancang-- Kontrol Warna: 10 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54

Dalam bab-bab sebelumnya, kita telah berbicara lebih banyak tentang bagaimana menggunakan kode untuk melakukan pembentukan daripada poin pengetahuan tentang warna. Dalam bab ini, kita akan mengeksplorasi aspek pengetahuan ini lebih dalam.

Langkah 1: Pengetahuan Dasar Tentang Warna

Warna, dalam aspek tertentu, telah melampaui intuisi manusia. Berbagai warna indah yang kita lihat dengan mata telanjang sebenarnya terdiri dari komponen yang sama. Hanya dengan tiga warna terang yaitu merah, hijau dan biru, kita dapat menciptakan semua warna yang dapat dilihat oleh mata manusia melalui campuran.

Layar ponsel dan layar komputer yang saat ini Anda lihat dibuat berdasarkan prinsip ini. Merah, hijau dan biru disebut tiga warna asli cahaya. Melalui rasio tiga elemen, kami dapat memastikan warna tertentu. Metode deskripsi ini juga disebut mode RGB. Diantaranya, merah adalah R, hijau adalah G dan biru adalah B.

Kecuali mode RGB, ada mode lain yang disebut mode CMYK. Biasanya dikombinasikan dengan pencetakan. Dalam pencetakan, ada tiga warna asli juga. Namun, berbeda dengan tiga warna asli cahaya. Mereka berwarna merah, kuning dan biru secara terpisah. Di antaranya, C untuk cyan, M untuk magenta, dan Y untuk kuning. Secara teoritis, hanya dengan CMY, kita dapat mencampur sebagian besar warna. Tetapi karena teknik produksi bahan baku, kami hampir tidak dapat membuat saturasi CMY mencapai 100%. Jika kita mencampur ketiga warna ini, kita tidak bisa mendapatkan warna hitam yang cukup gelap. Jadi ada tambahan K, yaitu untuk tinta sablon hitam, sebagai pelengkap sablon.

Adapun RGB dan CMYK, Anda hanya perlu tahu bahwa ada perbedaan yang paling jelas di alam. RGB adalah mode warna plus, yang meningkatkan kecerahan dengan mencampur lebih banyak warna. Sedangkan CMYK adalah mode warna minus, yang meningkatkan kegelapan dengan mencampur lebih banyak warna. Pada gambar di bawah ini, kita dapat melihat secara visual persamaan dan perbedaan dari kedua mode tersebut. Gambar kiri, kita bisa membayangkan sebuah rumah gelap dengan tiga warna berbeda dari lampu senter yang dinyalakan. Gambar di sebelah kanan, kita dapat menganggapnya sebagai kertas cat air setelah tumpang tindih dengan tiga pigmen merah, hijau dan biru.

Jika Anda ingin mengetahui hubungan relatif antara mode warna yang berbeda lebih dalam, Anda dapat membuka photoshop Anda dan memilih pemilih warna. Kemudian Anda dapat melihat nilai warna dari warna yang sama di bawah mode warna yang berbeda secara intuitif.

Terakhir, kami ingin memperkenalkan mode warna umum lainnya untuk Anda, HSB. HSB tidak memiliki konsep "Warna Asli". Hal ini diklasifikasikan menurut perasaan mata manusia untuk warna. H singkatan dari hue, S untuk saturasi, dan B untuk kecerahan.

Hue mewakili kecenderungan warna. Setiap warna memiliki kecenderungan warna tertentu hanya jika tidak hitam, putih atau abu-abu. Area transisi warna yang paling kaya pada pemilih warna digunakan untuk menunjukkan rona. Nilainya dalam PS berkisar dari 0 hingga 360.

Saturasi berarti kemurnian warna. Kemurnian yang lebih tinggi membawa warna yang lebih hidup. Nilainya dalam PS berkisar dari 0 hingga 100.

Kecerahan berarti tingkat kecerahan warna, mulai dari 0 hingga 100.

Dibandingkan dengan mode RGB, tiga dimensi HSB jauh lebih sesuai dengan perasaan mata manusia terhadap warna. Lihat saja nilai HSB-nya saja, biasanya bisa dibayangkan seperti apa warnanya.

Untuk warna yang sama, nilai warna pada mode RGB adalah (255, 153, 71), sedangkan pada HSB adalah (27, 72, 100).

Sulit untuk menilai seperti apa jadinya setelah mencampurkan tiga warna asli menjadi satu jika kita hanya melihat RGB. Tapi HSB berbeda. Anda hanya perlu membiasakan diri dengan rona warna seperti merah adalah 0, oranye adalah 30 dan kuning adalah 60, maka Anda akan tahu bahwa itu akan menjadi warna oranye yang relatif jenuh dengan kecerahan tinggi dan sedikit mendekati merah ketika H adalah 27.

Selanjutnya, kita akan menyesuaikan tiga dimensi dari dua mode menjadi x, y, x dalam ruang dan menggambar kubik warna untuk melakukan perbandingan.

RGB dan HSB hanyalah metode yang berbeda untuk menggambarkan warna. Kita dapat mengambil alamat sebagai metafora. Misalkan jika Anda ingin memberi tahu orang lain tentang posisi Istana Kekaisaran, Anda dapat mengatakannya di No. 4 Jingshan Front Street, Area Dongcheng, Beijing. Atau bisa dibilang pada 15 detik, 55 menit, 39 derajat di Lintang Utara dan 26 detik, 23 menit, 116 derajat di Bujur Timur. Metode deskripsi HSB mirip dengan yang pertama. Jika Anda terbiasa dengan area relatif, Anda biasanya dapat mengetahui posisi alamat. Sementara RGB mungkin lebih akurat, tetapi sangat abstrak.

Mode HSB hadir dengan tujuan untuk membantu kita mendeskripsikan warna dengan lebih nyaman. Untuk menampilkan jenis warna tertentu di layar, akhirnya kita harus mengubahnya menjadi mode RGB terlebih dahulu.

Di atas, kami memperkenalkan tiga mode warna: RGB, HSB, CMYK. Dalam program ini, Anda hanya perlu fokus pada dua mode: RGB dan HSB. Mereka memiliki kelebihan dan aplikasi mereka sendiri pada saat yang bersamaan. Jika Anda terbiasa dengannya, itu akan memenuhi sebagian besar persyaratan desain Anda.

Langkah 2: Tipe Data untuk Menyimpan Warna

Untuk menampilkan warna dalam program, kebanyakan kita menggunakan mode RGB sebelumnya. Namun, hanya dengan mengontrol ketiga properti tersebut, dapatkah kita menampilkan warna apa saja? Di komputer, seperti ini.

Kami telah merujuk sebelumnya bahwa dalam Pemrosesan, kecuali untuk R, G, B, kami dapat menetapkan alfa (transparansi) untuk warna. Tapi alpha tidak termasuk dalam komponen warna. Keberadaannya untuk campuran yang nyaman dengan warna di belakang. Oleh karena itu, agar komputer dapat menggambarkan jenis warna tertentu secara akurat, kita harus mengontrol tiga variabel kunci saja.

Berikut ini, kami mulai memperkenalkan jenis tipe data Warna, yang terutama digunakan untuk menyimpan warna. Ini mirip dengan tipe data yang dirujuk sebelumnya seperti boolena, int, float.

Di sini, izinkan saya tetap menjelaskan penggunaan warna yang sebenarnya terlebih dahulu. Bayangkan ini: misalkan jika kita hanya dapat menggunakan metode yang telah dikuasai sebelumnya untuk menyimpan data tertentu, apa yang harus kita lakukan?

Contoh Kode (9-1):

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

batalkan pengaturan(){

ukuran (400, 400);

r = 255;

g = 0;

b = 0;

}

batal menggambar(){

latar belakang(0);

rectMode(PUSAT);

isi(r, g, b);

rect(lebar/2, tinggi/2, 100, 100);

}

[/cceN_cpp]

Sedangkan untuk warna yang memiliki kecenderungan warna, kita perlu membuat tiga variabel untuk menyimpan data di tiga saluran warna masing-masing merah, hijau dan biru. Kemudian, jika kita ingin memanggil kumpulan data warna ini, kita harus menuliskannya ke dalam fill atau stroke.

Tetapi Anda akan merasa terlalu merepotkan untuk melakukannya karena data saling berhubungan. Jika Anda memiliki ide untuk mengemasnya saat digunakan, itu akan lebih nyaman. Oleh karena itu, terciptalah warna.

Contoh Kode (9-2):

[cceN_cpp theme="fajar"] warna myColor;

batalkan pengaturan(){

ukuran (400, 400);

myColor = warna(255, 0, 0);

}

batal menggambar(){

latar belakang(0);

rectMode(PUSAT);

isi(warnasaya);

rect(lebar/2, tinggi/2, 100, 100);

} [/cceN_cpp]

Sama dengan tipe data seperti int, kita harus menggunakan “color myColor” di awal untuk membuat variabel.

Dalam pengaturan, kami menggunakan "myColor = color(255, 0, 0)" untuk menetapkan nilai ke variabel myColor. Sementara fungsi color(a, b, c) dengan tepat menyatakan bahwa kumpulan data ini telah membentuk tipe warna untuk mengimpor variabel myColor. Jika Anda menulis “myColor = (255, 0, 0)”, maka program akan salah.

Terakhir, kita menggunakan fill() untuk merealisasikan operasi padding warna. Fungsi fill() dan stroke() keduanya memungkinkan untuk tumpang tindih. Menurut jumlah dan jenis parameter, itu akan memiliki efek yang berbeda. Mengimpor hanya satu variabel integer, yang mewakilinya adalah warna dengan skala abu-abu saja. Saat mengimpor warna variabel, itu berarti rentang warna akan lebih besar. Anda juga dapat mengimpor variabel warna dan variabel integer, mengubah fungsi fill() di atas menjadi fill(myColor, 150), kemudian Anda dapat mengontrol alpha dengan parameter kedua.

Langkah 3: Metode Pengisian yang Tumpang Tindih

stroke, background memiliki metode overlap yang sama dengan fill.

Baca Nilai Saluran Warna

Selain tugas, Anda juga dapat memperoleh nilai RGB secara mandiri dalam variabel warna

Contoh Kode (9-3):

[cceN_cpp theme="fajar"] warna myColor;

batalkan pengaturan(){

myColor = warna(255, 125, 0);

println(merah(warnasaya));

println(hijau(warnasaya));

println(biru(warnasaya));

}

[/cceN_cpp]

Hasil di konsol: 255, 125, 0.

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

Tugas Heksadesimal

Kecuali menggunakan bilangan desimal untuk menunjukkan RGB, kita juga dapat menggunakan heksadesimal. Desimal berarti bertambah 1 bila bertemu 10. Sedangkan heksadesimal berarti bertambah 1 bila memenuhi 16. Hubungan relatifnya dengan desimal adalah: “0 sampai 9” sesuai dengan “0 hingga 9", "A hingga F" sesuai dengan "10 hingga 15".

Gambar di bawah ini adalah ilustrasi dari metode konversi.

Tentu saja, jika kita mendapatkan sekumpulan nilai heksadesimal seperti ff7800, kita tidak perlu mengonversinya secara manual. Program akan memberikan nilai ke variabel warna secara langsung. Hal ini sangat nyaman.

Kita bisa melihat banyak kartu warna online yang semuanya mengadopsi metode heksadesimal untuk menampilkan warna.

Seperti dribbble komunitas desain, karya seni akan dilampirkan palet warna. Jika Anda melihat pewarnaan favorit, Anda dapat menerapkannya ke program.

Contoh Kode (9-4):

[cceN_cpp theme="fajar"] color backColor, colorA, colorB, colorC;

batalkan pengaturan(){

ukuran (400, 400);

rectMode(PUSAT);

tidak ada Stroke();

warna belakang = #395b71;

warnaA = #c4d7fb;

warnaB = #f4a7b4;

warnaC = #f9e5f0;

}

batal menggambar(){

latar belakang (warna belakang);

isi(warnaA);

persegi (200, 200, 90, 300);

isi(warnaB);

rect(100, 200, 90, 300);

isi(warnaC);

persegi (300, 200, 90, 300);

} [/cceN_cpp]

Sekarang, warnanya jauh lebih nyaman dengan efek yang lebih baik daripada memasukkan nilai secara acak.

Tambahkan "#" sebelum nilai warna heksadesimal, lalu Anda dapat menetapkan nilai ke warna variabel secara langsung.

Langkah 4: Mode HSB

Selain mode RGB, selanjutnya kita akan berbicara tentang mode HSB. Berikut ini menunjukkan metode penetapan nilai mode HSB.

Contoh Kode (9-5):

[cceN_cpp theme="fajar"] void setup() {

ukuran (400, 400);

mode warna(HSB);

}

batal menggambar() {

latar belakang(0);

rectMode(PUSAT);

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

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

isi(kolom);

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

}

} [/cceN_cpp]

Dalam Processing, untuk beralih ke mode HSB, kita hanya perlu menambahkan kalimat colorMode(HSB). Penggunaan fungsi colorMode() adalah untuk menggeser mode warna. Jika kita menulis "HSB" di braket, maka itu akan diatur ke mode HSB; saat kita menulis "RGB", itu akan digeser ke mode RGB.

Yang perlu diperhatikan adalah ketika kita menulis colorMode(HSB), nilai default maksimum HSB adalah 255. Ini sangat berbeda dengan nilai maksimum di Photoshop. Di Photoshop, nilai maksimal H adalah 360, nilai maksimal S dan B adalah 100. Jadi kita perlu melakukan konversi.

Jika nilai HSB di Photoshop adalah (55, 100, 100), saat dikonversi ke Processing, nilai ini seharusnya (55 / 360 × 255, 255, 255), yaitu (40, 255, 255).

colorMode() adalah fungsi yang dapat tumpang tindih. Berikut ini, kami akan memperkenalkannya kepada Anda secara rinci.

Langkah 5: Metode ColorMode yang Tumpang Tindih

Oleh karena itu, jika Anda tidak ingin mengubah nilai HSB di Photoshop secara manual, Anda dapat menulis “colorMode()” menjadi “colorMode(HSB, 360, 100, 100)”.

Kasus Aplikasi Mode HSB 1

Karena mode RGB tidak cukup nyaman untuk mengontrol perubahan rona, saat ini, jika Anda ingin mengontrol warna dengan lebih fleksibel, Anda dapat mempertimbangkan mode HSB.

Contoh Kode (9-6):

[cceN_cpp theme="fajar"] void setup() {

ukuran (800, 800);

latar belakang(0);

mode warna(HSB);

}

batal menggambar() {

strokeBerat (2);

stroke(int(milis()/1000.0 * 10)%255, 255, 255);

mengapung baruX, baruY;

newX = mouseX + (noise(millis()/1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (noise(millis()/1000.0) - 0.5) * 800;

baris(mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Saat kita mengontrol H(hues) dalam stroke, kita telah menggunakan millis(). Ini akan mendapatkan waktu operasi dari awal hingga saat ini. Dengan demikian, seiring dengan berjalannya waktu, nilai H(hue) akan meningkat secara otomatis, kemudian warna berubah.

Satuan milis() adalah ms. Jadi, ketika program berjalan selama 1 detik, nilai baliknya adalah 1000. Ini akan menghasilkan nilai yang terlalu besar. Jadi kita harus membaginya dengan 1000,0.

Karena kita berharap warna akan menghadirkan sirkulasi periodik, maka kita harus melakukan operasi modulo ketika akhirnya kita menulis parameter pertama dalam stroke. Ini dapat memastikan bahwa itu akan mulai dari 0 lagi ketika H(hue) telah melampaui 255.

Fungsi strokeWeight() dapat mengontrol ketebalan garis. Unit yang sesuai untuk parameter di dalam kurung adalah piksel.

Langkah 6: Kasus Aplikasi Mode 2

Contoh Kode (9-7):

[cceN_cpp theme="fajar"] int num; // jumlah garis yang saat ini ditarik

mengapung posX_A, posY_A; // Koordinat titik A

mengambang posX_B, posY_B; // Koordinat titik B

sudut mengambangA, kecepatanA; // Sudut titik A, kecepatan

sudut mengambangB, kecepatanB; // Sudut titik B, kecepatan

float radiusX_A, radiusY_A; // Jari-jari oval yang dibentuk oleh titik A pada sumbu X(Y).

float radiusX_B, radiusY_B; // jari-jari oval yang dibentuk oleh titik B pada sumbu X(Y).

batalkan pengaturan() {

ukuran (800, 800);

mode warna(HSB);

latar belakang(0);

kecepatanA = 0,0009;

kecepatanB = 0,003;

radiusX_A = 300;

radiusY_A = 200;

radiusX_B = 200;

radiusY_B = 300;

}

batal menggambar() {

terjemahkan(lebar/2, tinggi/2);

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

sudutA += kecepatanA;

sudutB += kecepatanB;

posX_A = cos(sudutA) * radiusX_A;

posY_A = sin(sudutA) * radiusY_A;

posX_B = cos(sudutB) * radiusX_B;

posY_B = sin(sudutB) * radiusY_B;

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

baris(posX_A, posY_A, posX_B, posY_B);

jumlah++;

}

} [/cceN_cpp]

Efek Operasi:

Gambar Keluaran:

Pola yang Anda lihat dihasilkan oleh garis gerak melalui tumpang tindih yang konstan. Jejak dari dua titik akhir garis adalah dua lingkaran secara terpisah.

Melalui mode HSB, kami telah mengontrol perubahan rona. Dengan bertambahnya garis, rona akan diimbangi. Ketika garis besar setengah transparan tumpang tindih, itu akan menciptakan gradien warna yang sangat kaya.

Kami telah menyematkan for loop ke dalam function draw dengan tujuan menggunakan for loop untuk mengontrol jumlah garis. Ini setara dengan kecepatan menggambar yang kita kendalikan. Peningkatan nilai dari kondisi judgement pada for loop, maka akan meningkatkan drawing seepd.

Di bawah ini adalah gambar skema. Anda dapat melihat jejak gerakan lingkaran dengan lebih jelas.

Sesuaikan kecepatan dan radius yang berbeda, pola yang terbentuk juga akan berbeda. Cobalah untuk mengubah variabel seperti sudut, kecepatan, radiusX, radiusY dan lihat apa yang akan terjadi.

Langkah 7: Mode Pencampuran Lapisan

Berbagai mode warna yang kita bicarakan sebelumnya semuanya digunakan untuk mewarnai komponen grafis. Kecuali untuk menggunakan metode ini untuk mengontrol warna, Processing dapat menggunakan berbagai mode blending layer seperti Photoshop.

Buka jendela layer di PS, klik untuk memilih blending mode layer, maka kita bisa melihat opsi ini.

Ini adalah mode lapisan yang ada di PS. Sederhananya, blending mode dapat dianggap sebagai semacam mode perhitungan warna. Ini akan memutuskan warna mana yang akan dibuat terakhir ketika "warna A" ditambah "warna B". Di sini "warna A" berarti warna di belakang lapisan saat ini (juga disebut warna dasar). " warna B" berarti warna lapisan saat ini (juga disebut warna campuran). Program akan menghitung untuk mendapatkan warna C sesuai dengan nilai RGB dan alpha warna A dan B. Ini akan ditampilkan di layar sebagai warna hasil.

Mode lapisan yang berbeda berarti metode perhitungan yang berbeda. Di bagian selanjutnya dari seri artikel ini, kami akan terus menjelaskannya secara rinci. Sekarang kita hanya perlu mengetahui kegunaannya terlebih dahulu.

Mari kita lihat contoh penggunaan Add Mode dalam program.

Contoh Kode (9-8):

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

batalkan pengaturan(){

ukuran (800, 400);

gambar1 = loadImage("1.jpg");

gambar2 = loadImage("2.jpg");

}

batal menggambar(){

latar belakang(0);

blendMode(TAMBAH);

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

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

}

[/cceN_cpp]

Hasil:

Fungsi blendMode() digunakan untuk mengatur blending mode grafik. Kami mengisi ADD di belakang berarti kami telah mengatur Add Mode.

Dalam program, tidak ada konsep lapisan. Namun karena terdapat urutan penggambaran dari komponen grafis, maka pada saat memadukan gambar, gambar 1 dianggap sebagai warna dasar dan gambar 2 sebagai warna campuran.

Mode ADD milik "Brighten Class". Setelah menggunakannya, Anda akan mendapatkan efek cerah.

Di bawah ini adalah blending mode yang dapat digunakan dalam Processing.

Langkah 8: Memproses Blending Mode

Kita dapat mencoba mengubah blending mode yang berbeda untuk melihat efeknya.

Ketika contoh (9-8) telah mengadopsi mode tumpang tindih (latar belakang harus disetel ke putih):

Setelah menggunakan Substract Mode (latar belakang harus disetel menjadi putih):

Langkah 9: Kasus Aplikasi Layer Blending Mode

Blending mode tidak hanya dapat digunakan untuk gambar, tetapi juga cocok untuk semua komponen grafis di kanvas. Di bawah ini telah ditampilkan penggunaan tentang Add Mode. Hal ini dapat digunakan untuk analog berbagai efek pencahayaan.

Contoh Kode (9-9):

[cceN_cpp theme="fajar"] void setup() {

ukuran (400, 400);

}

batal menggambar() {

latar belakang(0);

campuranMode(TAMBAH);

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

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

if(acak(1) < 0,5){

isi(0, 50, 0);

}lain{

isi(50);

}

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

}

}

[/cceN_cpp]

Di sini, melalui fungsi acak, kami telah memadukan warna hijau dan warna putih, yang telah membawa alfa, ke dalam partikel. Kita dapat menggunakan mouse untuk mengontrol jumlah lingkaran dan melihat efek tumpang tindih.

ADD dan SCREEN sangat mirip. Meskipun sama untuk mencerahkan, ada perbedaan halus. Anda dapat menggantinya ke SCREEN dan membuat perbandingan. Setelah tumpang tindih, kemurnian dan kecerahan ADD akan lebih tinggi. Sangat cocok untuk menganalogikan efek pencahayaan.

Adapun warna, di sini kita telah berakhir di bab ini. Untuk “bahasa” ini, Anda sudah cukup menguasai kosakata. Sekarang, cepatlah menggunakan kode untuk menikmati dunia bentuk dan warna!

Langkah 10: Sumber

Artikel ini dari:

Jika Anda memiliki pertanyaan, Anda dapat menghubungi： [email protected].