Bölüm 1 · Sunum 1

Programlama, p5.js ve ilk sketch

Önce nasıl düşüneceğimizi konuşacağız. Sonra tarayıcıda ilk tuvalimizi açacağız.

Algoritma nedir?Neden p5.js?Web Editorİlk sketch

Bir robota çay demlemeyi nasıl anlatırsınız?

Robot hiçbir şeyi kendiliğinden bilmiyor. Ne söylerseniz onu, söylediğiniz sırayla yapıyor.

İki dakika: yanınızdaki arkadaşınızla adımları yazın.

Adım adım, sırayla, eksiksiz

  1. Suyu kaynat.
  2. Demliğe çay koy.
  3. Kaynar suyu ekle.
  4. Demlenmesini bekle.
  5. Servis et.
Bir adımı atlarsanız?Çay olmaz. Sırayı bozarsanız da olmaz.
Bilgisayar da böyleNe yazdıysanız onu yapar. Eksik bıraktığınız adımı kendisi tamamlamaz.

Programlama ve algoritma

ProgramlamaBilgisayara belirli bir görevi yaptırmak için verilen, adım adım yazılmış talimatlar bütünüdür.
AlgoritmaBir problemi çözmek ya da bir hedefe ulaşmak için izlenen sonlu, açık ve sıralı adımlar dizisidir.
SonluBir yerde biter.
AçıkYoruma yer bırakmaz.
SıralıSıra değişirse sonuç değişir.

Çay tarifi bir algoritmadır. Onu bir dilde yazdığınızda program olur.

“Algoritma” sözcüğü nereden geliyor?

el-Harezmi’nin temsilî portresi
Temsilî portre. Yaşadığı dönemden kalma bir resmi yok.

el-Harezmi

  • 9. yüzyılda yaşamış matematikçi (Al-Khwarizmi).
  • “Algoritma” sözcüğü onun adından türedi.
  • Zamanla anlamı genişledi: belirli kurallara göre çözüm yöntemi.

“Basit bir oyun yap.”
Bu bir talimat mı?

Bilgisayar bu cümleyle ne yapabilir? Hangi bilgi eksik?

Büyük işi küçük adımlara böl

Basit bir oyun yap

  1. Ekranda bir daire çiz.
  2. Daireyi sağa hareket ettir.
  3. Daire kenara değince yönünü tersine çevir.
Algoritmik düşünceBüyük bir problemi daha küçük ve yönetilebilir alt problemlere ayırma becerisidir.

Oyun programlamanın temeli bu iki iş: parçalamak ve sıralamak.

Bilgisayar ne derseniz onu yapar

“Ekmeğe reçel sür.”
🧑‍🍳
talimat
Kavanozun kapağını aç denmedi…
🤖
robot · kapalı kavanozu ekmeğe sürüyor
Ama ben onu kastetmemiştim!
🤦
her programcının ilk haftası

Sınıfta deneyin: bir arkadaşınız robot olsun, yalnızca söylenenleri harfiyen yapsın. İnternette “Exact Instructions Challenge” adıyla bilinen oyun.

Algoritmayı bilgisayara hangi dille anlatacağız?

JavaScriptProgramlama dilimiz. Web tarayıcısında çalışır, ek bir şey kurmak gerekmez. Günümüzün en yaygın dillerinden biri.
p5.jsJavaScript’in görsel kütüphanesi. Şekil çizmek, renk vermek, fareyi okumak ve animasyon yapmak için hazır komutlar sunar.
Programlama diliAlgoritmaları bilgisayara aktarmak için kullanılan biçimsel sistemdir.

Yaratıcı kodlama

Yaratıcı kodlama (creative coding)Yazılımın teknik disiplinini görsel sanatların ifade biçimleriyle birleştiren, estetik ve etkileşimli dijital eserler üretmeyi hedefleyen yaklaşımdır.
Klasik yolDeğişken, döngü, koşul… İlk haftalarda sonuç yalnızca konsolda bir satır yazı. Motivasyon düşebilir.
p5.js ileAynı kavramlar renkli şekillere, hareket eden nesnelere ve oyun mekaniklerine dönüşür.

p5.js nereden geldi?

2001ProcessingMIT’de Ben Fry ve Casey Reas geliştirdi. Amaç: programlamayı sanatçılar ve tasarımcılar için erişilebilir kılmak.
2014p5.jsLauren McCarthy önderliğinde doğdu. Processing’in felsefesini JavaScript ve HTML5 ile tarayıcıya taşıdı.

Neden p5.js ile öğreniyoruz?

🚀Kurulum yokWeb Editor tarayıcıda açılır; hemen yazıp çalıştırırsınız.
👀Anında görüntüdraw() sürekli yenilenir. Kodu değiştirince sonucu hemen görürsünüz.
✏️SketchProgram bir “taslak”tır. Programlama, üzerinde oynanan bir eskiz gibi düşünülür.
🌍ToplulukThe Coding Train, Patt Vira, OpenProcessing, GitHub. Başkasının kodunu okuyarak öğrenmek yaygın.

p5.js bir oyun motoru değildir

Unity ya da Godot gibi değilHazır fizik, sahne yönetimi ve varlık (asset) sistemi yok. Bu derste oyun mekaniklerini sıfırdan kodlayacağız. Böylece arkadaki mantığı adım adım göreceğiz.
Ek kütüphaneler var, ama…
  • p5.play: sprite, animasyon, basit çarpışma.
  • Matter.js: yerçekimi ve sert cisim çarpışması.
Prototipi hızlandırırlar ama “sihirli kutu” gibi davranırlar. Burada kullanmıyoruz.

Dünyaca bilinen oyunlar da küçük başladı

Tennis for Two oyunu bir osiloskop ekranında
Tennis for Two, 1958: bir osiloskopta tenis. Kaynak: Wikimedia Commons, Brookhaven National Laboratory (kamu malı)
Pong 1972İki dikdörtgen, bir kare top. Bu kitabın 4. bölümündeki bilgiyle yazılabilir.
Tetris 1984Aleksey Pajitnov tek başına yazdı. Bir ızgara, yedi şekil, birkaç kural.
Flappy Bird 2013Tek kişinin kısa sürede yaptığı oyun: bir kuş, borular, tek tuş.

Üretken sanat ve Genuary

Üretken sanat (generative art)Görüntü, kural ve rastgelelikle kodla üretilir. Her çalıştırmada sonuç biraz farklı olabilir.
GenuaryHer ocak ayında düzenlenir. Katılımcılar günlük istemlere (prompt) göre kod sanatı üretir; örneklerin çoğu p5.js ile yapılır.

Fikir toplamak için: OpenProcessing, p5.js Web Editor galerisi, The Coding Train, Patt Vira.

Bu ders oyun mekaniğine odaklanıyor. Üretken sanat zorunlu değil; merak edenler için açık bir kapı.

İki satırlık kuraldan bitmeyen desen

Kural: yazı tura at; tura gelirse \, yazı gelirse / çiz. 1980’lerin ev bilgisayarlarından kalma ünlü “10 PRINT” deseni. Kodu şimdi anlamanız gerekmiyor.

p5.js Web Editor

  1. editor.p5js.org adresine girin. Hazır bir şablon açılır.
  2. ▶ Play ile çalıştırın, ■ ile durdurun.
  3. Hesap açın. Projeleriniz bulutta saklanır.
  4. Kaydet: File › Save ya da Ctrl+S (Mac: Cmd+S).
İlk bölümler için yeterliAyrı bir yazılım indirmiyoruz. Örneklerin hepsi Web Editor’da çalışacak şekilde anlatılıyor.

Editörü tanıyalım

p5.js Web Editor: kod paneli, önizleme ve konsol
Solda dosyalar ve kod · üstte Play / Stop · sağda önizleme (tuval) · altta konsol

Editörün dört bölümü

1Dosya paneliSolda. Projedeki dosyalar: sketch.js, index.html, style.css.
2Kod paneliJavaScript / p5.js kodunu buraya yazarız. Satır numaraları burada.
3ÖnizlemeSağda. Kod çalışınca oluşan görsel çıktı, yani tuval.
4KonsolAltta. Hata mesajları ve console.log() çıktıları burada görünür.

Aynı kod kendi bilgisayarınızda da çalışır

  1. VS Code (ya da sevdiğiniz bir editör) kurun.
  2. Boş bir klasöre iki dosya koyun: index.html ve sketch.js.
  3. index.html p5.js’i ve sketch.js’i yükler. setup / draw sketch.js’e yazılır.
  4. Klasörü yerel sunucuyla açın: VS Code’da Live Server eklentisi.
Çift tıklamayınindex.html’e çift tıklamak bazı tarayıcılarda kısıtlara takılır. Yerel sunucu kullanın.
Ne zaman yerel?Proje birkaç dosyaya yayılınca ya da değişiklikleri Git ile saklamak isteyince.

index.html iskeleti

CDN (içerik dağıtım ağı)Kütüphane dosyasını indirmeden, internetteki bir adresten tarayıcıya yükleme yoludur. 5. satır bunu yapar.
  • Bilgisayarınızda p5.js kopyası olmasa da sketch çalışır.
  • İnternet bağlantısı gerekir.
  • Çevrimdışı çalışmak için p5js.org/download adresinden indirip yerel yoldan bağlayın.

Play’e basınca ekranda ne göreceğiz?

Çalıştırmadan önce tahmin edin. Kaç satır gerçekten bir iş yapıyor?

İlk sketch: gri bir kare

createCanvas(400, 400) 400 piksel genişliğinde, 400 piksel yüksekliğinde bir çizim alanı (canvas) açar.
background(220) arka planı boyar. Sayı 0 (siyah) ile 255 (beyaz) arasındadır.

Yorum satırları

Yorum (comment)Kodun yanına ya da üstüne yazılan, programın çalışmasını etkilemeyen açıklama metnidir.
  • // satırın sonuna kadar sürer.
  • /* … */ birden fazla satırı kapsar.
  • Okuyana ve gelecekteki size ne yapıldığını hatırlatır.
  • Bu derste çoğunlukla // kullanacağız.

Her sketch’te iki fonksiyon var

setup()Program başlarken bir kez çalışır. Tuvali burada kurarız.
draw()Ardından tekrar tekrar çalışır. Çizimi buraya yazarız.

Her p5.js projesine sketch (taslak) denir. Bir sketch en az bu iki fonksiyonu içerir.

İkisinin ayrıntısını sonraki derste, animasyonla birlikte göreceğiz.

console.log(): konsola yaz

Tuvalde görünmez; alttaki konsola yazar.
Hata ayıklamak ve bir değeri gözlemek için kullanılır.
Birden fazla değer alır: console.log("sayac:", sayac)

İlk günün üç tuzağı

Parantezler( ) ve { } her zaman eşleşmeli. Eksik parantez en sık yapılan sözdizimi hatası.
Noktalı virgülJavaScript’te çoğu yerde zorunlu değil. Yine de belirsizliği azaltır; örneklerde hep koyuyoruz.
Büyük / küçük harfcreateCanvas ile createcanvas aynı şey değil. Komutları olduğu gibi yazın.

Bu kodda iki hata var. Bulun.

İkisi de eksik parantez

3. satırsetup’ın gövdesi kapanmamıştı: } eksikti.
6. satırbackground(220 açılmış ama kapanmamıştı: ) eksikti.

Konsol hatanın satırını söyler. Önce konsola bakmayı alışkanlık edinin.

Herkesin başına gelir

🔍Hata 1. satırda değilmişİki saat sonra: eksik bir )
İyi haberYazım hataları en kolay hatalardır: konsol satır numarasını söyler.
  • Önce konsoldaki kırmızı mesajı okuyun.
  • Gösterilen satıra ve bir üstündeki satıra bakın.
  • Açılan her ( ve { için bir kapanış arayın.

Önce izleyelim: zıplayan top

İzlerken not alın: top her an hangi kararları veriyor? Sıradaki etkinlikte bu hareketi Türkçe adımlara böleceksiniz.

Zıplayan topu adımlara bölün

  1. “Ekranda zıplayan bir top” hedefini kendi cümlelerinizle 5–7 adıma bölün. Kod yok, yalnızca sıralı liste.
  2. Aynı hedefi bir yapay zekâya adım adım yazdırın. Onun listesini kendinizinkiyle karşılaştırın.
  3. Eksik ya da sırası yanlış adımları düzeltin.
KuralYapay zekâdan henüz kod istemeyin. Yalnızca sıralı talimat listesi isteyin.

Editörde ilk denemeler

  1. Tuvali 600 × 300 yapın.
  2. Arka planı sırayla siyah, beyaz ve koyu gri yapın. Hangi sayıları kullandınız?
  3. setup içinde adınızı konsola yazdırın.
  4. Kendi cümlenizle bir // yorumu ve bir /* */ yorumu ekleyin. Çıktı değişti mi?
  5. Bir parantezi bilerek silin. Konsol ne diyor? Hatayı düzeltin.

Hangisi algoritma sayılmaz?

  1. 1’den 10’a kadar say; her sayıyı ekrana yaz.
  2. Suyu kaynat, çayı koy, beş dakika bekle, servis et.
  3. Bir sayı tut. Sıfırdan büyükse 1 çıkar ve yinele; sıfırsa dur.
  4. Güzel görünen bir renk seç; daha güzelini bulana kadar denemeye devam et.

“Güzel” açık değil, “daha güzelini bulana kadar” sonlu değil. Algoritma sonlu, açık ve sıralı olmalı.

Bir saniye sonra konsolda ne olur?

  1. Bir A, bir B
  2. Bir A, ardından yaklaşık 60 tane B
  3. 60 A ve 60 B
  4. Hiçbir şey; tuval siyah olur

setup bir kez çalışır. draw saniyede yaklaşık 60 kez yinelenir.

index.html’den CDN satırını silerseniz?

  1. Tuval beyaz açılır.
  2. Tuval hiç oluşmaz; p5.js yüklenmediği için setup ve draw’ı çağıran olmaz.
  3. Sketch daha hızlı çalışır.
  4. Hiçbir şey değişmez; p5.js tarayıcıda zaten vardır.

p5.js tarayıcının parçası değildir. createCanvas, background ve draw döngüsü o dosyadan gelir.

Merak edenler için kaynaklar

The Coding TrainCode! Programming with p5.jsDaniel Shiffman’ın sıfırdan başlayan video dizisi (İngilizce).thecodingtrain.com › 1-intro › 1-intro Patt ViraBuilding BlocksYaratıcı kodlamaya giriş dizisinin ilk dersi.pattvira.com › intro-to-creative-coding › building-blocks
The Coding Trainp5.js Web EditorEditörün bölümleri, kaydetme ve paylaşma.thecodingtrain.com › 1-intro › 2-web-editor Kitap · MIT Press10 PRINTAz önceki tek satırlık desen üzerine yazılmış, ücretsiz okunabilen bir kitap.10print.org

Bugün ne öğrendik?

  • Algoritma: sonlu, açık ve sıralı adımlar. Program, bu adımların bir dilde yazılmış hâli.
  • Algoritmik düşünce: büyük işi küçük adımlara bölmek ve sıralamak.
  • p5.js: kurulum yok, sonuç hemen ekranda. Ama oyun motoru değil; mekanikleri biz yazacağız.
  • Web Editor: dosyalar, kod, önizleme, konsol.
  • İlk sketch: setup + draw, createCanvas, background.
  • Yorum // ve /* */ çalışmayı etkilemez; console.log konsola yazar.

Sıradaki ders

Şekil tuvalde nereye çizilir?

Koordinat sistemi, temel şekiller ve renkler.

Sonraki sunum →Tüm sunumlar