Bölüm 1 · Sunum 3

setup, draw ve ilk animasyon

Şekil çizmeyi biliyoruz. Bugün onları hareket ettireceğiz.

setup bir kezdraw her framewidth ve heightframeCount ve %

Bir çizgi filmde karakter gerçekten hareket ediyor mu?

Ekranda tek tek duran resimler var. Peki hareketi nasıl görüyoruz?

Hareket, art arda gösterilen resimlerdir

  • Her resim bir öncekinden biraz farklıdır.
  • Resimler yeterince hızlı değişince göz bunu hareket olarak görür.
  • p5.js de aynısını yapar: tuvali saniyede yaklaşık 60 kez yeniden çizer.
Framedraw() fonksiyonunun bir kez çalışması; ekranın bir kez güncellenmesi.
FPS (frames per second)Saniyedeki frame sayısı. 60 FPS ise saniyede 60 frame üretilir.

1878: koşan atın fotoğrafları

Muybridge’in art arda çektiği at fotoğraflarından oluşan animasyon
Kaynak: Wikimedia Commons, Eadweard Muybridge’in fotoğraflarından (kamu malı)

Eadweard Muybridge dörtnala koşan bir atı art arda dizdiği makinelerle fotoğrafladı.

  • Her fotoğraf tek başına durağandır.
  • Fotoğraflar hızlıca art arda gösterilince at koşar.
Bugün de aynıSinema, çizgi film ve oyun bu fikrin üstüne kurulu. draw() her çağrıldığında bu fotoğraflardan bir tane daha üretir.

Saniyede kaç resim yeterli?

Fareyi alttaki kutuların üstünde gezdirin. Hangi sayıdan sonra koşu “resim resim” olmaktan çıkıp akıcı görünüyor?

Oyunlar da resimleri sırayla gösterir

Super Mario Bros. 1985Mario’nun koşusu birkaç küçük resimden ibaret. Resimler sırayla değişince bacaklar hareket ediyor görünür.
Prince of Persia 1989Jordan Mechner kardeşini koşarken ve zıplarken filme aldı, kareleri tek tek çizime çevirdi.
Cuphead 2017Eski çizgi filmler gibi: karakterlerin bütün kareleri elle çizildi.
SpriteOyunda bir karakteri ya da nesneyi gösteren küçük resim. Animasyon, sprite’ların art arda değiştirilmesidir.

Sketch’in omurgası: iki fonksiyon

setup()Program başladığında bir kez çalışır. Tuvali oluşturmak, başlangıç değerlerini vermek gibi hazırlık işleri burada yapılır.
draw()Hazırlık bittikten sonra sürekli tekrarlanır. Varsayılan hız saniyede yaklaşık 60 kezdir. frameRate() ile bu değer değiştirilebilir.

Çalışma sırası

setup ve draw çalışma sırası
Hazırlık tek seferlik; draw sketch durana kadar tekrar eder.

Sıra hiç değişmez

  1. Program başlar.
  2. setup() bir kez çalışır: createCanvas() ve başlangıç ayarları.
  3. draw() ilk kez çalışır. Bu 1. frame.
  4. draw() yeniden çalışır. Bu 2. frame.
  5. 3. frame, 4. frame… Sketch durdurulana kadar.
Ne sıklıkla?Tipik işler
setup()Başta bir kezcreateCanvas(), başlangıç değerleri, frameRate()
draw()Her framebackground(), çizim, konum güncelleme

İlk haftanın klasiği

Daireyi setup’a çizdim. Neden kıpırdamıyor?
🤔
1. deneme
setup bir kez çalışır. Resim de bir kez çizilir.
🧑‍🏫
ipucu
Çizimi draw’a taşıdım. Oldu!
🥳
2. deneme

Kural: bir kez yapılacak hazırlık setup’a, her frame yenilenecek her şey draw’a.

Bu, oyun döngüsünün ilk hâli

setup() oyun dünyasını kurarTuval, başlangıç konumları, skorun sıfırlanması.
draw() her frame’de üç iş yapar
  1. Girdiyi okur.
  2. Durumu günceller.
  3. Ekranı yeniden çizer.

draw(), oyun döngüsünün (game loop) kalbidir. Bölüm 2’nin sonunda bu döngüye ayrıntılı döneceğiz.

Tuvalin boyutu: width ve height

DeğişkenAnlamıcreateCanvas(500, 400) sonrası
widthTuval genişliği (piksel)500
heightTuval yüksekliği (piksel)400
  • Bu iki değişkeni p5.js kendisi sağlar; biz tanımlamayız.
  • Kenara hizalarken ve ortalarken kullanılır.
  • Yatay orta nokta: width / 2

Farklı createCanvas, farklı tuval

Dört tuval boyutu
createCanvas(200, 200), (400, 200), (200, 400) ve (400, 400): önce genişlik, sonra yükseklik.

Sayı yazmak yerine width / 2

“Düzenle” ile tuvali createCanvas(300, 300) yapın. Daire hâlâ ortada mı? ellipse(250, 150, …) yazsaydık ne olurdu?

frameCount: kaçıncı frame’deyiz?

frameCountp5.js’in yerleşik değişkenidir. draw() her çalıştığında 1 artan bir sayaçtır: ilk çağrıda 1, ikincide 2 olur.

Sürekli artan bir sayımız var. Onu bir dairenin x konumuna yazarsak?

Daire ne yapar? Tuvalin sağ kenarına gelince ne olur?

Daire sağa kayar… ve bir daha gelmez

Her frame x bir piksel artıyor. 400’ü geçince daire tuvalin dışında kalıyor. Onu geri getirmenin bir yolu lazım.

Modulo: bölümden kalan

Modulo operatörü %Bölümden kalanı verir. Örneğin 7 % 3 ifadesinin sonucu 1’dir.

Sayı büyüdükçe kalan hep aynı aralıkta döner. Saatin 12’den sonra yeniden 1’e dönmesi gibi.

nn % 4
00
11
22
33
40
51
62
73
80

frameCount % width: sona gelince başa dön

frameCount % width sayacı 0 ile width − 1 arasında döndürür. Daire sağdan çıkınca soldan yeniden girer.

Pac-Man’in tüneli: bir kenardan çık, ötekinden gir

Pac-Man’de sağ kenardaki tünele giren karakter soldan çıkar; Asteroids’te gemi ekranın her kenarında aynısını yapar. İkisinin arkasında da bölümden kalan vardır.

background satırını draw’dan silersek ne olur?

Daire yine hareket eder mi? Ekranda başka ne görürüz?

Eski frame’ler silinmez, daire iz bırakır

background neden draw içinde?Her frame’in başında sahneyi temizler. Temizlenmezse yeni çizim eskilerin üstüne biner.

Hata mı, efekt mi? Yarı saydam background

Fareyi tuvalde gezdirin. Eski frame’ler tam silinmiyor, her frame biraz soluyor: kuyruklu yıldız izi. Windows’taki Solitaire’in kazanınca kartları saçtığı sahne de silinmeyen frame’lerden oluşur.

draw’ı durdurmak: noLoop() ve loop()

noLoop()draw() tekrarını durdurur. Hareket olmayan çizimlerde setup içine yazılır; draw yalnızca bir kez çalışır.
loop()Durmuş draw() tekrarını yeniden başlatır.

Geçen dersteki dört kombinasyon ve yedi adım örneklerinde noLoop() vardı: çizim değişmediği için tekrar etmeye gerek yoktu.

Her komutu ezberlemek gerekmez: referans sayfası

  • Her dilin ve kütüphanenin resmî bir referans sayfası (dokümantasyon) vardır.
  • Fonksiyonun adı, parametreleri, kısa açıklaması ve çalışan örneği orada bulunur.
  • Asıl beceri, ihtiyacınız olan komutu nerede arayacağınızı bilmektir.
  • p5.js için adres: p5js.org/reference
Bakılacak fonksiyonNe işe yarar?
square()Kare
triangle()Üç köşeli şekil
quad()Dört köşeli şekil
arc()Daire yayı
noLoop(), loop()draw’ı durdur, başlat

Oyun örneklerimiz çoğunlukla rect, ellipse, line ve point ile ilerleyecek. Diğerlerini referanstan tanımanız yeterli.

Referans sayfasını okuyun

  1. noLoop, loop, triangle, quad, square, ellipse ve arc sayfalarını açın. Her biri için bir cümlelik not alın.
  2. Karşılaştırın: rect ile square farkı ne? triangle ve quad kaç köşe ister? ellipse ile arc arasındaki fark ne?
  3. Hâlâ anlamadığınız bir nokta varsa yapay zekâya sorun. Önce referansı okuduğunuzu söyleyin.
  4. Yapay zekânın verdiği örnekleri editörde deneyin. Çelişki görürseniz resmî sayfayı esas alın.

İlk sketch’i çalıştırırken

  1. rect() ile ellipse() arasındaki konumlandırma farkı neden hata kaynağı olur?
  2. draw()’ın sürekli çalışması oyun geliştirmede ne anlama gelir?
  3. background() çoğu animasyonda neden her frame yeniden çağrılır?
  4. fill(255, 0, 0) ile fill(128) arasındaki fark ne? Gri ton ne zaman yeter?
  5. Alfa 0, 120 ve 255 iken aynı renk nasıl görünür? Oyun arayüzünde ne işe yarar?

Günlük bir rutin: setup mı, draw mı?

  1. Kendi günlük bir rutininizi (örneğin çay demlemek) 4–6 adımlık bir algoritma olarak yazın.
  2. Hangi adımlar setup()’a benziyor: bir kez yapılıyor mu?
  3. Hangi adımlar draw()’a benziyor: tekrar tekrar mı yapılıyor?
  4. Kararınızı birer cümleyle gerekçelendirin.

Animasyonu siz yönetin

Kayan daire örneğinden başlayın. Her adımda yalnızca bir satır değişecek.

  1. Daire soldan sağa değil, yukarıdan aşağı aksın.
  2. Daire iki kat hızlı gitsin.
  3. Daire sağdan sola gitsin.
  4. Daire yerinde dursun ama çapı 0’dan 200’e büyüsün, sonra başa dönsün.
  5. Zorlu: daire çapraz gitsin ve iz bıraksın.

250. frame’de dairenin x konumu kaç?

  1. 250
  2. 100
  3. 50
  4. 0

250’yi 100’e bölünce kalan 50. Daire tuvali iki kez geçmiş, üçüncü turun ortasında.

Bu sketch çalışınca ekranda ne görünür?

  1. Gri zeminde kırmızı daire
  2. Yalnızca gri zemin
  3. Yanıp sönen bir daire
  4. Hata verir

background en son çalışıyor ve daireyi her frame’de örtüyor. Sıra önemli.

createCanvas(400, 400) satırını draw’ın içine taşırsanız?

  1. Hiçbir şey değişmez.
  2. Tuval her frame büyür.
  3. Tuval saniyede 60 kez yeniden kurulur: gereksiz iş, yavaş ve hataya açık.
  4. Animasyon iki kat hızlanır.

Bir kez yapılacak hazırlık setup’ın işidir. draw’a yazılan her şey her frame tekrarlanır.

Merak edenler için kaynaklar

p5.js referansıdraw()Resmî tanım, noLoop ve frameRate ile ilişkisi.p5js.org/reference/p5/draw Happy CodingAnimationFrame, değişen konum ve iz bırakma üzerine adım adım anlatım (İngilizce).happycoding.io › tutorials › p5js › animation
The Coding TrainVariables: mouseX, mouseYsetup ile draw’ın akışını fareyle gösteren video.thecodingtrain.com › 2-variables › 1-mouse VikipediEadweard MuybridgeKoşan at fotoğraflarının hikâyesi.tr.wikipedia.org/wiki/Eadweard_Muybridge

Bugün ne öğrendik?

  • setup() başta bir kez; draw() saniyede yaklaşık 60 kez çalışır.
  • Frame: draw()’ın bir turu. FPS: saniyedeki frame sayısı.
  • width ve height tuvalin boyutunu tutar; ortalamak için width / 2.
  • frameCount her frame 1 artar; % ile başa döndürülür.
  • background her frame sahneyi temizler; yoksa şekiller iz bırakır.
  • Bilmediğiniz komut için ilk adres: p5js.org/reference.

Sıradaki ders

Program bir şeyi nasıl hatırlar?

Değişkenler, veri türleri ve operatörler.

Sonraki sunum →← Önceki