Ana içerik
Konu: Bilgisayar Programlama > Ünite 5
Ders 6: Açısal HareketHarekete işaret etme
İlk örneklerimizden birine geri gidelim, bir
Mover nesnesinin fareye doğru hızlandığı örneğe.Şimdiye kadar çizdiğimiz neredeyse her şeklin çember olduğunu fark etmiş olabilirsiniz. Bu birçok nedenden dolayı elverişlidir, bu nedenlerden biri, döndürmeyi düşünmemizin gerekmediğidir. Bir çemberi döndürün ve, tamamen aynı görünür. Ancak, tüm hareket programcılarının hayatında öyle bir zaman gelir ki, ekranda hareket yönünü işaret eden bir şey çizmek istersiniz. Belki bir karınca, veya bir araba, veya uzay gemisi çiziyorsunuz. Ve "hareket yönünde işaret" etmek derken, aslında “hız vektörüne göre dönmekten” bahsediyoruz. Hız, x ve y bileşeni olan bir vektördür, ama ProcessingJS'de döndürmek için bize bir açı gerekir. Bir kez daha trigonometri şemamızı çizelim, nesnenin hız vektörüyle:
Tamam. Tanjantın tanımının şöyle olduğunu biliyoruz:
Yukarıdaki sorun, hızı bilmemiz, ama açıyı bilmememizdir. Açıyı bulmamız gerekir. Burada ters tanjant adıyla bilinen özel bir fonksiyon devreye girer, buna bazen arctanjant veya tan-1 de denir. (Ters sinüs ve ters kosinüs fonksiyonları da bulunmaktadır.)
Bir a değerinin tanjantı, bir b değerine eşit olduğunda, b'nin ters tanjantı a'ya eşit olur. Örneğin:
| eğer | tanjant(a) = b |
| O zaman | a = arctanjant(b) |
Bunun tersi olduğunu gördünüz mü? Şimdi üsttekine göre açıyı bulabiliriz:
| eğer | tanjant(açı) = hız_y / hız_x |
| O zaman | açı = arctanjant(hız_y / hız_x) |
Artık formülü bulduğumuza göre, taşıyıcımızın display() fonksiyonunda nereye koymamız gerektiğini bulalım. Dikkat ederseniz, ProcessingJS'de arctanjant fonksiyonu,
atan() olarak gösterilir. JavaScript ayrıca yerleşik olarak (tüm temel trigonometrik fonksiyonlarının yanı sıra) Math.atan()'ı sağlar, ama biz ProcessingJS'nin sağladığı fonksiyonlarla yetineceğiz.Mover.prototype.display = function () {
var angle = atan(this.velocity.y / this.velocity.x);
stroke(0, 0, 0);
fill(127, 127, 127);
pushMatrix();
rectMode(CENTER);
translate(this.position.x, this.position.y);
rotate(angle);
rect(0, 0, 30, 10);
popMatrix();
};Şimdi yukarıdaki kod doğruya oldukça yakındır, ve neredeyse çalışır. Ancak, hala büyük bir sorunumuz bulunmaktadır. Aşağıda gösterilen iki hız vektörüne bakalım.
Yüzeysel olarak benzerlik gösterse de, bu iki vektör oldukça farklı yönlerde uzanır—aslında ters yönde! Ancak, her vektörün açısı için formülümüzü uygulamamız gerekseydi…
V1 ⇒ açı = atan(-4/3) = atan(-1,333...) = -0,9272952 radyan = -53 derece
V2 ⇒ açı = atan(4/-3) = atan(-1,333...) = -0,9272952 radyan = -53 derece
V2 ⇒ açı = atan(4/-3) = atan(-1,333...) = -0,9272952 radyan = -53 derece
…her vektör için aynı açıyı elde ederiz. Bu ikisi için de doğru olamaz: iki vektör farklı yönlerdedir! Şöyle ki, bu bilgisayar grafiklerinde oldukça yaygın bir sorundur. Pozitif/negatif senaryoları hesaba katmak için
atan()'ı bir sürü koşullu ifadeyle kullanmak yerine, ProcessingJS (ve JavaScript ve neredeyse tüm programlama ortamları) bunu sizin için yapan atan2() adında güzel bir fonksiyona sahiptir.Mover.prototype.display = function () {
var angle = atan2(this.velocity.y, this.velocity.x);
stroke(0, 0, 0);
fill(127, 127, 127);
pushMatrix();
rectMode(CENTER);
translate(this.position.x, this.position.y);
rotate(angle);
rect(0, 0, 30, 10);
popMatrix();
};Bunu daha da sadeleştirmek için
PVector nesnesinde heading() adında bir fonksiyon vardır, bu da herhangi bir PVector'ün radyan cinsinden 2 boyutlu yön açısını elde etmeniz için atan2()'yi çağırır.Programın tamamı şöyle bir şeye benzer. Farenizi üzerine getirin ve nasıl döndüğünü izleyin!
Bu "Doğal Simülasyonlar" dersi, Daniel Shiffman'ın"Kodun Doğası"'nın bir türevidir ve Creative Commons Yüklemesi-Ticari Olmayan 3,0 Dağıtıma Açık Lisansla kullanılmaktadır.
Tartışmaya katılmak ister misiniz?
Henüz gönderi yok.