Basit Fizik Motoru

Yeni bir yazıyla karşınızdayım. Özellikle eğlenceli olduğunu düşündüğüm bir konu seçtim bu yazı için. Ayrıca javascript demolarıyla zenginleştirmeye ve belki biraz daha interaktifleştirmeye çalışacağım yazıyı.

Nedir fizik motoru ? Özet olarak, uygulamadaki istediğiniz objelerin gerçek dünyadaki gibi hareket edip fiziksel olarak birbirleriyle çarpışmasını, etkileşmesini, sizin bu hareketleri kesin olarak tanımlamanıza(animasyon) gerek kalmadan sağlayan kodlardır. Bu kodlar yazılım haline getirilip piyasada satılıyor. Özellikle oyunlarda kullanılıyor ve, gerçekçiliği oldukça artırıyor.  2D veya 3D olabilir bu motorlar. Tabi bu tarz motorlar kütüphanelerle birlikte geldiği için, oturup bi fizik motoru programlamanıza gerek yok aslında. Ama hem olayın iç yüzünü ucundan da olsa görmeniz faydalı olur, hem de bu yazıda gösterilecek basit motoru, kütüphaneyle uğraşmanın zaman ve alan kaybı olacağı ufak işlerinizde kullanabilirsiniz.

Programlama kısmına geçmeden önce şunu belirteyim, bu yazıdaki algoritmayı kullanarak yarattığınız dünyayı ekrana render etmezseniz, her şey sayılardan ibaret olacak ve o kadar da eğlenceli görünmeyecektir. Algoritmaları pseudocode ile yazdığım için özel olarak bir ekrana çizdirme fonksiyonu ismi veremiyorum. Kendi kullandığınız dil ve kütüphanelerde hangi fonksiyon, nasıl bir döngü ile ekrana çizdirmek için kullanılıyorsa araştırıp, o şekilde yapmanız gerek. Bunun dışında ben zaten her adımı javascript ile kodlayıp yazıya yerleştireceğim içim, nasıl görüneceğini az çok bileceksiniz yani.

Algoritmayı programlamak için önce bu basit fizik motoruna ne gibi özellikler vereceğimize karar verelim. Basit diye özellikle söylüyorum, herkesin çok zahmet etmeden programlayıp üzerinde oynayabileceği ve kullanabileceği bi motor çıkarmak amacım. Programımızda çeşitli boyutlarda toplar olsun ve bu toplar ekranda çerçevenin duvarlarından sekerek serbestçe hareket edebilsinler.

Öncelikle size bu tip uygulamalardaki genel koordinat sistemini göstereyim. Genel diyorum çünkü bazı istisna kütüphaneler bunun x eksenine göre simetriğini kullanıyor.

Gördüğünüz gibi bildiğimiz x ekseni ve ters dönmüş bir y ekseni. Resimdeki her kare bir pixeli temsil ediyor ve y ekseninde aşağı, x ekseninde sağa doğru sonsuza kadar uzanıyor. Yapacağımız şey aslında, objelerimize bu 2 boyutlu düzlem üzerinde bir başlangıç konumu verdikten sonra, hız değerlerine göre bir sonraki konumlarını hesaplayıp, sonraki karede objeyi o konuma koymak olacak. Ayrıca bu düzlem üzerinde sadece 300x300 pixellik bir alanı ekranda gösterdiğimizi varsayıyorum bu yazıda, javascript örneklerini ona göre kodlayacağım.

Bir top sınıfı oluşturup ihtiyacımız olacak bazı özelliklerini tanımlayalım. Bu özellikler konum, hız ve yarıçap olacak.

Sinif Top:
    konum_x = ekran_genisligi/2  // Topun x eksenindeki başlangıç konumu
    konum_y = ekran_yuksekligi/2  // Topun y eksenindeki başlangıç konumu
    hız_x = 5  // Topun x eksenindeki hızı
    hız_y = 5  // Topun y eksenindeki hızı
    g = 0.98  // Yer çekimi sabiti
    r = 10  // Topun yarıçapı

Gördüğünüz gibi topu ve özelliklerini tanımladık. Bu sınıfı oluşturup top değişkenine örnekledikten sonra kendi kütüphanenizdeki fonksiyon aracılığıyla,

ekran.çizDaire(top.konum_x, top.konum_y, renk, top.r)

Fonksiyonun argümanlarına ve yerlerine bağlı olarak, buna benzer bir şekilde ekrana topu çizdirebilmeniz mümkün. Ayrıca istenilen sonucu elde etmek için bu çizdirme fonksiyonunu bir döngü içine koymalısınız

sonsuz döngü:
  ekran.temizle()
  ekran.çizDaire(top.konum_x, top.konum_y, renk, top.r)

 

Bu kod ve işlemler sonucu ekrana sürekli çizdirilen ve yerinde duran bir top göreceksiniz. Javascript örneğini de şuraya bırakıyorum.

Şimdi sıra geldi bu topu fizik kurallarına göre hareket ettirmeye. Asıl fizik motoru kısmı şu an başlıyor. Yukarıda da belirttiğim gibi olay formüllerden ibaret. Olayın kilit noktası şu,

v = a * t

x = v * t

yani

hız = ivme * zaman  

konum = hız * zaman

Şimdi her döngüde 1 birim zaman geçtiğini düşünürseniz(basitleştirme), t, 1,2,3 diye artacağından, hareket için program içine ekleyeceğimiz kod şu şekilde.

her döngüde:
    hız = hız + ivme
    konum = konum + hız

Tabiki bunu hem x hem y ekseni için ayrı ayrı konum, hız ve ivmelerle yapmamız gerek. Ancak örnekte x eksenine herhangi bir ivme koymayı gerekli görmedim.

her döngüde:
    top.konum_x = top.konum_x + top.hız_x
    top.hız_y = top.hız_y + top.g
    top.konum_y = top.konum_y + top.hız_y

 Şimdi bunları Javascript örneğimize uygulayalım. Çerçevede herhangi bir yere tıklayarak başlangıç konumuna döndürebilirsiniz.

Artık fizik kurallarına göre hareket eden bir topumuz var. Ancak sizin de fark ettiğiniz gibi, top bir süre sonra kayboluyor. Bunun sebebi hareketini sonsuz bir düzlemde devam ettirirken, bizim sadece 300x300 pixellik bir alanı görebiliyor olmamız. Yapmamız gereken topun hareketini sınırlamak. Kenarlardan sekmesini sağlamak en basiti. Kenarlardan sektirmenin de farklı yolları var. Bu yolların da en basiti ekranın dışına çıkıp çıkmadığını kontrol etmek ve çıktıysa sektirmek. Sektirmenin de yine fizik kanunlarına dayanan ufak bir basitleştirilmiş formülü var.

hız = -hız * esneklik

Esneklik 0 ile 1 arasında değişen bir katsayı. Esnek olmasını istiyorsanız 1'e, istemiyorsanız 0'a yakın bir sayı seçmelisiniz. Bu formülü kullanarak topu ekranın kenarlarından sektirmenin yolu da şu

eğer konum_x-top.yarıçap < 0 veya konum_x+top.yarıçap > ekran_genişliği ise:
    // Ekranın sağ veya solundan dışarı çıktıysa
    top.konum_x = top.konum_x - top.hız_x // Eski yerine geri alıyoruz
    top.hız_x = -top.hız_x * 0.85 // Sektirme formülü

eğer konum_y-top.yarıçap < 0 veya konum_y+top.yarıçap > ekran_yüksekliği ise:
    // Ekranın üst veya altından dışarı çıktıysa
    top.konum_y = top.konum_y - top.hız_y // Eski yerine geri alıyoruz
    top.hız_y = -top.hız_y * 0.85 // Sektirme formülü

Gördüğünüz gibi, artık top ekranın kenarlarından sekiyor ve sektikçe yavaşlıyor. Şimdi bu çizdirme, hareket ve sektirme fonksiyonlarını top sınıfının içine yerleştirip işimizi kolaylaştırarak, bu top sınıfından farklı farklı toplar oluşturabilir, ekranda birlikte hareket etmelerini sağlayabiliriz. Bir listeyi toplarla doldurup tek tek hepsine hareket verip çizerek bu gerçekleştirilebilir. Aşağıdaki javascript örneğinde de ekrana her tıkladığınızda rastgele toplar gelecektir.

Bu yazıda çarpışma algoritmalarına girmek istemiyorum, çünkü vektörel hesaplamalar gerekeceğinden basit fizik motorunun biraz dışına çıkacak. Son olarak bu algoritma'yı kullanarak yaptığım birkaç ufak programcık göstermek istiyorum. Bu programcıklarda sadece bir renk değiştirme algoritması ve topların bir süre sonra yok olmasını sağlayacak bir ömür ekledim. Sizler de yaratıcılığınızla bir şeyler ekleyip, uygulamalarınızda bu basit algoritmayı kullanabilirsiniz.

Bu yazıyı da böylece bitirmiş olduk. Okuduğunuz için teşekkürler. Örnekleri kurcalayarak eğlenmeye devam edebilirsiniz. Yorumlarınızı esirgemeyin lütfen.

Kodlarınızın ilk denemede çalışması dileğiyle...