P5.js ile İnteraktif Güneş Sistemi Oluşturma

P5.js ile İnteraktif Güneş Sistemi Oluşturma

Merhaba! Bu makalede, P5.js kütüphanesini kullanarak etkileşimli bir güneş sistemi nasıl oluşturacağınızı adım adım göstereceğim. Öncelikle, P5.js’in ne olduğunu ve neden bu proje için ideal olduğunu açıklayalım. P5.js, JavaScript tabanlı, yaratıcı kodlama için tasarlanmış harika bir kütüphanedir. Kullanımı kolay ve anlaşılır yapısıyla, görsel projeler geliştirmek için mükemmel bir araçtır. Bu nedenle, güneş sistemimizi canlandırmak için ideal bir seçimdir.

İlk adım, gerekli kütüphaneleri projeye eklemektir. Bu, HTML dosyanıza <script> etiketleri ekleyerek kolayca yapılabilir. Daha sonra, setup() ve draw() fonksiyonlarını kullanarak P5.js ortamını hazırlayacağız. setup() fonksiyonu yalnızca bir kez çalışırken, draw() fonksiyonu sürekli olarak çalışarak animasyonumuzu sağlar.

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script>
  function setup() {
    createCanvas(800, 600);
  }

  function draw() {
    background(220);
  }
</script>

Bu basit kod, 800×600 piksel boyutunda bir canvas oluşturur ve arka planı gri yapar. Şimdi, gezegenlerimizi ekleyelim. Her gezegen için, konumunu, boyutunu, rengini ve yörüngesini tanımlamalıyız. Bunun için, ellipse() fonksiyonunu kullanarak daireler çizeceğiz. Gezegenlerin yörünge hareketlerini sin() ve cos() trigonometrik fonksiyonlarını kullanarak simüle edeceğiz.

let sunX = width/2;
let sunY = height/2;
let sunSize = 50;

function draw(){
  //Güneş
  fill(255,255,0);
  ellipse(sunX,sunY, sunSize, sunSize);

  //Dünya örnek olarak
  let earthX = sunX + 100*cos(frameCount*0.01);
  let earthY = sunY + 100*sin(frameCount*0.01);
  fill(0,0,255);
  ellipse(earthX, earthY, 20, 20);
}

Bu kodda, frameCount değişkeni, draw() fonksiyonunun kaç kere çalıştığını gösterir. Bu değişkeni kullanarak gezegenlerin hareketini kontrol edebiliriz. Daha sonra, her gezegen için farklı yarıçaplar, hızlar ve renkler kullanarak güneş sistemini genişletebiliriz. Ek olarak, etkileşimlilik eklemek için fare hareketlerini veya tuş olaylarını kullanabilirsiniz. Örneğin, fareyle gezegenleri büyütüp küçültebilirsiniz veya tuşlara basarak kamerayı hareket ettirebilirsiniz.

Daha gelişmiş bir güneş sistemi oluşturmak için, 3D grafikler ve gerçekçi fizik simülasyonları ekleyebilirsiniz. Ancak, bu makalede temel bir interaktif güneş sistemi oluşturmaya odaklandık. Daha fazla bilgi ve ileri seviye teknikler için, fatihsoysal.com sitesini ziyaret edebilirsiniz. Umarım bu makale size yardımcı olmuştur. Herhangi bir sorunuz varsa, yorum bölümünden sorabilirsiniz.

#Etiketler
#P5js #GüneşSistemi #İnteraktif #JavaScript #Kodlama #Tutorial #Eğitim #Gezegen #Animasyon #Grafik