>> ‹çindekiler

CHIP Workshop Klasörü

Kesin, biriktirin,
kendi arflivinizi
oluflturun

CHIP Workshop
Klasörü’nü
ayraçlar›yla
birlikte siparifl
CHIP WORKSHOP’da BU AY
edebilir ve
Web Programc›l›¤› kendi arflivinizi
3DHTML ile 3D oluflturabilirsiniz.
dünyas›na ilk ad›m

Photoshop Serisi Fiyat: 9.000.000 TL

Herkes için Photoshop (KDV ve gönderim ücreti dahil)

Excel Serisi Siparifl için:

USERFORM’LAR ‹LE ÇALIfiMAK - 3 http://abone.vogel.com.tr
 3DHTML ile 3D
Web Programc›l›¤›
<<
dünyas›na ilk ad›m
Web sayfalar›n›z için eklenti gerektirmeyen etkileflimli 3D sahneleri yapman›n
yollar›n› ö¤renin, 3D teknolojilerinin ard›nda yatan gerçeklerle tan›fl›n.

Boyutlu uygulamalar her zaman için ilgi çekici olmufllard›r. 1. Koordinat sistemi

3 Web’de 3 boyutlu içerikler gösterebilmenin çeflitli yollar› mev-

cut olsa da optimal yoldan tam anlam›yla 3 boyutlu gezinme-
yi mümkün k›labilen imkanlar s›n›rl›d›r. Viewpoint (VET 3D) gibi Java
3D tekni¤inde sahne, tan›m-
lanacak 3 boyutlu bir koordi-
nat sistemi içinde yer al›r.
türevi uygulama programlar› ve bunlara ilaveten Shockwave, 3 bo- Matematikte farkl› koordinat
yutlu web içerikleri üretmede s›kça kullan›lan programlar olup ziya- sistemleri mevcuttur. Bizim
retçinin bu içerikleri görüntüleyebilmesi için plug-in ad› verilen eklen- uygulamalar›m›zda kullana-
ti dosyalar›na ihtiyaç duyulur. Bu ayki say›m›zda ele alaca¤›m›z konu ca¤›m›z sistem “Kartezyen”
ise s›radan bir taray›c›da çal›flabilen, normal “HTML sayfalar›nda” olarak adland›r›lan sistemdir.
gösterebilece¤iniz 3 boyutlu içerikler üretebilmek üzerine olacak. Bu sisteme göre üçü de birbi-
3DHTML ad› verilen bu tarz uygulamalar› sayfalar›n›zda görüntüle- rine dik olacak flekilde 3 ekse-
mek için hiç bir eklenti dosyas›na ihtiyaç duymayacaks›n›z. Çünkü nin varl›¤› kabul edilir: x, y ve z. 3 boyutlu boflluk içinde yer alacak bir
sayfam›z 3 boyutlu içerik üretebilmek için sadece ama sadece JavaSc- birimin pozisyonu bu üç eksene karfl›l›k gelen de¤erlerdir. Dolay›s›yla
ript ve CSS kullan›yor olacak. Asl›nda kulland›¤›m›z teknolojiyi DHTM- bir noktan›n tan›m› sahip oldu¤u pozisyonla yap›l›r.
L’in bir uzant›s› olarak tan›mlamak daha yerinde olur. Zaten bundan Vektörler yönleri olan de¤erleri ifade etmekte kulla-
dolay› ad›nda DHTML ifadesi yer al›yor. n›l›rlar. Vektörlerin sahip olduklar› de¤erler kadar yönle-
ri de önemlidir. Mesela fizikte kuvvet vektörel bir ifade-
dir. Gözünüzde canland›rmak için bir örnek vermek ge-
» 3DHTML nedir? rekirse: Bir kap›ya kuvvet uygulayacak iki kifliden biri 3,
3DHTML normal web sayfalar›nda 3 boyutlu sahneler yaratmak için
kullan›lan bir DHTML yöntemidir. di¤eri ise 2 birim kuvvet kullanacaksa, ayn› yönde uygu-
lad›klar› kuvvetlerinin bileflkesi 5 birimken, z›t yönlerde
elde edece¤iniz bileflke 1 birimdir. Bu da vektörel de¤er-
Ancak her fleyden önce 3D teknolojilerinin ard›nda yatan prensip- lerin sahip olduklar› büyüklükleri kadar yönlerinin de önemini göste-
leri ö¤renmekle ifle bafllayal›m. Matematikten hofllanmayanlar›n›z rir. 3D matemati¤inde vektörler yüzeyleri tan›mlamakta kullan›l›rlar.
için bu nokta biraz can s›k›c› olabilir ama 3D’nin s›rlar›n› keflfetmek ve Vektörleri tan›mlamak için bafllang›ç ve bitifl noktalar›n› belirtmek ye-
ard›nda yatan prensipleri ö¤renmek için bu gerekli. Bu arada okulda terlidir.
ö¤rendi¤imiz (belki de ö¤renmedi¤imiz demek daha do¤ru olacak)
matematik, cebir, trigonometri ve geometri bilgilerinin gerçek hayat- Vektör (a, b)
ta nas›l kullan›labilece¤i konusu da biraz olsun aç›kl›¤a kavuflmufl ola- Nokta ve vektörlerin programc›l›k dünyas›nda kod karfl›l›klar› JavaSc-
cak. Ben flahsen programlar›mda okul bilgilerinden çokça faydalan›- ript için afla¤›daki gibi olabilir.
yorum. Gerçek bilgisayar programc›lar›n›n da sevmese bile matema-
tikten korkmamalar›n› tavsiye ediyorum. 3D matemati¤ini ö¤renen- function Nokta(x,y,z) {
ler ayn› tekni¤i deneyim sahibi olduklar› farkl› teknolojilere uyarlaya- this.x = x;
rak farkl› ortamlarda 3 boyutlu sahneler yaratabilirler. Neyse, yine de this.y = y;
“ben sadece sonucu görmek istiyorum” diyenleriniz bu ilk bölümü at- this.z = z;
layabilirler. return this;
}
3D matemati¤i ve 3D motoru
3D teknolojisinin temel gerçe¤i safi matematik ve hesaplama üzerine // 3D vektör tan›m› A(x,y,z) -> B(x,y,z)
kurulu olmas›d›r. Uygulamalarda 3 boyutlu görüntü yaratabilmek function Vektor(a,b) {
için gerekli bütün hesaplamalar› yapan ünite 3D motoru olarak ad- this.a = a;
land›r›l›r. 3D teknolojilerinin hemen hepsinde sistem üç aflamada ele this.b = b;
al›n›r. Bu aflamalar flunlard›r. return this;
}
3D sahneler yaratmak için at›lacak 3 ad›m
1. Koordinat sistemi ve sahneyi oluflturan birimlerin // Perde, üzerine 3D birimlerin projeksiyon yap›ld›¤› 2D yüzey var perde =
konumland›r›lmas› new Vektor(new Nokta(-150,-150,100),new Nokta(150,150,100));
2. Transformasyon sonucu elde edilecek yeni koordinatlar›n
hesaplanmas› 2. Transformasyon hesaplar›
3. Sahneyi yeni koordinatlara göre 2 boyutlu bir yüzeye Sahnemizi, koordinatlar› kullanarak oluflturduktan sonra sahnede gö-
projekte edip görüntüyü güncelleme. rünen herhangi bir birimin çeflitli transformasyonlar sonras›nda bulu-
fiimdi bu ad›mlar› teker teker ele alal›m. naca¤› yeni pozisyonu hesaplamak için matris (matrix)’ler kullan›l›r.
✂

76• CHIP Workshop >>

 >> Web Programc›l›¤›

Transformasyon olarak adland›rd›¤›m›z fley 3 boyutlu bir operasyonu B = [nokta.x,nokta.y,nokta.z,1];

temsil eder. 3 boyutlu sistemlerde kullan›lan genel transformasyon- // Bir noktay› temsil eden 4x1 matris
lar flunlard›r.

3D Transformasyonlar›
Rotation: Rotasyon (herhangi bir eksen etraf›nda dönüfl)
Scaling: Ölçeklenme (herhangi bir eksen do¤rultusundaki boyutun
de¤iflmesi)
Translation: Yer de¤ifltirme (herhangi bir eksen do¤rultusunda pozis-
yon de¤ifltirme)
Matris nedir?
Matrisler belli bir formu ve kural-
lar› olan tabela fleklinde iki boyut-
lu dizilerdir. Sat›rlardan ve sütun-
lardan oluflurlar. 3D matemati-
¤inde 4x4 (4 sat›rl› ve 4 sütunlu)
matrislerden faydalan›l›r.
Matrisler (koordinatlar gibi)
pozisyon ya da (transformasyon-
lar gibi) hareket bilgilerini içerebi-
lirler. Bir matris yüzlerce farkl›
transformasyonun bilgisini tafl›-
yabilir. Hesaplamada transfor-
masyonlar matrislerin çarp›m›yla elde edilir. ‹ki matrisin çarp›m› afla-
¤›daki gibidir.
Örne¤in basitli¤i için 4x4 yerine 2x2 matrislerin çarp›m›n› verdik. 4x4
için de kural ayn›d›r. Matris çarp›m›nda yer de¤ifltirme özelli¤i yoktur.
A.B ile B.A matris çarp›mlar› birbirlerine eflit de¤ildir.
A.B =/= B.A
A = [[1,0,0,0],[0,Math.cos(a),-Math.sin(a),0],[0,Math.sin(a), ➞
Math.cos(a),0],[0,0,0,1]];
// X-ekseni etraf›nda rotasyonu temsil eden 4x4 matris
Matris çarp›m› için oluflturulmufl haz›r bir fonksiyon kodunu kul-
lanmak programlardaki kodlar› çok daha sade ve anlafl›l›r hale getire-
cektir.
function matrixMultiply(A,B) {
var retVal = [0,0,0];
for(var i=0;i<4;i++) {
retVal[i] = 0;
for(var j=0;j<4;j++)
retVal[i] += A[j] * B[i][j]
}
return retVal;
}
Bir deneme
Basit bir transformasyonla matrislerin nas›l kullan›ld›¤›n› görelim. ‹lk
fleklimizde görülen top (1,1,1) pozisyonunda bulunuyor.
Topumuzu x-ekseni etraf›nda 90 derece döndürelim. Bu durumda
ikinci fleklimize bakarak topun yeni koordinatlar›n›n (1,-1,1) oldu¤unu
söyleyebiliriz. Bunu matrisleri kullanarak hesaplayal›m ve gerçekten
do¤ru olup olmad›¤›n› test edelim.

Matrislere neden ihtiyaç duyar›z?

3D için matrisleri kullanmak zorunda de¤ilsek de kullanman›n getir-
di¤i avantajlar mevcuttur. Birincisi, kullanmak kullanmamaktan daha
kolayd›r. Matrisler asl›nda kompleks operasyonlar› basitlefltiren no-
tasyonlard›r. Bir matristeki de¤erlerin dizilifline bakarak o matris ile
ne gibi operasyonlar gerçeklefltirebilece¤ini kestirmek mümkündür.
Bundan baflka farkl› operasyonlar›n hepsini birden tek bir matrisin içi-
ne yerlefltirebilirsiniz.
Afla¤›da en önemli 3D transformasyonlar›n›n matris karfl›l›klar›n›
görebilirsiniz.

Görüldü¤ü üzere matrisimizde de ç›kan yeni koordinat de¤eri (1,-1,1)

Matrisleri program kodlar›na nas›l uyarlayabiliriz?
Programc›l›kta matrisler çok boyutlu dizelerle ifade edilebilirler
3. Projeksiyon
Projeksiyonun amac› 3D ortam›nda transformasyon sonras› elde edi-
len yeni de¤erleri 2D ortam› olan ekrana yans›tmakt›r. Ekran sahnede
viewport ad› verilen sanal yüzeyle temsil edilir. Belli koordinatlar›
olan ve istenirse de¤ifltirilebilen bu yüzeyi (vp) sinema perdesi gibi dü-
flünebilirsiniz. Kamera olarak adland›r›lan izleme noktas› ile 3 boyutlu
bofllukta bulunan her hangi bir cismin (A) aras›na bir çizgi çekilecek
olursa, bu çizginin perdeye temas etti¤i nokta (A’), cismin perde üze-
rinde görünece¤i noktad›r. Bir baflka ifadeyle, bu nokta fleklin ekranda

<< CHIP Workshop • 77

 Web Programc›l›¤›
<<
color:#ff0000; text-decoration: underline;}
</style>
<script language="JavaScript">

var maxBoyut=5; // Her bir birimin maksimum boyutu

var perspektif=20; // Uzak ile yak›n birim aras›ndaki boyut fark›

// 3D birim tan›m›
function Nokta(x,y,z) {
this.x = x;
görünmesi gerekti¤i noktad›r. Düflünecek olursan›z cisim perdenin ar- this.y = y;
kas›nda sonsuza do¤ru uzaklaflt›¤›nda görünece¤i nokta da ekran›n this.z = z;
ortas›na do¤ru yaklafl›r. return this;
Bize düflen, cismi 2 boyutlu ekranda da 3 boyutluymufl gibi göste- }
rebilmek için perdedeki izdüflümünün (A’) koordinatlar›n› hesapla-
makt›r. Bu konuda afla¤›daki fleklimizde yard›mc› çizgilerle olufltura- // 3D vektör tan›m› A(x,y,z) -> B(x,y,z)
ca¤›m›z benzer üçgenler bize yard›mc› oluyor. function Vektor(a,b) {
‹ki benzer üçgenden faydalan›larak oluflturulan denklemde bilin- this.a = a;
meyen olarak A’.x’in yani A’ noktas›n›n x koordinat›n›n de¤eri flu fle- this.b = b;
kildedir. return this;
Dikkat ederseniz denklemde }
A’.x d›fl›ndaki tüm elemanlar (ki
bunlar perdenin, A noktas›n›n ve // Perde, 3D birimlerin üzerine projeksiyon yap›ld›¤› 2D yüzey
kamera’n›n koordinatlar›d›r) bili- var perde = new Vektor(new Nokta(-150,-150,100),new ➞
nen de¤erlere sahip. X ekseni için Nokta(150,150,100));
geçerli olan denklem Y ekseni için
de geçerlidir. A’.x için elde edilen // Kamera'n›n pozisyonu
de¤erlerde x yerine y koyarak A’.y var kamera = new Nokta(0,0,-150);
de elde edilebilir.
NOT: Dergimizin CD’sinde, // Birimleri ekranda pozisyonland›ran ve boyutland›ran fonksiyon
bu ayki StudioWeb+ bölü- function ekranaDiz(isim, poz) {
münde projeksiyon hesap-
lamas›n›n nas›l yap›ld›¤›n› obj = parent.document.getElementById(isim);
gösteren bir animasyon css = parent.document.getElementById(isim).style;
bulabilirsiniz.
Bu denklemleri kullana- f = perde.a.z - kamera.z; // Odak uzakl›¤›
rak oluflturulacak kodlar ci-
simlerin 3 boyutlu koordi- // Noktalar›n kameraya göre pozisyonlar›
natlar› ne olursa olsun ekranda do¤ru noktada konumland›racaklar- Nx = (poz.x-kamera.x) * f / (poz.z-kamera.z);
d›r. Bunlara ilaveten sahnede uzak olan cismin boyutunun küçülmesi Ny = (poz.y-kamera.y) * f / (poz.z-kamera.z);
ve yak›n olan cismin uzak olan›n üzerinde yer almas› gerekir.
// Noktalar›n perdeye göre pozisyonlar›
3 boyutlu küp Vx = parseInt(kamera.x + Nx - perde.a.x);
fiimdi bir örnekle bütün bu teorilerin pratikte nas›l uygulanabilece¤i- Vy = parseInt(kamera.y + Ny - perde.a.y);
ni görelim. Kulland›¤›m›z teknik, program dili olarak JavaScript’i, ko-
numland›rma içinse CSS’i kullan›yor. Oluflturaca¤›m›z flekil her bir kö- if(poz.z > kamera.z && Vx > 0 && Vy > perde.a.y && Vy < perde.b.y - ➞
flesinde ve bir tane de merkezinde olmak üzere toplam 9 adet nokta- perde.a.y && Vx < perde.b.x - perde.a.x) {
dan oluflan bir küp. css.visibility = "visible";
boyut = maxBoyut-poz.z/perspektif;
<html> if(boyut<1) boyut=1;
<head> css.width = boyut;
<title></title> css.height = boyut;
<meta http-equiv="Content-Type" content="text/html; charset= ➞ css.left = Vx - boyut/2;
windows-1254"> css.top = Vy - boyut/2;
<style type="text/css"> css.zIndex = (100 - poz.z) + 1000;
div {font-family:Verdana; font-size:11px; font-weight:bold; ➞ } else {
color:#ffa800; text-decoration: none;} css.visibility = "hidden";
a {font-family:Verdana; font-size:11px; font-weight:bold; ➞ //Perdenin üzerine düflmeyen ya da kameran›n arkas›nda kalan ➞
color:#ffa800; text-decoration: underline;} birimleri gösterme
a:hover {font-family:Verdana; font-size:11px; font-weight:bold; ➞ }
✂

78• CHIP Workshop >>

 >> Web Programc›l›¤›

} kamera.y += trans;
kamera.z += trans;
// Sahneyi oluflturan birimler ve pozisyonlar›
var noktalar = new Array(9); }
for(i=1; i<=9;i++)
noktalar[i] = { isim: "katmanNokta" + i, x: 0, y: 0, z: 0, a: 45 } // Bu birimleri ekrana diz
noktalar[1].x = 30; noktalar[1].y = -30; noktalar[1].z = -30; ekranaDiz(noktalar[i].isim, noktalar[i]);
noktalar[2].x = -30; noktalar[2].y = -30; noktalar[2].z = -30; }
noktalar[3].x = -30; noktalar[3].y = -30; noktalar[3].z = 30;
noktalar[4].x = 30; noktalar[4].y = -30; noktalar[4].z = 30; setTimeout(basla,30); // Sahneyi güncelle
noktalar[5].x = 30; noktalar[5].y = 30; noktalar[5].z = -30; }
noktalar[6].x = -30; noktalar[6].y = 30; noktalar[6].z = -30;
noktalar[7].x = -30; noktalar[7].y = 30; noktalar[7].z = 30; function derRad(x) { return ( x/(360/(2*Math.PI)) ); }
noktalar[8].x = 30; noktalar[8].y = 30; noktalar[8].z = 30;
noktalar[9].x = 0; noktalar[9].y = 0; noktalar[9].z = 0; // Matrix çarp›m fonksiyonu
function matrixCarp(A,B) {
var aci=5; // her ad›mdaki de¤iflim aç›s› var taban = [0,0,0];
var zoom = 0; for(var i=0;i<4;i++) {
var trans = 0; taban[i] = 0;
var rotX = false; var rotY = false; var rotZ = false; for(var j=0;j<4;j++)
taban[i] += A[j] * B[i][j]
function basla() { }
ofsetEksen=0; // Dönüfl ekseni için ofset return taban;
for(i=1;i<=9;i++) { }
// A = [ x,y,z,w ];
if(aci>360) aci-=360; // B = [ [ a,b,c,boyut ],
// [ e,f,g,h ],
mat = [noktalar[i].x,noktalar[i].y,noktalar[i].z-ofsetEksen,1]; // [ i,j,k,l ],
// her bir noktan›n koordinatlar›n› içeren matrixi (x y z w) // [ m,n,o,p ] ];
a = derRad(aci);
matRotX = [[1,0,0,0],[0,Math.cos(a),-Math.sin(a),0], ➞ function degis(x) {
[0,Math.sin(a),Math.cos(a),0],[0,0,0,1]]; if(x==0) rotX = !rotX;
// RotX matrixi, bununla çarp›nca x ekseni etraf›nda rotasyon olufluyor if(x==1) rotY = !rotY;
matRotY = [[Math.cos(a),0,Math.sin(a),0],[0,1,0,0], ➞ if(x==2) rotZ = !rotZ;
[-Math.sin(a),0,Math.cos(a),0],[0,0,0,1]]; }
// " Y
matRotZ = [[Math.cos(a),-Math.sin(a),0,0], ➞ </script>
[Math.sin(a),Math.cos(a),0,0],[0,0,1,0],[0,0,0,1]];
// " Z </head>

// matrix çarp›m› <body bgcolor="#000000" onload="basla();" marginwidth="0" ➞

if(rotX) mat = matrixCarp(mat,matRotX); marginheight="0" topmargin="0" leftmargin="0">
if(rotY) mat = matrixCarp(mat,matRotY);
if(rotZ) mat = matrixCarp(mat,matRotZ); <div style="position: absolute; top: 100; left: 300;">
<form isim="axis">
// yeni pozisyon de¤erleri <input type="checkbox" onclick="degis(0);"> X-ekseni etraf›nda dön<br>
noktalar[i].x = mat[0]; <input type="checkbox" onclick="degis(1);"> Y-ekseni etraf›nda dön<br>
noktalar[i].y = mat[1]; <input type="checkbox" onclick="degis(2);"> Z-ekseni etraf›nda dön<br>
noktalar[i].z = mat[2]+ofsetEksen; </form>
<a href="#" onmouseover="zoom=0.2" onmouseout="zoom=0"> ➞
// Zoom... Zoom +</a>
if(kamera.z <= -10){ <font color="#FF0000">|</font>
kamera.z += zoom; maxBoyut += zoom/50; <a href="#" onmouseover="zoom=-0.2" onmouseout="zoom=0"> ➞
} Zoom -</a>
else(kamera.z = -10) <font color="#FF0000">|</font>
<a href="#" onmouseover="trans=0.2" onmouseout="trans=0"> ➞
// Trans... trans +</a>
if(trans != 0){ <font color="#FF0000">|</font>
<a href="#" onmouseover="trans=-0.2" onmouseout="trans=0"> ➞
kamera.x += trans; trans -</a>
<< CHIP Workshop • 79

</div>
<div id="katmanNokta1" style="position: absolute; top: 400; left: 30; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px;"></div>
<div id="katmanNokta2" style="position: absolute; top: 400; left: 40; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta3" style="position: absolute; top: 400; left: 50; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta4" style="position: absolute; top: 400; left: 70; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta5" style="position: absolute; top: 400; left: 80; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta6" style="position: absolute; top: 400; left: 60; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta7" style="position: absolute; top: 400; left: 90; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta8" style="position: absolute; top: 400; left: 100; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
<div id="katmanNokta9" style="position: absolute; top: 400; left: 100; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px"></div>
</body>
</html>
Asl›nda program›n aç›klamas›n› bizzat kaynak kodlar› üzerine düfl-
tü¤üm notlarla yapmaya çal›flt›m ama baz› noktalar› biraz daha aça-
biliriz. Fark edece¤iniz üzere program, teori k›sm›nda aç›klanan ve el-
de edilen tan›mlamalar ve denklemlerle paralellik tafl›yor.
Kameram›z›n bulunaca¤› noktay› yatay ve dikey olarak sahnenin
tam ortas›nda derinlik olarak ise biraz geride belirledik ki sahneyi da-
ha iyi bir aç›dan görebilelim.
var kamera = new Nokta(0,0,-150);
tan›mlad›¤›m›z ekranaDiz() fonksiyonu pozisyonu hesaplanan her
bir noktan›n 2D ekran üzerinde görünece¤i koordinat› ve görünece¤i
boyutunu hesapl›yor (projeksiyon) ve noktalar› bu koordinatlara tafl›-
yor. Bu hesaplamalarda faydaland›¤›m›z eflitlikler teori k›sm›nda ö¤-
rendiklerimizin ayn›s›.
f = perde.a.z - kamera.z; // Odak uzakl›¤›
// Noktalar›n kameraya göre pozisyonlar›
Nx = (poz.x-kamera.x) * f / (poz.z-kamera.z);
Ny = (poz.y-kamera.y) * f / (poz.z-kamera.z);
// Noktalar›n perdeye göre pozisyonlar›
Vx = parseInt(kamera.x + Nx - perde.a.x);
Vy = parseInt(kamera.y + Ny - perde.a.y);
Kamera sahneye çok yak›n oldu¤u zamanlarda baz› noktalar›n ko-
ordinatlar› kameran›n arkas›na düflebilir. Bu durumda bu noktalar›
ekranda görmememiz gerekir.
if(poz.z > kamera.z && Vx > 0 && Vy > perde.a.y && Vy < perde.b.y - ➞
perde.a.y && Vx < perde.b.x - perde.a.x) {
css.visibility = "visible";
...
} var rotX = false; var rotY = false; var rotZ = false;
else {
✂
Web Programc›l›¤›
<<
css.visibility = "hidden";
}
Noktalar›m›z› ekranda görünmeleri gereken koordinatlara tafl›y›p
perspektifsel boyutlar›n› ayarlayan kodlar flunlar:
boyut = maxBoyut-poz.z/perspektif;
if(boyut<1) boyut=1;
css.width = boyut; //genifllik
css.height = boyut; //yükseklik
css.left = Vx - boyut/2; //yatay koordinat
css.top = Vy - boyut/2; //dikey koordinat
css.zIndex = (100 - poz.z) + 1000; //derinlik istifleme s›ras›
Sahnemizi oluflturacak birimleri bir dizi olarak tan›ml›yor ve ta-
n›mda her birinin x,y ve z koordinatlar›n› belirliyoruz. Toplam 9 adet
noktam›z var. Bunlar›n sonuncusu noktalar[9] tam orijin noktas›nda
konumland›r›lm›fl vaziyette.
// Sahneyi oluflturan birimler ve pozisyonlar›
var noktalar = new Array(9);
for(i=1; i<=9;i++)
noktalar[i] = { isim: "katmanNokta" + i, x: 0, y: 0, z: 0, a: 45 }
noktalar[1].x = 30; noktalar[1].y = -30; noktalar[1].z = -30;
noktalar[2].x = -30; noktalar[2].y = -30; noktalar[2].z = -30;
noktalar[3].x = -30; noktalar[3].y = -30; noktalar[3].z = 30;
noktalar[4].x = 30; noktalar[4].y = -30; noktalar[4].z = 30;
noktalar[5].x = 30; noktalar[5].y = 30; noktalar[5].z = -30;
noktalar[6].x = -30; noktalar[6].y = 30; noktalar[6].z = -30;
noktalar[7].x = -30; noktalar[7].y = 30; noktalar[7].z = 30;
noktalar[8].x = 30; noktalar[8].y = 30; noktalar[8].z = 30;
noktalar[9].x = 0; noktalar[9].y = 0; noktalar[9].z = 0;
Her bir nokta için HTML kodlar›na,
<div id="katmanNokta1" style="position: absolute; top: 400; left: 30; ➞
width: 2; height: 2; background-color: #999999; font-size: 1px;"></div>
fleklinde özgün id de¤erine sahip birer katman oluflturmak zorunlu.
Bundan sonra tan›ml› baz› global de¤iflkenler her bir ad›mda kullan›-
lacak de¤erleri kaydedecekler.
var aci=5; // her ad›mdaki de¤iflim aç›s›
var zoom = 0; //bafllang›ç de¤eri 0. Zoom yok
var trans = 0; //bafllang›ç de¤eri 0. Yer de¤ifltirme yok
Script’imiz çal›fl›r çal›flmaz en temel ifllemleri yerine getiren bir
fonksiyon hemen ça¤r›l›yor ve bu ça¤›rma ifllemi fonksiyonun her bir
30 ms’de bir kendisini ça¤›rmas›yla devam ediyor. Sahnenin her 30
ms’de bir güncel tutulmas›n› sa¤layan fonksiyon basla().
setTimeout(basla,30); // Sahneyi güncelle
Bu bak›mdan ekrandaki birimler hareket etmeseler bile bilgisaya-
r›n CPU’su sürekli bir hesaplama içinde olacakt›r. Birimlerin öntan›ml›
olarak, yani sayfa aç›l›r aç›lmaz hareket etmemeleri ise kodlar içinde
bafllang›ç olarak öyle istedi¤imizden kaynaklan›yor.
80 • CHIP Workshop >>
 >> Web Programc›l›¤›

Bu de¤erlerde true olarak tan›mlanan rotasyon kendili¤inden bafl- // Translation...

layacakt›r. E¤er rotasyon bafllang›c›n› kullan›c›n›n tetiklemesini isti- if(trans != 0){
yorsan›z basit bir fonksiyon iflimizi görecektir. kamera.x += trans;
kamera.y += trans;
function degis(x) { kamera.z += trans;
if(x==0) rotX = !rotX; }
if(x==1) rotY = !rotY;
if(x==2) rotZ = !rotZ; Tan›mlad›¤›m›z bu yer de¤ifltirme ifadesi ise kameray› 3 boyutlu
} ortamda bir çizgi üzerinde hareket ettirecektir. Dilerseniz bu tan›mla-
malarda de¤ifliklikler yaparak sonucu gözlemleyebilirsiniz.
Bu durumda degis(0) ifadesi X ekseni, degis(1) ifadesi Y ekseni, de-
gis(0) ifadesi ise Z ekseni etraf›ndaki rotasyonu kontrol edecektir. Her 3DHTML ile neler yapabilirsiniz?
30ms’de bir tetiklenen basla() fonksiyonunda yer alan Burada ö¤rendi¤imiz 3DHTML yöntemi ile nokta bazl› çeflitli 3D içe-
rikleri oluflturabilir, bunlara etkileflim katabilirsiniz. Mesela örne¤imi-
mat = [noktalar[i].x,noktalar[i].y,noktalar[i].z-ofsetEksen,1]; zi kullanarak kimya ve uzay bilimleriyle kullan›labilecek sunumlar ha-
z›rlamak hiç de zor de¤il. Tüm yapman›z gereken, sahneyi oluflturan
sat›r›, her bir noktay› bir matris haline getirir. Her bir eksen etraf›nda- birimlerin say›s›n› de¤ifltirip bunlara gerekli pozisyonlar› vermek ola-
ki dönüflü sa¤layacak rotasyon matrisleri de ilave edilmifl durumda. cak. Mesela ben iki Hidrojen ve bir Oksijen atomundan oluflan bir su
molekülünün bir 3 boyutlu örne¤ini yapt›m. Bu imkanlar› keflke üni-
matRotX = [[1,0,0,0],[0,Math.cos(a),- ➞ versitede okurken bulabilseydim, diyorum kendi kendime, ama bizim
Math.sin(a),0],[0,Math.sin(a),Math.cos(a),0],[0,0,0,1]]; zaman›m›zda böyle fleyler yoktu.
// RotX matrixi, bununla çarp›nca x ekseni etraf›nda rotasyon olufluyor
matRotY = [[Math.cos(a),0,Math.sin(a),0],[0,1,0,0], ➞ for(i=1; i<=3;i++)
[-Math.sin(a),0,Math.cos(a),0],[0,0,0,1]];
// " Y noktalar[i] = { isim: "katmanNokta" + i, x: 0, y: 0, z: 0, a: 45 }
matRotZ = [[Math.cos(a),-Math.sin(a),0,0], ➞ <!-- Oksijen atomu -->
[Math.sin(a),Math.cos(a),0,0],[0,0,1,0],[0,0,0,1]]; noktalar[1].x = 0; noktalar[1].y = -10; noktalar[1].z = 0;
// " Z <!-- Hidrojen atomu -->
noktalar[2].x = -12; noktalar[2].y = 7; noktalar[2].z = 0;
Tan›mlanm›fl matrislerimizi jenerik matris çarp›m fonksiyonumuzla <!-- Hidrojen atomu -->
(matrixCarp()) çarparak yeni pozisyon de¤erlerini elde ediyoruz. noktalar[3].x = 12; noktalar[3].y = 7; noktalar[3].z = 0;

// matrix çarp›m› 3DHTML’de kullan-

if(rotX) mat = matrixCarp(mat,matRotX); d›¤›m›z tekni¤i
if(rotY) mat = matrixCarp(mat,matRotY); Flash’ta kullanmak
if(rotZ) mat = matrixCarp(mat,matRotZ); da mümkün. Bunun
için JavaScript kod-
// yeni pozisyon de¤erleri lar›n›z› ActionSc-
noktalar[i].x = mat[0]; ript’e, CSS özellikle-
noktalar[i].y = mat[1]; rinizi ise MovieClip
noktalar[i].z = mat[2]+ofsetEksen; özelliklerine çevir-
melisiniz. Yine CD’de
Art›k elde edilen bu yeni pozisyon de¤erlerinin kullan›lmas› için ek- 3 boyutlu küpümü-
ranaDiz() fonksiyonu ça¤r›labilir. zün bir Flash versi-
yonunu görebilirsi-
ekranaDiz(noktalar[i].isim, noktalar[i]); niz. StudioWeb’in gelecek say›lar›nda f›rsat›n› bulabilirsek 3 boyutlu
sahnelerin Flash’e nas›l uyarlanabilece¤ini de inceleyebiliriz.
Zum ve Translation (yer de¤ifltirme) için basit birer ifllevsellik ekle-
meniz mümkün. Numan Pekgöz
numanpekgoz@chip.com.tr
// Zoom...
if(kamera.z <= -10){
kamera.z += zoom; maxBoyut += zoom/50;
}
» eCHIP StudioWeb+’da bu ay:
else(kamera.z = -10) 3D HTML ile 3D dünyas›na girifl
Dergimizin CD’sinde, StudioWeb+ bölümünde bu ay 3D rotasyon ve
Zum fonksiyonu her bir ad›mda kameran›n derinlik de¤eri olan Z ko- projeksiyonun nas›l hesapland›¤›n› gösteren birer animasyon ile
ordinat›n› orijine do¤ru biraz daha yaklaflt›racakt›r (en fazla –10’a ka- örneklerin çal›flan birer kopyalar›n› bulacaks›n›z.
dar).

81 • CHIP Workshop >>


USERFORM’LAR ‹LE ÇALIfiMAK - 3
Excel’de program yapmak di¤erlerine benzemez. Hem zevkli hem kullan›fll›d›r.
Biraz bilgi ile çözülemeyecek fley yoktur Excel’de…
erhaba, sorular›n›z yine ayn› yo-
M ¤unlukta geliyor. Baz› sorular bir-
birine benzedi¤i için bazen birkaç
sorunun cevab›n› ayn› bafll›k alt›nda görebi-
lirsiniz. Geçen ay kald›¤›m›z yerden devam
edece¤iz.
Soru-4
Say›n Temel Bey, Son ayki Chip dergisinin
(A¤ustos-2003) Excel sayfas›ndaki örnek
UserForm program›nda son sayfadaki rapor
butonundaki iki sat›r (k›rm›z› ile iflaretli
olan) hata veriyor. Yaz›l›mda m› yoksa bask›-
da m› bir hata var? ‹lginize teflekkür ederim.
( Mehmet Erenlerçay›)
Private Sub CommandBut-ton6_Click()
Dim DoluSay As Integer
If TextBox1 = "" Then
MsgBox "bir kifli ad› girin"
Exit Sub
End If
DoluSay = WorksheetFunc - tion.CountA ➝
([a1:a100])
Range("a1").AutoFilter
Range("b1").AutoFilter 2, texbox1
Cells(DoluSay + 1, "c") = "=
subtotal(9,c2:c"&DoluSay&")"
Cells(DoluSay + 1, "d") = "=
subtotal(9,d2:d"&DoluSay&")"
Cells(DoluSay + "b") = Cells(DoluSay + 1, "d") - ➝
Cells(DoluSay + 1, "c")
TextBox6 = Cells(DoluSay + 1, "b")
End Sub
Cevap-4
Bu sorunuza cevap verirken asl›nda genel
bir soruna cevap vermek istiyorum. Elbette-
✂
ki hem kodlamada bir hata yok hem de bas-
k›da bir hata yok. Sadece siz afla¤›daki gibi
ayr› ayr› yazman›z gereken sat›rdaki baz› ifa-
deleri bitifltirerek yazm›fls›n›z. Yani & iflle-
cinden önce ve sonra boflluklar var.
Cells(DoluSay + 1, "c") = "=subtotal(9,c2:c" & ➝
DoluSay & ")"
Cells(DoluSay + 1, "d") = "= ➝ çe-‹ngilizce sürüm sorunlar›. Bu say›dan iti-
subtotal(9,d2:d" & DoluSay & ")"
Biz dergi yazar› olarak makalemizi gönde-
riyoruz. Makalemiz sayfa düzenlemesini ya-
pan arkadafllar›m›z taraf›ndan düzenleniyor.
Bu düzenlemeleri yaparken bazen gözden
kaçan hatalar olabiliyor. Bize geri dönüfl ol-
mad›¤› için uyarma imkan›m›z maalesef ol-
muyor. Ancak bazen de sizlerin do¤ru alg›la-
yamamas›ndan bu tür hatalar olabiliyor.
Mesela “Criteria1” ile “Criterial” ifadeleri bir-
birinden çok farkl›d›r. Sonda bulunan bir “1”
karakteri bazen yaz› tipi nedeniyle “L” fleklin-
de alg›lanabiliyor. Ya da “xlCircle” ifadesin-
deki XL karakterleri X1 fleklinde alg›lanabili-
yor. Oysaki buradaki xl Office programlar›n-
➝ dan Excel’i simgelemektedir. E¤er Word’de
çal›fl›yor olsayd›n›z bu karakterler “wd” ola-
➝ cakt›. “wdColor” gibi. ‹flte bu tür düzenleme
ve alg› hatalar›na karfl› bizim yapabilece¤i-
miz pek bir fley yok. Ancak zamanla kodla-
may› ö¤rendi¤inizde göreceksiniz ki bu söy-
lediklerimi düzeltmek çok kolay olacakt›r.
Soru-5
Workshop ekinde verdi¤iniz de¤erli bilgiler
için sizlere ne kadar teflekkür etsem azd›r.
Ancak benim en büyük sorunun Türkçe-‹ngi-
Excel Serisi
<<
lizce sürüm sorunu. Anlat›lan bilgiler genel-
de Türkçe için anlat›l›yor. Oysa benim bilgi-
sayar›mda ‹ngilizce sürüm yüklü. En çok zor-
lu¤u da ifllevlerde yafl›yorum. Bu ifllevlerin
karfl›l›klar›n›n oldu¤u bir doküman elinizde
varsa gönderir misiniz?
(Hasan Yurtsever-Ankara)
Cevap -5
En çok ald›¤›m›z flikayetlerden birisi de Türk-
baren menülerde geçen Türkçe komutlar›n
‹ngilizce karfl›l›klar›n› da hemen yan›nda pa-
rantez içerisinde vermeye çal›flaca¤›m. Ayr›-
ca Bu yaz›m›zda 2 sayfa halinde ‹fllevler
(Fonksiyonlar)’e ait tablo bulacaks›n›z. ‹ngi-
lizce-Türkçe ve Türkçe-‹ngilizce karfl›l›klar›
olan ifllevler tablosu bir çok sorununuzu çö-
zecektir.
Soru-6
Merhaba, A¤ustos ve Eylül ay›nda User-
Form’la çal›flmak serisinde yap›lan veri kay›t
formunu Excel çal›flma sayfas›ndan bir dü¤-
me yard›m›yla do¤rudan nas›l çal›flt›rabili-
riz? Yoksa her seferinde VBE'yi aç›p [F5] ile
mi çal›flt›rmam›z gerekiyor? Teflekkür ede-
rim. ‹yi çal›flmalar.
(Cüneyt Dinç)
Cevap-6
San›yorum geçen ayki yaz›m›z› tam olarak
gözden geçirmemiflsiniz. Çünkü Soru-3’ün
cevab› k›saca bu sorunuza yönelikti. Bu so-
runuzu buraya tekrar almam›n sebebi ise,
geçen ay da k›saca bahsetti¤im gibi sayfa
üzerinden haz›rlad›¤›m›z makrolar› de¤iflik
yollarla çal›flt›rmaya çal›flaca¤›z. Bunun için
ilk olarak Excel menülerine yeni bir menü
ekleyece¤iz.
44• CHIP Workshop >>
 >> Excel Serisi

TÜRKÇE ‹NG‹L‹ZCE ‹NG‹L‹ZCE TÜRKÇE TÜRKÇE ‹NG‹L‹ZCE ‹NG‹L‹ZCE TÜRKÇE

ACOS ACOS ABS MUTLAK E⁄ERSAY COUNTIF DSTDEVP VSEÇSTDSAPMAS
ACOSH ACOSH ACOS ACOS E⁄‹L‹M TREND DSUM VSEÇTOPLA
ADRES ADDRESS ACOSH ACOSH E⁄‹M SLOPE DVAR VSEÇVAR
ALANSAY AREAS ADDRESS ADRES EHATA ISERR DVARP VSEÇVARS
ALTTOPLAM SUBTOTAL AND VE EHATALIYSA ISERROR ERROR.TYPE HATA.T‹P‹
ANA_PARA_ÖDEMES‹ PPMT AREAS ALANSAY ELEMAN CHOOSE EVEN Ç‹FT
ARA LOOKUP ASIN AS‹N EMANTIKSALSA ISLOGICAL EXACT ÖZDEfi
AS‹N ASIN ASINH AS‹NH EMET‹NDE⁄‹LSE ISNONTEXT EXP ÜS
AS‹NH ASINH ATAN ATAN EMET‹NSE ISTEXT EXPONDIST ÜSTELDA⁄
AfiA⁄IYUVARLA ROUNDDOWN ATAN2 ATAN2 ENÇOK_OLAN MODE FACT ÇARPINIM
ATAN ATAN ATANH ATANH EREFSE ISREF FDIST FDA⁄
ATAN2 ATAN2 AVEDEV ORTSAP ESAYIYSA ISNUMBER FIND BUL
ATANH ATANH AVERAGE ORTALAMA ETOPLA SUMIF FINV FTERS
AY MONTH AVERAGEA ORTALAMAA EYOKSA ISNA FISHER FISHER
AZALANBAK‹YE DB BETADIST BETADA⁄ FA‹Z_ORANI RATE FISHERINV FISHERTERS
BA⁄_DE⁄_DOLU_SAY COUNTA BETAINV BETATERS FA‹ZTUTARI IPMT FIXED SAYIDÜZENLE
BA⁄_DE⁄_SAY COUNT BINOMDIST B‹NOMDA⁄ FDA⁄ FDIST FLOOR TABANAYUVARLA
BASIKLIK KURT CALL ÇA⁄IR FISHER FISHER FORECAST TAHM‹N
BD PV CALL ÇA⁄IR FISHERTERS FISHERINV FREQUENCY SIKLIK
BETADA⁄ BETADIST CEILING TAVANAYUVARLA FTERS FINV FTEST FTEST
BETATERS BETAINV CELL HÜCRE FTEST FTEST FV GD
B‹LG‹ INFO CHAR DAMGA GAMADA⁄ GAMMADIST GAMMADIST GAMADA⁄
B‹NOMDA⁄ BINOMDIST CHIDIST K‹KAREDA⁄ GAMALN GAMMALN GAMMAINV GAMATERS
B‹RLEfiT‹R CONCATENATE CHIINV K‹KARETERS GAMATERS GAMMAINV GAMMALN GAMALN
BOfiLUKSAY COUNTBLANK CHITEST K‹KARETEST GD FV GEOMEAN GEOORT
BUGÜN TODAY CHOOSE ELEMAN GEOORT GEOMEAN GETPIVOTDATA ÖZETVER‹AL
BUL FIND CLEAN TEM‹Z GÜN DAY GROWTH BÜYÜME
BÜYÜK LARGE CODE KOD GÜN360 DAYS360 HARMEAN HARORT
BÜYÜKHARF UPPER COLUMN SÜTUN GÜVEN‹RL‹K CONFIDENCE HLOOKUP YATAYARA
BÜYÜME GROWTH COLUMNS SÜTUNSAY HAFTANINGÜNÜ WEEKDAY HOUR SAAT
COS COS COMBIN KOMB‹NASYON HARORT HARMEAN HYPERLINK KÖPRÜ
COSH COSH CONCATENATE B‹RLEfiT‹R HATA.T‹P‹ ERROR.TYPE HYPGEOMDIST H‹PERGEOMDA⁄
ÇA⁄IR CALL CONFIDENCE GÜVEN‹RL‹K H‹PERGEOMDA⁄ HYPGEOMDIST IF E⁄ER
ÇA⁄IR CALL CORREL KORELASYON HÜCRE CELL INDEX ‹ND‹S
ÇARPIKLIK SKEW COS COS ISPMT ISPMT INDIRECT DOLAYLI
ÇARPIM PRODUCT COSH COSH ‹Ç_VER‹M_ORANI IRR INFO B‹LG‹
ÇARPINIM FACT COUNT BA⁄_DE⁄_SAY ‹ND‹S INDEX INT TAMSAYI
Ç‹FT EVEN COUNTA BA⁄_DE⁄_DOLU_SAY ‹fiARET SIGN INTERCEPT KESMENOKTASI
Ç‹FTAZALANBAK‹YE DDB COUNTBLANK BOfiLUKSAY KAÇINCI MATCH IPMT FA‹ZTUTARI
D_‹Ç_VER‹M_ORANI MIRR COUNTIF E⁄ERSAY KAREKÖK SQRT IRR ‹Ç_VER‹M_ORANI
DA SLN COVAR KOVARYANS KAYDIR OFFSET ISBLANK EBOfiSA
DAB VDB CRITBINOM KR‹T‹KB‹NOM KESMENOKTASI INTERCEPT ISERR EHATA
DAK‹KA MINUTE DATE TAR‹H KIRP TRIM ISERROR EHATALIYSA
DAMGA CHAR DATEVALUE TAR‹HSAYISI KIRPORTALAMA TRIMMEAN ISLOGICAL EMANTIKSALSA
DÇARP MMULT DAVERAGE VSEÇORT K‹KAREDA⁄ CHIDIST ISNA EYOKSA
DE⁄‹L NOT DAY GÜN K‹KARETERS CHIINV ISNONTEXT EMET‹NDE⁄‹LSE
DE⁄‹fiT‹R REPLACE DAYS360 GÜN360 K‹KARETEST CHITEST ISNUMBER ESAYIYSA
DERECE DEGREES DB AZALANBAK‹YE KOD CODE ISPMT ISPMT
DETERM‹NANT MDETERM DCOUNT VSEÇSAY KOMB‹NASYON COMBIN ISREF EREFSE
DEVRESEL_ÖDEME PMT DCOUNTA VSEÇSAYDOLU KORELASYON CORREL ISTEXT EMET‹NSE
DEVR‹K_DÖNÜfiÜM TRANSPOSE DDB Ç‹FTAZALANBAK‹YE KOVARYANS COVAR KURT BASIKLIK
D‹ZEY_TERS MINVERSE DEGREES DERECE KÖPRÜ HYPERLINK LARGE BÜYÜK
DO⁄RU TRUE DEVSQ SAPKARE KR‹T‹KB‹NOM CRITBINOM LEFT SOLDAN
DOLAYLI INDIRECT DGET VAL KUVVET POWER LEN UZUNLUK
DOT LINEST DMAX VSEÇMAK KÜÇÜK SMALL LINEST DOT
DÖRTTEB‹RL‹K QUARTILE DMIN VSEÇM‹N KÜÇÜKHARF LOWER LN LN
DÜfiEYARA VLOOKUP DOLLAR L‹RA L‹RA DOLLAR LOG LOG
EBOfiSA ISBLANK DPRODUCT VSEÇÇARP LN LN LOG10 LOG10
E⁄ER IF DSTDEV VSEÇSTDSAPMA LOG LOG LOGEST LOT

<< CHIP Workshop • 45

 Excel Serisi
<<
TÜRKÇE ‹NG‹L‹ZCE ‹NG‹L‹ZCE TÜRKÇE TÜRKÇE ‹NG‹L‹ZCE ‹NG‹L‹ZCE TÜRKÇE
LOG10 LOG10 LOGINV LOGTERS TABANAYUVARLA FLOOR ROW SATIR
LOGNORMDA⁄ LOGNORMDIST LOGNORMDIST LOGNORMDA⁄ TAHM‹N FORECAST ROWS SATIRSAY
LOGTERS LOGINV LOOKUP ARA TAKS‹T_SAYISI NPER RSQ RKARE
LOT LOGEST LOWER KÜÇÜKHARF TAMSAYI INT SEARCH MBUL
M T MATCH KAÇINCI TAN TAN SECOND SAN‹YE
MAK MAX MAX MAK TANH TANH SIGN ‹fiARET
MAKA MAXA MAXA MAKA TAR‹H DATE SIN S‹N
MBUL SEARCH MDETERM DETERM‹NANT TAR‹HSAYISI DATEVALUE SINH S‹NH
METNEÇEV‹R TEXT MEDIAN ORTANCA TAVANAYUVARLA CEILING SKEW ÇARPIKLIK
M‹N MIN MID PARÇAAL TDA⁄ TDIST SLN DA
M‹NA MINA MIN M‹N TEK ODD SLOPE E⁄‹M
MOD MOD MINA M‹NA TEM‹Z CLEAN SMALL KÜÇÜK
MUTLAK ABS MINUTE DAK‹KA TOPKARE SUMSQ SQRT KAREKÖK
NBD NPV MINVERSE D‹ZEY_TERS TOPLA SUM STANDARDIZE STANDARTLAfiTIRMA
NEGB‹NOMDA⁄ NEGBINOMDIST MIRR D_‹Ç_VER‹M_ORANI TOPLA.ÇARPIM SUMPRODUCT STDEV STDSAPMA
NORMDA⁄ NORMDIST MMULT DÇARP TOPX2AY2 SUMX2PY2 STDEVA STDSAPMAA
NORMSDA⁄ NORMSDIST MOD MOD TOPX2EY2 SUMX2MY2 STDEVP STDSAPMAS
NORMSTERS NORMSINV MODE ENÇOK_OLAN TOPXEY2 SUMXMY2 STDEVPA STDSAPMASA
NORMTERS NORMINV MONTH AY TTERS TINV STEYX STHYX
NSAT TRUNC N S TTEST TTEST SUBSTITUTE YER‹NEKOY
OLASILIK PROB NA YOKSAY TÜR TYPE SUBTOTAL ALTTOPLAM
ORTALAMA AVERAGE NEGBINOMDIST NEGB‹NOMDA⁄ UZUNLUK LEN SUM TOPLA
ORTALAMAA AVERAGEA NORMDIST NORMDA⁄ ÜS EXP SUMIF ETOPLA
ORTANCA MEDIAN NORMINV NORMTERS ÜSTELDA⁄ EXPONDIST SUMPRODUCT TOPLA.ÇARPIM
ORTSAP AVEDEV NORMSDIST NORMSDA⁄ VAL DGET SUMSQ TOPKARE
ÖZDEfi EXACT NORMSINV NORMSTERS VAR VAR SUMX2MY2 TOPX2EY2
ÖZETVER‹AL GETPIVOTDATA NOT DE⁄‹L VARA VARA SUMX2PY2 TOPX2AY2
PARÇAAL MID NOW fi‹MD‹ VARS VARP SUMXMY2 TOPXEY2
PEARSON PEARSON NPER TAKS‹T_SAYISI VARSA VARPA SYD YAT
PERMÜTASYON PERMUT NPV NBD VE AND T M
P‹ PI ODD TEK VSEÇÇARP DPRODUCT TAN TAN
PO‹SSON POISSON OFFSET KAYDIR VSEÇMAK DMAX TANH TANH
RADYAN RADIANS OR YADA VSEÇM‹N DMIN TDIST TDA⁄
RANK RANK PEARSON PEARSON VSEÇORT DAVERAGE TEXT METNEÇEV‹R
RKARE RSQ PERCENTILE YÜZDEB‹RL‹K VSEÇSAY DCOUNT TIME ZAMAN
ROMEN ROMAN PERCENTRANK YÜZDERANK VSEÇSAYDOLU DCOUNTA TIMEVALUE ZAMANSAYISI
S N PERMUT PERMÜTASYON VSEÇSTDSAPMA DSTDEV TINV TTERS
S_SAYI_ÜRET RAND PI P‹ VSEÇSTDSAPMAS DSTDEVP TODAY BUGÜN
SAAT HOUR PMT DEVRESEL_ÖDEME VSEÇTOPLA DSUM TRANSPOSE DEVR‹K_DÖNÜfiÜM
SA⁄DAN RIGHT POISSON PO‹SSON VSEÇVAR DVAR TREND E⁄‹L‹M
SAN‹YE SECOND POWER KUVVET VSEÇVARS DVARP TRIM KIRP
SAPKARE DEVSQ PPMT ANA_PARA_ÖDEMES‹ WEIBULL WEIBULL TRIMMEAN KIRPORTALAMA
SATIR ROW PROB OLASILIK YADA OR TRUNC NSAT
SATIRSAY ROWS PRODUCT ÇARPIM YANLIfi FALSE TTEST TTEST
SAYIDÜZENLE FIXED PROPER YAZIM.DÜZEN‹ YAT SYD TYPE TÜR
SAYIYAÇEV‹R VALUE PV BD YATAYARA HLOOKUP UPPER BÜYÜKHARF
SIKLIK FREQUENCY QUARTILE DÖRTTEB‹RL‹K YAZIM.DÜZEN‹ PROPER VALUE SAYIYAÇEV‹R
S‹N SIN RADIANS RADYAN YAZMAÇ.KODU REGISTER.ID VAR VAR
S‹NH SINH RAND S_SAYI_ÜRET YER‹NEKOY SUBSTITUTE VARA VARA
SOLDAN LEFT RANK RANK YIL YEAR VARP VARS
STANDARTLAfiTIRMA STANDARDIZE RATE FA‹Z_ORANI Y‹NELE REPT VARPA VARSA
STDSAPMA STDEV REGISTER.ID YAZMAÇ.KODU YOKSAY NA VDB DAB
STDSAPMAA STDEVA REPLACE DE⁄‹fiT‹R YUKARIYUVARLA ROUNDUP VLOOKUP DÜfiEYARA
STDSAPMAS STDEVP REPT Y‹NELE YUVARLA ROUND WEEKDAY HAFTANINGÜNÜ
STDSAPMASA STDEVPA RIGHT SA⁄DAN YÜZDEB‹RL‹K PERCENTILE WEIBULL WEIBULL
STHYX STEYX ROMAN ROMEN YÜZDERANK PERCENTRANK YEAR YIL
SÜTUN COLUMN ROUND YUVARLA ZAMAN TIME ZTEST ZTEST
SÜTUNSAY COLUMNS ROUNDDOWN AfiA⁄IYUVARLA ZAMANSAYISI TIMEVALUE FALSE YANLIfi
fi‹MD‹ NOW ROUNDUP YUKARIYUVARLA ZTEST ZTEST TRUE DO⁄RU
✂

46 • CHIP Workshop >>

 >> Excel Serisi
MENÜ HAZIRLAMAK
Excel’de haz›rlad›¤›n›z programlar› çal›flt›ra-
bilmek için her programda oldu¤u gibi basit
bir arayüze ihtiyaç vard›r. Çünkü son kulla-
n›c› hangi kodun ne ifle yarad›¤›n› bilemeye-
ce¤i gibi, siz dahi haz›rlad›¤›n›z basit bir
program› çal›flt›rmak için sürekli VBE sayfa-
s›na geçip [F5] tufluna basmaktan s›k›lacak-
s›n›z. Bu nedenle basit kullan›c› arayüzleri
gereklidir. Biz bu makalemizde en önemli
arayüz olan menü haz›rlamak üzerinde du-
raca¤›z. Bunun için afla¤›daki maddeleri
ad›m ad›m izleyiniz.
1. Üzerinde çal›flt›¤›m›z “Carihesa-
bim.xls” dosyas›n› aç›n.
2. [ALT]+[F11] tufllar›na basarak ya da
baflka bir yöntemle VBE penceresini
aç›n.
3. Insert menüsünden Module
komutunu t›klay›n.
4. Aç›lan Module sayfas›na afla¤›daki
sat›rlar› yaz›n.
Sub Form1Ac()
UserForm1.Show
End Sub
Sub Form2Ac()
UserForm2.Show
End Sub
5. Görünüm (View) / Araç Çubuklar›
(Toolbars) / Özellefltir (Customize)
komutunu t›klay›n.
6. Aç›lan Özellefltir (Customize)
penceresinden Komutlar (Commands)
sayfa sekmesini seçin.
7. Kategoriler (Categories) listesinden Yeni
Menü (New menu) seçene¤ine t›klay›n.
8. Hemen sa¤ taraftaki Komutlar
(Commands) listesinde Yeni Menü
(New Menu) ad›nda bir seçenek
belirecektir.
9. Farenin sol tuflunu bas›l› tutarak bu yeni
fiekil1
fiekil2
<< CHIP Workshop • 47
menüyü, ana menü çubu¤una sürükleyin
ve uygun gördü¤ünüz bir bölüme b›rak›n
(fiekil-1 / fiekil-2).
10. fiekil-2’deki görülen Yeni Menü üzerin-
de farenin sa¤ tufluna t›klay›n. Aç›lan
menüden Ad (Name) kutusuna “Cari He-
sap” yaz›n (fiekil-3). Menüyü kapatma-
y›n. (Ayn› ifllemi Özellefltir penceresinde-
ki Seçimi De¤ifltir (Rearrange Com-
mands) dü¤mesini kullanarak da yapabi-
lirsiniz.)
fiekil3
Menü Çubu¤unda yeni bir menü olufl-
turduk. fiimdi s›ra bu yeni menünün, yani
Cari Hesap menüsünün alt›ndaki komutlar›
olufltural›m. Bunun için yukar›da modül içe-
risine yazd›¤›m›z makro komutlar›n› kulla-
naca¤›z. Dikkat ederseniz “Form1Ac” yorda-
m› UserForm1’i çal›flt›r›yor. “Form2Ac” yor-
dam› ise UserForm2’yi çal›flt›r›yor. fiimdi biz
bu yordam bafll›klar›n› kullanaca¤›z. Ancak
önce alt komutlar› olufltural›m.
11. Özellefltir penceresindeki Komutlar say-
fa sekmesinde bulunan Kategoriler liste-
sinden bu defa Makrolar (Macros) seçe-
fiekil 4
ne¤ini t›klay›n.
12. Komutlar listesinde iki adet seçenek be-
lirecektir. Bunlardan Menü Ö¤esini Özel-
lefltir (Custom Menu Item) seçene¤ini
menü çubu¤undaki Cari Hesap menüsü-
nün alt›na tafl›y›n (fiekil-4).
13. Bu yeni eklenen alt menü (komut) üze-
rinde farenin sa¤ tufluna t›klay›n ve aç›-
lan menüden Ad kutusundaki ismi
“UserForm1 Aç” olarak de¤ifltirin (fiekil5).
fiekil 5
14. Ayn› menünün son k›sm›nda bulunan
Makro Ata… (Assign Macro…) komutuna
t›klay›n.
15. Aç›lan Makro Ata penceresinden “Form-
1Ac” makrosunu seçin ve Tamam dü¤-
mesine t›klay›n.
fiekil 6
Yukar›da anlatt›¤›m›z ifllemlerin benzeri-
ni “Form2Ac” makrosu için de gerçekleflti-
rin. Sonuç olarak fiekil-6’ya ulaflmal›s›n›z.
Unutmay›n›z bu ifllemleri yaparken Özellefl-
tir penceresi sürekli olarak aç›k kalacakt›r.
Bu anlataca¤›m›z menü komutlar›ndan
sadece bir tanesiydi. Önümüzdeki ay Makro
ile menü komutu haz›rlama konusunu iflle-
yece¤iz.
M. Temel Korkmaz
temelkorkmaz@excel.gen.tr
 Photoshop Serisi
<<
Herkes ‹çin Photoshop
Photoshop’un farkl› alanlardaki kullan›m flekillerini daha iyi anlayabilmek için bundan sonra
bu sayfalarda yer alan Photoshop derslerinde foto¤raf düzenleme, çizim ve efektler olmak
üzere 3 ayr› bölüm için de örnekler yer alacak.

Gerçekçi iris yaratmak

Öncelikle saydam arka plana sahip 100x100’lük bir
dosya aç›n ve göz için iki renk seçin. Burada ayn›
rengin farkl› tonlar›n› seçmeniz gerekir. Örnek olarak
koyu ön plan rengini (#865F00), aç›k arka plan rengini
de (#FFB400) olarak belirleyebilirsiniz. fiimdi katman›
(layer1) beyaz renk ile doldurun. Ard›ndan dikdörtgen
seçim arac› yard›m›yla flekildekine benzer bir seçim
oluflturup ve içini de koyu olan renkle boyay›n.

fiimdi Image / Adjustments / Invert özelli¤ini kulla-

n›n ve ard›ndan Filter / Stylize / Wind efektini re-
simdeki ayarlarla 4 defa arka arkaya uygulay›n. Daha
sonra Image / Adjustments / Invert özelli¤ini tekrar
kullan›n. Yeni bir katman (layer) daha oluflturun. fiekil-
dekine benzer bir dikdörtgen seçim yap›p, bu sefer de
seçti¤iniz aç›k renk ile doldurun. Ard›ndan da Filter/
Blur / Gaussian Blur filtresini 4.5 de¤eri ile uygulay›p La-
yer / Merge Visible seçene¤i ile katmanlar› birlefltirin.

Image / Adjustments / Invert ifllemini tekrarlay›n.

Filter / Stylize / Wind filtresini “Wind” ve “From the
Left” parametreleri ile kulland›ktan sonra Image / Ad-
justments / Invert ile renkleri orijinal flekline geri dönüfl-
türün. Filter / Blur / Motion Blur filtresini “Strength: 30,
Angle: 0” parametreleri ile uygulay›n. fiimdi Image / Ro-
tate Canvas / 90 degrees CCW seçene¤i yard›m›yla flekli
yana döndürün ve [CTRL-A] ile tümünü seçip [CTRL-C]
ile kopyalay›n.

Di¤erini kapatmadan, en bafltan saydam arka pla-

na sahip 200x200’lük bir dosya daha oluflturun.
Daha önce kopyalad›¤›n›z flekli iki kere yap›flt›r›n ve re-
simdeki gibi yerlefltirin. Daha sonra Layer / Merge Visib-
le ile katmanlar› birbirine ekleyin. Yeni bir katman daha
oluflturup flekillerin oldu¤u katman›n alt›na tafl›y›n. Bu
yeni katman›n üst yar›s›n› siyah, alt yar›s›n› ise beyaz
renkle doldurun. Daha sonra da yandaki resimdeki gibi
iki seçim oluflturun.

Filter / Blur / Gaussian Blur filtresini 2 de¤eri ile

kullan›n. Layer / Merge Visible ile katmanlar› tekrar
birlefltirin ve Filter / Distort / Polar Coordinates filtresini
“Rectangular to Polar” parametresi ile uygulay›n. fiimdi
göze biraz daha parlakl›k verebilmek için flekildekine
benzer bir yar›m daire seçim oluflturun. Yeni bir katman
yarat›p Linear Gradient arac› ile yine resimdeki gibi bir
degrade yap›n. Transparency Mode’unu ise “Screen”
olarak de¤ifltirin.
✂

25• CHIP Workshop >>

 >> Photoshop Serisi

Bulan›k resimleri düzeltmek

Her fleyden önce kesinlikle taray›c›n›n yaz›l›mlar›n›
kullanarak herhangi bir düzeltme yapmamaya
özen gösterin. Sadece Photoshop yeterli olacakt›r. Ayr›-
ca tüm keskinlefltirme ifllemlerinin de son ifllem olarak
yap›lmas› gerekti¤ini unutmay›n. fiimdi istedi¤iniz res-
mi Photoshop’a yükleyin ve Image / mode / Lab color se-
çenekleri yard›m›yla renk modunu Lab color olarak de-
¤ifltirin. Channels sekmesi yandaki resimdeki gibi gözü-
kecektir.

fiimdi Lightness olarak adland›r›lm›fl renk kanal›

üzerine t›klayarak seçin. Açt›¤›n›z resim gri tonlar›-
na dönecektir. fiimdi Filter / Sharpen / Unsharp Mask
filtresini seçin. Karfl›n›za gelecek olan pencerede Amo-
unt de¤erini %120’den % 220’ye kadar, Radius de¤erini
1.0’dan 1.2’ye kadar istedi¤iniz bir de¤erde belirleyebi-
lirsiniz. Threshold’u ise 0 olarak seçin. Sonuçtan mem-
nun kald›ysan›z OK tufluna t›klay›n ve Image / mode /
RGB ile resmi ilk konumuna geri döndürün.

Organik doku efekti

Öncelikle arkas› saydam olan 400x400’lük bir

dosya yaratarak iflleme bafllay›n ve katman yüzeyi-
ni siyah renk ile doldurun. Daha sonra yeni bir katman
daha oluflturun. Ön plan rengini (#FF0000) k›rm›z›
olarak belirledikten sonra Gradient arac›n› seçin ve yan-
daki resimdeki ayarlar› gerçeklefltirin. Yeni yaratt›¤›n›z
katman üzerinde yandaki gibi 2 çizgi oluflturun. fiimdi
ön plan renginin Hue de¤erini 50’fler art›rarak bu ifllemi
7 kez tekrarlay›n.

Yeni bir katman daha yarat›n. Ön plan rengini

tekrar k›rm›z› (#FF0000) olarak belirleyin ve biraz
önce 7 kere gerçeklefltirdi¤iniz ifllemi farkl› aç›larda bir
defa daha tekrarlay›n. Son katman›n blending modunu
“Difference” olarak de¤ifltirin ve Layer / Merge Visible
seçene¤i ile katmanlar› birlefltirin. Image / Adjustments
/ Hue / Saturation ve Filter/ Artistic / Plastic Wrap
seçeneklerini s›ras›yla yandaki resimlerdeki ayarlarla
uygulay›n. Katman›n kopyas›n› ç›kar›p blending mo-
dunu “overlay” yap›n.

PHOTOSHOP’UN TEMELLER‹

» Araç pencerelerini saklamak:

Büyük bir belge üzerinde çal›fl›rken araç çubuklar›
ve pencereleri size engel mi oluyor. Ekrandaki her
fleyi saklamak için geçici olarak TAB tuflunu kul-
lanabilirsiniz. Bu tufla bir defa daha bas›p her fleyi
geri getirebilirsiniz.

<< CHIP Workshop • 26

 <<
Photoshop Serisi

Çay pofleti
Önce 300x300’lük bir dosya aç›n ve yandaki flekil-
deki gibi 4 dikey ve 2 de yatay rehber çizgi olufltu-
run. Bu çizgileri cetvellere t›klay›p fareyi sürükleyerek
oluflturabilirsiniz. Daha sonra yeni bir katman(layer) ek-
leyin ve dikdörtgen seçim arac› ile orta bölümü seçip
tercih etti¤iniz aç›k bir renk ile orta bölümü doldurun.
fiimdi yeni bir katman daha oluflturun ve “kenar” diye
adland›r›n. Bu sefer de iki yanda kalan bölümleri seçip
beyaz ile doldurun.

Seçimleri iptal edin. Filter / Noise / Add Noise filtre-

sini %5 de¤erinde ve Uniform, Monochromatic
ayarlar›yla kullan›n. Yeni bir katman daha ekleyin ve ön
plan renginizi siyah olarak belirleyin. Çizim arac›n› seçip
Weight de¤erini 2 px olarak ayarlay›n, sonra orta bölü-
mün iki yan›na iki çizgi çekin. Tüm katmanlar›n en üstü-
ne yeni bir katman daha ekleyin. F›rça (brush) arac›n›
seçip boyutunu 4 olarak belirleyin. Brush Tip Shape’i se-
çip Spacing’i de %140 yap›n.

Paketin sol taraf›na gri (#666666) renkte düz bir

çizgi çekin. Daha sonra Edit / Free Transform seçe-
ne¤ini kullan›n ve sol ortadaki noktadan tutup %50 -
%60 sa¤a do¤ru çekip Enter tufluna bas›n. Art›k daha
fazla gerçekçilik için bir kaç yeni katman daha ekleyebi-
liriz. Noktal› çizgili katmana çift t›klay›p Bevel and Em-
boss’u seçin. Direction seçene¤ini Down, Size seçene¤ini
de 1 olarak belirleyip OK tufluna t›klay›n.

Ayn› katman›n opacity de¤erini %40’a düflürün.

Katman› ço¤alt›n ve paketin di¤er taraf›na tafl›y›n.
Daha sonra bu iki katman› birlefltirin. fiimdi [CTRL] tu-
fluna bas›l›yken orta bölümün bulundu¤u katmana t›k-
lay›n. Channels sekmesini seçip Create New Channel tu-
fluna t›klay›n. F›rça (brush) arac›n› seçip büyükçe, soft
bir f›rça seçin (100). Tam ortaya gelecek flekilde dikine
çizgi çekip. Filter / Blur / Gaussian Blur filtresini 20 de-
¤eri ile uygulay›n.

[CTRL]+[C] ile kopyalay›p File / New seçene¤ini se-

çin ve OK tufluna t›klay›n. [CTRL]+[V] ile seçimi ya-
p›flt›r›n ve “map.psd” ad›yla kaydedin. ‹lk dosyada La-
yers sekmesine gelin ve tekrar ilk ana katman› seçin. Fil-
ter / Distort / Displace seçene¤ine t›klay›p yandaki ayar-
lar› girin ve map.psd’yi seçin. Seçimi kald›r›n. Filter /
Render / Lighting Effect’i de yandaki ayarlarla kullan›n.
Son olarak hem bu katmana hem de kenar katman-
lar›na biraz Bevel and Emboss uygulay›n. Yaz›lar›n› yaz›p
bitirin.

PHOTOSHOP’UN TEMELLER‹

» Katmanlar› h›zl› hareket ettirmek:

Bu ifllem için mutlaka tafl›ma(move) arac›n› seç-
meniz gerekmez. Sadece CTRL tufluna bas›l› tutar-
ken fare ile katman üzerine t›klay›p hareket ettir-
meniz yeterli olacakt›r.

27 • CHIP Workshop >>

 >> Photoshop Serisi

Gizli resimler yaratmak

Gizli resimlerin ne oldu¤unu pek ço¤unuz bilme-

yebilirsiniz. Yak›n zamanda popüler olan bu tür re-
simleri internet taray›c›s›nda [CTRL]+[A] ile seçti¤inizde
kar›fl›n›za tamamen farkl› bir resim ç›kabiliyor. Bu tür
resimlerden yapmak için öncelikle 2x2 piksellik yeni bir
dosya yarat›n. Daha sonra görüntüyü %1600 büyütün.
Kalem arac›n› seçip biri sol üste, di¤eri sa¤ alta gelecek
flekilde iki siyah nokta koyun. [CTRL]+[A] ile tümünü se-
çip Edit / Define Pattern ile pattern olarak tan›mlay›n.

fiimdi iki farkl› resim bulun. Bunlar› ilk olarak gö-

rünmesini istedi¤iniz üst katmanda, di¤eri alt kat-
manda olacak flekilde yerlefltirin. Yeni bir katman daha
oluflturun ve daha önce oluflturdu¤unuz pattern ile bu
katman› doldurun. Bu yeni katman› iki resim aras›na
yerlefltirin ve Blending özelli¤ini Exclusion olarak de¤ifl-
tirin. Gizli olmas›n› istedi¤iniz resmi seçin ve Image /
Adjustments / Invert ile negatife dönüfltürün.

‹lk görünecek katmandaki resmin Opacity de¤erini

%50’ye kadar düflürebilirsiniz. Art›k resmi JPG ola-
rak farkl› kaydedebilirsiniz. Kaydetti¤iniz resmi Internet
Explorer ile açt›¤›n›zda ilk resim karfl›n›za gelecektir.
[CTRL]+[A] k›sayoluna t›klad›¤›n›zda ise gizli resim or-
taya ç›kar. Burada gizli resmin daha net olmas›n› sa¤-
lamak istiyorsan›z. ‹lk resmin opacity de¤erini daha faz-
la düflürmeniz gerekir. Ancak bunu yaparken gizli res-
min görünmemesine de dikkat edin.

Matrix Efekti
Önce beyaz arka planl› 200x200 boyutlar›nda yeni
bir dosya oluflturun. Daha sonra siyah ve beyaz
renkler seçili iken Filter / Render / Clouds filtresi yard›-
m›yla yandakine benzer bir flekil oluflturun. Hemen ar-
d›ndan Filter / Texture / Grain filtresini Intensity=58,
Contrast=34 ve Vertical=3 de¤erleri ile uygulay›n.
[CTRL]+[U] tufllar›na bas›n ve aç›lacak olan pencerede
Hue de¤erini 103, Saturation’› 56, Lightness’› 0 olarak
seçin ve Colorize seçene¤ini de yes yap›n.

KISA KISA

» Photoshop Temelleri
Bir katman üzerinde yaratm›fl
oldu¤unuz Layer Style, siz kat-
man› yeniden boyutland›rd›-
¤›n›zda eski boyutunda kala-
cak ve her fley bofla gidecektir.
E¤er bunun böyle olmas›n› is-
temiyorsan›z çok küçük bir
ayr›nt›ya dikkat etmeniz ge-
rekir. Düzeltmek için önce La-
yers penceresine gidin ve ora-
daki “f” harfine benzeyen
simgeye sa¤ tufl ile t›klay›n.
Daha sonra da menünün en
alt›nda yer alan Scale Ef-
fects...’i seçin. Aç›lacak olan
pencerede daha önce nesneyi
boyutland›rd›¤›n›z de¤er ile
ayn› de¤eri uygulay›n. Ok tu-
fluna t›klad›¤›n›zda yaratm›fl
oldu¤unuz layer style’›n art›k
nesne ile uyum sa¤lad›¤›n›
göreceksiniz.

<< CHIP Workshop • 28