Javascript

3 boyutlu fonksiyon grafiği çizimi

Javascript ile dönen küp çizimini daha önceki postumda görmüştünüz. Aslında tek yaptığımız 8 nokta çizmek ve bunları orijin etrafında döndürmekti. Peki 8 nokta ile küp çizebiliyorsak, daha fazla nokta kullanarak çok daha büyük yapılar inşa edemez miyiz? Ederiz.

this.coords = [];
for(i = 0;i < size;i++){
 this.coords[i] = new Array(size);
 for(j = 0;j < size;j++){
  var x = i*5;
  var y = j*5;
  var z = 10*Math.sin(x/10) + 10*Math.cos(y/10);
  this.coords[i][j] = new vector(x,y,z);
 }
}

3d küp çizmek için yazdığımız koddan devam ediyoruz. Noktaları oluşturduğumuz kısımda bazı değişiklikler yaptık. Artık noktalar iki boyutlu bir dizide tutulacak. x ve y değerleri bağımsız değişkenler olurken, z değeri ise fonksiyonun çıktısı olacak. Noktaları iki boyutlu bir dizide tuttuğumuz için rotate ve animate fonksiyonlarında da ufak çaplı değişiklikler yapmamız gerekecek.

this.rotate = function(type,angle){
 for(i = 0;i < this.coords.length;i++){
  for(j = 0;j < this.coords[i].length;j++){
   var v = this.coords[i][j]; 
   var x = v.x;
//yalnızca for döngüsü değiştirildi..


function animate(myfunc){
//...
myfunc.coords.forEach(function(c){
 c.forEach(function(v){
  ctx.moveTo(v.x,v.y);
  ctx.arc(v.x,v.y,1,0,2*Math.PI);
 });
});
//...

Geri kalan kısımlar küp çizmek için kullandığımız ile aynı kalacak. Bu şekilde istediğimiz iki değişkenli fonksiyonu çizebiliriz. Yukarıda gördüğünüz kod f(x,y) = sin(x) + cos(y) fonksiyonunun bir benzerini çiziyor. x ve y değerleri belli bir aralıkta tutulmuştur.

Tarayıcıda çalıştırdığımızda karşımıza resimdeki gibi bir fonksiyon çıkacaktır.

Noktaları kullanarak fonksiyonları çizebiliyoruz. Ama çizdiğimiz yüzeyler sadece noktalardan ibaret olduğu için sınırları tam belli değil. Öyleyse çizgileri kullanarak aynı şekli çizmeye çalışalım bir de. Yalnızca animate fonksiyonuna birkaç satır kod ekliyoruz.

for(i = 0;i < myfunc.coords.length;i++){
 var start = myfunc.coords[i][0];
 ctx.moveTo(start.x,start.y);
 for(j = 0;j < myfunc.coords[i].length;j++){
  ctx.lineTo(myfunc.coords[i][j].x,myfunc.coords[i][j].y);
 }
}

for(i = 0;i < myfunc.coords[0].length;i++){
 var start = myfunc.coords[0][i];
 ctx.moveTo(start.x,start.y);
 for(j = 0;j < myfunc.coords.length;j++){
  ctx.lineTo(myfunc.coords[j][i].x,myfunc.coords[j][i].y);
 }
}

Birinin yatay, diğerinin dikey çizgileri çizmesi sebebiyle iki kez for döngüleri kullanılmıştır. İstediğimiz fonksiyonun grafiğini çizebileceğimiz gibi çizgilerin arasını açabilir veya daraltabiliriz de.

Ve grafiğin son hali

Kodun tam haline github sayfamdan ulaşabilirsiniz : https://github.com/farukcansaglam/Function3d

Leave a Reply

Your email address will not be published. Required fields are marked *