2010 - 2011 Akademik Yılı Güz Döneminde yürütücülüğünü Kemal Şahin'in yaptığı "Bilgisayarda Programlama Dersi" kapsamında processing ile geliştirilen projeler.
3. Processing’de Değişim Körlüğü Uygulaması
Projenin Amacı:
J. Kevin O'Regan ve meslektaşları Ron Rensink ve Jim Clark tarafından bulunan (1998)
değişim körlüğü - change blindness-, bakmakta olduğumuz ve en ince detayına kadar
gördüğümüzü düşündüğümüz sahnenin tamamı veya bir kısmı kısa süreliğine bloke edilir ve
ardından bir değişiklik yapılırsa bunu fark edilemeyeceğini söyleyen bir fenomendir.
Değişim körlüğü bir çok şekilde demonstre edilmistir.Yapılan ilk deneyelerde düzensiz göz
hareketlerine göre kelimeler ve metinlerde değişiklikler yapılmış (George McConkie,
1970'ler), göz hareketlerini izlemek için lazer ışınları kullanılmış (Simons ve Levin, 1980'ler);
ileri geri oynatılan harf dizeleri gösterilmiş (Pasher, 1988); film esnasında araya boş ekran
sokarak, oyuncular üzerinde değişiklik yapılmış (Simons ve Levin, 1997); insanlarla birebir
ektileşim halinde, oyuncularla performanslar düzenlenmis (Simons ve Levin, 1998); araba
sürme simülatörleri (Shinoda, 2001) ve fotograflar kullanılmıştır.
Bu yöntemlerin başarılı olmalarını nedeni ani değişimlerin anlaşılmasına yarayan pop-out
mekanizmasını ve hareket detektörlerini etkisiz hale getiriyor olmasıdır. Bunlar olmadan,
göz hareketleriyle oluşturduğumuz hafızamıza güveniriz ve bu hafızamız deneylerin de
gösterdiği gibi şaşırtıcı derecede zayıftır.
Buradan yola çıkarak, değişim körlüğü için uygulaması kolay, veri kaydedebilen, içerisindeki
fotoğrafların rahatlıkla değiştirilebileceği, interaktif bir prototip oluşturuldu.
4. Processing’de Değişim Körlüğü Uygulaması
Çalışma prensibi ise şu şekildedir;
1 normal sahne, 2 gri ekran, 3 değiştirilmis sahne olduğunu göz önünde
bulundurursak, fotograflar 1-2-1-3-1-2-1-3-1 şeklinde gösterilmiştir. Her uygulamadan
sonra, katılımcıların yapılan değişiklikleri fark edip, etmediklerini sorgulayan bir test
ekranı ve bu verileri kaydeden bir düzenek yer alır.
5. Processing’de Değişim Körlüğü Uygulaması
Yapım Süreci:
1- Kodlamanın nasıl yapılacağı konusunda akış şeması -flow chart- düzenlendi.
2- Uygulamada kullanılacak fotograflar çekildi.
3- Giriş, menü ve test ekranları için arayüzler tasarlandı.
4- Fotograflar tanımlandı, iki kompozisyonun sekansları için de ayrı class'lar
oluşturuldu.
5- Değişiklik yapılmış olan fotograflardan sadece birinin rastgele seçilip, gösterilmesi
ve fotografların arasında gri ekranın belirmesi sağlandı.
6. Processing’de Değişim Körlüğü Uygulaması
6- Menü ve test ekranları için düğmeler tanımlandı.
7- Her gösterimin sonuna test ekranı eklendi. Kullanıcının değişimi yakalayıp yakalamadığı
ölçebilmek için bu testin verileri arka planda bir dosyaya kaydedildi.
8-Toplanan verilere (istatistiksel olarak anlamlandırabilmek) için tarih/zaman bilgileri de
eklendi.
8. Processing’de Yüz Yakalama
Projenin Amacı:
Bilgisayara bağlanan bir kamera ile kullanıcıların yüzlerini yakalayan ve yüzlerine
televizyon imgesi yerleştiren bir uygulama. Kullanıcının yüzüne yerleştirilen
televizyon içersinde de istanbul’un hareketliliğini vurgulayabilmek için bir günlük
istanbul gezisi videosu oynatılmaktadır.
Yapım Aşamaları:
1. Bir giriş arayüzünü Photoshop’ta hazırlayarak yine programın giriş kısmına
yerleştiriyoruz ve her çalıştırmada yine bu arayüzden programa giriş sağlıyoruz.
2. ProjedeYüzü yakalayarak yerine bir resim oturtan kod grubu var. Öncelikle bu grup,
resim yerine video imaj kodu ile yer değiştirilir.
3. İnternetten indirilen İstanbul’a ait bir video’yu After effects’te ölçülendirerek bir
televizyonun içerisine yerleştirilir.
4. Daha sonra video’yu kod grubunda yer alan, resim yerine gösterek, yüze
sabitlenmiş biçimde bir video olarak kullanıcı tarafından web cam üzerinde
görüntülenir.
9. Processing’de Yüz Yakalama
Uygulama çalıştığında web cam üzerinden alınan görüntü doğrudan yüzün After
Effects’te programında 350x150 ölçüsünde ölçülendirilmiş olan video’yu yerleştiriyor.
11. Processing Programıyla Veri Görselleştirme
Projenin Amacı:
"Gender Shift: AreWomen the New Man?" adlı ankete uygun arayüzlerin hazırlanması
ve anket sonuçlarının yüzdelik dilimlerinin anketin özellikleri göz önüne alınarak
görselleştirmesi amaçlanmıştır.
12. Processing Programıyla Veri Görselleştirme
Yapım Süreci:
1. Anket sonuçları bir Excel dosyasına atıldı.
2. Her bir anket konusu için anahtar kelimeler seçildi.
3. Anketin konusuna uygun olarak ilk giriş sayfasının arayüz tasarımı Adobe Illustrator
programı kullanılarak yapıldı.
13. Processing Programıyla Veri Görselleştirme
4. Arayüz processing programına atıldı. Seçenekler arasında seçim yapmak için her
seçeneğin yanına processing'te kodlama yapılarak daireler oluşturuldu ve bu dairelere
buton özelliği kazandırıldı.
5. Dairelerden biri seçilerek ikinci ekrana geçiş için kodlama yapıldı.
6. İkinci ekran da ülke seçim ekranı olarak belirlendi. Adobe Illustrator programıyla bu
arayüz hazırlandı.
14. Processing Programıyla Veri Görselleştirme
5. Bu ekranda da daireler kodlanarak buton özelliği kazandırıldı. Bu dairelerden biri de
seçilerek üçüncü arayüzle bağlantı kuruldu.
6. Üçüncü arayüz de Adobe Illustrator programında hazırlandı ve processing
programına atıldı.
7.Yüzdelik değerler de processing programına girildi. Daha sonra verilerle seçimler
kodlama yapılarak ilişkilendirildi.
8. Sonuç ekranında değerlere göre uygun tasarımla veriler görselleştirildi.
16. Processing’de Galaxy Oyunu
Amaç
Processing ve grafik materyal için gerekli yardımcı programları kullanarak klasik
Galaxy oyununu yeniden yorumlamak.
Yapım Süreci
Öncelikle oyun için gerekli arayüzler tasarlanmıştır. Bu süreçte, gerek arka planda yer
alacak grafik, gerekse uzay gemisi ve meteorlar için görsel malzeme temin edilip
oyuna uygulanacak biçime getirilmiştir. Ardından giriş ve oyunun oynanacağı
arayüzün detayları (start butonu, puan tablosu vs.) tasarlanmış ve Processing’e
aktarılmıştır.
17. Processing’de Galaxy Oyunu
Ardından oyunda yer alacak her elemanın hangi komutlarla nasıl hareket edeceğini
belirleyen kodlar (uzay gemisinin haraketleri, meteorların rastgele gelmesi,
meteorların parçalanması vs.) Processing’de girilmiş ve oyun tamamlanmıştır.
19. Processing’de Oyun Tasarımı
Projenin Amacı :
Ardından oyunda yer alacak her elemanın hangi komutlarla nasıl hareket edeceğini
belirleyen kodlar (uzay gemisinin haraketleri, meteorların rastgele gelmesi,
meteorların parçalanması vs.) Processing’de girilmiş ve oyun tamamlanmıştır.
Yapım Süreci :
1.Yazılacak oyunun tasarlandıktan sonra, nasıl bir arayüze sahip olacağı eskiz
kağıtlarına çizilerek layout çalışmaları yapılmıştır.
2. Kağıt üzerinde tasarlanan oyunun işlevselliği düşünülmüş ve tasarım bu işlevsellik
çerçevesinde güncellenmiştir.
3. Kağıt üzerinde tasarım bittikten sonra taslak’lar tarayıcı ile bilgisayar ortamına
aktarılmıştır.
4. Photoshop programı ile taslak halinde bilgisayara aktarılan arayüz çizilmiştir.
20. Processing’de Oyun Tasarımı
4.1Yan tarafta yukarıda bahsedilen oyun’un arayüz tasarımı görülmektedir. Oyun ;
taşların top ile parçalanması ile gerçekleşmektedir.Taşlar parçalandıkça arka tarafta
bir fotoğraf görüntülenecektir. Oyuncu en kısa sürede fotoğraftaki ismin kim
olduğunu sağ alt taraftaki alana girmelidir.
4.2 Oyun tasarımında sol bölümde yer alan Score ve Level değerleri ile oyuncunun en
yüksek puan bilgisi ve oyun zorluk değeri belirlenmektedir.
21. Processing’de Oyun Tasarımı
5. Photoshopta tasarlanan oyun arayüzü slice işlemi ile dilimlere ayrıltıktan sonra
processing programına aktarılmıştır.
Yan taraftaki görüntü Photoshopta tasarlanan arayüzün Processing’e aktarılmış
halidir.
22. Processing’de Oyun Tasarımı
6. Processing’de tasarlanacak oyun için örnek kod oluşturulmuştur. Örnek oyun
yapımındaki amaç arayüz yoğunluğunun etkisi dışında kalarak çalışır bir kod
oluşturmaktır. Çalışır kod hazırlandıktan sonra arayüz tasarımı kod’a aktarılmıştır.
23. Processing’de Oyun Tasarımı
Yukarıda görüldüğü üzere tasarlanan arayüz kodlanmadan, uygulamada kullanılacak
kodun sorunsuz çalıştığını kontrol etmek için örnek basit bir uygulama yapılmıştır.
7. En son işlem olarak arayüz tasarımı ve oyun kodlaması birleştirilmiştir.
25. Processing Programıyla Veri Görselleştirme
Projenin Amacı :
2010 yılında yapılan referandum sonuçlarını il bazında yorumlayabilmek için türkiye
haritası üzerinde veri görselleştirme çalışması.
Yapım Süreci :
1. Referandum sonuçlarıYüksek seçim kurulu’nun resmi web sayfasından alındı.
(www.ysk.gov.tr)
2. İl bazlı referandum sonuçları, processing’de işleyebilmek için uygun text formatında
düzenlendi.
3.Vektörel birTürkiye haritası processing tarafından 3 boyutlu hareket ettirilebilecek
şekilde kodlandı.
27. Processing Programıyla Veri Görselleştirme
4.Tüm iller uygulamanın alt bölümüne yerleştirildi. Buradan kullanıcı istediği 2 ili
seçebilmekte ve 2 ilin sınırları 3 boyutlu olarak gerçek zamanlı çizilerek referandum
sonuçları yansıtıldı.
29. Processing Programıyla Veri Görselleştirme
Projenin Amacı :
Facebook kullanırken kullanıcıların nelerden vazgeçtiğini ve aslında bu kullanım
zarfında geçirilen sürenin ne kadar uzun olduğu konusunda farkındalık yaratmak.
Yapım Süreci :
1. facebook kullanım oranları ve süreleri facebook için gerçek zamanlı istatistik veri
üreten checkfacebook.com’dan alındı. Buradan ortalama kullanıcı süreleri tespit
edildi.
2. Günlük hayattan yapılan aktivitelerin bir listesi hazırlandı ve bu aktiviteler için
harcanan ortalama süreler tespit edildi.
3. Alınan veriler, processing’de işleyebilmek için uygun text formatında düzenlendi.
4. uygulama için ilgili arayüzler Photoshop programında hazırlandı.
30. Processing Programıyla Veri Görselleştirme
5. İlk arayüzde kullanıcıya, yapmak istediği aktiviteleri seçme hakkı verildi.
31. Processing Programıyla Veri Görselleştirme
6. İkinci arayüzde kullanıcı, ortalama facebook’da geçirdiği süre ile normal de seçtiği
aktivitelerden günlük ve haftalık olarak kaç tane yapabileceği konusunda
bilgilendirildi.
Facebok’da geçirilen zaman zarfında
günlük yapılabilecek aktiviteler
32. Processing Programıyla Veri Görselleştirme
6. İkinci arayüzde kullanıcı, ortalama facebook’da geçirdiği süre ile normal de seçtiği
aktivitelerden günlük olarak kaç tane yapabileceği konusunda bilgilendirildi.
Facebok’da geçirilen zaman zarfında
haftalık yapılabilecek aktiviteler
33. Processing’de
Video Düzenleme – Video Kolajı
(Mimarlık’ta tasarım kişisel Manifesto denemesi)
Bengi Altuğ
bengialtug@gmail.com
34. Processing’de Video Düzenleme – Video Kolajı
Projenin Amacı :
İç Mimar olan öğrencimiz kendi manifestosunu hazırladı. On maddelik bu
manifestosunu birebir ilişkili video’lar ile anlatan ve processing’de aynı zamanlı
birleştiren ve video’lar arasında rastgele bir ilişki kuran bir ortam hazırlandı.
Yapım Süreci :
1. Öğrencimiz “İç Mimarlık’taTasarım” konusunda kendi kişisel manifestosunu
hazırladı.
2. Manifesto’daki her bir madde için özel video’lar hazırladı. After effect’de
biçimlendirdi. Genel düzenlemeleri yaptı.
3. Processing’de video’lar arasında rastgele bir iletişim kuran ve bu video’ları
oynatabilen bir ortam hazırlandı.
37. Processing’de Sound Mixing
Projenin Amacı :
Kullanıcının seçtiği enstrümantallerden, kullanıcının belirlediği bir sırayla rastgele bir
içerik ile bir bütün müzik oluşturan uygulama.
Yapım Süreci :
1. 4 farklı enstrümantalin her biri için 20 ses örneği hazırlandı.
2. ses dosyalarının processing tarafından algılanabilmesi için txt dosyalarında bir veri
bütünlüğü hazırlandı. Bu dosyada hangi ses dosyasının hangi enstrümantalle ait
olduğu kaydedildi.
3. Processing’de 3 arayüz hazırlandı. Bunlardan birinci kullanıcının uygulamayı
başlatabilmesi için hazırlanan giriş ekranı.
38. Processing’de Sound Mixing
4. Processing’de 2. arayüz; kullanıcının seçtiği enstrümantalleri bir zaman çizelgesi
üzerine yerleştirdiği arayüz. Bu arayüzün alt bölümünde olan enstrümantaller zaman
çizelgesinin üzerine istenildiği sırayla (sürükle-bırak işlemiyle) yerleştirilebilmektedir.
39. Processing’de Sound Mixing
5. Son ekran’da da yerleştirilen enstrümantaller kullanıcının belirlediği sırada
çalabilmektedir. Bu ekranda alt bölünde bulunan kare simgeleriyle çalışnan müzik
dosyası durdurulabilir (stop)/ devam ettirebilir (play) ve bekletilebilir. (pause)
