← Kitap

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ı:

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

Tanım: Programlama — Bilgisayara belirli bir görevi yerine getirmesi için verilen, adım adım yazılmış talimatlar bütünüdür.

Tanım: Algoritma — Belirli bir problemi çözmek veya bir hedefe ulaşmak için izlenen sonlu, açık ve sıralı adımlar dizisidir.

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.

Bilgi: Algoritma kavramının adı, 9. yüzyıl Pers matematikçisi el-Harezmi'nin (Al-Khwarizmi) adından türemiştir; zamanla «belirli kurallara göre çözüm yöntemi» anlamını kazanmıştır.

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

Tanım: Yaratıcı kodlama (creative coding) — Yazılım geliştirmenin teknik disiplini ile görsel sanatların ifade biçimlerini birleştiren, estetik ve etkileşimli dijital eserler üretmeyi hedefleyen yaklaşımdır.

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:

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.

Bilgi — üretken sanat (generative art) ve Genuary: Yaratıcı kodlama sıkça üretken sanat (generative art) ile kesişir: görüntü, kural ve rastgelelik kodla üretilir; sonuç her çalıştırmada biraz farklı olabilir. p5.js bu alanda özellikle yaygındır çünkü kurulum hafiftir ve görsel geri bildirim anındadır. Her ocak ayında düzenlenen Genuary etkinliğinde katılımcılar günlük istemlere (prompt) göre kod sanatı üretir; birçok örnek p5.js ile yapılır. Hazır işleri görmek ve fikir toplamak için OpenProcessing, p5.js Web Editor galerisi ve Coding Train / Patt Vira kanalları iyi başlangıç noktalarıdır. Bu kitap oyun mekaniğine odaklanır; üretken sanat zorunlu değildir, merak için yan kapıdır.

Dikkat: p5.js bir oyun motoru (game engine) değildir. Unity veya Godot gibi hazır fizik, sahne yönetimi ve varlık (asset) sistemleri sunmaz. Bu kitapta oyun mekanikleri sıfırdan kodlanacak; böylece arka plandaki mantık adım adım izlenebilecektir.

Bilgi: p5.js çekirdeğinin yanında ek kütüphaneler de vardır. Örneğin p5.play sprite (hareketli görsel nesne), animasyon ve basit çarpışma kolaylıkları sunar; Matter.js gibi fizik motorları yerçekimi ve sert cisim çarpışmasını simüle edebilir. Bu araçlar prototipi hızlandırır ancak “sihirli kutu” gibi davranabilir. Bu kitapta amaç temelleri görünür kılmak olduğu için bu tür ek kütüphaneler kullanılmaz; ileride ihtiyaç duyulursa p5.js kütüphanelerine bakılabilir.

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.

Tanım: CDN (Content Delivery Network, içerik dağıtım ağı) — Kütüphane dosyasını (ör. p5.min.js) kendi klasörünüze indirmeden, internetteki bir adresten tarayıcıya yükleme yoludur. Aşağıdaki script src="https://cdn.jsdelivr.net/..." satırı buna örnektir: bilgisayarınızda p5.js kopyası olmasa da sketch çalışır. İnternet bağlantısı gerekir; çevrimdışı çalışmak için dosyayı indirip yerel yoldan bağlamak gerekir (p5.js Download).

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

Kod 1.

html
<!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>

Bilgi: Resmi indirme ve kurulum seçenekleri için p5.js Download sayfasına bakılabilir. Kitap örneklerini denemek için Web Editor en hızlı yoldur (hesap açıp hemen Play). Proje büyüyüp birden fazla dosyaya yayıldığında veya değişiklikleri Git ile kaydetmek / geri almak istediğinizde dosyaları bilgisayarınızdaki bir klasörde tutmak (yerel ortam) daha uygundur.

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 arayüzü — kod paneli, önizleme ve konsol
Görsel 1. p5.js Web Editor arayüzü — kod paneli, önizleme ve konsol

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.

Tanım: console.log() — JavaScript'te konsola (alt panel) metin veya değer yazdıran fonksiyon. Önizleme tuvalinde görünmez; hata ayıklama ve değer gözlemi için kullanılır. Parantez içine bir metin ("Sketch başladı") veya birden fazla değer (console.log("sayac:", sayac)) verilebilir. Sketch çalıştırıldığında çıktı alt 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.

Kod 2.

javascript
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}

Tanım: Yorum (comment) — Kodun yanına veya üstüne yazılan, programın çalışmasını etkilemeyen açıklama metnidir. JavaScript’te satır sonuna kadar süren tek satırlık yorum // ile başlar; birden fazla satırı kapsayan yorum /* ile açılıp */ ile kapanır. Yorumlar hem okuyana hem gelecekteki size ne yapıldığını hatırlatır; bu kitapta çoğunlukla // kullanılır.

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.

Dikkat: JavaScript'te satır sonuna noktalı virgül (;) koymak sözdizimi açısından çoğu durumda zorunlu değildir; JavaScript satır sonlarını çoğu zaman otomatik ayırır. Yine de noktalı virgül kullanmak belirsizliği azaltır; örneklerde tutarlı biçimde kullanılır. Parantez () ve süslü parantez {} eşleşmelerine dikkat edilmelidir; eksik parantez en sık karşılaşılan sözdizimi hatalarından biridir.

Yapay Zekâ Etkileşimi: Algoritmayı Adımlara Bölme Tahmini süre: 15–20 dakika.

Amaç: Belirsiz bir oyun isteğini algoritmik alt adımlara ayırmayı pekiştirmek.

Adım 1: “Ekranda zıplayan bir top” hedefini kendi cümlelerinizle 5–7 adıma bölün. Adım 2: Yapay zekâya aynı hedefi adım adım yazdırın; sizin listenizle karşılaştırın. Adım 3: Eksik veya sırası yanlış adımları düzeltin; henüz kod istemeyin — yalnızca sıralı talimat listesi isteyin.

Ö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?

A) Rastgele seçilen renk listesi

B) Belirli bir hedefe giden sonlu, açık ve sıralı adımlar

C) Yalnızca fare tıklaması

D) CSS dosyasının adı

E) FPS değerinin kendisi

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

A) Yalnızca dosyayı silmek

B) Run ile çalıştırıp tuval çıktısını görmek

C) DNS kaydı oluşturmak

D) setup’ı silmek

E) İnterneti kapatmak

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

A) Görsel çıktıyla kavramı hemen gözlemlenebilir kılmak

B) Klavyeyi tamamen kaldırmak

C) Matematığı yasaklamak

D) Yalnızca sunucu tarafı yazmak

E) Renk körlüğünü zorunlu kılmak

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

A) Çünkü alt adımlara bölünmeden uygulanamaz

B) Çünkü p5.js desteklemez

C) Çünkü tarayıcı kapanır

D) Çünkü frameCount yasaktır

E) Çünkü değişken kullanılamaz

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

Soru 2: Doğru Cevap: B

Soru 3: Doğru Cevap: A

Soru 4: Doğru Cevap: A

Yararlanılan Kaynaklar

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