Bölüm 1 — Amaç ve Kapsam

Genel Amaç

Bu bölümün temel amacı, programlamaya sıfırdan başlayan bireye algoritmik düşünce, JavaScript temel yapıları ve p5.js ile etkileşimli çizim becerisini kazandırmak; değişken, operatör ve koşullu ifadelerle karar veren sketch’ler yazdırarak fare etkileşimli ilk mini oyuna güvenli bir geçiş hazırlamaktı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: Programlama, p5.js ve İlk Sketch

Ana Başlık 2: Koordinat Sistemi, Çizim, setup ve draw

Ana Başlık 3: Değişkenler, Operatörler ve Koşullu İfadeler

Ana Başlık 4: Fare Girdisi ve Daire Tıklama Oyunu

Ana Başlık 1. Programlama, p5.js ve İlk Sketch

Amaç: Programlama ve algoritma kavramlarını tanıtarak p5.js Web Editor ortamını kurmak ve ilk sketch’i çalıştırmak.

Öğrenme Çıktıları:

• Programlama ve algoritma kavramlarını tanımlar.
• Yaratıcı kodlamanın oyun eğitimindeki yerini açıklar.
• p5.js Web Editor’da yeni sketch oluşturur ve çalıştırır.
• Sketch dosya yapısını ve temel çalışma akışını ayırt eder.

Anahtar Sözcükler: programlama, algoritma, yaratıcı kodlama, p5.js, Web Editor, sketch

Giriş

Oyun programlama, ekranda hareket eden şekillerden önce düşünme biçimiyle başlar. Bilgisayara verilecek iş, belirsiz bir istek değil; sonlu, açık ve sıralı adımlar dizisi olmalıdır. Bu dizinin adı algoritmadır; adımların bir dilde yazılması ise programlamadır. Günlük bir çay demleme sırası bile algoritmik düşünceye örnektir: sırayı bozmak sonucu bozar.

Bu ana başlıkta programlama ve algoritma kısaca tanımlanır; ardından yaratıcı kodlama bağlamında p5.js seçilir. p5.js’in eğitimdeki gücü, kurulum yükünü düşürüp her denemenin tarayıcıda hemen görünmesidir. Web Editor ile hesap oluşturma, yeni sketch açma ve Run ile çalıştırma adım adım işlenir. Henüz koordinat geometrisi ve setup/draw döngüsünün ayrıntısına girilmez; önce ortamın “çalışır bir sayfa” olduğu güveni kurulur. Böylece bir sonraki ana başlıkta çizim komutları ve animasyon iskeleti sağlam bir zemin üzerinde anlatılabilir. 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.

1.1. Programlama Nedir? Algoritmik Düşünce

Günlük yaşamda algoritmalar fark edilmeden sıkça kullanılır. Bir çay demleme süreci düşünüldüğünde adımlar şu şekilde sıralanabilir: suyu kaynat, demliğe çay koy, kaynar suyu ekle, belirli süre bekle, servis et. Bu adımlardan herhangi birinin atlanması veya yanlış sırada uygulanması istenen sonucu vermez. Bilgisayar programları da benzer mantıkla çalışır; ancak talimatların belirsizliğe yer bırakmayacak kadar kesin olması gerekir.

Algoritmik düşünce, büyük bir problemi daha küçük ve yönetilebilir alt problemlere ayırma becerisidir. Örneğin "basit bir oyun yap" ifadesi tek başına bir bilgisayar talimatı olamaz; ancak "ekranda bir daire çiz", "daireyi sağa hareket ettir", "daire kenara değdiğinde yönünü tersine çevir" gibi alt adımlara bölündüğünde uygulanabilir hale gelir. Oyun programlama eğitiminin temelinde bu parçalama ve sıralama becerisi yatar.

Programlama dilleri, algoritmaların bilgisayara aktarılması için kullanılan biçimsel sistemlerdir. Bu kitapta JavaScript dili ve onun görsel kütüphanesi olan p5.js kullanılacaktır. JavaScript, web tarayıcılarında ek bir eklenti kurmadan çalıştırılabilen ve günümüzde yaygın biçimde kullanılan dillerden biridir.

1.2. Yaratıcı Kodlama ve p5.js Kütüphanesi

p5.js kütüphanesi, 2001 yılında Massachusetts Teknoloji Enstitüsü'nde (MIT) geliştirilen Processing dilinin felsefesini modern web teknolojilerine taşır. Processing'in yaratıcıları Ben Fry ve Casey Reas, programlamayı sanatçılar ve tasarımcılar için erişilebilir kılma amacı gütmüştür. p5.js ise 2014 yılında Lauren McCarthy önderliğinde JavaScript ve HTML5 tabanlı olarak hayata geçirilmiştir.

p5.js'in oyun programlama eğitimindeki temel avantajları şu şekilde özetlenebilir:

• Kurulum gerektirmeme: p5.js Web Editor üzerinden doğrudan tarayıcıda kod yazılabilir ve çalıştırılabilir.
• Anında görsel geri bildirim: draw() sürekli yenilendiği için kod değişikliklerinin sonucu kısa sürede ekranda görülür; soyut kavramlar görsel çıktıyla eşleştirilir.
• Görsel metafor: "Sketch" (taslak) kavramı, programlamayı sanatsal bir üretim süreci olarak konumlandırır.
• Geniş topluluk: The Coding Train (Daniel Shiffman) ve Patt Vira gibi YouTube / web eğitimleri; GitHub üzerindeki açık kaynak depolar; OpenProcessing gibi topluluğun sketch’lerini paylaştığı platformlar zengin bir ekosistem sunar. Başkalarının kodlarını inceleyerek öğrenmek yaygındır.

Klasik metin tabanlı programlama öğretiminde öğrenilen soyut kavramlar (değişken, döngü, koşul) ilk başta yalnızca konsol çıktısı olarak görülür; bu durum motivasyonu düşürebilir. p5.js ile aynı kavramlar renkli şekiller, hareketli nesneler ve oyun mekanikleri üzerinden deneyimlenir.

1.3. p5.js Web Editor Kurulumu ve İlk Sketch

p5.js ile çalışmaya başlamak için p5.js Web Editor kullanıldığında ayrı bir yazılım indirmeye gerek yoktur. p5.js Web Editor (https://editor.p5js.org/) adresine gidildiğinde hazır bir proje şablonu açılır. Bu kitabın ilk bölümlerinde Web Editor yeterlidir ve örnekler buna göre anlatılır.

Aynı p5.js kodu, birçok programcının kullandığı yerel editörlerde de yazılabilir — örneğin Visual Studio Code (VS Code) veya benzeri bir editör. Yerel kurulumda tipik adımlar şunlardır:

1. Bilgisayara VS Code (veya tercih ettiğiniz editör) kurulur.
2. Boş bir klasör açılır; içine en az iki dosya konur: index.html ve sketch.js.
3. index.html, p5.js kütüphanesini (çoğu zaman CDN üzerinden) ve sketch.js dosyasını yükler; sketch.js içine setup / draw yazılır.
4. Klasör bir yerel sunucu ile tarayıcıda açılır (VS Code’da yaygın yol: Live Server eklentisi). index.html dosyasına çift tıklamak bazı tarayıcılarda kısıtlara takılabilir; bu yüzden yerel sunucu önerilir.

Örnek index.html iskeleti (CDN ile — p5.js uzak adresten yüklenir):

<!DOCTYPE html><html lang="tr"><head>  <meta charset="utf-8"/>  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script></head><body>  <script src="sketch.js"></script></body></html>

Editör arayüzü dört temel bölümden oluşur:

1. Dosya paneli (sol): Projedeki dosyaların listelendiği kenar çubuğu (sketch.js, index.html, style.css).
2. Kod paneli: JavaScript/p5.js kodunun yazıldığı alan; satır numaraları ve sketch.js sekmesi bulunur.
3. Önizleme paneli (sağ): Kodun çalıştırıldığında oluşan görsel çıktı.
4. Konsol (alt): Hata mesajlarının ve console.log() çıktılarının görüntülendiği alan.

Görsel 1 p5.js Web Editor’ün bir ekran görüntüsüdür. Solda dosya listesi ve kod paneli (sketch.js), üstte Play / Stop, sağda önizleme (tuval), altta konsol görülür. Örnekte frameCount ile hareket eden daire önizlemede; console.log çıktısı konsolda listelenir.

Her p5.js projesi bir "sketch" (taslak) olarak adlandırılır. Sketch dosyası en az iki fonksiyon içerir: setup() ve draw(). İlk sketch aşağıdaki gibi görünür:

Kod bloğu: p5.js'in en basit sketch iskeleti — yalnızca gri arka plan çizer; // ve /* … */ yorum örnekleri içerir.

function setup() {  /* Tuval boyutunu bir kez ayarlar.     Bu blok, birden fazla satırı kapsayan yorum örneğidir. */  createCanvas(400, 400); // 400x400 piksel tuval oluştur} function draw() {  background(220); // Açık gri arka plan}

createCanvas(400, 400) komutu, 400 piksel genişliğinde ve 400 piksel yüksekliğinde bir çizim alanı (canvas) oluşturur. background(220) komutu ise draw() her çalıştığında arka planı açık gri renge boyar. Renk değeri 0 (siyah) ile 255 (beyaz) arasında bir sayıdır.

Kod yazıldıktan sonra ▶ (Play) düğmesine basıldığında sketch çalışır ve sağ panelde gri bir kare görünür. Kaydetmek için File > Save veya Ctrl+S (Mac: Cmd+S) kullanılabilir; hesap oluşturulduğunda projeler bulutta saklanır.

Özet

Programlama, bir bilgisayara belirli bir görevi yaptırmak üzere adım adım yazılan talimatlar bütünüdür; algoritma ise bir hedefe ulaşmak için izlenen sonlu, açık ve sıralı adımlar dizisidir. Çay demleme gibi gündelik bir rutin bile bu tanıma uyar, çünkü adımlardan biri atlandığında veya sıra bozulduğunda sonuç değişir. Algoritmik düşüncenin oyun bağlamındaki karşılığı, büyük bir isteği yönetilebilir alt problemlere ayırmaktır: “basit bir oyun yap” ifadesi tek başına bir talimat sayılmazken, ekrana daire çizmek, daireyi sağa hareket ettirmek ve kenara değince yönü tersine çevirmek gibi adımlar uygulanabilir hâle gelir.

Yaratıcı kodlama, yazılımın teknik disiplinini görsel ifade biçimleriyle birleştirerek etkileşimli çıktıyı öğrenmenin merkezine koyar. p5.js bu yaklaşımı tarayıcıda düşük sürtünmeyle sunar; Processing’in felsefesini modern web teknolojilerine taşır, kurulum yükünü kaldırır ve anında görsel geri bildirim sağlar. Buna karşılık p5.js bir oyun motoru değildir: hazır fizik, sahne yönetimi ve varlık sistemleri sunmadığı için mekanikler bu kitapta sıfırdan yazılır.

Uygulama ortamı p5.js Web Editor’dır; dosya paneli, kod alanı, önizleme ve konsol birlikte okunur, console.log çıktıları alt panelde izlenir. Her proje bir sketch’tir ve en az setup ile draw fonksiyonlarını içerir; en sade örnek createCanvas ile tuvali kurup background ile arka planı boyar. İlk sketch’in amacı sözdizimi ezberi değil, çalışan bir sayfanın güvenini kurmaktır; koordinat sistemi ve setup/draw ayrımı bir sonraki ana başlıkta ele alınır.

Neler Öğrendik?

Soru 1 Algoritma için en uygun tanım hangisidir?

Soru 2 p5.js Web Editor’da sketch’i çalıştırmak için tipik adım nedir?

Soru 3 Yaratıcı kodlamanın eğitimdeki temel katkısı nedir?

Soru 4 “Basit bir oyun yap” ifadesi neden doğrudan talimat sayılmaz?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Algoritma sonlu, açık, sıralı adımlar ister.
• İlgili Konu: 1.1. Programlama Nedir? Algoritmik Düşünce

Soru 2: Doğru Cevap: B

• Çözüm: Editor’da Run tuval çıktısını üretir.
• İlgili Konu: 1.3. p5.js Web Editor Kurulumu ve İlk Sketch

Soru 3: Doğru Cevap: A

• Çözüm: Anında görsel geri bildirim bilişsel yükü düşürür.
• İlgili Konu: 1.2. Yaratıcı Kodlama ve p5.js Kütüphanesi

Soru 4: Doğru Cevap: A

• Çözüm: Büyük istek alt problemlere ayrılmalıdır.
• İlgili Konu: 1.1. Programlama Nedir? Algoritmik Düşünce

Yararlanılan Kaynaklar

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

• Coolors. (n.d.). The super fast color palettes generator. https://coolors.co/
• Genuary. (n.d.). GENUARY. https://genuary.art/
• Google. (n.d.). Color picker (arama: “color picker”). https://www.google.com/search?q=color+picker
• HTML Color Codes. (n.d.). Color Picker. https://htmlcolorcodes.com/color-picker/
• jsDelivr. (n.d.). jsDelivr — a free CDN for open source. https://www.jsdelivr.com/
• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Microsoft. (n.d.). Visual Studio Code. https://code.visualstudio.com/
• Molleindustria / p5play. (n.d.). p5.play. https://p5play.org/
• OpenProcessing. (n.d.). OpenProcessing — share and explore creative coding. https://openprocessing.org/
• p5.js Foundation. (n.d.). arc(). p5.js Reference. https://p5js.org/reference/p5/arc/
• p5.js Foundation. (n.d.). colorMode(). p5.js Reference. https://p5js.org/reference/p5/colorMode/
• p5.js Foundation. (n.d.). Download. https://p5js.org/download/
• p5.js Foundation. (n.d.). ellipse(). p5.js Reference. https://p5js.org/reference/p5/ellipse/
• p5.js Foundation. (n.d.). fill(). p5.js Reference. https://p5js.org/reference/p5/fill/
• p5.js Foundation. (n.d.). frameCount. p5.js Reference. https://p5js.org/reference/p5/frameCount/
• p5.js Foundation. (n.d.). height. p5.js Reference. https://p5js.org/reference/p5/height/
• p5.js Foundation. (n.d.). Libraries. https://p5js.org/libraries/
• p5.js Foundation. (n.d.). loop(). p5.js Reference. https://p5js.org/reference/p5/loop/
• p5.js Foundation. (n.d.). noLoop(). p5.js Reference. https://p5js.org/reference/p5/noLoop/
• p5.js Foundation. (n.d.). p5.js Reference. https://p5js.org/reference/
• p5.js Foundation. (n.d.). p5.js Web Editor. https://editor.p5js.org/
• p5.js Foundation. (n.d.). quad(). p5.js Reference. https://p5js.org/reference/p5/quad/
• p5.js Foundation. (n.d.). square(). p5.js Reference. https://p5js.org/reference/p5/square/
• p5.js Foundation. (n.d.). stroke(). p5.js Reference. https://p5js.org/reference/p5/stroke/
• p5.js Foundation. (n.d.). triangle(). p5.js Reference. https://p5js.org/reference/p5/triangle/
• p5.js Foundation. (n.d.). width. p5.js Reference. https://p5js.org/reference/p5/width/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Vira, P. (n.d.). Creative Coding for Beginners [Video playlist]. YouTube. https://www.youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn
• Vira, P. (n.d.). Intro to creative coding. https://www.pattvira.com/intro-to-creative-coding
• Wikipedia contributors. (n.d.). HSL and HSV. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
• Wikipedia contributors. (n.d.). RGB color model. Wikipedia. https://en.wikipedia.org/wiki/RGB_color_model

Ana Başlık 2. Koordinat Sistemi, Çizim, setup ve draw

Amaç: Tuval koordinatlarını ve temel çizim komutlarını öğreterek setup/draw ayrımıyla ilk animasyon iskeletini kurmak.

Öğrenme Çıktıları:

• Tuval koordinat sisteminde nokta ve şekil konumunu açıklar.
• rect, ellipse, line ve renk komutlarıyla temel çizim yapar.
• setup ve draw rollerini ayırt eder.
• frameCount veya basit güncelleme ile hareket fikrini uygular.

Anahtar Sözcükler: koordinat, canvas, rect, ellipse, fill, stroke, setup, draw, frameCount

Giriş

Önceki ana başlıkta ortam kuruldu ve ilk sketch çalıştırıldı. Şimdi soru şudur: şekil tuvalde nereye çizilir ve her frame’de ne yinelenir? p5.js tuvali, sol üst köşesi (0,0) olan bir koordinat düzlemidir; x sağa, y aşağı artar. Bu yön, matematik defterindeki eksenden farklıdır ve konum hatalarının çoğunun kaynağıdır.

rect, ellipse, line gibi komutlar bu düzlemde geometri üretir; fill, stroke, background ise rengi ve temizliği yönetir. Zaman boyutu setup ile draw ayrımında belirir: bir kez hazırlık, sonra her frame tekrar. frameCount bu tekrara sayaç ekler. Bu ana başlık çizim dilini ve oyun döngüsünün en sade biçimini kurar; koşullu kararlar ve fare bir sonraki konularda gelecektir. 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.

2.1. Koordinat Sistemi ve Temel Çizim Komutları

p5.js'te çizim yapılan alan bir koordinat düzlemidir. Matematikteki koordinat sisteminden farklı olarak, p5.js'te Y ekseni aşağı doğru artar. Köşegenin sol üst noktası (0, 0) orijinidir; X sağa, Y aşağı doğru büyür.

Görsel 1 canvas üzerinde koordinat okumayı gösterir. Sağda point, rect, ellipse, line ve text imzaları ile parametrelerin anlamı yer alır; rect için w/h eksen farkından hesaplanır. Eksenlerdeki her sayı ayrı renktedir; aynı değer fonksiyon çağrısında da aynı renkle yazılır.

Bu düzen, Canvas API ve p5.js dahil çoğu ekran tabanlı grafik kütüphanesinde yaygındır: piksel satırları yukarıdan aşağı numaralandırıldığı için Y ekseninin aşağı yönlü artması teknik olarak pratiktir.

Temel çizim komutları:

Tablo 1.

strokeWeight(): kalınlık farkı

strokeWeight kenarın ne kadar kalın çizileceğini ayarlar (piksel). Farkı görmek için aynı boyutta iki kareyi abartılı değerlerle çizmek yeterlidir: biri ince (1), diğeri çok kalın (50).

Kod bloğu: Aynı 100×100 kare — yalnızca strokeWeight farklı.

function setup() {  createCanvas(500, 500);} function draw() {  background(230, 235, 240);   strokeWeight(1);  rect(100, 100, 100, 100);   strokeWeight(50);  rect(100, 300, 100, 100);}

Her iki rect çağrısı da 100×100 karedir; tek fark kenar kalınlığıdır. Alttaki kare gözle çok daha büyük görünür çünkü kenar, şeklin sınırının ortasına oturur: biraz içeri, biraz dışarı taşar. Kalınlık 50 olunca dışarı taşan kısım (~25 piksel her yönde) hemen fark edilir.

Görsel 2 yukarıdaki kodun çıktısıdır. Üstte strokeWeight(1), altta strokeWeight(50); her iki kare de kodda 100×100’dür. Kalın kenarın yarısı sınırın içinde, yarısı dışındadır — bu yüzden alttaki şekil şişmiş gibi durur.

Aynı etki daire, çizgi ve noktada da görülür; büyütülmüş piksel ızgarası kenarın sınırın ortasına oturduğunu tek tek piksel olarak gösterir:

Kod bloğu: Farklı şekillerde strokeWeight.

function setup() {  createCanvas(520, 280);  noLoop();} function draw() {  background(245);  noFill();  stroke(0);   strokeWeight(2);  ellipse(80, 80, 70, 70);  strokeWeight(12);  ellipse(200, 80, 70, 70);   strokeWeight(3);  rect(40, 160, 70, 50);  strokeWeight(10);  rect(150, 160, 70, 50);   strokeWeight(2);  line(300, 50, 480, 50);  strokeWeight(8);  line(300, 90, 480, 90);   strokeWeight(4);  point(340, 180);  strokeWeight(16);  point(420, 180);}

Görsel 3 solda bu kodun tuval çıktısını, sağda rect + strokeWeight(2) için büyütülmüş piksel ızgarasını gösterir. Kesik çizgi şeklin verdiğiniz boyutudur; koyu kenarın bir sırası içerde, bir sırası dışarıdadır.

noFill() ve noStroke(): kod ve çıktı

fill() / stroke() şekilden önce yazılır. Aşağıdaki sketch aynı daireyi dört kombinasyonda çizer: fill() + stroke(), noFill() + stroke(), fill() + noStroke(), noFill() + noStroke().

Kod bloğu: Dört fill/stroke kombinasyonu.

function setup() {  createCanvas(400, 200);  noLoop();} function draw() {  background(245);   // 1) fill() + stroke()  fill(50, 100, 220);  stroke(0);  strokeWeight(3);  ellipse(50, 100, 70, 70);   // 2) noFill() + stroke()  noFill();  stroke(0);  ellipse(150, 100, 70, 70);   // 3) fill() + noStroke()  fill(50, 100, 220);  noStroke();  ellipse(250, 100, 70, 70);   // 4) noFill() + noStroke() → daire görünmez  noFill();  noStroke();  ellipse(350, 100, 70, 70);}

Görsel 4 aynı ellipse() çağrısını dört kombinasyonda gösterir: (1) fill() + stroke(), (2) noFill() + stroke(), (3) fill() + noStroke(), (4) noFill() + noStroke() (şekil görünmez). Arka plandaki çizgiler, dolgu kapalıyken içinin boş olduğunu vurgular.

fill / stroke ayarı çizim sırasında değişebilir

fill(), stroke(), noFill() ve noStroke() bir sketch içinde birden fazla kez kullanılabilir. Her çizim komutu, o anda geçerli olan ayarla çalışır; önceki şekiller değişmez.

Kod bloğu: Aralara çizim serpiştirilmiş yedi adım.

function setup() {  createCanvas(620, 200);  noLoop();} function draw() {  background(245);   // ① kırmızı dolgu + kenar  fill(220, 50, 50);  stroke(0);  strokeWeight(2);  rect(20, 70, 70, 50);   // ② yalnız kenar  noFill();  stroke(0);  ellipse(140, 95, 64, 64);   // ③ mavi dolgu, kenarsız  fill(50, 100, 220);  noStroke();  ellipse(230, 95, 64, 64);   // ④ yeşil dolgu + kenar  fill(46, 125, 50);  stroke(0);  strokeWeight(2);  rect(290, 65, 60, 60);   // ⑤ görünmez  noFill();  noStroke();  ellipse(400, 95, 64, 64);   // ⑥ turuncu çizgi (line'da fill kullanılmaz)  stroke(255, 152, 0);  strokeWeight(4);  line(450, 60, 520, 130);   // ⑦ mor dolgu + kenar  fill(186, 104, 200);  stroke(0);  strokeWeight(3);  ellipse(560, 95, 64, 64);}

Görsel 5 aynı sketch’teki yedi çizimin çıktısını gösterir: kırmızı kenarlı dikdörtgen, yalnız kenarlı daire, kenarsız mavi daire, yeşil kenarlı kare, ardından noFill() + noStroke() ile çizilen (bu yüzden görünmeyen) daire, turuncu çizgi ve mor kenarlı daire.

RGB renk modeli ve p5.js'te kullanım

Ekran toplamsal (additive) karışım kullanır: bileşenler birleştikçe renk aydınlanır. Üç bileşen de 255 ise beyaza; hepsi 0 ise siyaha yaklaşılır. fill(255, 255, 0) sarıya, fill(0, 255, 255) cyan'a, fill(255, 0, 255) magentaya yakındır.

Aşağıdaki tabloda her satır bir örnek komuttur; parantez içindeki sayılar sırasıyla R, G, B (veya tek sayıda gri ton) okunur.

Tablo 2.

p5.js'te renk veren başlıca komutlar aynı sayı biçimini paylaşır:

Tablo 3.

stroke(r, g, b) kenar çizgisi, background(r, g, b) tuval arka planı için aynı kuralları kullanır (background’a alfa vermek de mümkündür). Renk, şekilden önce ayarlanır: önce fill / stroke, sonra rect / ellipse / line. noFill() dolguyu, noStroke() kenarı kapatır; yalnızca kenarlı daire veya dolgusuz çerçeve çizmek için kullanılır.

Görsel 6 üstte temel RGB (ve gri) dolgularını, sonraki satırda cyan / magenta / turuncu gibi karışımları; en altta aynı kırmızı için alfa = 255 / 120 / 0 farkını gösterir. Tüm fill değerleri tam yazılır.

Kod bloğu: Temel geometrik şekillerin çizimi.

function setup() {  createCanvas(400, 400);} function draw() {  background(240);   // Kırmızı dolgulu, siyah kenarlı dikdörtgen  fill(220, 50, 50);  stroke(0);  strokeWeight(2);  rect(50, 50, 120, 80);   // Mavi dolgulu daire  fill(50, 100, 220);  noStroke();  ellipse(280, 120, 90, 90);   // Yeşil çizgi  stroke(30, 180, 80);  strokeWeight(4);  line(50, 300, 350, 300);}

rect() fonksiyonunda (x, y) dikdörtgenin sol üst köşesini belirtir; ellipse() fonksiyonunda (x, y) elipsin merkezini belirtir. Bu fark, konumlandırma yaparken dikkat edilmesi gereken önemli bir ayrıntıdır.

2.2. setup() ve draw() Fonksiyonları

p5.js sketch'lerinin omurgasını setup() ve draw() fonksiyonları oluşturur.

Bu iki fonksiyonun ayrımı, oyun programlamanın temelini oluşturan oyun döngüsüne (game loop) hazırlık niteliğindedir. Gerçek bir oyunda setup() oyun dünyasını kurarken, draw() her frame'de girdileri okur, durumu günceller ve ekranı yeniden çizer.

Tablo 4.

Tuval boyutu: width ve height

createCanvas(genislik, yukseklik) çalıştığında p5.js bir çizim alanı oluşturur. Bundan sonra tuvalin piksel cinsinden boyutları iki yerleşik değişkende tutulur:

Tablo 5.

width ve height değerleri createCanvas içine yazılan sayılarla eşleşir; kod içinde tuval kenarına hizalama veya ortalama yaparken kullanılır (ör. yatay orta nokta: width / 2). Bu değişkenler kullanıcı tarafından let ile tanımlanmaz; p5.js otomatik sağlar.

Farklı createCanvas çağrıları farklı oranlarda tuval üretir. Aşağıdaki görsel dört yaygın boyutu aynı ölçekte yan yana gösterir:

Görsel 7 sırasıyla createCanvas(200, 200), createCanvas(400, 200), createCanvas(200, 400) ve createCanvas(400, 400) ile oluşacak çizim alanlarının göreli boyutunu gösterir. Kare, yatay dikdörtgen ve dikey dikdörtgen farkı önizleme panelinde hemen görülür.

frameCount ve modulo

setup() ve draw() sırası

setup() ve draw() arasındaki ilişki doğrusaldır; geri dönen ok gerektirmez. Aşağıdaki sıralı liste yeterlidir:

1. Program başlar.
2. setup() bir kez çalışır — createCanvas() ve başlangıç ayarları burada yapılır.
3. draw() ilk kez çalışır (1. frame).
4. draw() ikinci kez çalışır (2. frame).
5. draw() üçüncü kez çalışır (3. frame) … p5.js, sketch durdurulana kadar draw() çağrısını sürekli tekrarlar.

Özet: setup() hazırlığı bir defa yapar; draw() oyun döngüsünün (game loop) kalbidir ve her frame'de yeniden çalışır.

Görsel 8 program başlangıcında setup()'ın bir kez, ardından draw()'ın frame frame tekrarlandığını gösterir.

Kod bloğu: draw() tekrarıyla basit animasyon.

function setup() {  createCanvas(400, 400);} function draw() {  background(30, 30, 60);   fill(255, 220, 50);  noStroke();  ellipse(frameCount % width, 200, 40, 40);}

frameCount % width ifadesi dairenin X konumunu her frame'de bir piksel sağa kaydırır; width değerine ulaşınca tekrar soldan başlar.

Özet

Tuval, sol üst köşesi (0, 0) olan bir koordinat düzlemidir; x sağa, y ise matematik dersindeki alışkanlığın tersine aşağı doğru artar. Bu yönelim, piksel satırlarının yukarıdan aşağı numaralandırılmasından kaynaklanır ve konum hatalarının sık görülen kaynağıdır. createCanvas çizim alanının genişliğini ve yüksekliğini belirler; rect, ellipse, line, point ve text bu alan içinde geometri üretir. Konumun anlamı komuta göre değişir: rect çağrısında (x, y) sol üst köşeyi, ellipse çağrısında ise merkezi gösterir.

Görünüm fill, stroke ve strokeWeight ile ayarlanır; noFill dolguyu, noStroke kenarı kapatır. Bu ayarlar kendilerinden sonra çizilen şekilleri etkiler, önceki şekilleri değiştirmez; kenar çizgisi şeklin sınırının ortasına oturduğu için kalın değerlerde şekil verilen ölçüden büyük görünür. Renk RGB modeliyle, her bileşen 0 ile 255 arasında verilir; tek sayı gri tonu, dördüncü değer ise saydamlığı belirleyen alfa kanalını ifade eder.

Zaman boyutu setup ile draw ayrımında belirir. setup program başlarken bir kez çalışır ve hazırlık işlemlerini taşır; draw sketch durdurulana kadar her frame yeniden çağrılır ve varsayılan hedef 60 FPS’tir. background her frame’in başında sahneyi temizleyerek önceki çizimlerin izini siler. Tuval ölçüleri width ve height değişkenlerinde tutulur; her draw çağrısında bir artan frameCount ise modulo işleciyle birlikte kullanıldığında dairenin konumunu döngüsel biçimde ilerleten sade bir animasyon verir.

Neler Öğrendik?

Soru 1 p5.js tuvalinde (0,0) noktası nerededir?

Soru 2 setup ile draw farkı nedir?

Soru 3 background draw içinde sık kullanılmasının nedeni nedir?

Soru 4 fill(255, 0, 0) tipik olarak neyi ayarlar?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: p5.js orijini sol üsttedir.
• İlgili Konu: 2.1. Koordinat Sistemi ve Temel Çizim Komutları

Soru 2: Doğru Cevap: B

• Çözüm: Klasik p5 yaşam döngüsü budur.
• İlgili Konu: 2.2. setup() ve draw() Fonksiyonları

Soru 3: Doğru Cevap: B

• Çözüm: Temizlenmezse hareket iz bırakır.
• İlgili Konu: 2.1. Koordinat Sistemi ve Temel Çizim Komutları

Soru 4: Doğru Cevap: B

• Çözüm: RGB fill iç rengi belirler.
• İlgili Konu: 2.1. Koordinat Sistemi ve Temel Çizim Komutları

Yararlanılan Kaynaklar

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

• Coolors. (n.d.). The super fast color palettes generator. https://coolors.co/
• Genuary. (n.d.). GENUARY. https://genuary.art/
• Google. (n.d.). Color picker (arama: “color picker”). https://www.google.com/search?q=color+picker
• HTML Color Codes. (n.d.). Color Picker. https://htmlcolorcodes.com/color-picker/
• jsDelivr. (n.d.). jsDelivr — a free CDN for open source. https://www.jsdelivr.com/
• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Microsoft. (n.d.). Visual Studio Code. https://code.visualstudio.com/
• Molleindustria / p5play. (n.d.). p5.play. https://p5play.org/
• OpenProcessing. (n.d.). OpenProcessing — share and explore creative coding. https://openprocessing.org/
• p5.js Foundation. (n.d.). arc(). p5.js Reference. https://p5js.org/reference/p5/arc/
• p5.js Foundation. (n.d.). colorMode(). p5.js Reference. https://p5js.org/reference/p5/colorMode/
• p5.js Foundation. (n.d.). Download. https://p5js.org/download/
• p5.js Foundation. (n.d.). ellipse(). p5.js Reference. https://p5js.org/reference/p5/ellipse/
• p5.js Foundation. (n.d.). fill(). p5.js Reference. https://p5js.org/reference/p5/fill/
• p5.js Foundation. (n.d.). frameCount. p5.js Reference. https://p5js.org/reference/p5/frameCount/
• p5.js Foundation. (n.d.). height. p5.js Reference. https://p5js.org/reference/p5/height/
• p5.js Foundation. (n.d.). Libraries. https://p5js.org/libraries/
• p5.js Foundation. (n.d.). loop(). p5.js Reference. https://p5js.org/reference/p5/loop/
• p5.js Foundation. (n.d.). noLoop(). p5.js Reference. https://p5js.org/reference/p5/noLoop/
• p5.js Foundation. (n.d.). p5.js Reference. https://p5js.org/reference/
• p5.js Foundation. (n.d.). quad(). p5.js Reference. https://p5js.org/reference/p5/quad/
• p5.js Foundation. (n.d.). square(). p5.js Reference. https://p5js.org/reference/p5/square/
• p5.js Foundation. (n.d.). stroke(). p5.js Reference. https://p5js.org/reference/p5/stroke/
• p5.js Foundation. (n.d.). triangle(). p5.js Reference. https://p5js.org/reference/p5/triangle/
• p5.js Foundation. (n.d.). width. p5.js Reference. https://p5js.org/reference/p5/width/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Vira, P. (n.d.). Creative Coding for Beginners [Video playlist]. YouTube. https://www.youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn
• Vira, P. (n.d.). Intro to creative coding. https://www.pattvira.com/intro-to-creative-coding
• Wikipedia contributors. (n.d.). HSL and HSV. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
• Wikipedia contributors. (n.d.). RGB color model. Wikipedia. https://en.wikipedia.org/wiki/RGB_color_model

Ana Başlık 3. Değişkenler, Operatörler ve Koşullu İfadeler

Amaç: Değişken ve veri türlerini tanıtarak karşılaştırma/mantıksal operatörler ile if/else dallanma mantığını kurmak.

Öğrenme Çıktıları:

• Değişken tanımlar ve number, string, boolean türlerini ayırt eder.
• Karşılaştırma ve mantıksal operatörleri koşullarda kullanır.
• if, else if ve else ile çok yollu dallanma yazar.
• Atama (=) ile karşılaştırma (===) farkını açıklar.

Anahtar Sözcükler: değişken, veri türü, operatör, if/else, boolean, doğruluk tablosu

Giriş

İlk ana başlıkta p5.js ortamı kurulmuş, koordinat sistemi tanınmış ve temel şekiller çizilmiştir. Ancak çizilen şekiller henüz duruma göre karar verememektedir. Oyun programlamanın özü, çalışma anındaki bilgiye göre farklı yollar izlemektir: top kenara değdi mi, skor yeterli mi, fare doğru bölgeye tıkladı mı?

Bu kararlar koşullu ifadelerle kodlanır. Koşuldan önce değişken kavramı gerekir; skor, can, konum ve oyun bitiş bayrağı gibi bilgiler isimlendirilmiş bellek alanlarında tutulur. JavaScript’te let / const, temel veri türleri, atama ile karşılaştırmanın ayrımı ve && / || / ! operatörleri bu zemini oluşturur.

Bu ana başlıkta değişkenler, operatörler ve if/else yapıları sistematik işlenir. Fare etkileşimi ve Daire Tıklama mini oyunu bir sonraki ana başlıkta, bu temelin üzerine kurulacaktı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.

3.1. Değişkenler ve Veri Türleri

JavaScript'te değişken tanımlamak için let, const veya eski sözdizim olan var anahtar sözcükleri kullanılır. var işlev (function) kapsamına sahiptir ve beklenmedik davranışlara yol açabilir; let ve const ise blok kapsamlıdır (süslü parantez {} içinde tanımlanırsa dışarıdan erişilemez). Örneklerde değişebilir değerler için let, değişmeyecek sabitler için const kullanılır.

Kod bloğu: Temel değişken tanımlama örnekleri.

let skor = 0;                  // Tam sayı (number)let oyunAdi = "Daire Tıklama"; // Metin (string)let oyunBitti = false;         // Mantıksal değer (boolean)const HEDEF_SKOR = 10;         // Sabit — sonradan değiştirilmez (BÜYÜK_HARF örfi)

Bu düzeyde odaklanılan temel veri türleri şunlardır (JavaScript'te undefined, null, object gibi ek türler de vardır):

Tablo 1.

p5.js, konum ve boyut için number türünü yoğun biçimde kullanır. Oyun durumunu izlemek için boolean değişkenler (oyunBitti, hedefVuruldu gibi) sık görülür.

Değişken adlarının ne anlama geldiği okunabilirlik açısından önemlidir. x, y gibi tek harfli adlar koordinat için yaygındır; a, b, temp1 gibi belirsiz adlar ise kodun izlenmesini zorlaştırır.

camelCase, JavaScript'te dil tarafından zorunlu kılınan bir kural değildir; hedef_x veya HedefX gibi adlar da sözdizimi açısından geçerlidir. Ancak JavaScript ve p5.js topluluğunda değişken ve fonksiyon adları için camelCase yaygın bir örf (convention) haline gelmiştir. Bu kitaptaki örneklerde değişken ve fonksiyon adları camelCase ile yazılır.

Sabit (const) değerlerde ise bazen tüm harflerin büyük yazıldığı ve kelimelerin alt çizgiyle ayrıldığı BÜYÜK_HARF örfi kullanılır: HEDEF_SKOR, MAKS_CAN. Bu da zorunluluk değil, okunabilirlik için benimsenen bir düzendir.

String (metin) işlemleri — kısa özet

Bu kitaptaki mini oyunlar çoğunlukla sayı ve boolean ile ilerler; yine de skor yazısı, seviye adı veya "Kazandın!" gibi mesajlar string türündedir. Aşağıdaki işlemler başlangıç için yeterlidir:

Tablo 2.

Kod bloğu: String birleştirme ve ekrana yazma (çalışır sketch).

let skor = 7;let oyunAdi = "Daire Tıklama"; function setup() {  createCanvas(400, 200);} function draw() {  background(240);  fill(0);   let mesaj = "Skor: " + skor; // "Skor: 7"  text(mesaj, 20, 40);   if (oyunAdi.length > 0) {    text(oyunAdi.toUpperCase(), 20, 70);  }}

Sayıyı metne çevirmek için String(skor) veya skor + "" de kullanılabilir; pratikte "Skor: " + skor en yaygınıdır. Metinden sayıya dönüş (Number("10"), parseInt) bu ana başlıkta zorunlu değildir; skor zaten number tutulur, ekrana yazarken string birleştirilir. text(metin, x, y) tuvale yazar (Ana Başlık 1 çizim tablosu); metin rengi fill ile ayarlanır.

3.2. Karşılaştırma ve Mantıksal Operatörler

Koşullu ifadeler, karşılaştırma operatörlerinin sonucuna dayanır. Karşılaştırma sonucu her zaman boolean değer üretir: true veya false.

Tablo 3.

== ile === farkı (tür dönüşümü): JavaScript’te "10" bir string (metin), 10 ise bir number (sayı)dır; görünüşte aynı olsalar da veri türleri farklıdır. == (iki eşittir) karşılaştırırken gerekirse türleri birbirine çevirmeye çalışır (tür dönüşümü / type coercion): bu yüzden "10" == 10 sonucu true olur. === (üç eşittir, tam eşitlik) hem değeri hem türü kontrol eder; "10" === 10 sonucu false olur. Oyun kodunda skor, can gibi değerler zaten number tutulduğu için ve sürpriz eşleşmeleri önlemek adına örneklerde === tercih edilir. Eşit değil için benzer ayrım vardır: != tür dönüşümü yapabilir, !== yapmaz; örneklerde mümkün olduğunca !== kullanılır.

Mantıksal operatörler

Mantıksal operatörler, karşılaştırma ifadelerinin ürettiği true/false değerlerini birleştirir. Sonuç yine boolean olur.

Tablo 4.

// Yanlış beklenti (matematik yazımı — JS'te güvenilir değil):// 20 < x < 60 // Doğru:20 < x && x < 60

Örneğin x = 40 iken 20 < x && x < 60 → true; x = 10 iken → false. Tuval sınırı gibi durumlar da aynı kalıptır: x > 0 && x < width.

İki operandlı operatörlerde (&&, ||) her operand true veya false olabileceğinden 2 × 2 = 4 durum vardır. Aşağıda A ve B, bu iki operandı temsil eder (ör. A = can > 0, B = !oyunBitti). Tek operandlı ! için ise yalnızca 2 durum vardır.

&& (VE) doğruluk tablosu — 4 durum

Tablo 5.

Özet: Yalnızca A ve B ikisi birden true ise sonuç true olur. Oyun bağlamında can > 0 && !oyunBitti ifadesi hem canın sıfırdan büyük hem de oyunun bitmemiş olması gerektiğini söyler; biri false ise tüm ifade false döner.

Tablo 6.

|| (VEYA) doğruluk tablosu — 4 durum

Tablo 7.

Özet: A veya B'den en az biri true ise sonuç true olur. Oyun bağlamında can === 0 || sure === 0 ifadesi can bittiğinde veya süre dolduğunda oyunun sona erdiğini ifade eder.

Tablo 8.

! (DEĞİL) doğruluk tablosu — 2 durum (tek operand)

Tablo 9.

Özet: ! yalnızca tek boolean değeri tersine çevirir. !oyunBitti ifadesi oyun bitmediyse true, bittiyse false döner; if (!oyunBitti) bloğu yalnızca oyun devam ederken çalışır.

Görsel 1 yukarıdaki VE, VEYA ve DEĞİL tablolarını yan yana özetler: iki operandlı operatörlerde 4 durum, ! için 2 durum.

Mantıksal operatörler ile şekil renklendirme

Aşağıdaki statik sketch bütün sonuçları tek çalıştırmada gösterir. Üst sırada &&, dört kenarlı ve eşit kenarlı olan kareyi vurgular; dikdörtgenin dört kenarı olsa da kenarları eşit değildir. Alt sırada ||, üçgen veya daire olan şekilleri vurgular; kare iki koşula da uymaz. Fare, klavye, animasyon veya kodda değer değiştirme gerekmez.

Bu örnekte iki yeni komut kullanılır:

Tablo 10.

color() doğrudan çizim yapmaz: let secili = color(45, 110, 170); rengi saklar; fill(secili) veya stroke(secili) sonraki dolgu / kenar rengini ayarlar. Etiketler için text() Ana Başlık 1'de tanıtılmıştır; textSize ve textAlign bu sketch’te kullanılır, ayrıntıları 4.1’de verilir.

Kod bloğu: && ve || ile seçilen geometrik şekiller — tüm sonuçlar aynı tuvalde.

function setup() {  createCanvas(760, 430);  noLoop();} function draw() {  background(245);  textAlign(CENTER);   fill(35);  textSize(16);  text("Mantıksal operatörler ile şekil renklendirme", 380, 30);  textSize(12);  text("Tüm sonuçlar tek statik tuvalde", 380, 52);   noStroke();   let secili = color(45, 110, 170);  let diger = color(195);   // && : dört kenarlı VE eşit kenarlı  fill(55);  textSize(13);  text("dört kenarlı && eşit kenarlı", 380, 82);   let dortKenar = true;  let esitKenar = true;  if (dortKenar && esitKenar) {    fill(secili);  } else {    fill(diger);  }  rect(125, 100, 110, 110);      // kare   dortKenar = true;  esitKenar = false;  if (dortKenar && esitKenar) {    fill(secili);  } else {    fill(diger);  }  rect(445, 125, 180, 60);       // dikdörtgen   fill(secili);  textSize(12);  text("true — kare seçildi", 180, 232);  fill(90);  text("false — kenarlar eşit değil", 535, 232);   // || : üçgen VEYA daire  stroke(210);  line(60, 255, 700, 255);  noStroke();  fill(55);  textSize(13);  text("üçgen || daire", 380, 282);   let ucgenMi = true;  let daireMi = false;  if (ucgenMi || daireMi) {    fill(secili);  } else {    fill(diger);  }  triangle(90, 395, 170, 295, 250, 395);   ucgenMi = false;  daireMi = false;  if (ucgenMi || daireMi) {    fill(secili);  } else {    fill(diger);  }  rect(330, 305, 100, 90);       // kare   ucgenMi = false;  daireMi = true;  if (ucgenMi || daireMi) {    fill(secili);  } else {    fill(diger);  }  ellipse(570, 350, 100, 100);   // daire   fill(secili);  text("true", 170, 418);  fill(90);  text("false", 380, 418);  fill(secili);  text("true", 570, 418);}

Üst sırada yalnız kare, alt sırada üçgen ile daire mavi görünür. Gri şekiller ilgili koşulun false sonucunu gösterir.

Görsel 2 && için iki koşulun birlikte, || için koşullardan en az birinin sağlanmasını tek tuvalde karşılaştırır.

İkiden fazla koşul birleştirmek

&& ve || zincirlenerek üç veya daha fazla koşul aynı ifadede birleştirilebilir. JavaScript ifadeyi soldan sağa değerlendirir; && || operatöründen önce işlenir. Başlangıç düzeyinde karışıklığı önlemek için parantez kullanmak önerilir.

Tablo 11.

Örnek: x = 150, y = 200 iken dört koşul da true olduğundan tuvalIcinde true olur; x = 0 veya x = 500 iken zincir false döner (kısa devre ile sonraki koşullara bakılmayabilir). Karışık ifadede (skor >= 10 && can > 0) || oyunBitti için skor 10, can 2 ve oyun devam ediyorsa parantez içi true olduğundan sonuç true (kazanma); skor 7 iken parantez false kalır, oyunBitti de false ise tüm ifade false olur.

Kod bloğu: Karşılaştırma ve mantıksal operatör kullanımı — çalışır sketch.

let x = 150;let y = 200;let skor = 7;let can = 2;let sure = 0;let oyunBitti = false; function setup() {  createCanvas(400, 280);} function draw() {  background(240);  fill(0);  textSize(14);   // Dört koşullu VE: nokta tuval içinde mi?  let tuvalIcinde = (x > 0 && x < 400 && y > 0 && y < 400); // true   // İkili VE: skor yeterli mi ve oyun bitmedi mi?  let kazandi = (skor >= 10 && !oyunBitti); // false — skor henüz 7   // Üçlü VE: oyun devam edebilir mi?  let oyunDevam = (can > 0 && skor < 10 && !oyunBitti); // true   // VEYA: oyun bitti mi? (can veya süre tükendi)  let oyunSonu = (can === 0 || sure === 0); // true — sure 0   // Parantezli karışım: kazanma veya zorunlu bitiş  let ekranMesaji = (skor >= 10 && can > 0) || oyunBitti; // false   text("tuvalIcinde: " + tuvalIcinde, 20, 40);  text("kazandi: " + kazandi, 20, 70);  text("oyunDevam: " + oyunDevam, 20, 100);  text("oyunSonu: " + oyunSonu, 20, 130);  text("ekranMesaji: " + ekranMesaji, 20, 160);}

3.3. if, else if ve else Yapıları

Temel sözdizimi:

if (koşul) {  // koşul doğruysa çalışır} else if (baskaKoşul) {  // ilk koşul yanlış, bu doğruysa çalışır} else {  // hiçbiri doğru değilse çalışır}

Aşağıdaki üç örnekte sol taraftaki (girintisiz) ve sağdaki (girintili) kod JavaScript’te çoğu zaman aynı şekilde çalışır; fark okunabilirliktedir. Özellikle iç içe koşullarda girinti olmadan hangi satırın hangi bloğa ait olduğu hızla kaybolur.

Örnek 1 — tek if (girintisiz):

if (skor >= 10) {fill(0, 200, 0);ellipse(200, 200, 80, 80);}

Girintili hali:

if (skor >= 10) {  fill(0, 200, 0);  ellipse(200, 200, 80, 80);}

Örnek 2 — if / else (girintisiz):

if (can > 0) {background(200, 230, 200);} else {background(230, 180, 180);}

Girintili hali:

if (can > 0) {  background(200, 230, 200);} else {  background(230, 180, 180);}

Örnek 3 — iç içe koşul (girintisiz):

if (!oyunBitti) {if (skor >= HEDEF_SKOR) {oyunBitti = true;}}

Girintili hali:

if (!oyunBitti) {  if (skor >= HEDEF_SKOR) {    oyunBitti = true;  }}

Kod bloğu: Koşula göre renk değiştiren çizim.

let sicaklik; // Değişken — draw dışında tanımlandı (setup'ta değer verilecek) function setup() {  createCanvas(400, 400);  sicaklik = 18; // Başlangıç değeri} function draw() {  background(240);   if (sicaklik > 25) {    fill(200, 80, 50);   // Sıcak — turuncu  } else {    fill(50, 100, 200);  // Serin — mavi  }   noStroke();  ellipse(200, 200, 100, 100);}

Bu örnekte koşul, fare veya mesafe yerine sayısal bir değişken (sicaklik) üzerinden kurulmuştur. sicaklik değeri setup() içinde bir kez atanır; draw() her frame'de aynı değerle koşulu değerlendirir. Fare ile etkileşimli sürüm, fare girdisi ve dist() tanıtıldıktan sonra 4.1’de verilecektir.

Aşağıdaki özet, draw() içindeki if/else dallanmasını gösterir. İlk akış şeması örneği olduğu için simgeler, döngü bölümündeki şemalarla aynı üç eleman üzerinden hatırlatılır: yuvarlak = başla/bitiş, elmas = koşul, dikdörtgen = işlem (oklar sırayı gösterir).

Tablo 12.

Görsel 3 Başla → koşul → iki fill dalı → ortak ellipse → Bitir yolunu gösterir; sicaklik > 25 yalnızca rengi seçer.

if / else if / else ile görsel karar: Trafik ışığı

İkiden fazla alternatif için else if zinciri kullanılır. Trafik ışığı bunun en tanıdık örneğidir: tek bir durum değişkeni hangi lambanın yanacağını seçer; zincir yalnızca ilk uyan dalı çalıştırır. Aşağıdaki sketch üç olası durumu da tek çalıştırmada yan yana çizer; fare, klavye veya animasyon yoktur.

Kod bloğu: Üç durum değeri — üç trafik ışığı, tek tuval.

function setup() {  createCanvas(620, 400);  noLoop();} function draw() {  background(255);  textAlign(CENTER);  textSize(15);  noStroke();   // —— if ——  let durum = "kirmizi";  fill(21, 101, 192);  text("if", 130, 78);  textSize(11);  fill(198, 40, 40);  text('durum = "kirmizi"', 130, 98);  fill(40);  rect(100, 110, 60, 230);  fill(90);  ellipse(130, 154, 40, 40);  ellipse(130, 224, 40, 40);  ellipse(130, 294, 40, 40);  if (durum === "kirmizi") {    fill(220, 60, 60);    ellipse(130, 154, 40, 40);  } else if (durum === "sari") {    fill(240, 200, 50);    ellipse(130, 224, 40, 40);  } else {    fill(70, 200, 90);    ellipse(130, 294, 40, 40);  }   // —— else if ——  durum = "sari";  textSize(15);  fill(21, 101, 192);  text("else if", 310, 78);  textSize(11);  fill(184, 134, 11);  text('durum = "sari"', 310, 98);  fill(40);  rect(280, 110, 60, 230);  fill(90);  ellipse(310, 154, 40, 40);  ellipse(310, 224, 40, 40);  ellipse(310, 294, 40, 40);  if (durum === "kirmizi") {    fill(220, 60, 60);    ellipse(310, 154, 40, 40);  } else if (durum === "sari") {    fill(240, 200, 50);    ellipse(310, 224, 40, 40);  } else {    fill(70, 200, 90);    ellipse(310, 294, 40, 40);  }   // —— else ——  durum = "yesil";  textSize(15);  fill(21, 101, 192);  text("else", 490, 78);  textSize(11);  fill(46, 125, 50);  text('durum = "yesil"', 490, 98);  fill(40);  rect(460, 110, 60, 230);  fill(90);  ellipse(490, 154, 40, 40);  ellipse(490, 224, 40, 40);  ellipse(490, 294, 40, 40);  if (durum === "kirmizi") {    fill(220, 60, 60);    ellipse(490, 154, 40, 40);  } else if (durum === "sari") {    fill(240, 200, 50);    ellipse(490, 224, 40, 40);  } else {    fill(70, 200, 90);    ellipse(490, 294, 40, 40);  }}

Önce üç lamba gri çizilir; if / else if / else yalnızca duruma uyan lambayı yeniden boyar. Soldan sağa üç sütun sırasıyla if, else if ve else dallarını gösterir.

Görsel 4 soldan sağa if ("kirmizi"), else if ("sari") ve else ("yesil") dallarını ayırır; her durumda yalnızca bir dal çalışır.

if/else oyunlarda neden bu kadar sık?

Oyunlar sürekli karar verir: can bitti mi, engelle çarpışma oldu mu, menü mü oyun içi mi, skor eşiği aşıldı mı? Bu kararların çoğu if / else if / else ile kodlanır. Tanıdık oyunlardan birkaç örnek:

Tablo 13.

Aynı iskelet ilerideki Daire Tıklama örneğinde de görünür: isabet varsa skor artar, hedef skora ulaşınca oyun biter.

İç içe if / else ve mantıksal operatör eşdeğerliği

Bir if bloğunun içine başka bir if (ve isteğe bağlı else) yazmak iç içe koşul (nested conditional) adını alır: önce dış koşul, doğruysa iç koşul sorulur. Her düzeydeki koşul tek bir karşılaştırma olmak zorunda değildir; && / || / ! ile birleştirilmiş daha karmaşık ifadeler de yazılabilir (ör. can > 0 && skor < 10). else yalnızca gerçekten yapılacak bir iş varken eklenir; boş else { } bloğu gereksizdir.

Örnek 1

Skor yalnızca can varken ve oyun bitmemişken artsın. İç içe if ile tek if + && aynı kararı verir:

if (can > 0) {  if (!oyunBitti) {    skor = skor + 1;  }}

if (can > 0 && !oyunBitti) {  skor = skor + 1;}

Görsel 5 Örnek 1’in iki yazımını yan yana gösterir.

Örnek 2

else dallarında farklı mesajlar:

if (can > 0) {  if (!oyunBitti) {    skor = skor + 1;    mesaj = "Devam";  } else {    mesaj = "Oyun bitti";  }} else {  mesaj = "Can yok";}

Görsel 6 üç yolu ayırır: devam, oyun bitti, can yok.

Örnek 3

Dış koşulda birden fazla ifade (&&); içeride skor eşiği. Her dal farklı işlem yapar:

if (can > 0 && !oyunBitti) {  if (skor >= 10) {    mesaj = "Seviye atlandı";    oyunBitti = true;  } else {    mesaj = "Skor yetersiz";  }} else {  mesaj = "Oyuna devam edilemez";}

Görsel 7 önce can > 0 && !oyunBitti sorusunu, ardından skor eşiğini izler.

let x = 15;let y = 8;let aktif = true;let seviye = 2; console.log("basla"); if (x > 10 && y < 10) {  console.log("bolge-icinde");} else {  console.log("bolge-disinda");} if (!aktif || seviye === 1) {  console.log("beklet");} else if (seviye >= 2 && x === 15) {  console.log("ilerle");} else {  console.log("bekle");} let sonuc = (x >= 10 && y !== 0) || !aktif;console.log(sonuc);

Özet

Değişkenler, programın çalışma sırasında okuyup güncelleyebildiği isimlendirilmiş bellek alanlarıdır. let değişebilir, const değişmez bağlar kurar; örneklerde skor ve konum için let, tuval boyutu gibi sabitler için const tercih edilir. Number, string ve boolean temel türlerdir; string birleştirme ve .length kısa metin işlemlerinde yeterlidir.

Atama (=) değer yazar; karşılaştırma (===, <, >) ise doğru/yanlış üretir. Mantıksal operatörler birden fazla koşulu birleştirir: && tümünün doğru olmasını, || en az birinin doğru olmasını, ! ise değillemeyi sağlar. if / else if / else zinciri bu koşullara göre farklı kod yollarını seçer. İç içe if ile tek if + && çoğu zaman aynı kararı verir; ara adım yoksa birleşik koşul daha sadedir.

Oyun kodunda koşul çoğu zaman draw() veya olay fonksiyonu içinde okunur; yanlış yerde yazılan atama veya = / === karışıklığı sessiz hatalara yol açar. Bu ana başlığın çıktısı, bir sonraki adımda fare girdisi ve mesafe hesabıyla birleşecek sağlam bir karar verme iskeletidir.

Neler Öğrendik?

Soru 1 let skor = 0 ile const GENISLIK = 400 arasındaki temel fark nedir?

Soru 2 can > 0 && !oyunBitti ifadesi ne zaman true olur?

Soru 3 x = 5 ile x === 5 farkı nedir?

Soru 4 else if ne zaman devreye girer?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: const ile bağlanan tanımlayıcıya yeni değer atanamaz; let güncellenebilir.
• İlgili Konu: 3.1. Değişkenler ve Veri Türleri

Soru 2: Doğru Cevap: B

• Çözüm: && her iki yanın true olmasını ister; ! oyunBitti’yi tersine çevirir.
• İlgili Konu: 3.2. Karşılaştırma ve Mantıksal Operatörler

Soru 3: Doğru Cevap: B

• Çözüm: Tek = atamadır; === sıkı eşitlik karşılaştırmasıdır.
• İlgili Konu: 3.2. Karşılaştırma ve Mantıksal Operatörler

Soru 4: Doğru Cevap: A

• Çözüm: else if, önceki dallar tutmazsa kendi koşulunu dener.
• İlgili Konu: 3.3. if, else if ve else Yapıları

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
• p5.js Foundation. (n.d.). dist(). p5.js Reference. https://p5js.org/reference/p5/dist/
• p5.js Foundation. (n.d.). mouseX. p5.js Reference. https://p5js.org/reference/p5/mouseX/
• p5.js Foundation. (n.d.). random(). p5.js Reference. https://p5js.org/reference/p5/random/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Sweigart, A. (2017). Invent Your Own Computer Games with Python (4th ed.). No Starch Press. (Benzer mini oyun örnekleri için.)
• The Coding Train. (n.d.). Games [Öğretici parkur]. https://thecodingtrain.com/tracks/games/

Ana Başlık 4. Fare Girdisi ve Daire Tıklama Oyunu

Amaç: Fare konumu, tıklama ve dist ile etkileşim kurarak Daire Tıklama mini oyununu adım adım kodlamak.

Öğrenme Çıktıları:

• mouseX, mouseY ve mouseIsPressed ile fare durumunu okur.
• dist ile iki nokta mesafesini hesaplar.
• mousePressed olayında tek tıklama mantığı kurar.
• Daire Tıklama oyununu modüler adımlarla tamamlar.

Anahtar Sözcükler: mouseX, mouseY, mousePressed, dist, etkileşim, mini oyun

Giriş

Önceki ana başlıkta değişkenler ve if/else ile programın karar verme iskeleti kuruldu. Gerçek bir mini oyunda bu kararlar çoğunlukla oyuncu girdisine bağlanır: fare hedefe yakın mı, tıklama hedefi vurdu mu, skor artmalı mı?

p5.js fare konumunu mouseX / mouseY ile, basılı olup olmadığını mouseIsPressed veya mousePressed() olayı ile verir. İki nokta arası uzaklık dist ile ölçülür; böylece “daireye tıklandı mı?” sorusu geometrik bir koşula dönüşür. Tek tıklamada skorun birden fazla artmaması için olay fonksiyonu ile sürekli basılı tutma ayrımı kritiktir.

Bu ana başlık fare, metin ve mesafe araçlarını birleştirir; ardından Daire Tıklama oyununu adım adım tamamlar. Çoklu hedefler ve diziler sonraki bölümlerde gelecektir. 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.

4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Bu bölümde sırayla: fare konumu, ekrana yazı, iki nokta arası mesafe ve bunların if/else ile birleştirilmesi ele alınır. Her alt adımda yalnızca o ana kadar tanıtılmış kavramlar kullanılır.

Fare konumu ve tuş durumu

p5.js, fare girdisini yerleşik değişkenler ve fonksiyonlarla sunar. width ve height tuval boyutları tuval ve koordinat sistemi alt başlığında tanıtılmıştır; fare konumu bu aralıkta piksel cinsinden okunur.

Tablo 1.

mousePressed() ve mouseReleased(), setup() ve draw() gibi p5.js olay fonksiyonlarıdır: p5.js, fare olayı gerçekleştiğinde bu isimdeki fonksiyonu otomatik çağırır. Genel fonksiyon tanımı 4. ana başlıkta ayrıntılı işlenecektir.

Ekrana metin yazma

Skor veya mesaj göstermek için p5.js metin komutları kullanılır. text() Ana Başlık 1'deki çizim tablosunda ve 3.1’deki string örneğinde geçmiştir; burada textSize ve textAlign ile birlikte özetlenir:

Tablo 2.

textAlign, (x, y) koordinatlarını silmez; o noktanın metne göre bağlantı yerini değiştirir. Yatayda LEFT sol kenarı, CENTER ortayı, RIGHT sağ kenarı (x, y) üzerine oturtur. Dikeyde TOP üstü, CENTER ortayı, BOTTOM altı bağlar. Varsayılan genelde sola ve alta yakındır; skor gibi köşe yazıları için textAlign(LEFT, TOP) ile (15, 15) sol-üst köşeye oturur. Ekran ortası mesajında textAlign(CENTER, CENTER) ve text(..., width / 2, height / 2) kullanılır — aynı (x, y) verilse bile hizalama değişince yazı kaymış gibi görünür.

Kod bloğu: Metin çizimi örneği.

function draw() {  background(240);  fill(0);  textSize(24);  textAlign(LEFT, TOP); // (15, 15) = metnin sol-üst köşesi  text("Skor: 0", 15, 15);}

İki nokta arası mesafe (dist)

Daire içinde tıklama algılamak için merkez ile fare konumu arası mesafe hesaplanır; mesafe yarıçaptan küçükse nokta daire içindedir.

Görsel 1 noktanın daire içinde olup olmadığını özetler: merkezden nokta uzaklığı (dist) yarıçaptan küçükse içeride, aksi halde dışarıdadır.

Fare yakınlığına göre renk (birleşik örnek)

Aşağıdaki örnek, 3.3’teki if/else yapısına mouseX, mouseY ve dist() eklenmiş halidir; bu üç kavram artık tanıtılmıştır.

Kod bloğu: Fare daireye yaklaştıkça renk değişen çizim.

function draw() {  background(240);   let merkezX = 200;  let merkezY = 200;  let yaricap = 50;   let mesafe = dist(mouseX, mouseY, merkezX, merkezY);   if (mesafe < yaricap) {    fill(50, 200, 80);   // Yeşil — fare dairenin içinde (tam kenar hariç)  } else {    fill(200, 50, 50);   // Kırmızı — fare uzakta  }   noStroke();  ellipse(merkezX, merkezY, yaricap * 2, yaricap * 2);}

mousePressed() ile tek tıklama

mouseIsPressed draw() içinde sürekli kontrol edildiğinde tuş basılı tutulduğu sürece true döner. Skor gibi tek seferlik sayılması gereken olaylarda mousePressed() genellikle daha uygundur.

Tablo 3.

Kod bloğu: mousePressed() ile tek tıklama yakalama.

let tiklandi = false; function mousePressed() {  tiklandi = true;} function draw() {  background(220);  if (tiklandi) {    fill(0, 180, 0);    textSize(20);    textAlign(LEFT, TOP);    text("Tiklandi!", 150, 200);  }}

Daire Tıklama oyununda klavye girdisi (keyIsDown, keyPressed()) kullanılmaz; klavye girdisi ilerleyen bölümlerde sistematik ele alınacaktır.

4.2. Adım Adım: Daire Tıklama Oyunu

Daire Tıklama (Circle Clicker), ekranda beliren hedef daireye tıklayarak skor toplamayı amaçlayan basit bir refleks oyunudur. Bu oyun yalnızca değişken ve if/else bilgisiyle kodlanabilir; döngü veya dizi gerektirmez.

Oyun kuralları:

• Ekranda rastgele konumda bir hedef daire görünür.
• Oyuncu daireye tıkladığında skor 1 artar; daire yeni rastgele konuma taşınır.
• Belirli skora (örneğin 10) ulaşıldığında oyun kazanılır.
• Daireye tıklanmazsa skor değişmez.
• Oyun bitince yeni tur için sayfa yenilenir veya sketch yeniden çalıştırılır (bu örnekte ayrı menü yoktur).

Bu mini oyun öğretim amaçlıdır; benzer «hedefe tıkla / isabet al» mekaniğini denemek için kaynaklardaki çevrim içi örneklerden yararlanılabilir.

Aşağıdaki sıra, mousePressed() içindeki karar adımlarını özetler:

1. mousePressed() tetiklenir.
2. oyunBitti true ise → işlem yapılmaz (return).
3. Fare ile hedef arası mesafe hesaplanır (dist).
4. Mesafe yarıçaptan küçük değilse → skor değişmez.
5. Mesafe yarıçaptan küçükse → skor 1 artar.
6. Skor hedefe ulaştıysa → oyunBitti = true; aksi halde hedefe yeni rastgele konum atanır.

Adım 1: Değişkenleri tanımla

let hedefX;       // Hedef dairenin X konumulet hedefY;       // Hedef dairenin Y konumulet hedefYaricap = 40;let skor = 0;const HEDEF_SKOR = 10;let oyunBitti = false;

Adım 2: setup() — tuval ve ilk hedef konumu

Bu adımda p5.js’in iki parametreli random kullanımı ilk kez sistematik tanıtılır (önceki ana başlıklarda konum atamak için kullanılmamıştı).

function setup() {  createCanvas(500, 400);  // İlk hedef konumu — random(min, max) bu adımda tanıtıldı  hedefX = random(hedefYaricap, width - hedefYaricap);  hedefY = random(hedefYaricap, height - hedefYaricap);}

Hedef ellipse(hedefX, hedefY, hedefYaricap * 2, …) ile merkezden çizilir. Merkez sol kenara (0) veya sağ kenara (width) çok yaklaşırsa şeklin bir kısmı tuval dışına taşar; oyuncu eksik görünen bir hedefe tıklamaya çalışır. Bu yüzden X için alt sınır hedefYaricap, üst sınır width - hedefYaricap seçilir (Y için height ile aynı mantık): merkez her zaman kenardan en az bir yarıçap içeride kalır ve elips bütünüyle görünür.

Adım 3: draw() — çizim ve oyun durumu

function draw() {  background(25, 30, 50); // Koyu arka plan   if (!oyunBitti) {    // Hedef daire    fill(255, 180, 0);    noStroke();    ellipse(hedefX, hedefY, hedefYaricap * 2, hedefYaricap * 2);  } else {    // Kazanma ekranı    fill(255);    textSize(32);    textAlign(CENTER, CENTER);    text("Kazandınız!", width / 2, height / 2);  }   // Skor göstergesi (her durumda)  fill(255);  textSize(20);  textAlign(LEFT, TOP);  text("Skor: " + skor, 15, 15);}

!oyunBitti ifadesi "oyun bitmediyse" anlamına gelir. ! operatörü boolean değeri tersine çevirir. textSize() ve textAlign() bu alt bölümde (2.4) özetlenmiştir; text() daha önce tanıtılmıştır.

Adım 4: mousePressed() — tıklama kontrolü

function mousePressed() {  if (oyunBitti) {    return; // Oyun bittiyse aşağıdaki satırlar çalışmaz  }   let mesafe = dist(mouseX, mouseY, hedefX, hedefY);   if (mesafe < hedefYaricap) {    skor = skor + 1;     if (skor >= HEDEF_SKOR) {      oyunBitti = true;    } else {      hedefX = random(hedefYaricap, width - hedefYaricap);      hedefY = random(hedefYaricap, height - hedefYaricap);    }  }}

Hedef vurulduğunda skor bir artar; hedef skora ulaşılmadıysa random() ile yeni konum atanır. return sayesinde oyun bittikten sonra yapılan tıklamalar işlenmez.

Adım 5: Tam kod (birleştirilmiş)

Kod bloğu: Daire Tıklama oyununun tam kodu.

let hedefX;let hedefY;let hedefYaricap = 40;let skor = 0;const HEDEF_SKOR = 10;let oyunBitti = false; function setup() {  createCanvas(500, 400);  hedefX = random(hedefYaricap, width - hedefYaricap);  hedefY = random(hedefYaricap, height - hedefYaricap);} function draw() {  background(25, 30, 50);   if (!oyunBitti) {    fill(255, 180, 0);    noStroke();    ellipse(hedefX, hedefY, hedefYaricap * 2, hedefYaricap * 2);  } else {    fill(100, 255, 100);    textSize(32);    textAlign(CENTER, CENTER);    text("Tebrikler! 10 puana ulaştınız.", width / 2, height / 2);  }   fill(255);  textSize(20);  textAlign(LEFT, TOP);  text("Skor: " + skor + " / " + HEDEF_SKOR, 15, 15);} 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 {      hedefX = random(hedefYaricap, width - hedefYaricap);      hedefY = random(hedefYaricap, height - hedefYaricap);    }  }}

Bu kod p5.js Web Editor'e yapıştırılıp doğrudan çalıştırılabilir. Oyun, if/else ve değişken kavramlarının bir arada kullanıldığı ilk tam örnektir; çoklu hedefler sonraki ana başlıklarda ele alınır.

Özet

Fare etkileşimi, önceki ana başlıkta kurulan koşullu mantığı doğrudan oyuncu eylemine bağlar. p5.js’te mouseX ve mouseY imlecin tuval üzerindeki konumunu her frame günceller; mouseIsPressed tuş basılı tutulduğu sürece her frame doğru değerini alırken mousePressed() yalnızca basma anında bir kez çalışan bir olay fonksiyonudur. Bu ayrım, skor artışı gibi tek seferlik sayılması gereken işlemlerin draw içinde tekrarlanarak hatalı biçimde çoğalmasını önler. Aynı bölümde metin araçları da toparlanır: text mesajı yazar, textSize yazı boyutunu belirler, textAlign ise verilen noktanın metnin hangi kenarına oturacağını seçer.

dist(x1, y1, x2, y2) iki nokta arasındaki Öklid mesafesini döndürür; bu değer hedef dairenin yarıçapıyla karşılaştırıldığında “tıklama daireye isabet etti mi?” sorusu geometrik bir koşula dönüşür. Daire Tıklama oyunu bu araçları tek bir sketch’te birleştirir: hedefin konumu random(min, max) ile kenardan en az bir yarıçap içeride seçilir, mousePressed() içinde isabet sınanır, skor bir artar ve hedef yeni bir rastgele konuma taşınır. Hedef skora ulaşıldığında oyunBitti bayrağı devreye girer ve return sonraki tıklamaları etkisiz kılar. Kaçırmada puan kaybı ve skorun sıfırın altına düşmesiyle kaybetme gibi kurallar Sıra Sizde etkinliklerinde genişletilir.

Böylece mini oyun, dizilere ve çoklu nesne yapılarına geçmeden önce girdi–karar–geri bildirim döngüsünü pekiştirir.

Neler Öğrendik?

Soru 1 Daireye tıklanıp tıklanmadığını anlamak için en uygun araç hangisidir?

Soru 2 Skorun bir tıklamada birden fazla artmasını önlemek için ne yapılır?

Soru 3 mouseX / mouseY neyi verir?

Soru 4 Daire Tıklama iskeletinde hedef yenileme tipik olarak ne zaman yapılır?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Mesafe ≤ yarıçap ise geometrik isabet vardır.
• İlgili Konu: 4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Soru 2: Doğru Cevap: A

• Çözüm: draw içinde mouseIsPressed ile artış tekrarlanabilir; olay tek seferliktir.
• İlgili Konu: 4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Soru 3: Doğru Cevap: B

• Çözüm: p5.js imleç koordinatlarını bu sistem değişkenlerinde tutar.
• İlgili Konu: 4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Soru 4: Doğru Cevap: B

• Çözüm: İsabet sonrası hedef yeni konuma taşınır.
• İlgili Konu: 4.2. Adım Adım: Daire Tıklama Oyunu

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.
• Microsoft. (n.d.). Visual Studio Code. https://code.visualstudio.com/
• p5.js Foundation. (n.d.). dist(). p5.js Reference. https://p5js.org/reference/p5/dist/
• p5.js Foundation. (n.d.). mouseX. p5.js Reference. https://p5js.org/reference/p5/mouseX/
• p5.js Foundation. (n.d.). p5.js Web Editor. https://editor.p5js.org/
• p5.js Foundation. (n.d.). random(). p5.js Reference. https://p5js.org/reference/p5/random/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Sweigart, A. (2017). Invent Your Own Computer Games with Python (4th ed.). No Starch Press. (Benzer mini oyun örnekleri için.)
• The Coding Train. (n.d.). Games [Öğretici parkur]. https://thecodingtrain.com/tracks/games/

Bölüm 1 — 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: Algoritma için en uygun tanım hangisidir?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.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: Yaratıcı kodlamanın eğitimdeki temel katkısı nedir?

Doğru cevap: A

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

SORU 4: “Basit bir oyun yap” ifadesi neden doğrudan talimat sayılmaz?

Doğru cevap: A

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

SORU 5: «Programlama, p5.js ve İlk Sketch» 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 (Programlama, p5.js ve İlk Sketch) 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: p5.js tuvalinde (0,0) noktası nerededir?

Doğru cevap: B

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

SORU 2: setup ile draw farkı nedir?

Doğru cevap: B

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

SORU 3: 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 4: fill(255, 0, 0) tipik olarak neyi ayarlar?

Doğru cevap: B

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

SORU 5: «Koordinat Sistemi, Çizim, setup ve draw» 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 (Koordinat Sistemi, Çizim, setup ve draw) 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: let skor = 0 ile const MAX = 10 için doğru ifade hangisidir?

Doğru cevap: B

Genel açıklama: const ile kurulan bağ yeniden atanamaz; let güncellenebilir. İlgili Konu: 3.1

SORU 2: can > 0 && !bitti ne zaman true olur?

Doğru cevap: B

Genel açıklama: && her iki yanın true olmasını ister; !bitti bitmemiş demektir. İlgili Konu: 3.2

SORU 3: Aşağıdaki hangi satır karşılaştırma yapar (atama değil)?

Doğru cevap: B

Genel açıklama: === sıkı eşitlik üretir; tek = atamadır. İlgili Konu: 3.2

SORU 4: if / else if / else zincirinde else ne zaman çalışır?

Doğru cevap: B

Genel açıklama: else kalan durumları yakalar. İlgili Konu: 3.3

SORU 5: skor = skor + 1 ile skor == skor + 1 farkı nedir?

Doğru cevap: B

Genel açıklama: == karşılaştırır; artırması beklenen yerde atama kullanılmalıdır. İlgili Konu: 3.2

SORU 6: Boolean ifade sonucu olarak hangisi doğrudur?

Doğru cevap: B

Genel açıklama: 10, 10’a büyük eşittir. İlgili Konu: 3.2

SORU 7: || operatörü için doğru örnek hangisidir?

Doğru cevap: B

Genel açıklama: VEYA: taraflardan biri yeterli. İlgili Konu: 3.2

SORU 8: Oyun kodunda skor artışı hangi bağlamda daha güvenlidir?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer. İlgili Konu: 3.3

SORU 9: else if atlanırsa ne olur?

Doğru cevap: B

Genel açıklama: Zincir kısa devre eder. İlgili Konu: 3.3

SORU 10: Aşağıdaki hangisi tipik bir mantık hatasıdır (sözdizimi değil)?

Doğru cevap: B

Genel açıklama: Kod çalışır ama istenen oyun kuralı oluşmaz. İlgili Konu: 3.3

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

SORU 1: Daireye tıklama testi için en doğru yaklaşım hangisidir?

Doğru cevap: B

Genel açıklama: Mesafe yarıçaptan küçük/eşitse isabet vardır. İlgili Konu: 4.1

SORU 2: Skorun bir basışta birden fazla artmasını önlemek için ne yapılır?

Doğru cevap: B

Genel açıklama: draw + basılı tutma tekrarlı artış üretir. İlgili Konu: 4.1

SORU 3: mouseX / mouseY neyi verir?

Doğru cevap: B

Genel açıklama: Sistem değişkenleri imleç konumudur. İlgili Konu: 4.1

SORU 4: İsabet sonrası hedef yenilemede tipik adım nedir?

Doğru cevap: B

Genel açıklama: Hedef yeni konuma taşınır. İlgili Konu: 4.2

SORU 5: text(skor, 20, 30) ne işe yarar?

Doğru cevap: B

Genel açıklama: text metin çizer. İlgili Konu: 4.1

SORU 6: Yarıçap 40 iken dist(...) === 40 durumu ne anlama gelir?

Doğru cevap: B

Genel açıklama: <= ile sınır dahil edilir. İlgili Konu: 4.1

SORU 7: Daire Tıklama’da random(width) kullanımı için doğru gerekçe?

Doğru cevap: B

Genel açıklama: Rastgele X üretir. İlgili Konu: 4.2

SORU 8: Aşağıdaki hangi hata isabeti yanlış negatif yapar (vurduğu hâlde saymama)?

Doğru cevap: B

Genel açıklama: Geometri uyuşmazlığı isabeti kaçırır. İlgili Konu: 4.1

SORU 9: mouseIsPressed ile mousePressed() farkı?

Doğru cevap: B

Genel açıklama: Durum vs olay ayrımı kritiktir. İlgili Konu: 4.1

SORU 10: Geliştirme: skora ek olarak can sistemi eklemek için en uygun yer?

Doğru cevap: B

Genel açıklama: Oyun kuralı koşula bağlanır. İlgili Konu: 4.2

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

A1. «Programlama, p5.js ve İlk Sketch» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Programlama, p5.js ve İlk Sketch» 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. «Koordinat Sistemi, Çizim, setup ve draw» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Koordinat Sistemi, Çizim, setup ve draw» 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. «Değişkenler, Operatörler ve Koşullu İfadeler» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Değişkenler, Operatörler ve Koşullu İfadeler» 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 4 — Açık Uçlu

A1. «Fare Girdisi ve Daire Tıklama Oyunu» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. 03-daire-tiklama örneğini temel alarak bu ana başlığa özgü bir kural veya görsel geri bildirim ekleyin; değişen satırları 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.