0

P5.js Koordinat Sistemini Anlama

Merhaba arkadaşlar p5.js ile ilgili birşeyler yazacağım dedim ancak bir türlü sıra getiremedim. p5.org sitesinde bir hayli örnek var bu örneklere yer verip buradan anlatma yolunu tercih edeyim diyorum . Zaten bir konu ancak güzel örneklerle anlaşılır. Bende yine oradaki örnekleri türkçe kaynak olsun için burada  göstereceğim. Önceki p5.js yazısındaki bilgileri de hatırlarsak p5.js aslında processing ‘in ” javascript powered ” versiyonu. Dolayısıyla processing ‘i rahat rahat web üzerinde kullanın diye geliştirilmiş . 

Şimdi Koordinat sistemini anlayalım. Bütün nesneler sahnede belirli bir koordinat belirlenerek oralarda oluşturulur. Koordinat yapısı pixel tabanlı olarak oluşturulmuştur. Eğer sahneye bir obje ekleyecekseniz bunun koordinatlarını pixel cinsinden belirlemeniz gerekli. Orijin noktası (0,0) ekranın sol üst köşesini ifade ederken sahnenin sonu ise sahne boyu -1 ve sahne eni -1 şeklinde belirlenir . Bu aralıkta nesnelerinizi yerleştirebilirsiniz. 

function setup() {
  // Sets the screen to be 720 pixels wide and 400 pixels high
  createCanvas(720, 400);
}

function draw() {
  // herhangi bir dolgu rengi seçmeyelim ve arkaplan rengini siyah yapalım
  background(0);
  noFill();

  // point metodu 2 tane parametre alır birisi x ekseninde , diğeri y eksenindeki noktası

  // İlk Parametre x-koordinatı ikincisi ise  y 
  stroke(255);
  point(width * 0.5, height * 0.5);
  point(width * 0.5, height * 0.25); 

  // Koordinat sistemi bütün şekil çizimlerinde kullanılır 
  // Farkı metodlarla parametrelerin farklı yerde kullanımı olabilir 
  // mesela line metodu ile çizgi çizerken ilk iki parametre başlangıç noktasını  ifade ederken
  // ikinci iki  parametre ise bitiş noktasını ifade eder

  stroke(0, 153, 255);
  line(0, height*0.33, width, height*0.33);

  // rect() ile bir  dikdörtgen çizerken ise ilk iki parametre 
  // sol üst noktanın koordinatını belirtirken 
  // ikinci iki parametre genişlik ve yüksekliği ifade eder
  stroke(255, 153, 0);
  rect(width*0.25, height*0.1, width * 0.5, height * 0.8);
}

kaynak:https://p5js.org/examples/structure-coordinates.html

admin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir