Sayfa 55

Şimdi sırayla yukarıda maddelenen konuları anlatmaya başlayalım.

HTML, Scripting Dilleri ve VML:

Aslında HTML tek başına efekt programlamada hemen hemen hiçbir işe yaramaz. En fazla ekran düzeni gibi şeyleri görmemiz için kullanışlı olabilir ki bunu herhangi bir çizim programıyla da yapmamız mümkün. Ancak HTML'in içerisinde yer alan form objeleri, DIV, SPAN gibi bazı tag'ler scripting dilleriyle birleştirilince çok güzel kullanım alanlarına sahip oluyorlar. Özellikle ön hesaplamalarda (precalculation) çok hızlı bir şekilde kullanımı mümkün. Hemen bir örnek ile başlayalım. HTML kullanarak bir sinus tablosu hesaplatıp ekrana yazdıralım.

Standart HTML yapısıyla sinus tablosu oluşturma:

sinus1.htm <html><head> <title>Sinus Hesaplama</title></head><body><script language="JavaScript"><!--for(i = 0; i < 256; i++){ a = Math.sin(i / 128 * Math.PI); document.write(a + "<br>");}//--></script></body></html>

Pratik yoldan sinus tablosu oluşturma:

sinus2.htm <script>for(i = 0; i < 256; i++){ a = Math.sin(i / 128 * Math.PI); document.write(a + "<br>");}</script>

Her iki text'i de Notepad'de yazıp .HTM ya da .HTML uzantısıyla kaydettiğiniz ve bu dosyaları açtığınız takdirde browser ekranında aynı sonucu görürsünüz. Elbette ki çok eski ya da çok tanınmamış browserlarda ikinci yol sorun çıkarabilir ancak günümüzde kullanılan Internet Explorer, Firefox, Mozilla, Netscape, Opera gibi browserlarda her iki versiyon da çalışacaktır.

Burada kullandığımız dil JavaScript. Detaylı bir JavaScript dersi vermek yerine;

http://www.w3schools.com/js/default.asp http://javascript-reference.info/ http:// www.dayanahost.com/downloads.cfm

Bu URL'leri, matematik fonksiyonları kullanmak için "Math" sınıfını kullanmanız gerektiğini ve ilk harfinin büyük olmak zorunda olduğu ön bilgilerini veriyor ve bu konuda gerisini size bırakıyorum.

Peki HTML+JavaScript kullanarak yalnızca hızlı ön hesaplamalar mı yapabiliyoruz? Başka bir esprisi yok mudur? Olmaz mı. Gelin JavaScript'ten bir küp çevirelim.

küp1.htm <html> <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"> </head> <body bgcolor="#000000" onResize="return false" onContextMenu="return false" onSelectStart="return false" onScroll="return false"> <script> // Küplerin Köşelerini Temsil Eden Grafik Parçalarının Yer Aldığı Tabakaları Hazırla for(i = 0; i < 8; i++) document.write("<div id='v" + i + "' style='position:absolute; left:0px;" + "top:0px; width:30px; height:30px; z-index:1'><b id='s" + i + "'>•</b></div>");

// Global Değişkenleri Tanımla var firstCoorX = new Array(100, 100, 100, 100, -100, -100, -100, -100); var firstCoorY = new Array(100, 100, -100, -100, 100, 100, -100, -100); var firstCoorZ = new Array(100, -100, 100, -100, 100, -100, 100, -100); var coorX = new Array(); var coorY = new Array(); var coorZ = new Array(); var zoom = 300, dist = 350; var midX = 200, midY = 200; var PI = 3.1415926535; var angleXaxis = 0, angleYaxis = 0, angleZaxis = 0; var hexN = new Array(); hexN[0] = "0"; hexN[1] = "1"; hexN[2] = "2"; hexN[3] = "3"; hexN[4] = "4"; hexN[5] = "5"; hexN[6] = "6"; hexN[7] = "7"; hexN[8] = "8"; hexN[9] = "9"; hexN[10] = "A"; hexN[11] = "B"; hexN[12] = "C"; hexN[13] = "D"; hexN[14] = "E"; hexN[15] = "F";