Ana Başlık 2. İç İçe Döngüler, Izgara ve Animasyon

Amaç: İç içe for ile ızgara üretmek; frameCount ve sin/cos ile döngüsel animasyon kurmak.

Öğrenme Çıktıları:

• İç içe for ile satır–sütun ızgarası çizer.
• frameCount ile çoklu nesne animasyonu kurar.
• sin/cos ile salınım ve düzenli çokgen üretir.
• Döngü değişkenini konum, renk ve faz için kullanır.
• Tarayıcıda breakpoint / adım adım izleme ile iç içe döngüyü veya basit bir hatayı gözlemler.

Anahtar Sözcükler: iç içe for, ızgara, frameCount, sin, cos, animasyon, debug, breakpoint

Giriş

Tek boyutlu döngü bir çizgi veya liste üretir; ızgara ise satır ve sütun boyunca iki sayaç ister. İç içe for bu iki ekseni tarar. Aynı kalıp dama deseni, taş dizilimi veya engel haritası için temeldir. Anlamayı kolaylaştırmak için kâğıtta koordinat karalamak veya tarayıcıda adım adım debug etmek de bu ana başlığın parçasıdır.

Animasyonda döngü draw içinde her frame yeniden çalışır; frameCount zaman benzeri bir sayaçtır. sin ile yumuşak salınım, cos/sin çifti ile düzenli çokgen köşeleri hesaplanır. Bu ana başlık ızgara çizimi ile döngüsel hareketi birleştirir. Bundan sonra gelen alt başlıklarda önce veri modeli, sonra hamle kuralı, en sonda çizim ve etkileşim kurulur. Her yeni fonksiyon mümkün olduğunca küçük bir örnekte çalıştırılır; böylece hatanın kaynağı daha kolay bulunur. Anlatımda önce ilgili yapının ne işe yaradığı açıklanır, ardından kod satır satır okunur. Terimler ilk geçtikleri yerde kısa bir tanımla verilir; gerekirse tablo veya görsel ile desteklenir. Örnek sketch’ler tek bir mekaniğe odaklanır; böylece yan konular okumayı dağıtmaz. Parametreleri değiştirip yeniden çalıştırmak, kuralın sınırını görmenin en hızlı yoludur.

2.1. İç İçe for Döngüleri ve Izgara Çizimi

İki boyutlu düzen (satır × sütun) için bir for döngüsü başka bir for döngüsünün içine yazılır. Dış döngü satırları, iç döngü sütunları gezer.

Görsel 1 iç içe döngüde hücrelerin nasıl numaralandığını gösterir: satir satırı, sutun sütunu belirler; rect(sutun * boyut, satir * boyut, …) ile konum hesaplanır. Vurgulu hücre (satir=1, sutun=1) örneğidir.

Bilgi — Takıldığınızda kâğıt kalem de bir yol olabilir: Her zaman döngüyle başlamak zorunda değilsiniz; for başlığını doğrudan yazabiliyorsanız yazın. Ama “burada bir döngü gerekiyor” dediğiniz hâlde döngü başlığını ya da satir / sutun hesabını bir türlü oturtamıyorsanız, koda geçmeden önce bir süre elle, kâğıt üzerinde ilerlemek işi açar. Amaç kodu kâğıtta bitirmek değil, örüntüyü görünür kılmaktır.

Örneğin 4×4 bir ızgarada, hücre boyutu 40 iken yalnızca birkaç hücrenin sol üst köşesini yazın:

• Üst satırı soldan sağa gezin: (0,0), (40,0), (80,0), (120,0) — X her sütunda 40 artıyor, Y sabit kalıyor.
• Bir alt satıra inin: (0,40), (0,80), (0,120) — satır değiştikçe Y 40 artıyor, X ise yeniden 0’dan başlıyor.

Bu iki gözlem birleşince kural çoğu zaman kendiliğinden çıkar: X = sütun × 40, Y = satır × 40. Kural netleştiği an, tek tek yazdığınız köşeleri iki iç içe for ile sadeleştirmek kolaylaşır (aşağıdaki kod). Bu bir zorunluluk değil, yalnızca takıldığınızda başvurabileceğiniz bir keşif yoludur; kâğıt üzerinde “satır bitti, sütun başa döndü” diye iz sürmek de bir tür zihinsel çalıştırmadır.

Kod 1.

javascriptKopyala

// Takılınca: birkaç hücreyi tek tek yazıp örüntüyü görmekrect(0, 0, 40, 40);rect(40, 0, 40, 40);rect(80, 0, 40, 40);// ... satırda X +40; alt satırda Y +40, X yeniden 0'dan // Örüntü oturunca aynı kural for ile:for (let satir = 0; satir < 4; satir++) {  for (let sutun = 0; sutun < 4; sutun++) {    rect(sutun * 40, satir * 40, 40, 40);  }}

Sektörde de benzer alışkanlıklar vurgulanır. Brian Kernighan’ın sık hatırlanan uyarısı özetle şudur: hata ayıklama, kodu yazmaktan çoğu zaman daha zordur — bu yüzden baştan karmaşık yazmak yerine adım adım ilerlemek akıllıdır. Stüdyolarda ve oyun jam’lerinde sıkça kâğıt / tahta karalaması, gri kutu prototip veya “ördeğe anlat” (rubber duck debugging: kodu yüksek sesle, hatta sessiz bir nesneye adım adım anlatarak tutarsızlığı yakalama) kullanılır. Kâğıt üzerinde “satır 1 bitti, sütun başa döndü” diye iz sürmek de bir tür debug’dır; makineye geçmeden önce beyninizde çalıştırmaktır.

Tarayıcıda adım adım çalıştırma (breakpoint, Step over, değişken paneli) ise aynı fikrin dijital karşılığıdır — özellikle iç içe for karışıksa. Bunu nasıl yapacağınızı bu ana başlığın sonundaki Yapay Zekâ Etkileşimi: Tarayıcıda Debug etkinliğinde kendi tarayıcınıza göre sorup uygulayacaksınız.

Kod bloğu: 3×3 hücre ziyaret sırası — önce konsolda izleme, çizim yok.

function setup() {  createCanvas(200, 100);   for (let satir = 0; satir < 3; satir++) {    for (let sutun = 0; sutun < 3; sutun++) {      console.log("hücre (", satir + "," + sutun + ")");    }  }} function draw() {  background(240);}

Konsol çıktısı (dış satır, iç sütun — satır satır):

hücre (0,0)hücre (0,1)hücre (0,2)hücre (1,0)hücre (1,1)hücre (1,2)hücre (2,0)hücre (2,1)hücre (2,2)

İç döngü her dış turda baştan (sutun = 0) başlar; bu yüzden sıra önce bir satırın tüm sütunları, sonra sonraki satırdır.

for (let satir = 1; satir <= 3; satir++) {  for (let sutun = 1; sutun <= 3; sutun++) {    rect((sutun - 1) * 40, (satir - 1) * 40, 40, 40);  }}

Kod bloğu: 8×8 kareli dama/tahta benzeri ızgara.

const HUCRE_BOYUTU = 50;const SUTUN_SAYISI = 8;const SATIR_SAYISI = 8; function setup() {  createCanvas(SUTUN_SAYISI * HUCRE_BOYUTU, SATIR_SAYISI * HUCRE_BOYUTU);  noStroke();} function draw() {  background(40, 44, 52);   for (let satir = 0; satir < SATIR_SAYISI; satir = satir + 1) {    for (let sutun = 0; sutun < SUTUN_SAYISI; sutun = sutun + 1) {      // Satır + sütun toplamı tek sayıysa açık, çift sayıysa koyu kare (dama deseni)      if ((satir + sutun) % 2 === 0) {        fill(220, 210, 180);      } else {        fill(80, 70, 60);      }      rect(sutun * HUCRE_BOYUTU, satir * HUCRE_BOYUTU, HUCRE_BOYUTU, HUCRE_BOYUTU);    }  }}

Bu örnekte % operatörü (1.5) ve if/else (2.3) döngüyle birleştirilmiştir. (satir + sutun) % 2 === 0 ifadesi hücre rengini satır ve sütuna göre değiştirir.

İç içe döngü tur sayısı

Tablo 1.

Toplam çizim: 8 × 8 = 64 kare. İç içe döngüde toplam tur, dış tur sayısı ile iç tur sayısının çarpımına eşittir.

Sıra Sizde: Tuvali hücre ızgarasına bölün; üzerine yalnızca yeşillik + gövde olan bir çam çizin. Hedef görünüm:

Görsel 3 ulaşmanız gereken çıktıdır: ağaçta başka süs yok — yeşil taç ve kahverengi gövde. Yeşil kısım hücre hücre boyanır ve üçgen gibi durur çünkü her alt satırda sola ve sağa bir hücre büyür. Gövde tek bir dikdörtgen (rect) olabilir.

İstenenler:

1. Izgara: Yatay/dikey çizgiler (line + for).
2. Yeşil (taç): Üstte ortada 1 hücre; alt satırda 1 → 3 → 5 → … (sol+sağ +1). triangle kullanmayın — hücre rect boyayın. Tüm ağacı tuvalde / ızgarada ortala (yatay + dikey).
3. Gövde: Yeşilin altında kahverengi bir rect; genişliği 3 hücre (tek sayı) olsun ki taç ortasına doğal hizalansın.
4. Kritik: Izgarayı bozmayın — background bir kez; sıra: ızgara → yeşil → gövde.

İpucu: Orta sütun mid = floor(SUTUN / 2). Yeşil satır r için aralık mid - r … mid + r. Gövde genişliği 3: rect((mid - 1) * BOYUT, …, 3 * BOYUT, …). Ağacı tuvalde ortalamak için başlangıç satırını da kaydırın: startRow = floor((SATIR - yesilSatir - govdeSatir) / 2).

Kod bloğu: İç içe döngü + continue — diyagonal dışı hücreleri atlayarak yalnızca satir === sutun olanları yazdırma.

Kod 6.

javascriptKopyala

function setup() {  createCanvas(200, 100);   for (let satir = 0; satir < 4; satir++) {    for (let sutun = 0; sutun < 4; sutun++) {      if (satir !== sutun) {        continue; // diyagonal değilse bu hücreyi atla      }      console.log("diyagonal:", satir, sutun);    }  }} function draw() {  background(240);}

Konsol çıktısı: (0,0), (1,1), (2,2), (3,3).

Sıra Sizde: Aşağıdaki hedef görünüme uygun 9×9 Go tahtasını çizin (p5.js Web Editor). Tek tek çizgi veya taş yazmak yok — hem ızgara hem taşlar döngüyle üretilsin.

Görsel 4 ulaşmanız gereken çıktıdır: ahşap zeminde 9×9 ızgara; ana köşegende beyaz, diğer köşegende siyah taşlar; iki köşegenin kesişimi (4,4) boş.

İstenenler:

1. Izgara: 9 yatay + 9 dikey çizgi (line). Her yön için bir for yeterli.
2. Taşlar: Kesişim noktalarına daire (ellipse / circle) koyun:
   • Ana köşegen (satir === sutun) → beyaz taş
   • Diğer köşegen (satir + sutun === 8) → siyah taş
   • Ortak nokta (4,4) → taş koyma (continue veya if ile atlayın)
3. Taş merkezleri çizgi kesişiminde dursun; çapı hücreden biraz küçük seçin.

İpucu: const N = 9;, const BOYUT = 40; gibi sabitler kullanın. Önce boş tahtayı çizin, sonra taş döngüsünü ekleyin. Go’da komşuluk yalnızca dik yönlerdedir (çapraz komşu sayılmaz); bu köşegen yerleşimi öğretim diyagramı olarak geçerlidir — taşlar birbirini dik komşu olarak sıkıştırmaz.

2.2. Döngülerle Animasyon

1.5'te frameCount ile tek bir dairenin konumu güncellenmişti. Döngülerle aynı frame'de birden fazla nesne çizilebilir; her nesnenin konumu döngü değişkenine bağlanır. Önce yalnızca toplama ve % kullanan bir örnek; ardından yumuşak salınım için sin() tanıtılır.

Trigonometrisiz örnek: kayan dikdörtgenler

Her frame'de frameCount artar. for ile birkaç dikdörtgen çizilir; i yalnızca başlangıç ofsetini değiştirir. Yatay kayma (frameCount * 2 + i * 70) % width ile sağa akar ve tuval sonuna gelince başa döner — sinüs gerekmez. Formülde * 2 kayma hızıdır (frame başına 2 piksel), i * 70 her şeridi 70 piksel farklı yerden başlatan ofsettir; % width (modulo, 1.5) sonucu 0 … width-1 aralığında tutar, böylece kenara gelen şerit soldan yeniden girer.

Kod bloğu: for + frameCount — yatay kayan şeritler.

const SERIT_SAYISI = 5; function setup() {  createCanvas(400, 280);  noStroke();} function draw() {  background(30, 34, 48);   for (let i = 0; i < SERIT_SAYISI; i++) {    // Her şerit farklı yatay ofsetle başlar; hepsi aynı hızda kayar    let x = (frameCount * 2 + i * 70) % width;    let y = 40 + i * 45;     fill(80 + i * 30, 140, 220);    rect(x, y, 60, 30);  }}

i = 0 iken şerit daha solda başlar; i büyüdükçe ofset artar. Renk de i ile değişir. Anlaşılması gereken çekirdek: döngü = aynı frame'de birden fazla nesne, frameCount = zaman.

sin() ile yumuşak salınım

Bazen nesnenin Y konumunun yumuşakça yukarı–aşağı gitmesi istenir. Bunun için p5.js'teki sin() kullanılır.

Tablo 2.

İsterseniz angleMode(DEGREES) ile tüm sketch’i dereceye çevirebilirsiniz; bu durumda sin(90) yazılır, sin(HALF_PI) değil. Bu kitapta örnekler varsayılan radyan ile kalır; PI, HALF_PI, TWO_PI sabitleri bu yüzden sık kullanılır.

Görsel 5 bir dönemlik sin eğrisini gösterir (ör. sin(PI / 2) değeri 1, sin(3 * PI / 2) değeri -1). Kesik çizgiler dalganın sola ve sağa aynı biçimde sürdüğünü hatırlatır; grafik tek bir tekrarla sınırlı değildir.

Tuvalde piksel konumuna çevirmek için sin çıktısı bir ölçekle çarpılır ve bir merkeze eklenir:

Tablo 3.

Bu yüzden y = 150 + sin(frameCount * 0.05 + i) * 40 yazılır: daire 150 civarında ±40 piksel salınır. + i her daireye farklı faz verir; hepsi aynı anda aynı yükseklikte olmaz.

Kod bloğu: Yatay kayma + sin ile dikey salınım (önceki kayma örneğinin gelişmiş hâli).

const DAIRE_SAYISI = 6;const DAIRE_YARICAP = 20; function setup() {  createCanvas(400, 300);  noStroke();} function draw() {  background(20, 25, 40);   for (let i = 0; i < DAIRE_SAYISI; i = i + 1) {    // Yatay: şerit örneğindeki gibi — yalnızca % ve toplama    let x = (frameCount * 2 + i * 60) % width;    // Dikey: sin ile yumuşak salınım    let y = 150 + sin(frameCount * 0.05 + i) * 40;     fill(100 + i * 25, 180, 255);    ellipse(x, y, DAIRE_YARICAP * 2, DAIRE_YARICAP * 2);  }}

Döngü değişkeni i burada konum ofseti, renk ve faz farkı yaratır.

Döngü ile düzenli 20gen

Düzenli bir çokgende köşeler, ortak bir çember üzerinde eşit açıyla dizilir. Tam tur TWO_PI radyandır (≈ 360°). 20 köşe için komşu köşeler arası açı:

açıAdımı = TWO_PI / 20

(Derece ile düşünülürse adım 360° / 20 = 18° olur; p5.js varsayılanında yine radians(18) veya doğrudan TWO_PI / 20 yazılır.)

i. köşenin kutupsal açısı i * açıAdımı (örnekte üstten başlamak için -HALF_PI kaydırılır). Dik koordinata çeviri, birim çemberdeki gibi yapılır:

• x = merkezX + r * cos(açı)
• y = merkezY + r * sin(açı)

Görsel 6 hatırlatıcıdır: merkez orijin O (0, 0)dır; O ile P arasındaki doğru parçası yarıçaptır (r). Çember üzerindeki P noktasında yatay izdüşüm cos θ, dikey izdüşüm sin θ değeridir. Birim çemberde r = 1; çokgende aynı formül r ile ölçeklenir (merkezX, merkezY orijini kaydırır). cos ve sin birlikte (−1…+1) aralığında salınır.

Döngü her i için bir köşe hesaplar; vertex ile çokgen kapatılır. açı formülünde TWO_PI / KOSE, tam turu köşe sayısına bölerek komşu iki köşe arasındaki eşit açı adımını verir; -HALF_PI (≈ −90°) ise ilk köşeyi tepeye (saat 12 yönü) kaydırır. R * cos(açı) ve R * sin(açı) bu açıyı yarıçapı R olan çember üzerindeki (x, y) konumuna çevirir.

Kod bloğu: for ile düzenli 20gen.

const KOSE = 20;const R = 120; function setup() {  createCanvas(400, 400);} function draw() {  background(255);  translate(width / 2, height / 2);   noFill();  stroke(40);  beginShape();  for (let i = 0; i < KOSE; i++) {    let açı = -HALF_PI + i * TWO_PI / KOSE;    let x = R * cos(açı);    let y = R * sin(açı);    vertex(x, y);  }  endShape(CLOSE);}

Görsel 7 yukarıdaki sketch’in tuval çıktısıdır: 20 eşit kenarlı düzenli çokgen. KOSE 3 → üçgen, 6 → altıgen, 20 → yirmigen olur; yalnızca sabit değişir.

Aynı döngü while ile de yazılabilir:

let i = 0;while (i < KOSE) {  let açı = -HALF_PI + i * TWO_PI / KOSE;  let x = R * cos(açı);  let y = R * sin(açı);  vertex(x, y);  i++;}

Özet

İç içe döngüde dış sayaç satırları, iç sayaç ise sütunları gezer; iç döngü her dış turda yeniden sıfırdan başladığı için hücreler satır satır ziyaret edilir. Hücrenin konumu x = sütun * boyut ve y = satır * boyut ile bulunur; sayma 0’dan başladığında bu formül sade kalır, 1’den başlayan sayımda her konum hesabına bir çıkarma eklenir. (satır + sütun) % 2 koşulu iki rengi dönüşümlü kullanarak dama desenini üretir; toplam tur sayısı satır ve sütun sayısının çarpımına eşittir. Örüntü oturmadığında birkaç hücreyi tek tek rect ile yazmak veya kâğıt üzerinde iz sürmek isteğe bağlı bir keşif yoludur; zorunluluk değildir.

Animasyonda frameCount her frame bir artar ve zaman benzeri bir sayaç işlevi görür; döngü indeksiyle toplandığında her nesne farklı bir ofset veya faz kazanır, % width ise kenara ulaşan nesneyi soldan yeniden başlatır. sin −1 ile +1 arasında salınan bir değer üretir ve bir genlikle çarpılıp bir merkeze eklenerek piksel konumuna çevrilir. Düzenli çokgende komşu köşeler arasındaki açı adımı TWO_PI / köşeSayısıdır; köşeler cos ve sin ile hesaplanıp vertex çağrılarıyla şekil kapatılır. p5.js tarayıcıda çalıştığı için DevTools üzerinden breakpoint, Step over ve değişken izleme hem hata bulmada hem iç içe döngünün akışını görmede işe yarar.

Neler Öğrendik?

Soru 1 10×10 ızgarada iç içe for kaç hücre ziyaret eder?

Soru 2 Dama deseni için tipik ifade hangisidir?

Soru 3 sin animasyonda genelde ne sağlar?

Soru 4 Pac-Man’de her hayaletin yönünü sırayla hesaplamak hangi programlama fikrine örnektir?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: C

• Çözüm: 10 satır × 10 sütun = 100.
• İlgili Konu: 2.1. İç İçe for Döngüleri ve Izgara Çizimi

Soru 2: Doğru Cevap: B

• Çözüm: Toplamın tek/çiftliği renk seçer.
• İlgili Konu: 2.1. İç İçe for Döngüleri ve Izgara Çizimi

Soru 3: Doğru Cevap: B

• Çözüm: Sinüs dalgası yumuşak ofset üretir.
• İlgili Konu: 2.2. Döngülerle Animasyon

Soru 4: Doğru Cevap: B

• Çözüm: Her hayalet için benzer güncelleme; tipik for/while tekrarıdır.
• İlgili Konu: 2.1. İç İçe for Döngüleri ve Izgara Çizimi

Yararlanılan Kaynaklar

Bu içerik aşağıdaki kaynaklardan derlenerek hazırlanmıştır:

• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Mozilla Developer Network. (n.d.). break. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
• Mozilla Developer Network. (n.d.). continue. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue
• Mozilla Developer Network. (n.d.). for. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for
• Mozilla Developer Network. (n.d.). while. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while
• Nystrom, R. (2014). Game loop. In Game Programming Patterns. https://gameprogrammingpatterns.com/game-loop.html
• p5.js Foundation. (n.d.). angleMode. p5.js Reference. https://p5js.org/reference/p5/angleMode/
• p5.js Foundation. (n.d.). radians. p5.js Reference. https://p5js.org/reference/p5/radians/
• p5.js Foundation. (n.d.). sin. p5.js Reference. https://p5js.org/reference/p5/sin/
• Russell, S., & Norvig, P. (2020). Artificial Intelligence: A Modern Approach (4th ed.). Pearson.
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Wikipedia contributors. (n.d.). Minimax. Wikipedia. https://en.wikipedia.org/wiki/Minimax
• Wikipedia contributors. (n.d.). Nim. Wikipedia. https://en.wikipedia.org/wiki/Nim