Bölüm 2 — Amaç ve Kapsam

Genel Amaç

Bu bölümün temel amacı, tekrarlayan işlemleri for ve while döngüleriyle ölçeklemek; fonksiyonlarla modüler sketch yapısı kurmak; oyun döngüsü ve FPS ile animasyon zamanlamasının temelini atmaktır. Bölüm boyunca her ana başlık kendi içinde amaç, öğrenme çıktıları, örnek kod ve değerlendirme sorularıyla tamamlanır; böylece bir sonraki bölüme geçmeden önce ölçülebilir kazanımlar elde edilir.

Kapsam

Bu bölüm şu ana başlıklar altında ele alınmaktadır:

Ana Başlık 1: for, while ve Döngü Kontrolü

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

Ana Başlık 3: Fonksiyonlar ve Modüler Kod Yazımı

Ana Başlık 4: Oyun Döngüsü, FPS ve frameRate

Ana Başlık 1. for, while ve Döngü Kontrolü

Amaç: for ve while döngülerini, break/continue ve seçim ölçütlerini öğreterek tekrarlayan işlemleri güvenli yazmak.

Öğrenme Çıktıları:

• for döngüsünün üç parçasını açıklar ve uygular.
• while ile koşula bağlı tekrar yazar.
• for ve while arasında seçim gerekçesi verir.
• break ve continue ile döngü akışını denetler.

Anahtar Sözcükler: for, while, break, continue, sonsuz döngü, sayaç

Giriş

Önceki bölümlerde tekil şekiller ve koşullu kararlar işlendi. Oyun dünyaları ise çoğu zaman onlarca tekrarlayan öğe içerir: ızgara çizgileri, engeller, parçacıklar. Aynı kodu elle kopyalamak bakımı zorlaştırır; döngüler bu tekrarı tek bir kalıpta toplar.

for sayaç tabanlı, while koşul tabanlı tekrardır. Yanlış koşul sonsuz döngüye yol açabilir; break erken çıkış, continue tur atlama sağlar. Bu ana başlık döngünün nedenini, sözdizimini ve güvenli kontrolünü kurar. İç içe ızgara ve animasyon bir sonraki ana başlıkta gelir. 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. Bu ana başlığın çıktısı, sonraki oyunda yeniden kullanılabilecek bir iskelet oluşturur.

1.1. Neden Döngü? Tekrarlayan İşlemler

Döngü olmadan beş adet dikdörtgen çizmek için rect() beş kez yazılmalıdır:

rect(0, 0, 40, 40);rect(50, 0, 40, 40);rect(100, 0, 40, 40);rect(150, 0, 40, 40);rect(200, 0, 40, 40);

Burada yalnızca X konumu 50'şer piksel artmaktadır. On veya yüz dikdörtgen gerektiğinde bu yöntem sürdürülebilir değildir. Döngü ile örüntü tek bir değişkene bağlanır; değişken her turda güncellenir.

1.2. for Döngüsü

Sözdizimi:

for (başlangıç; koşul; artış) {  // döngü gövdesi — koşul true olduğu sürece tekrarlanır}

for başlığının üç parçası — ne işe yarar?

Üç parça zorunlu isimler değil; her biri farklı anda çalışır. Noktalı virgüller parçaları ayırır:

Tablo 1.

Çalışma sırası her zaman şöyledir: başlangıç → (koşul? → gövde → güncelleme → koşul? → …). Üçüncü parça gövdeden sonra gelir; bu yüzden gövde içinde i hâlâ o turun değeridir.

Kod bloğu: Üç parçanın rolünü konsolda izleme.

function setup() {  createCanvas(200, 100);  console.log("başlangıç çalışacak");  for (let i = 0; i < 3; i++) {    console.log("gövde, i =", i);  }  console.log("döngü bitti");} function draw() {  background(240);}

Konsol çıktısı:

başlangıç çalışacakgövde, i = 0gövde, i = 1gövde, i = 2döngü bitti

(i++ her gövdeden sonra sessizce çalışır; ayrı bir console.log satırı yoktur.)

Üç parçadan bazılarını boş bırakmak

Noktalı virgüller durur; aradaki ifade yazılmazsa o parça atlanmış sayılır:

Tablo 2.

Aşağıda her durum için kısa, çalışır örnekler vardır (setup içinde; konsol çıktısı).

Kod bloğu: Artış boş — güncelleme gövdede.

function setup() {  createCanvas(200, 100);  for (let i = 0; i < 3; ) {    console.log("artış gövdede, i =", i);    i++; // üçüncü parça boş olduğu için burada  }} function draw() {  background(240);}

artış gövdede, i = 0artış gövdede, i = 1artış gövdede, i = 2

Kod bloğu: Başlangıç boş — i önce tanımlanır.

function setup() {  createCanvas(200, 100);  let i = 0; // başlangıç döngü dışında  for (; i < 3; i++) {    console.log("başlangıç dışarıda, i =", i);  }} function draw() {  background(240);}

başlangıç dışarıda, i = 0başlangıç dışarıda, i = 1başlangıç dışarıda, i = 2

Kod bloğu: Koşul boş — break ile çıkış.

function setup() {  createCanvas(200, 100);  for (let i = 0; ; i++) {    console.log("koşul yok, i =", i);    if (i >= 2) {      break; // yoksa sonsuz döner    }  }  console.log("break ile çıktık");} function draw() {  background(240);}

koşul yok, i = 0koşul yok, i = 1koşul yok, i = 2break ile çıktık

Kod bloğu: for (;;) — üçü de boş (while (true) eşdeğeri).

function setup() {  createCanvas(200, 100);  let n = 0;  for (;;) {    console.log("for(;;), n =", n);    n++;    if (n >= 3) {      break;    }  }} function draw() {  background(240);}

for(;;), n = 0for(;;), n = 1for(;;), n = 2

Kısayol operatörleri (++, --, +=, -=)

Sayısal değişkeni bir artırmak veya azaltmak döngülerde sık tekrarlanır. JavaScript bunun için kısayol operatörleri sunar; bunlar yeni bir dil kuralı değil, uzun yazımın kısa eşdeğeridir:

Tablo 3.

for döngüsünün üçüncü bölümünde her iki biçim de geçerlidir:

for (let i = 0; i < 5; i = i + 1) { /* … */ }for (let i = 0; i < 5; i++) { /* … */ }          // aynı anlamfor (let satir = 5; satir >= 0; satir--) { /* … */ } // alttan üste

Kod bloğu: Yatay dizide beş kare çizen for döngüsü.

function setup() {  createCanvas(400, 200);  noStroke();} function draw() {  background(30, 30, 50);   for (let i = 0; i < 5; i = i + 1) {    fill(100 + i * 30, 150, 200);    rect(i * 50, 80, 40, 40);  }}

i sırasıyla 0, 1, 2, 3, 4 değerlerini alır; her değerde rect(i * 50, 80, 40, 40) farklı X konumunda bir kare çizer.

for döngüsü izleme tablosu

for (let i = 0; i < 5; i = i + 1) ifadesinin turları:

Tablo 4.

Koşul false olduğunda gövde bir kez daha çalışmaz; akış döngüden sonraki satıra geçer.

Görsel 1 for döngüsünün çalışma sırasını özetler: başlangıç (i = 0), koşul kontrolü (i < 5), gövde, artış (i = i + 1) ve koşula geri dönüş. Koşul false olduğunda döngü biter.

1.3. while Döngüsü

Sözdizimi:

while (koşul) {  // gövde}

Kod bloğu: while ile sayaç — setup() içinde mantık gösterimi. Konsola yazdırmak için 1.3'teki console.log() kullanılır.

function setup() {  createCanvas(400, 400);   let sayac = 0;  while (sayac < 5) {    console.log("sayac:", sayac);    sayac = sayac + 1;  }  console.log("while bitti");} function draw() {  background(220);}

Konsol çıktısı (sırayla):

sayac: 0sayac: 1sayac: 2sayac: 3sayac: 4while bitti

while döngüsü izleme tablosu

sayac = 0 sonrası while (sayac < 5) { …; sayac = sayac + 1; } için:

Tablo 5.

Tablo, for izleme tablosuyla aynı mantıktadır; fark yalnızca başlangıç/artışın nerede yazıldığıdır.

Görsel 2 while akışını özetler: döngü öncesi sayac = 0, koşul, gövde, artış, koşula dönüş.

Sonsuz döngü

Gövdede koşulu false yapacak güncelleme yoksa döngü sonsuz döner ve program donabilir.

Yanlış örnek (çalıştırmayın — tarayıcı kilitlenebilir):

let n = 0;while (n < 5) {  console.log(n);  // n artırılmadı → koşul hep true kalır}

1.4. Aynı İş: for ve while — Hangisi Ne Zaman?

Aynı görev çoğu zaman her iki döngüyle de yazılabilir. Aşağıda “0’dan 4’e kadar konsola yaz” işi yan yana gösterilir.

Kod bloğu: Aynı mantık — for sürümü.

function setup() {  createCanvas(200, 100);  for (let i = 0; i < 5; i++) {    console.log("for:", i);  }} function draw() {  background(240);}

Kod bloğu: Aynı mantık — while sürümü.

function setup() {  createCanvas(200, 100);  let i = 0;  while (i < 5) {    console.log("while:", i);    i++;  }} function draw() {  background(240);}

Her iki konsol da 0 1 2 3 4 üretir. Eşleme şöyle okunur:

Tablo 6.

Çizim örneği de aynıdır: Beş kare için for (let i = 0; i < 5; i++) { rect(i * 50, 80, 40, 40); } yerine let i = 0; while (i < 5) { rect(…); i++; } yazılabilir; tuval aynı görünür.

Basit desenler: yatay / dikey çizgi ve eşmerkezli daire

Aşağıdaki üç desen döngü değişkenini konuma bağlamanın en sade örnekleridir. Her biri önce for, sonra while ile yazılır; tuval çıktısı aynıdır.

Görsel 3 üç deseninin beklenen çıktısını özetler.

Kod bloğu: Yatay paralel çizgiler — for.

function setup() {  createCanvas(280, 200);} function draw() {  background(236);  stroke(40);  for (let i = 0; i < 8; i++) {    let y = 20 + i * 20;    line(20, y, 260, y);  }}

Kod bloğu: Aynı yatay çizgiler — while.

function setup() {  createCanvas(280, 200);} function draw() {  background(236);  stroke(40);  let i = 0;  while (i < 8) {    let y = 20 + i * 20;    line(20, y, 260, y);    i++;  }}

i her turda Y konumunu kaydırır; X uçları sabittir → yatay paralel çizgiler.

Kod bloğu: Dikey paralel çizgiler — for / while.

// forfor (let i = 0; i < 8; i++) {  let x = 20 + i * 30;  line(x, 20, x, 180);} // while (eşdeğer)let i = 0;while (i < 8) {  let x = 20 + i * 30;  line(x, 20, x, 180);  i++;}

Burada değişen X’tir; çizgiler dikeydir.

Kod bloğu: Eşmerkezli daireler — for / while.

function setup() {  createCanvas(280, 200);} function draw() {  background(236);  noFill();  stroke(40);  for (let i = 1; i <= 6; i++) {    let çap = i * 28;    circle(140, 100, çap);  }} // while eşdeğeri:// let i = 1;// while (i <= 6) {//   circle(140, 100, i * 28);//   i++;// }

Merkez sabit, çap i ile büyür → eşmerkezli daireler. (circle(x, y, çap) p5.js’te çap parametresi alır.)

Sıra Sizde: Tek bir for ile renk tayfı çizin (p5.js). Hedef görünümler:

İstenenler:

1. Görsel 4 (dikey / mavi): Yatay şeritler; mavi bileşen 0’dan 255’e artsın (fill(0, 0, mavi) — mavi döngü değişkenine bağlı).
2. Görsel 5 (yatay / kırmızı): Dikey şeritler; kırmızı 0’dan 255’e artsın (fill(kirmizi, 0, 0)).
3. İç içe döngü gerekmez — yukarıdaki yatay/dikey çizgi örnekleri gibi tek for yeter. Tek tek renk yazmayın.

İpucu: N şerit için renk = i * (255 / (N - 1)) (veya map(i, 0, N - 1, 0, 255)). Şerit yüksekliği / genişliği: height / N, width / N.

draw() ile dolaylı döngü (background silmeden)

for / while tek frame içinde birçok çizgi üretir. Benzer sonucu bazen draw()’ın kendisine bırakmak da mümkündür: background() çağrılmazsa önceki çizimler silinmez; her frame’de bir yeni çizgi eklenir. Bu, p5.js’in sürekli draw çağrısını dolaylı bir döngü gibi kullanmaktır.

Kod bloğu: Her frame bir yatay çizgi — background yok.

let satir = 0; function setup() {  createCanvas(280, 200);  background(236); // yalnızca bir kez  stroke(40);} function draw() {  if (satir < 8) {    let y = 20 + satir * 20;    line(20, y, 260, y);    satir++;  }  // satir 8 olunca yeni çizgi eklenmez; tuval dolu kalır}

İlk 8 frame’de ekran Görsel 3’teki yatay desene yaklaşır; fark, çizgilerin zamanla birikmesidir (animasyon gibi görünür). for ile tek frame’de biten sürüm anında tamamlanır.

Tablo 7.

Hangisi hangi durumda daha iyi?

Kesin bir kural yoktur; okunabilirlik ve niyet önemlidir. Başlangıç düzeyinde şu tercihler yaygındır:

Tablo 8.

Tartışma: “Beş kare çiz” için while de çalışır; ama for niyeti (“sayarak tekrarla”) daha net gösterir. “Kullanıcı doğru cevabı girene kadar sor” gibi tur sayısı belirsiz işlerde while daha doğal okunur. İkisi de aynı makineye derlenebilir; seçim çoğu zaman okuyan insanın işi anlaması içindir.

Döngüler oyunlarda neden bu kadar sık?

Beş rect örneğindeki tekrar, oyunlarda da aynıdır: listedeki her düşmanı, her mermiyi veya her tahta satırını tek tek işlemek. Aşağıdakiler örnek senaryolardır (oyun motorunun içini birebir iddia etmez); amaç, döngünün neyi tekrarladığını somutlaştırmaktır.

Tablo 9.

while daha çok “koşul doğru olduğu sürece” işlerde öne çıkar: can bitene kadar, doğru cevap gelene kadar, liste boşalana kadar. Bu kitaptaki mini oyunlarda çoğu tekrar for ile başlar; while seçtiğinizde gerekçenizi bir cümleyle söyleyebilmeniz yeterlidir.

1.5. break, continue ve Erken Çıkış

Bu iki komut for ve while içinde kullanılabilir. Amaç çoğu zaman “hedef bulundu, yeter” (break) veya “bu turu atla, sonrakine bak” (continue) demektir.

Kod bloğu: break — konsolda izleme.

function setup() {  createCanvas(200, 100);   for (let i = 0; i < 10; i++) {    if (i === 3) {      console.log("break: i =", i, "→ döngü biter");      break;    }    console.log("i =", i);  }  console.log("for sonrası");} function draw() {  background(240);}

Konsol çıktısı:

i = 0i = 1i = 2break: i = 3 → döngü biterfor sonrası

i 3 olduğunda gövde console.log("i =", i) satırına gelmeden break çalışır; 4…9 turları hiç yapılmaz.

Kod bloğu: continue — tek bir turu atlama.

function setup() {  createCanvas(200, 100);   for (let i = 0; i < 5; i++) {    if (i === 2) {      console.log("continue: i =", i, "→ bu tur atlandı");      continue;    }    console.log("i =", i);  }} function draw() {  background(240);}

Konsol çıktısı:

i = 0i = 1continue: i = 2 → bu tur atlandıi = 3i = 4

Tablo 10.

Kod bloğu: İç döngüde break — dış döngü sürer (konsol).

function setup() {  createCanvas(200, 100);   for (let satir = 0; satir < 3; satir++) {    for (let sutun = 0; sutun < 3; sutun++) {      console.log("bak:", satir, sutun);      if (satir === 1 && sutun === 1) {        console.log("break — yalnızca iç döngü biter");        break;      }    }    console.log("dış tur bitti, satir =", satir);  }} function draw() {  background(240);}

Konsol çıktısı (özet): satir = 1 iken sutun 0 ve 1 yazılır, sonra iç break; ardından satir = 2 yine 0, 1, 2 ile gezer. Dış döngü durmaz.

Kontrollü sonsuz döngü (setup / mantık kodunda; draw içinde değil):

let deneme = 0;while (true) {  deneme++;  console.log("deneme", deneme);  if (deneme >= 3) {    break; // bilinçli çıkış  }}

Aynı desen for (;;) ile de yazılabilir; yine break şarttır.

Özet

Döngü, aynı işlem ailesini bir sayaca veya bir koşula bağlı olarak yineleyen yapıdır; beş rect çağrısını tek tek yazmak yerine örüntüyü tek bir değişkene bağlar. for (başlangıç; koşul; artış) üçlüsünde başlangıç yalnızca bir kez, koşul her tur öncesinde, güncelleme ise her gövde bitiminde çalışır. Bu parçalar bilinçli olarak boş bırakılabilir; ancak boş bırakma nadir bir tercihtir ve for (;;) gibi biçimler yalnızca break ile birlikte anlam taşır. i++, i-- ve i += 5 kısayolları uzun yazımın eşdeğeridir. while ise “koşul doğru kaldıkça” modelidir; başlangıç döngüden önce, güncelleme gövde içinde yazılır ve güncelleme unutulduğunda koşul hiç bozulmadığı için tarayıcı kilitlenebilir.

Aynı iş çoğu zaman her iki yapıyla da yazılabildiğinden seçim okunabilirliğe dayanır: tur sayısı baştan belliyse for, tur sayısı belirsiz ve vurgu koşuldaysa while daha doğal okunur. break içinde bulunduğu döngüyü hemen sonlandırır, continue yalnızca o turun kalan gövdesini atlar; iç içe döngülerde break en içteki döngüyü kırar, dış döngü sürer. Oyunlarda aynı tekrar Tetris’te dolu satırların taranmasında, Pac-Man’de hayaletlerin sırayla güncellenmesinde veya mermi listesinin işlenmesinde görülür. draw içinde while (true) animasyonu hızlandırmaz; frame’i bitirmediği için görüntüyü ve girdiyi dondurur. Bu temel, sonraki ana başlıktaki iç içe ızgara ve frameCount animasyonuna zemin hazırlar.

Neler Öğrendik?

Soru 1 for başlığındaki üç parça sırasıyla neyi kontrol eder?

Soru 2 draw() içinde while (true) yazmak genelde neye yol açar?

Soru 3 break ne yapar?

Soru 4 continue ne yapar?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Klasik for üçlüsü başlangıç–koşul–adım biçimindedir.
• İlgili Konu: 1.2. for Döngüsü

Soru 2: Doğru Cevap: B

• Çözüm: draw bir frame’i bitirmeden sonraki frame gelmez; uzun while ekranı ve girdiyi dondurabilir.
• İlgili Konu: 1.3. while Döngüsü

Soru 3: Doğru Cevap: B

• Çözüm: break en yakın döngüden çıkar.
• İlgili Konu: 1.5. break, continue ve Erken Çıkış

Soru 4: Doğru Cevap: B

• Çözüm: continue yalnızca o iterasyonun kalanını atlar.
• İlgili Konu: 1.5. break, continue ve Erken Çıkış

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.
• MDN Web Docs. (n.d.). JavaScript Guide. Mozilla. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• 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/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

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

Ana Başlık 3. Fonksiyonlar ve Modüler Kod Yazımı

Amaç: Fonksiyon tanımlama, parametre ve dönüş değeri kavramlarını öğreterek kodu modüler hale getirmek.

Öğrenme Çıktıları:

• Fonksiyon tanımlar ve çağırır.
• Parametreli fonksiyonlarla tekrar kullanılabilir kod yazar.
• return ifadesiyle değer döndürür.
• p5.js'te yardımcı çizim fonksiyonları oluşturur.
• Modüler kod yapısının oyun geliştirmedeki önemini açıklar.
• Global ve yerel değişken kapsamını ayırt eder; parametre ile argüman ilişkisini açıklar.

Anahtar Sözcükler: fonksiyon, parametre, argüman, dönüş değeri, return, modülerlik, yeniden kullanılabilirlik, kapsam, global değişken, yerel değişken, gölgeleme

Giriş

Döngüler tekrarlayan aynı kodu kısaltır; fonksiyonlar ise anlamlı iş parçalarını isimlendirilmiş bloklara ayırır. draw() içinde onlarca satır büyüdüğünde "tahta çiz", "skor yaz", "hedefi güncelle" gibi görevler birbirine karışır. Fonksiyonlar, her görevi ayrı bir isim altında toplayarak okunabilirliği artırır ve aynı işlemi farklı yerlerden tekrar çağırmayı mümkün kılar. Böylece bir değişiklik tek noktada yapılır; kopyalanmış satırlarda unutulan güncellemeler azalır.

p5.js’te setup() ve draw() zaten özel fonksiyonlardır; p5.js bunları belirli zamanlarda otomatik çağırır. mousePressed() de önceki ana başlıklarda benzer biçimde tanıtılmıştır. Bu ana başlıkta kullanıcı tanımlı fonksiyonlar ele alınacak: geliştiricinin kendi adını verdiği, parametre alabilen ve değer döndürebilen bloklar. Parametreler dış veri taşır; return hem erken çıkış hem de hesaplanmış sonuç için kullanılır. Modüler yapı, ileride XOX tahtası çizimi ve Daire Tıklama oyunundaki hedef konumu güncelleme gibi görevlerin düzenlenmesine zemin hazırlar.

Fonksiyonlar yalnızca kod tekrarını azaltmaz; soyutlama sağlar. draw() içinde tahtaCiz() yazmak, «tahtayı çiz» niyetini kodu inceleyene iletir; hücre renginin nasıl seçildiği hucreCiz içinde kalır. Oyun büyüdükçe hangi fonksiyonun ne yaptığını bilmek, hata ayıklamayı hızlandırır: tahta bozuksa önce tahtaCiz ve hucreCiz incelenir, tüm draw() taranmaz.

Modüler yazım aynı zamanda hata ayıklamayı ve ekip çalışmasını kolaylaştırır. Bir oyunda skor hesaplaması hatalıysa, tüm draw() gövdesini satır satır izlemek yerine doğrudan skorArtir gibi anlamlı adlandırılmış fonksiyona bakmak yeterli olur; fonksiyon adı zaten hangi görevi üstlendiğini belirtir. Birden fazla kişi aynı sketch üzerinde çalıştığında da fonksiyonlara bölünmüş kod, kimin hangi parçayı değiştirdiğini ayırt etmeyi kolaylaştırır: biri tahtaCiz üzerinde çalışırken diğeri skorGuncelle üzerinde çalışabilir, iki değişiklik aynı satırlarda çakışmaz.

3.1. Fonksiyon Kavramı ve Sözdizimi

Matematik dersindeki f(x) = x * x gibi bir fonksiyonu düşünün: dışarıdan bir girdi verirsiniz, içerideki kural çalışır, bir sonuç çıkar. Programlamada da benzer bir bakış yaygındır: çağıran taraf çoğu zaman fonksiyonun içini satır satır bilmek zorunda değildir — adı, girdi ve çıktı yeter; gövde bir kara kutu gibi kalabilir. dist(x1, y1, x2, y2) tam böyle çalışır: mesafe formülünü ezberlemeseniz de sonucu kullanırsınız. Kendi yazdığınız icindeMi veya topla için de aynı alışkanlık geçerlidir: önce «ne alır, ne verir / ne yapar?» sorusunu netleştirin.

Görsel 1 fonksiyonu girdi → kara kutu → çıktı olarak özetler: topla(3, 5) çağrısında önemli olan argümanlar ve dönen 8’dir; kutunun içindeki satırlar çağıran için gizli kalabilir.

Temel sözdizimi:

function fonksiyonAdi() {  // gövde — çağrıldığında çalışan satırlar}

Çağrı (call): fonksiyonAdi(); — parantezler fonksiyonun şimdi çalıştırılması gerektiğini belirtir.

Tablo 1.

Kod bloğu: Basit yardımcı fonksiyon — arka plan rengini sabitleyen arkaPlanCiz.

function setup() {  createCanvas(400, 400);} function draw() {  arkaPlanCiz();  ortaCizgiCiz();} function arkaPlanCiz() {  background(35, 40, 55);} function ortaCizgiCiz() {  stroke(200);  strokeWeight(2);  line(width / 2, 0, width / 2, height);  noStroke();}

draw() artık ne yaptığını okunaklı biçimde listeler; ayrıntılar fonksiyon gövdelerinde saklanır. p5.js draw() her frame'de çalıştığı için içinde çağrılan arkaPlanCiz() ve ortaCizgiCiz() de her frame'de yeniden çalışır.

Fonksiyon çağrı izi: Aşağıdaki sketch'te draw() çalıştığında çağrı sırası şöyledir:

Tablo 2.

Fonksiyon iç içe çağrılabilir: tahtaCiz döngü içinde hucreCiz çağırır; her hucreCiz tamamlanınca kontrol tahtaCiz'e döner. Bu «çağrı yığını» (call stack) kavramının basit hâlidir; derin özyineleme (Mayın Tarlası Flood Fill) ileride aynı mantığı kullanır.

3.2. Parametreli Fonksiyonlar

function dikdortgenCiz(x, y, w, h, renkR, renkG, renkB) {  fill(renkR, renkG, renkB);  noStroke();  rect(x, y, w, h);} function draw() {  background(20);  dikdortgenCiz(50, 50, 80, 60, 255, 100, 100);   // kırmızımsı  dikdortgenCiz(200, 120, 100, 40, 100, 200, 255); // mavimsi}

Aynı fonksiyon farklı argümanlarla birden çok kez kullanılır; kod tekrarı azalır.

Tablo 3.

3.3. return ile Değer Döndürme

mousePressed() içinde return; ifadesi fonksiyondan erken çıkış için kullanılır; oyun bittiğinde geri kalan satırlar çalışmaz. return aynı zamanda bir değer üretip çağıran yere iletebilir.

function acikKareMi(satirSutunToplami) {  return (satirSutunToplami % 2 === 0);} function draw() {  background(50);  for (let satir = 0; satir < 4; satir = satir + 1) {    for (let sutun = 0; sutun < 4; sutun = sutun + 1) {      if (acikKareMi(satir + sutun)) {        fill(230, 220, 200);      } else {        fill(60, 55, 50);      }      rect(sutun * 50, satir * 50, 50, 50);    }  }}

Fonksiyon, dama deseninde satır ve sütun toplamının çift olduğu hücreleri açık renge ayırır: acikKareMi(3) çağrısı false, acikKareMi(6) çağrısı true döndürür. Çağıran satır bu boolean değeri if koşulunda kullanır.

Tablo 4.

let sonuc = topla(3, 5); // sonuc değişkeni 8 olur function topla(a, b) {  return a + b;}

Kod bloğu: Oyun mantığında return — mesafe ve «içinde mi» testi (daire çarpışmasında kullanılan dist() ile uyumlu).

function mesafeHesapla(x1, y1, x2, y2) {  return dist(x1, y1, x2, y2);} function icindeMi(fareX, fareY, merkezX, merkezY, yaricap) {  let m = mesafeHesapla(fareX, fareY, merkezX, merkezY);  return m < yaricap;}

icindeMi(mouseX, mouseY, hedefX, hedefY, 40) ifadesi true veya false üretir; if koşulunda doğrudan kullanılabilir. Daire Tıklama oyunundaki dist(...) < hedefYaricap satırı bu yapının satır içi hâlidir; fonksiyona taşımak okunabilirliği artırır.

3.4. p5.js'te Yardımcı Çizim Fonksiyonları

Izgara ve şekil çizimini fonksiyonlara ayırmak, draw() gövdesini sade tutar.

Kod bloğu: Parametreli hücre ve tahta çizimi.

const HUCRE = 50;const SUTUN = 3;const SATIR = 3; function setup() {  createCanvas(SUTUN * HUCRE, SATIR * HUCRE);  noStroke();} function draw() {  background(30, 35, 45);  tahtaCiz(0, 0, SATIR, SUTUN, HUCRE);  merkezIsaretiCiz(width / 2, height / 2);} function tahtaCiz(baslangicX, baslangicY, satirSayisi, sutunSayisi, hucreBoyutu) {  for (let satir = 0; satir < satirSayisi; satir = satir + 1) {    for (let sutun = 0; sutun < sutunSayisi; sutun = sutun + 1) {      hucreCiz(        baslangicX + sutun * hucreBoyutu,        baslangicY + satir * hucreBoyutu,        hucreBoyutu,        satir,        sutun      );    }  }} function hucreCiz(x, y, boyut, satir, sutun) {  if ((satir + sutun) % 2 === 0) {    fill(240, 235, 220);  } else {    fill(70, 65, 60);  }  rect(x, y, boyut, boyut);} function merkezIsaretiCiz(merkezX, merkezY) {  fill(255, 80, 80);  ellipse(merkezX, merkezY, 12, 12);}

tahtaCiz üç kez farklı boyutta çağrılabilir; yalnızca argümanlar değişir. Bu yapı ilerleyen bölümlerdeki XOX oyununun görsel zeminini oluşturur.

Çağrı sırası izlemesi: SATIR = 2, SUTUN = 2 olan daha küçük bir tahtada tahtaCiz çağrısının ürettiği hucreCiz çağrıları sırasıyla şöyledir:

Tablo 5.

Dış döngü satir değerini, iç döngü sutun değerini değiştirir; her ikili için hucreCiz bir kez çağrılır. Toplam çağrı sayısı satirSayisi * sutunSayisi kadardır.

3.5. Modüler Kod ve Oyun Mimarisi

Oyun kodunda yaygın işlev ayrımı:

Tablo 6.

Görsel 2 draw() fonksiyonunun çizim, tahta ve skor gibi görevleri ayrı fonksiyonlara devretmesini; tahtaCiz içinde hucreCiz gibi iç içe çağrıları gösterir.

Kod bloğu: Daire Tıklama için hedef konumu güncelleme — artık fonksiyon kullanılabilir (bu ana başlıktan sonra refaktör örneği).

function yeniHedefKonumu() {  hedefX = random(50, width - 50);  hedefY = random(50, height - 50);} function mousePressed() {  if (oyunBitti) {    return;  }  let mesafe = dist(mouseX, mouseY, hedefX, hedefY);  if (mesafe < hedefYaricap) {    skor = skor + 1;    if (skor >= HEDEF_SKOR) {      oyunBitti = true;    } else {      yeniHedefKonumu();    }  }}

Bu parça, sayı tahmin oyununda satır satır draw() ve mousePressed() içinde yazılmış mantığın modüler hâlidir; yeniHedefKonumu() yalnızca koordinat atamasından sorumludur.

Kod bloğu: XOX taşı çizimi — parametreli tasCiz (ilerleyen bölümlerin 5. ana başlığına hazırlık).

function tasCiz(satir, sutun, hucre, oyuncu) {  let x = sutun * hucre + hucre / 2;  let y = satir * hucre + hucre / 2;  textAlign(CENTER, CENTER);  textSize(hucre * 0.55);  fill(30);  text(oyuncu, x, y);} function xoxTahtasiniCiz(tahta, hucre) {  for (let satir = 0; satir < 3; satir = satir + 1) {    for (let sutun = 0; sutun < 3; sutun = sutun + 1) {      if (tahta[satir][sutun] !== "") {        tasCiz(satir, sutun, hucre, tahta[satir][sutun]);      }    }  }}

Boş hücrelerde tasCiz çağrılmaz; dolu hücrelerde "X" veya "O" metni çizilir. Tahta verisi (tahta dizisi) ile görselleştirme (tasCiz) ayrılmış olur.

3.6. Değişken Kapsamı: Global ve Yerel

Fonksiyonlar büyüdükçe «bu x hangisi?» sorusu sık çıkar. Cevap kapsam (scope) kurallarındadır: bir değişkenin adı, yalnızca tanımlandığı bölgede geçerlidir. Yanlış yerde tanımlanan skor frame sonunda yok olur; yanlış adlandırılmış parametre ise global skoru güncellemezmiş gibi görünür.

Global değişkenler

setup() ve draw() dışında, sketch dosyasının üst düzeyinde let / const ile tanımlanan değişkenler global kabul edilir. Bunlara setup, draw, mousePressed ve kullanıcı tanımlı yardımcılardan erişilebilir; değer frame’ler arasında kalır.

let skor = 0;          // global — setup/draw dışındalet hedefX;let hedefY; function setup() {  createCanvas(400, 400);  hedefX = width / 2;  hedefY = height / 2;} function draw() {  background(240);  text("Skor: " + skor, 20, 30); // global skor okunur  circle(hedefX, hedefY, 40);} function skorArtir(artisMiktari) {  skor = skor + artisMiktari;    // global skor güncellenir}

Oyun durumu (skor, hedefX, oyunBitti) bu yüzden üst düzeyde tutulur: draw her frame yeniden çalışsa da global değer silinmez.

Tablo 7.

Yerel değişkenler ve draw()

Fonksiyon içinde let x = 5 yazılırsa x yalnızca o fonksiyon gövdesinde geçerlidir; fonksiyon bittiğinde yerel değişken yok olur. Parametreler de yerel kapsamdadır.

let skor = 0; // global — doğru yer function draw() {  let geciciX = mouseX; // yerel — yalnızca bu frame’de geçerli  // let skor = 0;     // YANLIŞ: her frame sıfırdan başlar, skor birikmez  background(240);  text(skor, 20, 30);  circle(geciciX, 200, 20);}

geciciX her frame fare konumuna göre yeniden hesaplanır; bunu global tutmaya gerek yoktur. Buna karşılık skor birikmeli olduğu için global (veya ileride nesne/dizi) olmalıdır.

Argüman ile parametre aynı şey değildir

Çağrı satırındaki değer argüman, fonksiyon tanımındaki yer tutucu parametredir. İsimler aynı olsa bile bunlar iki ayrı değişkendir: çağrı anında argümanın değeri parametreye kopyalanır.

function konumYaz(x) {  // buradaki x, çağıranın x'i değil — kopya (yerel parametre)  x = x + 50;  text(x, 20, 40);} function draw() {  background(255);  let x = 100;       // draw'ın yerel x'i  konumYaz(x);       // argüman: 100 → parametreye kopyalanır  text(x, 20, 80);   // hâlâ 100 — konumYaz içindeki atama burayı değiştirmez}

Tablo 8.

Ekranda üst satır 150, alt satır 100 görünür. Parametre adı x olsa da çağıranın x'i ile bağlantılı değildir; sayısal değerler kopyalanır. Bu yüzden dikdortgenCiz(x, y, w, h) içindeki x, çağrı sırasında gelen argümanın kopyasıdır — fonksiyon gövdesinde x'i değiştirmek, çağıran taraftaki değişkeni otomatik güncellemez.

Gölgeleme (shadowing)

Parametre veya yerel let adı, üst düzeydeki global ile aynı olursa fonksiyon içinde yerel olan kazanır; global o isimle görünmez. Buna gölgeleme (shadowing) denir.

let skor = 10; // global function skorArtir(skor) {   // parametre adı da skor — gölgeleme  skor = skor + 1;           // yalnızca yerel parametre artar  // global skor hâlâ 10} function draw() {  skorArtir(skor);           // argüman: 10 → yerel parametreye kopyalanır  text(skor, 20, 30);        // hâlâ 10 — beklenen artış olmaz}

Karışıklığı önlemek için parametre adını globalden ayırmak önerilir:

let skor = 10; function skorArtir(artisMiktari) {  skor = skor + artisMiktari; // global skor bilinçli güncellenir} function draw() {  // …  skorArtir(1);}

let secili = "gunes"; function setup() {  createCanvas(400, 400);  background(230); // bir kez} function draw() {  // boş — şekiller tıklamayla birikir} function mousePressed() {  if (mouseX < 40 && mouseY < 40) {    background(230); // temizle    return;  }  if (secili === "gunes") {    gunesCiz(mouseX, mouseY);  } else if (secili === "insan") {    insanCiz(mouseX, mouseY);  } else if (secili === "agac") {    agacCiz(mouseX, mouseY);  } else if (secili === "ev") {    evCiz(mouseX, mouseY);  } else if (secili === "kus") {    kusCiz(mouseX, mouseY);  }} // keyPressed — YZ / ekip arkadaşı yazdı; siz içini bilmeden kullanıyorsunuz

Özet

Fonksiyonlar, adlandırılmış ve gerektiğinde tekrar çağrılabilen kod bloklarıdır. Tanım function ad() { … } biçimindedir; çağrı ad(); ile yapılır — parantezler bloğun o anda çalıştırılacağını belirtir. p5.js’in setup() ve draw() fonksiyonları kütüphane tarafından otomatik çağrılır; mousePressed gibi olay fonksiyonları da benzerdir. Kullanıcı tanımlı fonksiyonlar ise geliştiricinin açıkça çağırdığı yardımcı bloklardır. Modülerlik, uzun draw() gövdelerini çizim, girdi, mantık ve hesap görevlerine ayırarak okunabilirliği ve bakımı artırır; tahta bozuksa tüm draw() yerine tahtaCiz incelenir. Yeniden kullanılabilirlik, aynı yardımcının farklı argümanlarla tekrar çağrılmasından doğar. Parametreler fonksiyona dış veri taşır; çağrı sırasındaki somut değerler argümandır (dikdortgenCiz(50, 80, 100, 40)). Aynı fonksiyon farklı argümanlarla birçok kez kullanılabilir; böylece kopyala-yapıştır azalır. return hem koşul sağlanmadığında erken çıkış (if (oyunBitti) { return; }) hem de topla, acikKareMi, icindeMi gibi yardımcılarda hesaplanmış değer döndürme için kullanılır. Dönüş değeri atama veya koşul ifadesinde tüketilir. Kapsam (scope), bir değişken adının geçerli olduğu bölgedir. setup/draw dışında tanımlanan skor, hedefX gibi değişkenler globaldir; frame’ler arasında kalır ve yardımcılardan okunup yazılabilir. Fonksiyon içindeki let ve parametreler yereldir; fonksiyon (veya draw frame’i) bitince yok olur. Bu yüzden skor draw içinde let skor = 0 ile tanımlanmaz. Argüman ile parametre aynı isimde olsa bile ayrıdır: çağrıda değer kopyalanır; parametreyi değiştirmek çağıranın değişkenini otomatik güncellemez. Parametre adı global ile örtüşürse gölgeleme olur; skorArtir(artisMiktari) gibi ayırt edici adlar tercih edilir. p5.js’te tahtaCiz, hucreCiz, hedefCiz, arkaPlanCiz gibi görevler ayrı fonksiyonlara bölündüğünde draw() kısa ve niyet odaklı kalır; iç içe çağrılar (tahtaCiz → hucreCiz) görev hiyerarşisini yansıtır.

Neler Öğrendik?

Soru 1 Aşağıdakilerden hangisi fonksiyon çağrısıdır?

Soru 2 function topla(a, b) { return a + b; } tanımında a ve b ne olarak adlandırılır?

Soru 3 mousePressed() içinde if (oyunBitti) { return; } satırının amacı nedir?

Soru 4 I. Parametreli fonksiyonlar kod tekrarını azaltır. II. return a + b; ifadesi toplamı çağıran yere iletir. III. Modüler kod, görevleri isimlendirilmiş parçalara ayırır.

Hangileri doğrudur?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: C

• Çözüm: hedefCiz(); fonksiyonu çalıştırır. A seçeneği tanımdır; return ve if ayrı yapılardır.
• İlgili Konu: 3.1. Fonksiyon Kavramı ve Sözdizimi

Soru 2: Doğru Cevap: B

• Çözüm: Tanımdaki a ve b parametredir. topla(3, 5) çağrısındaki 3 ve 5 argümandır.
• İlgili Konu: 3.2. Parametreli Fonksiyonlar

Soru 3: Doğru Cevap: C

• Çözüm: return; değer döndürmeden fonksiyonu sonlandırır; oyun bittiğinde tıklama işlenmez.
• İlgili Konu: 3.3. return ile Değer Döndürme

Soru 4: Doğru Cevap: E

• Çözüm: Üç ifade de modüler fonksiyon kullanımını doğru tanımlar.
• İlgili Konu: 3.5. Modüler Kod ve Oyun Mimarisi

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.). Functions. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
• Mozilla Developer Network. (n.d.). return. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return
• Mozilla Developer Network. (n.d.). Scope. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/Scope
• p5.js Foundation. (n.d.). p5.js reference. https://p5js.org/reference/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Ana Başlık 4. Oyun Döngüsü, FPS ve frameRate

Amaç: Oyun döngüsü ile FPS/frameRate ilişkisini öğreterek animasyon zamanlamasının temelini kurmak.

Öğrenme Çıktıları:

• Oyun döngüsünün update–draw ritmini açıklar.
• FPS kavramını tanımlar.
• frameRate ile hedef FPS değerini ayarlar.
• Düşük FPS’in harekete etkisini tartışır.

Anahtar Sözcükler: oyun döngüsü, FPS, frameRate, frame, zamanlama

Giriş

Döngü ve fonksiyonlarla sketch modülerleştikten sonra hareketin “ne kadar hızlı?” sorusu belirir. Oyun döngüsü her frame’de güncelleme ve çizimi yineler; saniyedeki frame sayısı FPS’dir. p5.js frameRate ile hedef hızı ayarlar; cihaz meşgulse gerçek FPS düşebilir.

Bu ana başlık döngü–FPS ilişkisini ve frameRate kullanımını kurar. Frame başına sabit piksel eklemenin farklı makinelerde farklı hız üretmesi sorunu bir sonraki ana başlıkta deltaTime ile çözülür. 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. Bu ana başlığın çıktısı, sonraki oyunda yeniden kullanılabilecek bir iskelet oluşturur. Kod okumada izlenen sıra, veri modelinden başlayıp güncelleme ve çizime doğru ilerler.

4.1. Oyun Döngüsüne Genel Bakış

p5.js sketch'inde döngü şu biçimde özetlenebilir:

1. setup() — tuval boyutu, başlangıç değişkenleri, bir kerelik ayarlar.
2. draw() — her frame'de: arka plan, nesne konumlarının güncellenmesi, çizim.
3. p5.js, sketch durdurulana kadar 2. adımı sürekli tekrarlar.

Önceki bölümlerdeki numaralı akış bu yapıyı doğrusal biçimde anlatmıştı; burada vurgu, draw() gövdesinin hem güncelleme hem çizim taşıyabileceğidir. Küçük örneklerde ikisi aynı fonksiyonda yazılır; büyük projelerde guncelle() ve ciz() gibi ayrı fonksiyonlara bölünmesi modülerlik sağlar (önceki bölümlerdeki fonksiyon kavramı).

setup() ile draw() arasındaki ayrım yalnızca sözdizimsel değildir; performans açısından da anlamlıdır. createCanvas(), görsel yükleme veya büyük dizi oluşturma gibi maliyetli işlemler setup() içinde bir kez yapılır; aynı işlemler yanlışlıkla draw() içine yazılırsa her frame'de tekrarlanır ve FPS düşer. Bu nedenle bir sketch yavaş çalıştığında ilk kontrol noktası, draw() gövdesinde her frame gerekmeyen bir işlemin bulunup bulunmadığıdır.

Kod bloğu: Her frame'de konumunu sabit adımla ilerleyen basit top.

let topX = 50;let topY = 200;const TOP_YARICAP = 25; function setup() {  createCanvas(500, 300);  noStroke();} function draw() {  background(30, 35, 50);   topX = topX + 3; // Her frame 3 piksel sağa   if (topX > width + TOP_YARICAP) {    topX = -TOP_YARICAP;  }   fill(255, 200, 80);  ellipse(topX, topY, TOP_YARICAP * 2, TOP_YARICAP * 2);}

Bu kod çalışır; ancak hız, saniyede kaç frame üretildiğine bağlıdır. Bir sonraki alt bölümlerde bu bağımlılık ölçülür ve giderilir.

Güncelleme ve çizim ayrımı: Modüler kod yazımında (Bölüm 2'in 3. ana başlığı) draw() gövdesi inceltilir:

function draw() {  background(30, 35, 50);  guncelleTop();  cizTop();} function guncelleTop() {  topX = topX + 3;  if (topX > width + TOP_YARICAP) {    topX = -TOP_YARICAP;  }} function cizTop() {  fill(255, 200, 80);  ellipse(topX, topY, TOP_YARICAP * 2, TOP_YARICAP * 2);}

«Konum değiştir» ile «ekrana çiz» ayrıldığında hata ayıklama kolaylaşır: top görünmüyorsa cizTop, yanlış hızda gidiyorsa guncelleTop incelenir. deltaTime eklendiğinde yalnızca guncelleTop içindeki formül değişir; çizim aynı kalır.

4.2. FPS ve frameRate()

p5.js varsayılan olarak hedef frame hızını 60 FPS civarında tutmaya çalışır; donanım ve sketch yükü buna ulaşmayı engelleyebilir. Hedef hız frameRate(saniyeBasinaFrame) ile ayarlanır:

Tablo 1.

Kod bloğu: FPS değerini ekranda gösterme.

function setup() {  createCanvas(400, 200);  frameRate(60);} function draw() {  background(40);  fill(255);  textSize(18);  textAlign(LEFT, TOP);  text("Olculen FPS: " + nf(frameRate(), 0, 1), 15, 15);}

nf(sayi, solBasamak, sagBasamak) p5.js fonksiyonudur; ondalıklı (veya tam) sayıyı biçimlendirilmiş metne çevirir. Üç parametrenin anlamı:

Tablo 2.

nf(frameRate(), 0, 1) bu yüzden ekranda 58.273 yerine 58.3 gibi kısa bir metin üretir. Diğer örnekler:

Tablo 3.

Argümansız çağrılan frameRate() o anda ölçülen ortalama frame hızını verir; sketch ağırlaştıkça değer hedefin altına düşebilir. nf yalnızca gösterimi düzenler; FPS hesabını değiştirmez.

Ekran, yenileme hızı (Hz) ve FPS

Oyunun ürettiği FPS ile monitörün yenileme hızı aynı şey değildir. Yenileme hızı hertz (Hz) cinsinden ölçülür: ekranın saniyede kaç kez yeni bir görüntü çizdiğini söyler. FPS ise yazılımın (burada draw()’ın) saniyede kaç frame hesapladığını söyler. İkisi yakın olsa da zincirin iki halkasıdır: oyun frame üretir → monitör o frame’leri (veya aralarından seçtiklerini) gösterir.

Tablo 4.

Çoğu ofis ve dizüstü ekranı hâlâ 60 Hz’tir. Oyun / spor odaklı monitörlerde 120–144 Hz yaygındır; üst segmentte 240 Hz ve üzeri görülür. Telefon ve tablet ekranlarında da 90 / 120 Hz paneller sıklaşmıştır. Tarayıcılar çizimi çoğu zaman monitörün yenileme döngüsüyle eşlemeye çalışır (vsync benzeri davranış): böylece yırtılma (tearing) azalır, fakat oyun FPS’i paneli aşsa bile ekranda o kadar “fazla” frame görünmeyebilir — fazlası atılır veya birleştirilir.

Bu yüzden frameRate(60) masaüstünde sıkça doğal bir hedeftir. Daha yüksek Hz’li monitörde frameRate() çağrılmazsa p5.js daha yüksek FPS’e çıkmaya çalışabilir; frame başına sabit piksel ekleyen hareket o zaman bile farklı tempo üretir. Hedefi açıkça vermek paneller arası farkı azaltır; asıl güvenilir çözüm yine deltaTime’dır (sonraki alt başlıklar).

Oyunlarda FPS neden önemli?

• Akıcılık: Düşük ve dalgalı FPS, hareketi kesik kesik gösterir; özellikle kamera dönünce veya kalabalık sahnelerde rahatsız eder.
• Tepki hissi: Daha sık çizilen frame, fare / dokunuş sonucunun ekranda daha erken görünmesine yardımcı olabilir (giriş gecikmesi yalnızca FPS’e bağlı değildir; yine de düşük FPS gecikmeyi büyütür).
• Adalet ve tutarlılık: Frame’e bağlı fizik / hareket varsa yüksek FPS’li oyuncu avantaj (veya dezavantaj) yaşayabilir — bu ana başlığın asıl teknik kaygısı budur.
• Okunabilirlik: Hızlı nesnelerde (mermi, top) seyrek frame, “nereye gitti?” hissini bozar.

Yüksek FPS ve donanım

Daha fazla frame üretmek CPU/GPU’ya daha çok iş yükler: güç tüketimi ve ısınma artar, dizüstünde batarya daha çabuk biter, fanlar yükselir. Bu yüzden oyunlar sıklıkla FPS sınırı (ör. 60’a kilitleme), dikey senkron, veya “pil / performans” modları sunar. p5.js sketch’inizde gereksiz çizim veya setup’a ait işleri draw içine koymak da FPS’i düşürür — yani “yüksek FPS iyi” demek, sınırsız hedef demek değildir; yeterli ve stabil tempo + doğru hareket formülü (deltaTime) bu dersteki dengedir.

Pekiştirme: kavramı mini senaryoya bağlama

1. Veri: Hangi değişkenler durumu tutuyor?
2. Güncelleme: Her frame veya olayda ne değişiyor?
3. Çizim: Görünenler hangi alanlardan geliyor?
4. Kural: Oyuncu eylemi hangi koşulla kabul/red?

Eksik adımı (sınır, başlangıç değeri, tek seferlik olay) şimdi tamamlamak, sonra büyük sketch içinde aramaktan kolaydır.

Özet

Oyun döngüsü, oyunun çalıştığı süre boyunca yinelenen girdi okuma, mantık güncelleme ve çizim adımlarıdır; p5.js’te bu ritmin görünen yüzü setup’tan sonra sürekli çağrılan draw fonksiyonudur. Küçük sketch’lerde güncelleme ile çizim aynı gövdede yazılabilir; ayrı fonksiyonlara bölündüğünde ise hata ayıklama kolaylaşır, çünkü görünmeyen nesne çizim tarafında, yanlış hızda ilerleyen nesne güncelleme tarafında aranır. Ayrım performans açısından da anlamlıdır: tuval oluşturma veya büyük veri hazırlama gibi maliyetli işler setup içinde bir kez yapılmazsa her frame tekrarlanır ve FPS düşer.

FPS, bir saniyede draw fonksiyonunun kaç kez çalıştığını gösterir; burada frame sözcüğü geometrik bir şekli değil, draw çağrısının tek bir tekrarını anlatır. frameRate(60) yalnızca hedefi bildirir; donanım ve çizim yükü bu hedefin tutturulmasını engelleyebilir. Argümansız frameRate() o anda ölçülen değeri döndürür ve nf ile biçimlendirilerek ekranda gösterilebilir. Monitörün hertz cinsinden yenileme hızı ile sketch’in ürettiği FPS ayrı büyüklüklerdir; tarayıcı çizimi yenileme döngüsüne eşlemeye çalıştığı için fazladan üretilen frame’ler ekrana yansımayabilir. Bu belirsizlik, frame başına sabit piksel ekleyen x += 3 gibi bir hareketin farklı cihazlarda farklı tempo üretmesinin nedenidir; hızı geçen gerçek süreye bağlayan deltaTime bir sonraki ana başlıkta ele alınır.

Neler Öğrendik?

Soru 1 FPS neyi ifade eder?

Soru 2 frameRate(30) tipik olarak ne yapar?

Soru 3 Sabit x += 5 hareketi düşük FPS’te genelde nasıl görünür?

Soru 4 Oyun döngüsünün pedagojik özü nedir?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: A

• Çözüm: Frames per second.
• İlgili Konu: 4.2. FPS ve frameRate

Soru 2: Doğru Cevap: A

• Çözüm: Hedef FPS istenen değere çekilir.
• İlgili Konu: 4.2. FPS ve frameRate

Soru 3: Doğru Cevap: A

• Çözüm: Frame seyrelince sabit adım hareketi yavaşlatır.
• İlgili Konu: 4.1. Oyun Döngüsü

Soru 4: Doğru Cevap: A

• Çözüm: Update–draw ritmi süreklidir.
• İlgili Konu: 4.1. Oyun Döngüsü

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.
• Nystrom, R. (2014). Game Programming Patterns. gameprogrammingpatterns.com — Game Loop bölümü.
• Nystrom, R. (2014). Game Programming Patterns. Genever Benning. https://gameprogrammingpatterns.com/
• Nystrom, R. (2014). Game loop. In Game Programming Patterns. https://gameprogrammingpatterns.com/game-loop.html
• p5.js Foundation. (n.d.). deltaTime. p5.js Reference. https://p5js.org/reference/p5/deltaTime/
• p5.js Foundation. (n.d.). frameRate. p5.js Reference. https://p5js.org/reference/p5/frameRate/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Bölüm 2 — Ek Sorular

Her ana başlık için 10 çoktan seçmeli değerlendirme sorusu. Bölüm sonu sınav veya pekiştirme amaçlıdır.

Ana Başlık 1 için 10 Soru

SORU 1: for başlığındaki üç parça sırasıyla neyi kontrol eder?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.1

SORU 2: draw() içinde while (true) yazmak genelde neye yol açar?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.2

SORU 3: break ne yapar?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.3

SORU 4: continue ne yapar?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.4

SORU 5: «for, while ve Döngü Kontrolü» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 1.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 1.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 1.uygulama

SORU 8: Bu ana başlıkta (for, while ve Döngü Kontrolü) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 1.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 1.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 1.uygulama

Ana Başlık 2 için 10 Soru

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

Doğru cevap: C

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.1

SORU 2: Dama deseni için tipik ifade hangisidir?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.2

SORU 3: sin animasyonda genelde ne sağlar?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.3

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

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.4

SORU 5: «İç İçe Döngüler, Izgara ve Animasyon» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 2.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 2.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 2.uygulama

SORU 8: Bu ana başlıkta (İç İçe Döngüler, Izgara ve Animasyon) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 2.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 2.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 2.uygulama

Ana Başlık 3 için 10 Soru

SORU 1: hedefCiz(); satırı ne yapar?

Doğru cevap: B

Genel açıklama: Parantezli isim fonksiyon çağrısıdır; tanım değildir. İlgili Konu: 4.1. Fonksiyon Kavramı ve Sözdizimi

SORU 2: [Kod okuma] Aşağıdaki kod çalıştırıldığında ekrana yazdırılan değer nedir? Kod 1.

function topla(a, b) {  return a + b;} let sonuc = topla(4, 7);// sonuc değişkeninin değeri soruluyor

Doğru cevap: B

Genel açıklama: return a + b toplamı döndürür; sonuc 11 olur. İlgili Konu: 4.3. return ile Değer Döndürme

SORU 3: return a + b; ile return; arasındaki fark nedir?

Doğru cevap: B

Genel açıklama: return değer sonuç iletir; çıplak return erken çıkıştır. İlgili Konu: 4.3. return ile Değer Döndürme

SORU 4: Sketch'te tuval oluşturmak için createCanvas(400, 400) yazılmıştır; ancak fonksiyon adı yanlışlıkla function kurulum() olarak tanımlanmış ve içinde createCanvas çağrılmıştır. p5.js tuvali oluşturmaz. En olası neden nedir?

Doğru cevap: B

Genel açıklama: setup p5.js'in tanıdığı sabit başlangıç adıdır; isim değişince otomatik çağrılmaz. İlgili Konu: 4.1. Fonksiyon Kavramı ve Sözdizimi

SORU 5: Modüler kodda draw() içinde birçok yardımcı fonksiyon çağırmak neden tercih edilir?

Doğru cevap: B

Genel açıklama: Modülerlik bakım ve okumayı kolaylaştırır. İlgili Konu: 4.5. Modüler Kod ve Oyun Mimarisi

SORU 6: [Kod okuma] oyunBitti = true iken aşağıdaki mousePressed() çağrıldığında ne olur? Kod 2.

function mousePressed() {  if (oyunBitti) {    return;  }  skor = skor + 1;}

Doğru cevap: B

Genel açıklama: return sonrası satırlar çalışmaz; skor güncellenmez. İlgili Konu: 4.3. return ile Değer Döndürme

SORU 7: [Kod okuma] Aşağıdaki draw() gövdesinde kaç kez hucreCiz çağrılır? (SATIR = 2, SUTUN = 2) Kod 3.

function draw() {  background(0);  for (let satir = 0; satir < SATIR; satir = satir + 1) {    for (let sutun = 0; sutun < SUTUN; sutun = sutun + 1) {      hucreCiz(sutun * 40, satir * 40, 40, satir, sutun);    }  }}

Doğru cevap: C

Genel açıklama: 2×2 = 4 hücre; her biri bir fonksiyon çağrısı. İlgili Konu: 4.4. p5.js'te Yardımcı Çizim Fonksiyonları

SORU 8: yeniHedefKonumu() fonksiyonu Daire Tıklama'da hangi görevi toplar?

Doğru cevap: B

Genel açıklama: Koordinat ataması tek fonksiyonda toplanır; tekrar azalır. İlgili Konu: 4.5. Modüler Kod ve Oyun Mimarisi

SORU 9: I. Kullanıcı tanımlı fonksiyonlarda camelCase örfi yaygındır.
II. draw yerine Draw yazmak p5.js davranışını değiştirmez.
III. Parametreli fonksiyon aynı kodu farklı verilerle tekrar kullanmayı kolaylaştırır.

Hangileri doğrudur?

Doğru cevap: B

Genel açıklama: I ve III doğru. II yanlış; p5.js küçük harf draw arar. İlgili Konu: 4.1–4.3

SORU 10: hucreCiz(x, y, boyut, satir, sutun) içinde (satir + sutun) % 2 kullanılmasının amacı nedir?

Doğru cevap: B

Genel açıklama: Dama deseni parametreli hücre fonksiyonunda uygulanır. İlgili Konu: 4.4

Ana Başlık 4 için 10 Soru

SORU 1: FPS neyi ifade eder?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 4.1

SORU 2: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 3: Sabit x += 5 hareketi düşük FPS’te genelde nasıl görünür?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 4.3

SORU 4: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 5: «Oyun Döngüsü, FPS ve frameRate» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 4.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 4.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 4.uygulama

SORU 8: Bu ana başlıkta (Oyun Döngüsü, FPS ve frameRate) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 4.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 4.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 4.uygulama

Ana Başlık 1 — Açık Uçlu

A1. «for, while ve Döngü Kontrolü» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «for, while ve Döngü Kontrolü» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 2 — Açık Uçlu

A1. «İç İçe Döngüler, Izgara ve Animasyon» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «İç İçe Döngüler, Izgara ve Animasyon» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 3 — Açık Uçlu

A1. draw() içinde 50 satırlık tek blok yerine fonksiyonlara ayırmanın bakım açısından faydalarını açıklayın.

Örnek yanıt unsurları: Okunabilirlik, hata ayıklama, yeniden kullanım, ekip çalışması.
Değerlendirme: En az iki gerekçe somut mu?

A2. setup yerine kurulum adlı bir fonksiyon tanımlansa p5.js sketch'inde ne beklenir? Neden?

Örnek yanıt unsurları: p5.js yalnızca belirli adları otomatik çağırır; tuval oluşmaz.
Değerlendirme: Yerleşik olay adı kavramı doğru mu?

A3. XOX tahtası için tahtaCiz ve tasCiz(x, y, tur) gibi iki fonksiyonun sorumluluklarını nasıl bölerdiniz?

Örnek yanıt unsurları: tahta = ızgara/hücre; taş = X veya O sembolü; parametrelerle konum.
Değerlendirme: Görev ayrımı net mi?

Ana Başlık 4 — Açık Uçlu

A1. «Oyun Döngüsü, FPS ve frameRate» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Oyun Döngüsü, FPS ve frameRate» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.