2. Processing ile basit bir program yazalým

 

Processing Dosyasýný HTML Sayfada Çalýþtýrma Denemesi

Yukarýdaki görsele ait programý processing ile yazýp programý bir html sayfada çalýþtýralým.
Görseli incelerseniz þu özelliklerde olduðunu görürsünüz:
1. 400 x 300 px boyutlarýnda kýrmýzý arka plana sahip bir pencere mevcut.
2. Fareye sol týklandýðýnda týklanan yerde çapý 50px olan sarý renkli ve mavi çerçeveli bir daire oluþuyor.
3. Fareye sað týklandýðýnda ise týklanan yerde çapý 30px olan mor renkte ve siyah çerçeveli bir daire oluþuyor.

Bunun arduino ile ne ilgisi var diye soracak olanlar çýkacaktýr. Bu dersimizde processing programýný bu örnekte kullanmayý öðreneceðiz. Bundan sonraki derslerde arduino ile uðraþýrken bu konuda öðrendiðimiz bilgilerden faydalanacaðýz.

Þimdi sýrasýyla iþlem basamaklarý halinde yukarýdaki görseli nasýl hazýrlayacaðýmýzý anlatacaðým. Amatör olarak web iþleri ile ilgilenenler de sitelerine bu örnekte olduðu gibi farklý görseller hazýrlayabilir.

Ýþlem Basamaklarý:
1. Processing programý ile aþaðýdaki kodlarla programýmýzý oluþturuyoruz.

Kod:

Kodlari sadece uyeler gorebilir. Lutfen Uye Olun ya da Giris Yapin.
Kodlarý icelerseniz her bir satýrýn karþýsýnda kodun ne anlama geldiðine dair bir açýklama göreceksiniz.
// iþaretinden sonraki yazýlar açýklama mahiyetindedir ve bu açýklama yazýsýnýn bir fonksiyonu yoktur.
Kendinize göre bu þekilde deðiþik grafikler oluþturabilirsiniz.

2. Run butonuna basýp program üzerinde grafiðin çalýþýrlýðýný test ediyoruz.


3. File > Save sekmesinden projemizi windows ortamýnda oluþturacaðýmýz bir klasörün içine kaydediyoruz. Örneðin ben bu örnekte sari_mor isminde bir klasör oluþturup bu klasörün içine projemi kaydettim. Kayýt iþlemi tamamlandýðýnda klasör içinde sari_mor.pde isimli bir dosya oluþacaktýr.

4. Daha sonra bir metin editörü ile notepad++ ya da not defteri ile aþaðýdaki kodlarla bir dosya oluþturup ismini index.html yapýp oluþturduðumuz klasörün içine kaydediyoruz.

index.html kodlarý:

Kod:

Kodlari sadece uyeler gorebilir. Lutfen Uye Olun ya da Giris Yapin.Kodda geçen sari_mor.pde ismindeki adresi kendinize göre düzenleyiniz.

5. Konu ekindeki processing-1.0.0.min.js ismindeki dosyayý klasörümüzün içine atýyoruz.

6. index.html dosyasýný bir web tarayýcýsý ile açtýðýmýzda grafiðimizin çalýþýr halde olduðunu görmemiz görekiyor.

7. Aþaðýdaki kodlarý da her hangi bir html ya da php sayfaya yapýþtýrýrsanýz bu konuda (orjinal konu) olduðu gibi grafiði web sayfasýnýza gömmüþ olursunuz.

Bu anlatýma ait örnek çalýþma dosyalarý orjinal konu ekinde mevcuttur.

(orjinal konu)
Bu konu Coþkun TAÞDEMÝR'in Arduino Uygula Kitabýndaki örneklerden faydalanarak hazýrlanmýþtýr. Kendisine vermiþ olduðu emek için buradan teþekkür ederiz. Kitabý satýn alarak daha geniþ bilgiye sahip olabilirsiniz.