Bu sayfadaki yazılar
Sayfanın metni
Sayfa 56
// Küp Çevirme Fonksiyonu function rotateCube() { for(i = 0; i < 8; i++) { // X Ekseninde Çevir coorY[i] = firstCoorY[i] * Math.cos(angleXaxis / 180.0 * PI) + firstCoorZ[i] * Math.sin(angleXaxis / 180.0 * PI); coorZ[i] = firstCoorY[i] * Math.sin(angleXaxis / 180.0 * PI) - firstCoorZ[i] * Math.cos(angleXaxis / 180.0 * PI); // Y Ekseninde Çevir coorX[i] = coorZ[i] * Math.cos(angleYaxis / 180.0 * PI) + firstCoorX[i] * Math.sin(angleYaxis / 180.0 * PI); coorZ[i] = coorZ[i] * Math.sin(angleYaxis / 180.0 * PI) - firstCoorX[i] * Math.cos(angleYaxis / 180.0 * PI); // Z Ekseninde Çevir temp = coorX[i]; coorX[i] = coorX[i] * Math.cos(angleZaxis / 180.0 * PI) + coorY[i] * Math.sin(angleZaxis / 180.0 * PI); coorY[i] = temp * Math.sin(angleZaxis / 180.0 * PI) - coorY[i] * Math.cos(angleZaxis / 180.0 * PI); } // Dönüş Açılarını Arttır angleXaxis = (angleXaxis + 1) % 360; angleYaxis = (angleYaxis + 2) % 360; angleZaxis = (angleZaxis + 3) % 360; }
// İzdüşüm ve Plot Fonksiyonu function setCube() { for(i = 0; i < 8; i++) // Her 8 Köşe İçin { if(coorZ[i] + dist > 0) // Eğer Görünür Durumdaysa { // FORMÜL: projection_x = x / (z + distance) * zoom px = coorX[i] / (coorZ[i] + dist) * zoom; // FORMÜL: projection_y = y / (z + distance) * zoom py = coorY[i] / (coorZ[i] + dist) * zoom; // FORMÜL:
Klavyeyle gezinmek için ← ve → tuşları.
Sayfa 57
vertex_position_x = center_of_the_area + projection_x document.all("v" + i).style.left = midX + px; // FORMÜL: vertex_position_y = middle_of_the_area + projection_y document.all("v" + i).style.top = midY + py; document.all("s" + i).style.fontSize = (300 - coorZ[i]) / 5; document.all("s" + i).style.color = "#" + conv2Hex(parseInt((550 - coorZ[i]) / 3, 10)) + "0000"; } } }
// 10'ludan 16'lı Sayı Sistemine Dönüşüm Fonksiyonu function conv2Hex(decval) { leftval = parseInt(decval / 16, 10); rightval = decval % 16; hexval = hexN[leftval] + hexN[rightval]; return hexval; }
// Ana Rutin function cubeAnim() { rotateCube(); // Kübü Çevir setCube(); // İzdüşüm Al ve Çiz setTimeout("cubeAnim()", 20); // 20 Milisaniye Sonra Bir Sonraki Ekranı Çiz } cubeAnim(); // İlk Ekranı Hesapla</script> </body> </html>
Not: Sayfa genişliğine sığması için bazı alanlar alt satıra kaydırılmıştır ancak kes&yapıştır yöntemiyle alındığında program çalışacaktır.
Bu örnekte de görüldüğü üzere HTML ve JavaScript temel bazı demo efektlerini yapmak için yeterlidir. Zaten Demoscene'de "Scripting" isimli bir demo yarışma kategorisinin oluşumunda Action Script'in ardından en önemli dillerden biri de JavaScript'tir.
Yukarıdaki kodu açıklamıyorum, yalnızca bir örnek olarak veriyorum. Ancak bu örnekte dikkatinizi çekmek istediğim bir nokta var. O da küpün yalnızca köşe noktalarından ibaret olması. O noktalar da aslında birer ASCII karakter. Peki bizim bu noktalar yerine wireframe yani çizgilerden oluşan bir vektör yapmamız mümkün değil mi? Aslında pek de mümkün sayılmaz. Çünkü HTML üzerine pixel basmak diye bir mantık yok. Pixel basmak yerine her bir hücresi 1x1 pixele denk gelen tablolar oluşturulabilir. Ancak bu tabloların da boyutları büyüdükçe HTML inanılmaz derecede yavaşlamaktadır. Örnek olarak 320x200 bir alan kullanmak imkansıza yakındır. Aksi takdirde saniyede 1 frame bile görmemiz mümkün olmayabilir. Peki ne yapmak gerekiyor? Bu durumda VML (Vector Markup Language) yardımımıza yetişiyor. Hemen ilgili linkleri verip bir örneğe geçiyorum.
http://www.w3.org/TR/1998/NOTE-VML-19980513 msdn.microsoft.com/library/default.asp? url=/workshop/author/vml/default.asp küp2.htm <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>Cube3D Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> <style> v\:* { behavior: url(#default#VML); } </style> </head>