Bitmap Renk Kanalları ile Resim Üzerinde Gri Tonlama

Actionscript içerisindeki Bitmap sınıfı ile yapılabilecekler küçümsenecek gibi değil. Resim işleme programlarında kullanılan efekt ve filtrelerin bir çoğunu Actionscript içerisinde de kullanılabilir. Bitmap sınıfı ve birazda matematik bilgisi ile çok güzel şekiller çıkabilir. Bu makalede bir Bitmap verisi üzerinde renk kanallarının nasıl alıp değiştirebileceğimize değineceğim. Örnekte sahneye eklenen bir resmin fare işaretçisinin sahne üzerindeki konumuna göre resmin rengini değiştiriyoruz. Burada ki ana mantık ise resmin üzerindeki belirli renk kanallarını alarak, yeni bir Bitmap verisine atamak. Resim üzerinden alınacak olan renk kanalı Yeşil, uygulanacak olan kanallar ise sırasıyla Kırmızı, Yeşil ve Mavi.

Ve başlayalım. İlk olarak gerekli sınıfları import etmemiz gerekiyor;

  1. import flash.display.Bitmap;
  2. import flash.display.BitmapData;
  3. import flash.geom.Rectangle;
  4. import flash.geom.Point;

Daha sonra kütüphanede yer alan Bitmap objemizi (jpg) alıyoruz. Kütüphanedeki objemize Linkage ID olarak “circle” ismini veriyoruz. Burada ilk olarak yeni bir BitmapData yaratıyoruz, daha sonra sınıf ismine ise kütüphanedeki objenin ismini yazıyoruz. Kod içerisinde değinmek istediğim tek bir nokta var oda BitmapData objesine yolladığımız parametre. Burada genişlik ve yükseklik için sıfır (0) değerlerini verdik. Bu değerleri vermemiz zorunlu ama bu değerlerin hiçbir yaptırımı yok, yani resmin orijinal boyutları ile bu işlem gerçekleşiyor. Sonuç olarak oradaki parametrelere bir değer girmek zorundasınız ama bu değer resim dosyasını hiçbir şekilde etkilemeyecektir.

  1. var circleImageData:BitmapData = new circle(0,0);

Kütüphanedeki objemizi sahneye ekledik, şimdi ise renk kanallarını fare işaretçisinin pozisyonuna göre kopyalamak kalıyor. Bunun için ilk olarak yeni bir BitmapData objesi oluşturuyoruz, objenin genişlik ve yüksekliğine ise kütüphaneden aldığımız objenin genişlik ve yükseklik değerini veriyoruz. Daha sonra kütüphaneden aldığımız objeyi clone metodu ile grayBitmapData objesine klonluyoruz.

  1.  
  2. var grayBitmapData = new BitmapData(circleImageData.width, circleImageData.height, true, 0);
  3. grayBitmapData = circleImageData.clone();

Şimdi sırada kullanacağımız değişkenleri oluşturmak var. İlk olarak xPos değişkenimiz var, bu değişkene fare işaretçisinin bulunduğu konumu atayacağız. İkinci objemiz descPoint objemiz, bu obje sadece x ve y pozisyonlarını tutuyor. Sırada ise bir Rectangle objesi var. Bu obje kopyalanacak olan piksellerin sınırlarını belirleyecek. Son olarak ta grayBitmap isimli bir Bitmap objesi oluşturuyoruz, bu obje ile grayBitmapData objesini ekrana ekleyeceğiz.

  1. var xPos:Number;
  2. var destPoints:Point = new Point(0,0);
  3. var rect:Rectangle = new Rectangle();
  4. var grayBitmap:Bitmap = new Bitmap();

32-Bitlik renk sisteminde 4 tane renk kanalı bulunuyor, bunlar; Alpha(Şeffaflık), Blue(Mavi), Green(Yeşil), Red (Kırmızı). Sahnedeki objemizden sadece yeşil renk kanalını alacağız, yeni yarattığımız grayBitmapData objesine ise aldığımız yeşil kanalı kırmızı, yeşil ve mavi renk kanallarına yollayacağız. Böylelikle resmin renk tonlamasını gri üzerine kurmuş olacağız;

  1. var redColorChannel:uint = 1;
  2. var greenColorChannel:uint = 2;
  3. var blueColorChannel:uint = 4;

Buradaki 1, 2, 4 değerleri ise BitmapDataChannel sınıfında bulunan değerlerdir. Şimdi ENTER_FRAME olayın dinlemek için bir adet olay dinleyicisi ekliyoruz, daha sonra ise fonksiyonumuzu yazıyoruz.

  1. this.addEventListener(Event.ENTER_FRAME, render);
  2. function render(e:Event) {
  3.  xPos = mouseX;
  4.  rect = new Rectangle(0, 0, xPos, grayBitmapData.height);
  5.  grayBitmapData.copyPixels(grayBitmapData,rect,destPoints);
  6.  grayBitmapData.copyChannel(grayBitmapData,rect,destPoints,greenColorChannel,redColorChannel);
  7.  grayBitmapData.copyChannel(grayBitmapData,rect,destPoints,greenColorChannel,greenColorChannel);
  8.  grayBitmapData.copyChannel(grayBitmapData,rect,destPoints,greenColorChannel,blueColorChannel);
  9.  rect = new Rectangle(xPos, 0, grayBitmapData.width-xPos, grayBitmapData.height);
  10.  grayBitmapData.copyPixels(circleImageData,rect,new Point(xPos, 0));
  11.  grayBitmap = new Bitmap(grayBitmapData);
  12.  addChild(grayBitmap);
  13. }

Fonksiyonu içerisinde ise ilk olarak fare işaretçisinin o anki x pozisyonunu alıyoruz.  İkinci olarak Rectangle objesinin değerlerini veriyoruz. Üçüncü satırda copyPixels metodu ile fare işaretçisinin bulunduğu alana kadar olan yeri kopyalıyoruz. Dört, beş ve altınca satır kodlarda copyChannel metodunu kullanarak yeşil renk kanalını alıp renk kanalının değerlerini değiştiriyoruz, böylece oluşacak olan yeni Bitmap verisi gri renk üzerine kurulmuş olacak.
Daha sonra Rectangle objesinin değerlerini yeniden veriyoruz, bunu bir sonraki satırdaki copyPixels metodunda kullanıyoruz. Ve son iki satır kodda ise Bitmap objesine değeri verip ekrana ekliyoruz.

İlk başta biraz zorlanabilirsiniz, ama biraz uğraştıkça bu sınıf yapısı ile çalışmayı seveceğinize eminim.

Not: Buradaki renk kanalı kopyalama örneği Brendan Dawes’in Actionscript 2.0 ile yapılmış bir çalışmasından temel alınarak yapılmıştır.

Kaynak Dosyalar

Kolay Gelsin
Engin!

Leave a Reply