Tasarımcı için İlginç İşleme Programlama Rehberi -- Renk Kontrolü: 10 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:17

Önceki bölümlerde, renkle ilgili bilgi noktaları yerine şekillendirme yapmak için kodun nasıl kullanılacağı hakkında daha fazla konuştuk. Bu bölümde, bilginin bu yönünü daha derinden keşfedeceğiz.

Adım 1: Renk Hakkında Temel Bilgiler

Renk, belirli bir açıdan insan sezgisini aştı. Çıplak gözle gördüğümüz çeşitli güzel renkler aslında aynı bileşenlerden oluşmaktadır. Sadece kırmızı, yeşil ve mavi olmak üzere üç açık renk ile insan gözünün görebileceği tüm renkleri karıştırarak oluşturabiliriz.

Şu anda gördüğünüz mobil ekranlar ve bilgisayar ekranları bu prensipten yola çıkılarak oluşturulur. Kırmızı, yeşil ve mavi, ışığın üç orijinal rengi olarak adlandırılır. Üç elementin oranı sayesinde belirli bir rengi garanti edebiliriz. Bu açıklama yöntemine RGB modu da denir. Bunların arasında kırmızı R, yeşil G ve mavi B'dir.

RGB modu dışında CMYK modu olarak adlandırılan bir mod daha vardır. Genellikle baskı ile birleştirilir. Baskıda da üç orijinal renk vardır. Ancak ışığın orijinal üç renginden farklıdır. Bunlar ayrı ayrı kırmızı, sarı ve mavidir. Bunların arasında C camgöbeği, M macenta ve Y sarı için. Teorik olarak, yalnızca CMY ile çoğu rengi karıştırabiliriz. Ancak hammaddenin üretim tekniği nedeniyle, CMY'nin doygunluğunu %100'e zar zor getiremiyoruz. Bu üç rengi karıştırırsak yeterince koyu olan siyah rengi elde edemeyiz. Yani baskının tamamlayıcısı olarak siyah baskı mürekkebi için fazladan bir K var.

RGB ve CMYK'ya gelince, doğada çok bariz bir fark olduğunu bilmeniz yeterli. RGB, daha fazla rengi karıştırarak parlaklığı artıran artı renk modudur. CMYK, daha fazla rengi karıştırarak karanlığı artıran eksi renk modudur. Aşağıdaki resimde iki modun benzerliklerini ve farklılıklarını görsel olarak görebiliriz. Soldaki resim, üç farklı renkte el fenerinin açık olduğu karanlık bir ev olduğunu hayal edebiliyoruz. Sağdaki resim, kırmızı, yeşil ve mavi olmak üzere üç pigmentle üst üste bindirildikten sonra suluboya kağıdı olarak kabul edebiliriz.

Farklı renk modları arasındaki göreceli ilişkileri daha derinlemesine bilmek istiyorsanız, photoshop'unuzu açıp renk seçiciyi seçebilirsiniz. Ardından, aynı rengin renk değerlerini farklı renk modları altında sezgisel olarak görebilirsiniz.

Son olarak, sizin için başka bir yaygın renk modu olan HSB'yi tanıtmak istiyoruz. HSB'nin “Orijinal Renk” kavramı yoktur. Renkler için insan gözünün hislerine göre sınıflandırılır. H renk tonu, S doygunluk ve B parlaklık anlamına gelir.

Ton, renk eğilimini temsil eder. Her rengin, ancak siyah, beyaz veya gri olmadığı sürece belirli bir renk eğilimi vardır. Renk seçicideki en zengin renk geçiş alanı, tonu belirtmek için kullanılır. PS cinsinden değeri 0 ile 360 arasında değişir.

Doygunluk, rengin saflığı anlamına gelir. Daha yüksek saflık daha canlı renkler getirir. PS cinsinden değeri 0 ile 100 arasındadır.

Parlaklık, rengin 0 ile 100 arasında değişen açıklık derecesi anlamına gelir.

RGB modu ile karşılaştırıldığında, HSB'nin üç boyutu, renkler için insan gözünün hissine çok daha uygundur. Sadece HSB değerlerine bakın, genel olarak ne tür bir renk olduğunu hayal edebilirsiniz.

Aynı renge gelince, RGB modunda renk değeri (255, 153, 71), HSB'de ise (27, 72, 100)'dir.

Sadece RGB'ye bakarsak, üç orijinal rengi karıştırdıktan sonra nasıl görüneceğini yargılamak zor. Ancak HSB farklıdır. Sadece kırmızı 0, turuncu 30 ve sarı 60 gibi renklerin tonlarını tanımanız yeterli, o zaman H olduğunda yüksek parlaklığa sahip nispeten doygun ve kırmızıya biraz yakın bir turuncu renk olacağını anlayacaksınız. 27.

Daha sonra, iki modun üç boyutunu uzayda x, y, x ile eşleştireceğiz ve karşılaştırma yapmak için bir kübik renk çizeceğiz.

RGB ve HSB, renkleri tanımlamak için yalnızca farklı yöntemlerdir. Adresi bir metafor olarak alabiliriz. Diyelim ki diğer insanlara İmparatorluk sarayının konumunu söylemek istiyorsanız, Jingshan Front Street, Dongcheng Bölgesi, Pekin'in 4 No'lu adresinde olduğunu söyleyebilirsiniz. Veya Kuzey enleminde 15 saniye 55 dakika 39 derece ve Doğu boylamında 26 saniye 23 dakika 116 derece diyebilirsiniz. HSB'nin açıklama yöntemi öncekine benzer. Göreceli alana aşina iseniz, genellikle adresin konumunu bilebilirsiniz. RGB daha doğru olsa da çok soyuttur.

HSB modu, rengi daha rahat tanımlamamıza yardımcı olmak amacıyla vardı. Ekranda belirli bir renk türünü görüntülemek için, önce onu RGB moduna dönüştürmemiz gerekiyor.

Yukarıda üç renk modu sunuyoruz: RGB, HSB, CMYK. Programda sadece iki moda odaklanmanız gerekiyor: RGB ve HSB. Aynı zamanda kendi avantajlarına ve kendi uygulamalarına sahiptirler. Buna aşina iseniz, en tasarım gereksinimlerinizi karşılayacaktır.

2. Adım: Renkleri Depolamak için Veri Türü

Programda renkleri göstermek için daha önce RGB modunu kullanıyoruz. Ancak, yalnızca üç özelliği kontrol ederek herhangi bir rengi görüntüleyebilir miyiz? Bilgisayarda bu böyle.

Daha önce Processing'de değinmiştik, R, G, B hariç, renkler için bir alfa(şeffaflık) atayabiliriz. Ancak alfa, rengin bileşenine ait değildir. Varlığı, arkasındaki renklerle uygun karışımdır. Bu nedenle, bilgisayarların belirli bir renk türünü doğru bir şekilde tanımlaması için, yalnızca anahtar üç değişkeni kontrol etmemiz gerekir.

Aşağıda, esas olarak renkleri depolamak için kullanılan bir tür Renk veri türünü tanıtmaya başlıyoruz. Boolena, int, float gibi daha önce bahsedilen veri türlerine benzer.

Burada, önce rengin gerçek kullanımını açıklamaya devam edeyim. Şunu hayal edin: belirli bir veriyi depolamak için yalnızca önceden öğrenilen yöntemleri kullanabileceğimizi varsayalım, ne yapacağız?

Kod Örneği (9-1):

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

geçersiz kurulum(){

boyut(400, 400);

r = 255;

g = 0;

b = 0;

}

geçersiz beraberlik(){

arkaplan(0);

rectMode(CENTER);

doldur(r, g, b);

rect(genişlik/2, yükseklik/2, 100, 100);

}

[/cceN_cpp]

Renk eğilimi olan renklere gelince, verileri sırasıyla kırmızı, yeşil ve mavi olmak üzere üç renk kanalında saklamak için üç değişken oluşturmamız gerekiyor. Daha sonra bu renk veri setini çağırmak istiyorsak, onu dolgu veya kontur olarak yazmamız gerekir.

Ancak, veriler birbirine bağlı olduğu için bunu yapmanın çok zahmetli olduğunu göreceksiniz. Bunları kullanımda paketleme fikriniz varsa, daha uygun olacaktır. Bu nedenle, renk oluşturulur.

Kod Örneği (9-2):

[cceN_cpp theme="şafak"] myColor rengi;

geçersiz kurulum(){

boyut(400, 400);

myColor = renk(255, 0, 0);

}

geçersiz beraberlik(){

arkaplan(0);

rectMode(CENTER);

doldur(myColor);

rect(genişlik/2, yükseklik/2, 100, 100);

} [/cceN_cpp]

İnt gibi veri türlerinde olduğu gibi, değişkenleri oluşturmak için başlangıçta “color myColor” kullanmamız gerekiyor.

Kurulumda, myColor değişkenine değer atamak için “myColor = color(255, 0, 0)” kullanırız. color(a, b, c) işlevi, bu veri kümesinin myColor değişkenini içe aktarmak için bir renk türü oluşturduğunu haklı olarak temsil eder. “myColor = (255, 0, 0)” yazarsanız program yanlış gidecektir.

Son olarak, renk doldurma işlemini gerçekleştirmek için fill() kullanıyoruz. Fill() ve Strok() işlevlerinin ikisi de örtüşmeye olanak sağlar. Parametrelerin miktarına ve türüne göre farklı etkileri olacaktır. Yalnızca gri tonlamalı bir renk olduğunu temsil eden yalnızca bir tamsayı değişkenini içe aktarma. Değişken bir rengi içe aktarırken, renk aralığının daha büyük olacağı anlamına gelir. Ayrıca bir renk değişkenini ve bir tamsayı değişkenini içe aktarabilir, yukarıdaki fill() işlevini fill(myColor, 150) olarak değiştirebilir, ardından ikinci parametreyle alfayı kontrol edebilirsiniz.

Adım 3: Örtüşen Doldurma Yöntemi

kontur, arka plan dolgu ile aynı örtüşme yöntemine sahiptir.

Rengin Kanal Değerini Oku

Atamaya ek olarak, renk değişkenindeki RGB değerini bağımsız olarak da elde edebilirsiniz.

Kod Örneği (9-3):

[cceN_cpp theme="şafak"] myColor rengi;

geçersiz kurulum(){

myColor = renk(255, 125, 0);

println(kırmızı(myColor));

println(green(myColor));

println(mavi(myColor));

}

[/cceN_cpp]

Konsoldaki sonuç: 255, 125, 0.

red(), green(), blue() işlevi, nispeten myColor'daki kırmızı, yeşil ve mavi kanalın değerine geri dönecektir.

Onaltılık Atama

RGB'yi göstermek için ondalık sayılar kullanmak dışında, onaltılık da kullanabiliriz. Ondalık, 10 ile karşılaştığında 1 artırmak anlamına gelir. Onaltılık, 16 ile karşılaştığında 1 artırmak anlamına gelir. Ondalık ile göreli ilişkisi: “0 ila 9”, “0'a karşılık gelir. 9'a kadar", "A'dan F'ye", "10 ila 15"e karşılık gelir.

Aşağıdaki resim, dönüştürme yönteminin gösterimidir.

Tabii ki, ff7800 gibi bir onaltılık değerler kümesi alırsak, onu manuel olarak dönüştürmek zorunda değiliz. Program doğrudan renk değişkenlerine değerler atayacaktır. Bu çok uygun.

Çevrimiçi olarak birçok renk kartının, rengi görüntülemek için onaltılık yöntemi benimsediğini görebiliriz.

Tasarım topluluğu top sürme gibi, sanat eserlerine renk paletleri eklenecektir. Favori bir renk görürseniz, programa uygulayabilirsiniz.

Kod Örneği(9-4):

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

geçersiz kurulum(){

boyut(400, 400);

rectMode(CENTER);

noStroke();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

geçersiz beraberlik(){

arkaplan(backColor);

doldur(renkA);

rect(200, 200, 90, 300);

doldur(renkB);

rect(100, 200, 90, 300);

doldur(renkC);

rect(300, 200, 90, 300);

} [/cceN_cpp]

Artık renk, değerleri rastgele girmekten daha iyi efektle çok daha rahat.

Onaltılı renk değerinden önce “#” ekleyin, ardından değişken renge doğrudan değer atayabilirsiniz.

Adım 4: HSB Modu

RGB modunun yanı sıra, şimdi HSB modundan bahsedeceğiz. Aşağıda HSB modunun değer atama yöntemi gösterilmektedir.

Kod Örneği (9-5):

[cceN_cpp theme="şafak"] geçersiz kurulum() {

boyut(400, 400);

colorMode(HSB);

}

geçersiz beraberlik() {

arkaplan(0);

rectMode(CENTER);

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

renk sütunu = renk(i/20.0 * 255, 255, 255);

doldur(sütun);

rect(i * 20 + 10, yükseklik/2, 10, 300);

}

} [/cceN_cpp]

Processing'de, HSB modunu değiştirmek için sadece colorMode(HSB) cümlesini eklememiz gerekiyor. colorMode() işlevinin kullanımı, renk modunu değiştirmektir. Parantez içine “HSB” yazarsak, HSB moduna ayarlanacaktır; “RGB” yazarken RGB moduna geçecektir.

Dikkat edilmesi gereken nokta colorMode(HSB) yazarken HSB'nin varsayılan maksimum değeri 255'tir. Bu, Photoshop'taki maksimum değerden oldukça farklıdır. Photoshop'ta H'nin maksimum değeri 360, S ve B'nin maksimum değeri 100'dür. O yüzden dönüştürme yapmamız gerekiyor.

Photoshop'ta HSB değeri (55, 100, 100) ise Processing'e dönüştürüldüğünde bu değer (55 / 360 × 255, 255, 255), yani (40, 255, 255) olmalıdır.

colorMode() üst üste binebilen bir işlevdir. Aşağıda, size ayrıntılı olarak tanıtacağız.

Adım 5: ColorMode'un Çakışan Yöntemi

Bu nedenle Photoshop'ta HSB değerini manuel olarak dönüştürmek istemiyorsanız, “colorMode()”u “colorMode(HSB, 360, 100, 100)” içine yazabilirsiniz.

HSB Modu Uygulama Durumu 1

RGB modu ton değişikliklerini kontrol etmek için pek uygun olmadığından, şu anda renkleri daha esnek bir şekilde kontrol etmek istiyorsanız HSB modunu düşünebilirsiniz.

Kod Örneği(9-6):

[cceN_cpp theme="şafak"] geçersiz kurulum() {

boyut(800, 800);

arkaplan(0);

colorMode(HSB);

}

geçersiz beraberlik() {

vuruş Ağırlığı(2);

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

yüzer yeniX, yeniY;

yeniX = fareX + (gürültü(millis()/1000.0 + 1.2) - 0.5) * 800;

yeniY = fareY + (gürültü(millis()/1000.0) - 0,5) * 800;

line(mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Strokta H(hues)'u kontrol ettiğimizde millis() kullandık. Başlangıçtan günümüze kadar olan operasyon süresini alacaktır. Böylece zaman ilerledikçe H(hue) değeri otomatik olarak artacak, ardından renk değişecektir.

millis() birimi ms'dir. Yani program 1 saniye çalıştığında dönüş değeri 1000 olacaktır. Bu da çok büyük bir değere yol açacaktır. Bu yüzden 1000.0'a bölmemiz gerekiyor.

Renklerin periyodik bir sirkülasyon sunacağını umduğumuz için, son olarak Strok'ta ilk parametreyi yazdığımızda modulo işlemi yapmamız gerekiyor. Bu, H(hue) 255'i aştığında tekrar 0'dan başlamasını sağlayabilir.

StrokWeight() işlevi, çizgilerin kalınlığını kontrol edebilir. Parantez içindeki parametreler için karşılık gelen birim pikseldir.

Adım 6: Mod Uygulama Örneği 2

Kod Örneği(9-7):

[cceN_cpp theme="şafak"] int num; // şu anda çizilen çizgilerin miktarı

kayan posX_A, posY_A; // A noktasının koordinatı

kayan posX_B, posY_B; // B noktasının koordinatı

yüzer açıA, hızA; // A noktasının açısı, hız

yüzer açıB, hızB; // B noktasının açısı, hız

kayan yarıçapX_A, yarıçapY_A; // A noktasının X(Y) ekseninde oluşturduğu ovalin yarıçapı.

kayan yarıçapX_B, yarıçapY_B; // B noktasının X(Y) ekseninde oluşturduğu ovalin yarıçapı.

geçersiz kurulum() {

boyut(800, 800);

colorMode(HSB);

arkaplan(0);

hızA = 0.0009;

hızB = 0.003;

yarıçapX_A = 300;

yarıçapY_A = 200;

yarıçapX_B = 200;

yarıçapY_B = 300;

}

geçersiz beraberlik() {

çevir(genişlik/2, yükseklik/2);

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

açıA += hızA;

açıB += hızB;

posX_A = cos(açıA) * yarıçapX_A;

posY_A = sin(açıA) * yarıçapY_A;

posX_B = cos(açıB) * yarıçapX_B;

posY_B = sin(açıB) * yarıçapY_B;

vuruş(int(num/500.0) % 255, 255, 255, 10);

line(posX_A, posY_A, posX_B, posY_B);

sayı++;

}

} [/cceN_cpp]

Operasyon Etkisi:

Çıktı Resmi:

Gördüğünüz desen, sürekli örtüşen hareketli bir çizgi tarafından üretilir. Çizginin iki uç noktasının izleri ayrı ayrı iki dairedir.

HSB modu ile ton değişikliklerini kontrol ettik. Çizgilerin artmasıyla ton dengelenecektir. Büyük yarı saydam çizgiler üst üste bindiğinde çok zengin bir renk geçişi yaratacaktır.

Satır miktarını kontrol etmek için for döngüsünü kullanmayı amaçlayan fonksiyon çizimine bir for döngüsü yerleştirdik. Kontrollü çizim hızına sahip olmamızla eşdeğerdir. For döngüsündeki yargı koşulunun değerini artırmak, çizimin sayısını artıracaktır.

Aşağıda şematik şekil verilmiştir. Dairelerin hareket izini daha net görebilirsiniz.

Farklı hız ve yarıçapı ayarlayın, oluşan desenler de farklı olacaktır. Açı, hız, yarıçapX, yarıçapY gibi değişkenleri değiştirmeye çalışın ve ne olacağını görün.

Adım 7: Katman Karıştırma Modu

Daha önce bahsettiğimiz çeşitli renk modlarının tümü, grafik bileşenlerini renklendirmek için kullanılır. Rengi kontrol etmek için bu yöntemi kullanmak dışında, İşleme, Photoshop gibi çeşitli katmanların karıştırma modlarını kullanabilir.

PS'de katman penceresini açın, katmanların harmanlama modunu seçmek için tıklayın, ardından bu seçenekleri görebiliriz.

Bunlar PS'de var olan katman modlarıdır. Basitçe söylemek gerekirse, karıştırma modu bir tür renk hesaplama modu olarak kabul edilebilir. “A rengi” artı “B rengi” olduğunda en son hangi rengin oluşturulacağına karar verecektir. Burada “A rengi”, geçerli katmanın arkasındaki renk anlamına gelir (temel renk olarak da adlandırılır). “B rengi”, geçerli katmanın rengi anlamına gelir (karışık renk olarak da adlandırılır). Program, A ve B renklerinin RGB değerine ve alpha değerine göre C rengi elde etmek için hesap yapacaktır. Sonuç olarak ekranda görüntülenecektir.

Farklı katman modu, farklı hesaplama yöntemleri anlamına gelir. Bu makale dizisinin sonraki yarısında, ayrıntılı olarak açıklamaya devam edeceğiz. Şimdi sadece önce kullanımını bilmemiz gerekiyor.

Programda Add Mode kullanma örneğine bakalım.

Kod Örneği(9-8):

[cceN_cpp theme="şafak"] PImage image1, image2;

geçersiz kurulum(){

boyut(800, 400);

image1 = loadImage("1.jpg");

image2 = loadImage("2.jpg");

}

geçersiz beraberlik(){

arkaplan(0);

blendMode(EKLE);

resim(resim1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Sonuç:

BlendMode() işlevi, grafiklerin karıştırma modunu ayarlamak için kullanılır. ADD'yi, Add Mode ayarladığımız anlamına gelir.

Programda katman kavramı yoktur. Ancak, grafik bileşenlerinin çizim sırası olduğu için, resimleri karıştırırken, görüntü 1 temel renk olarak ve görüntü 2, karışık renk olarak kabul edilir.

ADD modu “Brighten Class”a aittir. Kullandıktan sonra parlak bir etki elde edeceksiniz.

Aşağıda, İşleme'de kullanılabilecek bir karıştırma modu bulunmaktadır.

Adım 8: Karıştırma Modunun İşlenmesi

Efekti görmek için farklı karıştırma modunu değiştirmeyi deneyebiliriz.

Örnek (9-8) örtüşme modunu benimsediğinde (arka plan beyaz olarak ayarlanmalıdır):

Çıkarma Modunu kullandıktan sonra (arka plan beyaz olarak ayarlanmalıdır):

Adım 9: Katman Karıştırma Modu Uygulama Örneği

Karıştırma modu sadece resimlerde kullanılamaz, aynı zamanda tuvaldeki tüm grafik bileşenleri için de uygundur. Aşağıda Add Mode ile ilgili bir kullanım gösterilmiştir. Çeşitli aydınlatma efektlerini analog hale getirmek için kullanılabilir.

Kod Örneği(9-9):

[cceN_cpp theme="şafak"] geçersiz kurulum() {

boyut(400, 400);

}

geçersiz beraberlik() {

arkaplan(0);

blendMode(EKLE);

int sayı = int(3000 * fareX/400.0);

for(int i = 0;i < sayı;i++){

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

doldur(0, 50, 0);

}Başka{

doldur(50);

}

elips(rastgele(50, genişlik - 50), rastgele(50, yükseklik - 50), 20, 20);

}

}

[/cceN_cpp]

Burada rasgele fonksiyon aracılığıyla, zaten alfa taşıyan yeşil renk ve beyaz rengi parçacıklara harmanladık. Daire miktarını kontrol etmek ve örtüşen etkiyi izlemek için fareyi kullanabiliriz.

ADD ve SCREEN oldukça benzerdir. Aydınlatmak aynı olsa da, ince farklılıklar vardır. EKRAN olarak değiştirip karşılaştırma yapabilirsiniz. Üst üste bindirildikten sonra, ADD'nin saflığı ve parlaklığı daha yüksek olacaktır. Aydınlatma efektini benzetmek için uygundur.

Renk konusuna gelince, bu bölümde burada sona geldik. Bu “dil” için zaten yeterince kelime hazinesine hakim oldunuz. Şimdi, şekil ve renk dünyasının tadını çıkarmak için kodu kullanmak için acele edin!

Adım 10: Kaynak

Bu makale https://www.elecfreaks.com/11462.html adresinden alınmıştır.

Herhangi bir sorunuz varsa, [email protected] ile iletişime geçebilirsiniz.