Processing Ders Notları - Temel 2

Bu noktada programımıza birkaç komut daha ekleyelim.

size(200,200);
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);





Şimdi her satırı açıklayalım.

size (200,200 ) ---------200 x 200 pixellik kadraj oluştur.
background(255) -------Kadrajı beyaza boya
stroke(0,255,0) --------Çizgi rengini saf yeşile ayarla
strokeWeight(5) --------Çizgi kalınlığını 5 pixel olarak ayarla
fill(255,0,0) -------------Dörtgenin iç rengini saf kırmızı olarak ayarla
rectMode(CENTER) ----Dörtgeni orta noktasını baz alarak,
rect(100,100,50,50) ----x ve y aksisinde 100 pixel ara vererek 50 x 50 pixellik dörtgen çiz.

Burada ilk göze çarpan renk verirken kullanılan sayılar. Neye göre veriyoruz bu sayıları. Açıklayayım.
Bu değerler aksi bir durum belirtmediğiniz sürece RGB renk sistemine göre oluşturulur.
stroke(0,255,0) ya da fill(255,0,0) de gördüğümüz sayı değerleri, RGB nin sayı olarak yazılmasından başka bir şey değildir. Biraz daha açalım.

R = Kırmızı ( Red )
G = Yeşil ( Green )
B = Mavi ( Blue )

R,G,B tek tek 0 - 255 arasında bir değer alabilir. 0 renk yok, 255 ise o renkten mümkün olduğu kadar çok var anlamına gelir. R,G,B ye ayrı ayrı 0 ila 255 arasında bir sayı verilerek 16 milyon dan biraz fazla renk oluşturulabilir. Örnek verelim ;

fill(69,54,150) ------- Bu renk mavi renge yakın bir renk olur. Çünkü B hanesindeki değer diğerlerinden daha yüksek bir değer.

fill(200,54,40) ------- Bu renk kırmızı renge yakın bir renk olur. Çünkü R hanesindeki değer diğerlerinden daha yüksek bir değer.

Bu noktada dikkat edilmesi gereken birşey var. Televizyon, monitör gibi ışık kaynaklı görüntüleme aletlerinde ana renkler kırmızı, yeşil ve mavi dir. Hepimiz televizyonun dibine girip o küçük noktacıklara yakından bakmışızdır. Bu üç nokta bir araya gelip pixel i oluşturur. Ve yukarda bahsettiğimiz herbir kanal için ( RGB ) bu üç nokta 0 dan 255 e kadar olan değerlerle aydınlatılır. Böylece ekranda renk oluşur. Ancak resim derslerinden hatırladığımız kadarı ile ana renkler kırmızı sarı ve mavidir. Boya ile örneğin turuncu elde etmek istediğim zaman, kırmızı ve sarıyı belirli bir miktarda karıştırmamız gerekir. Ama mönitörde bu rengi elde etmemiz için Kırmızı ve yeşili belirli bir miktarda karıştırmamız gerekir. RGB sisteminde hangi rengi nasıl eldeceğimiz biraz karışık gibi duruyor ama herhangi bir resim işleme programı ( örneğin Adobe Photoshop ) ile bu durumun üstesinden gelebilirsiniz.

fill(69,54,150);
stroke(0,255,0);
vb. renk kodları içeren komutlar ;


fill(150);
stroke(100);

şeklinde de kısaca da kullanılabilir.
Bu şekilde gri değeri elde edilir. Uzun yazılımı şöyledir.

fill(150,150,150);
stroke(100,100,100);

Bunun anlamı her kanaldaki renkten , fill(150,150,150); komutu için, 150 birim renk kullan.
Buradan yola çıkarak;
fill(0); ----------- hiçbir kanalda ışık olmadığı için siyah,
fill(255); -------- her kanalda olabilecek en yüksek değer olduğu için beyaz dır

diyebiliriz. Doğal olarak 0 - 255 arasındaki değerler de gri değerleri olur.


RGBA
RGB nin yanında bir de Alpha kanalı vardır ki, bu kanal transparanlığı sağlar. Yine diğer kanallardaki gibi A değeri de 0 - 255 arasındadır. 0 görünmez yani tam transparan, 255 ise tamamen görünürlük için verilen değerdir. Örnek ile açıklayalım;

size(200,200);
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,100,50);

noStroke();
fill(0,0,255,100);
rectMode(CENTER);
rect(100,100,50,100);


Son paragraftaki yeni değeri açıklayalım;

fill(0,0,255,100)---- son hanedeki 100 değeri yaklaşık %35 transparanlık sağlar. (255 / 100 )


son bir not.

Eğer çizdiğiniz şeklin kenarlarında çerçeve olsun istemiyorsanız
noStroke();

Şekilin içinin boş olmasını istiyorsanız
noFill();

komutunu kullanmanız gerekir.