Demodaki 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.



İşlem Basamakları:
1. Processing programı ile aşağıdaki kodlarla programımızı oluşturuyoruz.
scription">Kod:
//sarı mor daireler
void setup()
{
  size(400, 300); // 400x300 boyutunda bir pencere oluştur
  background(#ff0000); // Arka plan rengini kırmızı yap
}
void draw() 
{
  // Tekrarlacak işlemler burada yer alır.
}

// Fare butonuna basıldığında yapılacak işlemler
void mousePressed() 
{
  if (mouseButton == LEFT) // Sol butona basıldığında
  {
    fill(#FFFF00); // Sarı renkle doldur
    stroke(#00ff00); // Daire çizgisini mavi yap

    ellipse(mouseX, mouseY, 50, 50); // Farenin tıklandığı yere 50 px daire çiz
  } else // Fare sol tıklanmadıysa
  {
    fill(#FF0080); // Mor renkle doldur
     stroke(#000000); // Daire çizgisini siyah yap
    ellipse(mouseX, mouseY, 30, 30); // 30 px çapında daire çiz
  }
}
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ı:

description">Kod:
 <!DOCTYPE html>
<html>
 <head>
    <title>Processing </title>
    <script src="processing-1.0.0.min.js"></script>
 </head>
 <body><center>
     <h3>Processing Dosyasını HTML Sayfada Çalıştırma Denemesi</h3>
     <canvas data-processing-sources="sari_mor.pde"></canvas>
     </center>
 </body>
 </html>
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)