Eğik Atış, Yerçekimi ve Rüzgar Hareketi Verme

Bir eğik atış uygulaması yazmak için gerekli olan temel adımları anlatacağım. p5.js editörünü kullanacağım için uygulamayı buna göre kodlayacağım. Fakat temel mantığını çok ortalama yazmaya gayret göstereceğim. Uygulama içerisinde bir nesneyi fırlatmak için gerekli olan konum, hız, yerçekimi ve rüzgar değerlerini tanımlayacağım ve bunların bir harekete nasıl etki ettiğini izah etmeye çalışacağım.

 

Nesne Oluşturalım 

Öncelikle fırlatmak için bir nesneye ihtiyacımız var. Buna Mermi diyelim. Bir class oluşturalım.

mermi.js

class Mermi{
  constructor(a,b){
    this.pos = createVector(a,b);
    this.hiz = createVector(0,0);
    this.cap = 20;
  }
}

Class yapısı içerisinde mermiyi tanımlayan esas özellikler bunlar. Merminin pozisyonunu ve hızını bir vektör olarak tanımlıyoruz. Bu değerler kendi içerisinde X ve Y değerlerini barındırır. Çap özelliği çizim ve çarpma kontrolünde kullanılacak olan ölçü değeri.

Sahne Tasarımı 

Öncelikle bir sahne tasarlayalım. Ekran ölçülerimiz 400 x 400 piksel olsun. Ekranın altında 100 piksel yükseklikte yeşil bir zemin yapalım.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noStroke();
  fill(0,150,0);
  rect(0,300,width,100);
} 

Şimdi, mermi isminde bir nesneyi Mermi tipinde oluşturalım.

let mermi;

function setup() {
  createCanvas (400, 400);
  mermi = new Mermi (20, 300);
}

Mermi Özellikleri 

Mermiyi ekranda çizdirmek için mermi.js içerisine girelim ve bir ciz fonksiyonu oluşturalım. Merminin bulunduğu koordinata kendi çapı kadar bir daire çizdireceğiz. 

ciz(){
    stroke(1);
    fill(255,0,0);
    circle(this.pos.x, this.pos.y, this.cap);
}

Mermiye hareket verme işlemine başlayalım. Merminin konumu üzerine her döngüde hız vektörünü ekleyeceğim. Yani X konumuna hızın X değeri, Y konumuna hızın Y değeri eklenecek. Yine mermi.js içerisindeyiz.

hareket(){
    this.pos.add(this.hiz);
 }

Gördüğünüz gibi add fonksiyonunu kullanarak iki vektörü toplamış oluyoruz. Daha doğrusu, pozisyon vektörüne hız vektörünü eklemiş oluyoruz. Bunu, konumX = konumX + hızX ve konumY = konumY + hızY olarak düşünebilirsiniz.

Hız vektörü mermiyi her döngüde vektörel olarak hareket ettirecek. Bunu Hareket fonksiyonu içerisinde hesaplatacağız. Ciz fonksiyonu ile her döngüde cismi çizdiğimizde ekranda hareket etmekte olan bir cisim göreceğiz.

function draw() {
  background(220);
  noStroke();
  fill(0,150,0);
  rect(0,300,width,100);
  
  mermi.hareket();
  mermi.ciz();
}  

Yerçekimi Ekleyelim

Konuma hız vektörü ekleyince gözlemlediğimiz değişimi bu sefer yerçekimi ekleyerek de elde edebiliriz. Bu sefer eklemeyi konuma değil hıza yapacağız. Temel fizik mantığı şu: yerçekimi konumu değil hızı değiştirir. Nesnenin üzerindeki kinetik enerjiyi değiştirir. Bu nedenle nesnenin sahip olduğu hız değerinde değişiklik yapmak lazım. Hız değerinin Y koordinatını yerçekimi kadar arttırırız. Fizik koordinatları ile ekran koordinatlarında düşey eksen ters çalışır. Sol üst köşe 0,0 noktası olduğu için burada yerçekimini hızın Y eksenine ekliyoruz.

sketch.js üzerinde yerçekimi için global bir gg değişkeni tanımlayalım. Buna küçük bir değer verin. Gerçekte olduğu gibi 9,81 vermeyeceğiz. Dijital dünya sandığınızdan çok farklı :) Buna değer olarak 0.1 falan verebilirsiniz. 

hareket(){
    this.pos.add(this.hiz);
    this.hiz.y += gg;
}

Rüzgar Ekleyelim

Yerçekimi ile aynı mantıkta rüzgar ekleyeceğiz. Yerçekimi Y ekseninde sabit bir değişim yaratıyordu. Rüzgar da X ekseninde sabit bir değişim yaratacak. Yerçekiminde olduğu gibi sketch.js üzerinde ruzgar isimli bir değişken tanımlayalım ve setup içerisinde random bir değer yaratalım.

hareket(){
    this.pos.add(this.hiz);
    this.hiz.y += gg;
    this.hiz.x += ruzgar;
} 

Hazır başlamışken nesneye ilk fırlatma hızını ve fırlatma açısını da tanımlayalım. Uygulamanın derece modunu derece yapmak için angleMod (DEGREES) komutunu kullanabilirsiniz. Bu radyan ile uğraştırmadan derece olarak işlem yapmamızı sağlayacak. Eğer, kullandığınız dilde bu şekilde hazır bir dönüşüm yoksa 180 derece = 3.14159 (pi sayısı) eşitliği ile derece ve radyan dönüşümü yapabilirsiniz. Mesela, 60 derecenin radyan karşılığı 60 * pi / 180 olacaktır. 

let mermi;
let aci = 60;
let hiz = 5;
let ruzgar;
let gg = 0.1;    // yerçekimi

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  mermi = new Mermi(20,300);
  mermi.hiz.x = hiz * cos(aci);
  mermi.hiz.y = hiz * -sin(aci);
  ruzgar = random(-2, 2) / 10;
}

Artık tek yapmamız gereken uygulamayı çalıştırmak. Hız, konum, rüzgar ve yerçekimi değerleri dinamik. Bunları değiştirerek farklı eğik atış hareketleri oluşturabilirsiniz. Bir basketbol oyunu veya düşmanı vurmaya dayalı bir savaş oyunu tasarlayabilirsiniz.