Renkli Kareler
void setup(){
size(400,400);
background(255);
frameRate(30);
}
void draw(){
rectMode(CENTER);
strokeWeight(random(1,4));
fill(mouseX,mouseX-random(1,255),mouseY);
rect(mouseX,mouseY,50,50);
}
6 Temmuz 2009 Pazartesi
Processing Ders Notları - Temel - Alıştırmalar
Renkli Karelervoid setup(){
size(400,400);
background(255);
frameRate(30);
}
void draw(){
rectMode(CENTER);
strokeWeight(random(1,4));
fill(mouseX,mouseX-random(1,255),mouseY);
rect(mouseX,mouseY,50,50);
}
Processing Ders Notları - Temel 3
Void
Processing, her modern programlama dili gibi obje tabanlı programlamayı destekler. Bunu kek yapımına benzetebiliriz. Önce gerekli mazemeyi temin edersiniz. Sonra yumurta ile şeker ve yağı çırparsınız. Ardından un ekleyip iyice karıştırıp kakao ilave edersiniz. Ve fırına koyup pişirirsiniz. Burada önemli olan nokta herşeyin bir sırası olmasıdır. Bütün mazemeyi aynı anda kaba koyup karıştırırsak kekimiz pek bir halta benzemez. İşin sırrı gereken mazemeyi doğru zamanda kek hamuruna karıştırmaktır.
Programlama yaparken de aynı şey söz konusudur. Önce genel olarak ihtiyacımız olan şeyleri belirleriz, ardından adım adım programa eklemeler yaparız. Void komutu burada devreye girer.
Bu derste
Void setup(){ }
Void draw(){ }
komutlarını işleyeceğiz.
Daha önce yaptığımız örnek üzerinden gidelim.
size(200,200);
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);
bu kodu parçalara bölüyoruz.
void setup(){
size(200,200);
}
void draw(){
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);
}
Programın yeni halini çalıştırdığımız zaman, değişen hiçbirşey olmamış gibi geliyor bize. Halbuki büyük değişiklikler var. Açıklayayım
void setup(){
size(200,200);
}
void setup programımızın genel ayarlarının yapıldığı yer oluyor. Burada ki kodlar bir kez okunur ve birdaha okunmazlar.
void draw(){
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);
}
void draw ile başlayan komut seti ise, şu durumda, program kapatılana kadar sürekli devam edecek komutlarımızı içeriyor. Aslında program çalıştırıldığında sürekli aynı dörtgen sürekli üst üste çiziliyor. Dörtgenin konumu değişmediği için biz onu durağan görüyoruz. Ufak bir değişiklik yaparak processing ile ilk animasyonumuzu yapalım.
void setup(){
size(200,200);
}
void draw(){
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
Burada mouseX ve mouseY değişkenlerini kullanarak, dörtgenin mouse pointerının o andaki pozisyonunu orta nokta olarak aldık ve 50 x 50 pixellik kutu çizdirdik. Yukarda belirttiğim gibi program çalıştığı sürece bu kutu void draw() komutu sayesinde sürekli çizildiğinden biz kutuyu mouseun hareket ettirdiğini algıladık.
Bu arada background(255); satırnın void draw(); ın içinde void setup a taşırsak bakın neler oluyor.
void setup(){
size(200,200);
background(255);
}
void draw(){
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
background(255); satırını void setup() ın içine taşıdığımızda artık bu komut bir kez okunacağından kutunun mouse tarafından kontrol edilen pozisyonları ekranda kalıyor ve bu efekt vasıtasıyla ekrana çizim yapılıyormuş gibi bir izlenim oluşuyor.
Örnek verelim ;
void setup(){
size(200,200);
background(255);
}
void draw(){
stroke(0);
strokeWeight(2);
line(mouseX,mouseY,100,100);
}
--------------------
void setup(){
size(200,200);
background(255);
}
void draw(){
stroke(0);
strokeWeight(2);
line(pmouseX,pmouseY,mouseX,mouseY);
}
Buradaki pmouseX ve pmouseY komutu mouseun pozisyonunu sürekli güncelliyor ve bu sayede sanki çizgi çiziyormuş gibi bir izlenim ediniyoruz.
Processing, her modern programlama dili gibi obje tabanlı programlamayı destekler. Bunu kek yapımına benzetebiliriz. Önce gerekli mazemeyi temin edersiniz. Sonra yumurta ile şeker ve yağı çırparsınız. Ardından un ekleyip iyice karıştırıp kakao ilave edersiniz. Ve fırına koyup pişirirsiniz. Burada önemli olan nokta herşeyin bir sırası olmasıdır. Bütün mazemeyi aynı anda kaba koyup karıştırırsak kekimiz pek bir halta benzemez. İşin sırrı gereken mazemeyi doğru zamanda kek hamuruna karıştırmaktır.
Programlama yaparken de aynı şey söz konusudur. Önce genel olarak ihtiyacımız olan şeyleri belirleriz, ardından adım adım programa eklemeler yaparız. Void komutu burada devreye girer.
Bu derste
Void setup(){ }
Void draw(){ }
komutlarını işleyeceğiz.
Daha önce yaptığımız örnek üzerinden gidelim.
size(200,200);
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);
bu kodu parçalara bölüyoruz.
void setup(){
size(200,200);
}
void draw(){
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);
}
Programın yeni halini çalıştırdığımız zaman, değişen hiçbirşey olmamış gibi geliyor bize. Halbuki büyük değişiklikler var. Açıklayayım
void setup(){
size(200,200);
}
void setup programımızın genel ayarlarının yapıldığı yer oluyor. Burada ki kodlar bir kez okunur ve birdaha okunmazlar.
void draw(){
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(100,100,50,50);
}
void draw ile başlayan komut seti ise, şu durumda, program kapatılana kadar sürekli devam edecek komutlarımızı içeriyor. Aslında program çalıştırıldığında sürekli aynı dörtgen sürekli üst üste çiziliyor. Dörtgenin konumu değişmediği için biz onu durağan görüyoruz. Ufak bir değişiklik yaparak processing ile ilk animasyonumuzu yapalım.
void setup(){
size(200,200);
}
void draw(){
background(255);
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
Burada mouseX ve mouseY değişkenlerini kullanarak, dörtgenin mouse pointerının o andaki pozisyonunu orta nokta olarak aldık ve 50 x 50 pixellik kutu çizdirdik. Yukarda belirttiğim gibi program çalıştığı sürece bu kutu void draw() komutu sayesinde sürekli çizildiğinden biz kutuyu mouseun hareket ettirdiğini algıladık.
Bu arada background(255); satırnın void draw(); ın içinde void setup a taşırsak bakın neler oluyor.
void setup(){
size(200,200);
background(255);
}
void draw(){
stroke(0,255,0);
strokeWeight(5);
fill(255,0,0);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
background(255); satırını void setup() ın içine taşıdığımızda artık bu komut bir kez okunacağından kutunun mouse tarafından kontrol edilen pozisyonları ekranda kalıyor ve bu efekt vasıtasıyla ekrana çizim yapılıyormuş gibi bir izlenim oluşuyor.
Örnek verelim ;
void setup(){
size(200,200);
background(255);
}
void draw(){
stroke(0);
strokeWeight(2);
line(mouseX,mouseY,100,100);
}
--------------------
void setup(){
size(200,200);
background(255);
}
void draw(){
stroke(0);
strokeWeight(2);
line(pmouseX,pmouseY,mouseX,mouseY);
}
Buradaki pmouseX ve pmouseY komutu mouseun pozisyonunu sürekli güncelliyor ve bu sayede sanki çizgi çiziyormuş gibi bir izlenim ediniyoruz.
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.
5 Temmuz 2009 Pazar
Processing Ders Notları - Temel
Processing de ekrana birşeyler çizmek için birçok komut vardır. Şu ana kadar olan çalışmalarımda karşılaştığım komutlardan bazıları şunlar.
rect(0,0,50,50);
ellipse(0,0,50,50);
line(10,20,60,90);
Şimdi bu komutlardan birine yakından bakalım.
rect(0,10,50,60);
Bu komut şunu söylüyor. Ekranın soldan 0. pixel i ve üstten 50 pixelinden başlayıp, genişliği 50 pixel, yüksekliği 60 pixel olan bir dikdörtgen çiz. Burada unutulmaması gereken; rect(x,y,w,h) dizilimi.
x = x eksenindeki yer.
y = y eksenindeki yer.
w = genişlik ( width ).
h = yükseklik ( height ).
x,y,w,h sabit bir sayı ( 10, 15, 17 vb. ) olabildiği gibi değişkenlerde olabilir.
Örneğin ;
rect(50,50,random(60-90),50);
Burdaki w, yani genişlik değerindeki random(60-90) komutu, program her çalıştırıldığında 60 ile 90 arasında rasgele bir sayı üretip w değerine atar. Kafanız karıştı ise burayı es geçebilirsiniz.
Ekrana birşey çizdiğinizde processing sizden neyi baz alıp çizimi gerçekleştireceği bilgisini ister. Eğer belirtmezseniz, çizilen şeyin sol üst köşesini baz alarak çizimi gerçekleştirir. ( c_1a )
Örneğin ;
size(200,200);
rect(100,100,50,50);
c_1a
Bu iki satırın anlamı şudur;
- 200 x 200 pixellik bir kadraj oluştur.
- 200 x 200 pixellik bu kadrajın, x ve y aksisinden 100 pixel ara verip, 50 x 50 pixellik bir
dörtgen çiz.
Peki, diyelim belirttiğimiz noktayı çizeceğimiz objenin merkezi olarak almak istiyorsak ne yapacağız. (c_1b) Şöyle;
size(200,200);
rectMode(CENTER);
rect(100,100,50,50);
rect(0,0,50,50);
ellipse(0,0,50,50);
line(10,20,60,90);
Şimdi bu komutlardan birine yakından bakalım.
rect(0,10,50,60);
Bu komut şunu söylüyor. Ekranın soldan 0. pixel i ve üstten 50 pixelinden başlayıp, genişliği 50 pixel, yüksekliği 60 pixel olan bir dikdörtgen çiz. Burada unutulmaması gereken; rect(x,y,w,h) dizilimi.
x = x eksenindeki yer.
y = y eksenindeki yer.
w = genişlik ( width ).
h = yükseklik ( height ).
x,y,w,h sabit bir sayı ( 10, 15, 17 vb. ) olabildiği gibi değişkenlerde olabilir.
Örneğin ;
rect(50,50,random(60-90),50);
Burdaki w, yani genişlik değerindeki random(60-90) komutu, program her çalıştırıldığında 60 ile 90 arasında rasgele bir sayı üretip w değerine atar. Kafanız karıştı ise burayı es geçebilirsiniz.
Ekrana birşey çizdiğinizde processing sizden neyi baz alıp çizimi gerçekleştireceği bilgisini ister. Eğer belirtmezseniz, çizilen şeyin sol üst köşesini baz alarak çizimi gerçekleştirir. ( c_1a )
Örneğin ;
size(200,200);
rect(100,100,50,50);
c_1aBu iki satırın anlamı şudur;
- 200 x 200 pixellik bir kadraj oluştur.
- 200 x 200 pixellik bu kadrajın, x ve y aksisinden 100 pixel ara verip, 50 x 50 pixellik bir
dörtgen çiz.
Peki, diyelim belirttiğimiz noktayı çizeceğimiz objenin merkezi olarak almak istiyorsak ne yapacağız. (c_1b) Şöyle;
size(200,200);
rectMode(CENTER);
rect(100,100,50,50);
c_1b
Bu satır ile x ve y de verilen değerleri merkez noktası olarak aldık ve 50 x 50 pixellik bir dörtgen oluşturmuş olduk. Hemen önemli bir detay vereyim. Processing büyük küçük harf ayrımı yapan bir programlama dili. Yani rectMode(CENTER); yerine rectmode(center) veya varyasyonlarını yazarsak programımız hata verir. Zaten kodu yazarken renkler ile uyarır. Eğer bir kod ( rect, rectMode, size gibi ( sayılar dahil değil bu duruma ) ) siyah renkli ise muhtemelen bir problem vardır. Dikkat etmekte fayda var.
Processing Ders Notları - Giriş
İlk başlarda çöp kamyonu şöförü olmak istiyordum. Her sabah kocaman bir kamyonun arkasındaki aparatı kaldırıp indiriyordu bu adam. Camdan bakarken gördüğüm kadarıyla önünde birsürü kol, tuş ve bilimum kontrol mekanizması vardı ve çöpçüler çöp konteynırını arabanın arkasına yanaştırıp şöförün mekanizmayı çalıştırmasını bekliyorlardı. Ne güzel bir iş. Çöplerle uğraşıyor ama hiç kirlenmiyor, üstelik o kocaman kamyonla da oynuyor, diye düşünmüştüm.
Biraz ayran gönüllüydüm herhalde çocukken. Star Wars çıkmıştı bir arkşam parliamen sinema kulübünde yanlış hatırlamıyorsam. Jedi olamayacağımı biliyordum zira etrafta ne Obi Van Kenobi ne Usta Yoda ne de Dart Vader vardı. Ben de astronot olmaya karar verdim. Bu da kısa sürdü ve eve alınan Commodore 64 ile bilgisayar dünyasına giriş yaptım. Artık tek hedef vardı bilgisayar mühendisliği. 64 ler dergisindeki kodları satır satır kelime kelime yazıp olmayan ingilizce ile anlamaya çalışırdım. Ufak tefek programcıklar da yapmışlığım vardır ama beklediğim o grafiklere bir türlü ulaşmak mümkün olmadı. Sonra yanlış tercihler, ergenlik vs. girdi araya ve programcılık bahsini uzun süre kapadım. Ta ki şu günlere kadar.
Processing, özellikle benim gibi, mesela, Windows 'un herhangi bir sistem dosyasını açıp " vay anasını, ne yazmış bu adam buraya, allalla " diyen sayısal zekası biraz kıt bireyler için ( tabii ki evet siz süper zekalı matematik dehaları da unutulmamış ) geliştirilmiş özellikle grafik programlama konusunda birkaç satır kod ile harikalar yaratabileceğiniz bir programlama dilidir.
Processing ile çok kısa bir zaman içinde, örneğin, winamp ın visualization ekranında ki gibi grafikler yaratabilirsiniz. Ve en güzel tarafı bu yaratılan görüntülerin interaktif olması. Yani mouse, klavye, webcam, mikrofon gibi ekstra donanımlardan aldığınız veriler ile ekrana çizilen görüntünün değişiyor olması. Tabi ki bu kısımlara ulaşmak processing e ne kadar zaman ayırdığımız ile doğru orantılı. İşte tam bu noktada, bu yazının ve olası ilerideki yazıların gidişatı ile ilgili açıklama yapmakta yarar var. Ben Processing bilmiyorum. Ama öğrenmeye çalışıyorum. Bu yazıları da kendi kendine birşeyler yapmaya çalışan birinin acı dolu çığlıkları olarak görebilirsiniz. Belki birilerin acısını bastırırım bu şekilde. Bu da birşeydir.
Kaynaklar
http://www.processing.org
http://www.learningprocessing.com
Biraz ayran gönüllüydüm herhalde çocukken. Star Wars çıkmıştı bir arkşam parliamen sinema kulübünde yanlış hatırlamıyorsam. Jedi olamayacağımı biliyordum zira etrafta ne Obi Van Kenobi ne Usta Yoda ne de Dart Vader vardı. Ben de astronot olmaya karar verdim. Bu da kısa sürdü ve eve alınan Commodore 64 ile bilgisayar dünyasına giriş yaptım. Artık tek hedef vardı bilgisayar mühendisliği. 64 ler dergisindeki kodları satır satır kelime kelime yazıp olmayan ingilizce ile anlamaya çalışırdım. Ufak tefek programcıklar da yapmışlığım vardır ama beklediğim o grafiklere bir türlü ulaşmak mümkün olmadı. Sonra yanlış tercihler, ergenlik vs. girdi araya ve programcılık bahsini uzun süre kapadım. Ta ki şu günlere kadar.
Processing, özellikle benim gibi, mesela, Windows 'un herhangi bir sistem dosyasını açıp " vay anasını, ne yazmış bu adam buraya, allalla " diyen sayısal zekası biraz kıt bireyler için ( tabii ki evet siz süper zekalı matematik dehaları da unutulmamış ) geliştirilmiş özellikle grafik programlama konusunda birkaç satır kod ile harikalar yaratabileceğiniz bir programlama dilidir.
Processing ile çok kısa bir zaman içinde, örneğin, winamp ın visualization ekranında ki gibi grafikler yaratabilirsiniz. Ve en güzel tarafı bu yaratılan görüntülerin interaktif olması. Yani mouse, klavye, webcam, mikrofon gibi ekstra donanımlardan aldığınız veriler ile ekrana çizilen görüntünün değişiyor olması. Tabi ki bu kısımlara ulaşmak processing e ne kadar zaman ayırdığımız ile doğru orantılı. İşte tam bu noktada, bu yazının ve olası ilerideki yazıların gidişatı ile ilgili açıklama yapmakta yarar var. Ben Processing bilmiyorum. Ama öğrenmeye çalışıyorum. Bu yazıları da kendi kendine birşeyler yapmaya çalışan birinin acı dolu çığlıkları olarak görebilirsiniz. Belki birilerin acısını bastırırım bu şekilde. Bu da birşeydir.
Kaynaklar
http://www.processing.org
http://www.learningprocessing.com
Kaydol:
Kayıtlar (Atom)