← Kitap

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

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. Canvasta koordinatlar — dikmeler, eksen sayıları, rect ve ellipse
Görsel 1. Canvasta koordinatlar — dikmeler, eksen sayıları, rect ve ellipse

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.

Komut Açıklama Örnek Örnekte ne olur?
rect(x, y, w, h) Dikdörtgen çizer. (x, y) sol üst köşe; w genişlik, h yükseklik (piksel). rect(50, 50, 100, 80) Sol üst köşesi (50, 50) olan, 100 piksel genişliğinde ve 80 piksel yüksekliğinde bir dikdörtgen çizilir.
ellipse(x, y, w, h) Elips veya daire çizer. (x, y) merkez; w yatay çap, h dikey çap (dairede eşit). ellipse(200, 200, 60, 60) Merkezi (200, 200) olan, yatay ve dikey çapı 60 piksel olan bir daire çizilir.
line(x1, y1, x2, y2) Doğru parçası çizer. (x1, y1) başlangıç noktası; (x2, y2) bitiş noktası. line(0, 0, 400, 400) Tuvalin sol üst köşesinden (0, 0) sağ alt köşesine (400, 400) uzanan bir köşegen çizgi çizilir.
point(x, y) Tek piksel nokta çizer. (x, y) noktanın konumu. point(100, 150) (100, 150) konumuna tek bir nokta konur.
text(metin, x, y) Tuvale metin yazar. metin yazılacak string (veya sayı); (x, y) metnin konumu (varsayılan hizalama sol-alt). text("Skor: 7", 20, 40) "Skor: 7" yazısı, varsayılan hizalamayla yaklaşık (20, 40) konumundan başlayarak ekrana basılır.
fill(r, g, b) Sonraki şekillerin iç dolgu rengini ayarlar (r, g, b: 0–255). Tek sayı gri ton da olabilir. fill(255, 0, 0) Sonraki şekillerin içi kırmızıya boyanır.
stroke(r, g, b) Sonraki şekillerin kenar çizgisi rengini ayarlar. stroke(0) Sonraki şekillerin kenarı siyah çizilir.
strokeWeight(kalinlik) Kenar çizgisinin kalınlığını piksel cinsinden ayarlar. strokeWeight(2) Kenar çizgisi 2 piksel kalınlığında olur.
noFill() Dolguyu kapatır; yalnızca kenar çizilir. — Sonraki şekillerde iç dolgu olmaz; yalnızca çerçeve görünür (aşağıdaki görsele bakın).
noStroke() Kenar çizgisini kapatır; yalnızca dolgu görünür. — Sonraki şekillerde kenar çizilmez; yalnızca dolgu görünür (aşağıdaki görsele bakın).

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

Kod 1.

javascript
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. Aynı 100×100 kare — strokeWeight(1) ve strokeWeight(50)
Görsel 2. Aynı 100×100 kare — strokeWeight(1) ve strokeWeight(50)

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.

Kod 2.

javascript
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. strokeWeight — daire, dikdörtgen, çizgi, nokta ve büyütülmüş piksel
Görsel 3. strokeWeight — daire, dikdörtgen, çizgi, nokta ve büyütülmüş piksel

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.

Kod 3.

javascript
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. Dört kullanım — fill()+stroke(), noFill()+stroke(), fill()+noStroke(), noFill()+noStroke()
Görsel 4. Dört kullanım — fill()+stroke(), noFill()+stroke(), fill()+noStroke(), noFill()+noStroke()

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.

Kod 4.

javascript
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. Yedi adımda fill/stroke değişimi — her şekil çizildiği andaki ayarla
Görsel 5. Yedi adımda fill/stroke değişimi — her şekil çizildiği andaki ayarla

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

Tanım: RGB (Red-Green-Blue) — Ekran rengini kırmızı (R), yeşil (G) ve mavi (B) ışık bileşenlerinin karışımıyla ifade eden modeldir. p5.js'te her bileşen 0 ile 255 arasında bir tam sayıdır: 0 o bileşenin kapalı, 255 tam güçte olduğunu gösterir.

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.

Örnek komut R / G / B okuması Sonuç
fill(255, 0, 0) R=255, G=0, B=0 Yalnızca kırmızı açık → tam kırmızı dolgu
fill(0, 255, 0) R=0, G=255, B=0 Yalnızca yeşil açık → tam yeşil dolgu
fill(0, 0, 255) R=0, G=0, B=255 Yalnızca mavi açık → tam mavi dolgu
fill(255, 255, 255) R=G=B=255 Üç bileşen tam güçte → beyaz dolgu
fill(0, 0, 0) R=G=B=0 Üç bileşen kapalı → siyah dolgu
fill(128) tek sayı = gri ton R=G=B=128 kabul edilir → orta gri
fill(220, 50, 50) R=220, G=50, B=50 Kırmızı baskın, yeşil/mavi düşük → soluk kırmızı

Bilgi — renk kodu seçme: RGB sayılarını ezbere bilmek gerekmez. Tarayıcıda çalışan renk seçici (color picker) araçları, bir rengi tıklayınca karşılık gelen R, G, B (veya hex) değerlerini gösterir. Örnekler: Google’ın “color picker” araması, HTML Color Codes, Coolors veya tarayıcı geliştirici araçlarındaki renk paneli. Beğenilen rengin üç sayısını fill / stroke / background içine yazmak yeterlidir.

Bilgi — diğer renk modelleri: Renk yalnızca RGB ile ifade edilmez. Örneğin HSB (Hue–Saturation–Brightness; p5.js’te colorMode(HSB)) veya HSL (Hue–Saturation–Lightness) ton / doygunluk / parlaklık üzerinden çalışır. Bu kitapta çizim ve oyun örnekleri RGB (ve isteğe bağlı alfa) ile sınırlıdır; HSB/HSL’ye girilmez.

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

Tablo 3.

Biçim Örnek Kullanım
Gri ton (tek sayı) background(220) 0 siyah … 255 beyaz
RGB (üç sayı) fill(50, 100, 220) Kırmızı, yeşil, mavi
RGBA (dört sayı) fill(255, 0, 0, 120) Dördüncü değer alfa (opacity)

Tanım: Alfa (alpha) kanalı — Rengin ne kadar opak / saydam olduğunu belirleyen dördüncü bileşendir. p5.js’te alfa da 0–255 arasındadır: 0 tamamen görünmez (saydam), 255 tamamen opak, ara değerler yarı saydamdır. Aynı RGB ile fill(255, 0, 0) opak kırmızı, fill(255, 0, 0, 80) ise arkasındaki çizimin kısmen göründüğü soluk kırmızıdır. Üst üste binen şekillerde, HUD (Heads-Up Display — ekranın üstünde/köşesinde duran skor, can vb. bilgi paneli) veya vurgu efektlerinde sık kullanılır.

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.

Bilgi: fill ve stroke bir kez çağrılınca sonraki şekiller aynı rengi kullanır; yeni renk isteniyorsa komut yeniden yazılır.

Görsel 6. RGB örnekleri ve alfa kanalı — opak / yarı saydam / görünmez
Görsel 6. RGB örnekleri ve alfa kanalı — opak / yarı saydam / görünmez

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.

Kod 5.

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

Tanım: setup() — Program başladığında bir kez çalışan fonksiyondur; tuval oluşturma, başlangıç değişkenleri atama gibi hazırlık işlemleri burada yapılır.

Tanım: draw() — Hazırlık tamamlandıktan sonra sürekli tekrarlanan fonksiyondur; p5.js'te varsayılan olarak saniyede yaklaşık 60 kez çalışır (60 FPS — frames per second, saniyedeki frame sayısı). frameRate() fonksiyonu ile bu değer değiştirilebilir.

Tanım: Frame — draw() fonksiyonunun bir kez çalışması; ekranın bir kez güncellenmesi. Örneğin saniyede 60 FPS ise saniyede 60 frame üretilir.

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.

Fonksiyon Ne sıklıkla çalışır? Tipik görevler
setup() Program başında bir kez createCanvas(), başlangıç değişkenleri, frameRate()
draw() Sketch durana kadar sürekli (her frame) background(), çizim, basit konum güncelleme

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.

Değişken Anlam createCanvas(500, 400) sonrası
width Tuval genişliği (piksel) 500
height Tuval yüksekliği (piksel) 400

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. Dört tuval boyutu — createCanvas genişlik × yükseklik
Görsel 7. Dört tuval boyutu — createCanvas genişlik × yükseklik

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

Tanım: frameCount — p5.js yerleşik değişkeni; draw() fonksiyonu her çalıştığında 1 artan sayaçtır. İlk draw() çağrısında 1, ikincisinde 2 olur.

Tanım: Modulo operatörü (%) — Bölümden kalanı verir. Örneğin 7 % 3 ifadesinin sonucu 1'dir. frameCount % width ifadesi, sayacı 0 ile width - 1 aralığında döngüsel tutar; animasyonda konumun sol kenardan tekrar başlamasını sağlar.

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. setup() ve draw() çalışma sırası — hazırlık tek seferlik, draw sürekli tekrar
Görsel 8. setup() ve draw() çalışma sırası — hazırlık tek seferlik, draw sürekli tekrar

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.

Kod 6.

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

Örnek Olay: İlk Sketch'i Çalıştırma Tahmini etkinliği tamamlama süresi: 30–35 dakika.

Senaryo: p5.js Web Editor'e ilk kez giriş yapılmıştır. Ekranda yalnızca varsayılan boş sketch görünmektedir.

Durum Tespiti:

Problem Durumu: Kod yazılmadan önce ortamın ve temel çizim komutlarının deneyimlenmesi gerekir.

Tartışma Soruları:

Yapay Zekâ Etkileşimi: Referans Sayfası ve Yeni Çizim Fonksiyonları Tahmini etkinliği tamamlama süresi: 25–35 dakika.

Amaç: p5.js resmi belgelerini (reference / dokümantasyon) okuma alışkanlığı kazanmak; noLoop, loop, triangle, quad, square, ellipse, arc fonksiyonlarının ne işe yaradığını kaynaktan öğrenmek; takıldığınız noktalarda yapay zekâya yönelmek.

Not: Bu kitapta oyun örnekleri çoğunlukla rect, ellipse, line ve point ile ilerler; triangle, quad, square, arc, noLoop ve loop için sürekli ihtiyaç duymayacaksınız. Yine de bunları bilmek çizim dağarcığınızı ve genel programlama bilgi düzeyinizi artırır — bu yüzden referanstan tanımanız yeterlidir.

Bilgi — dokümantasyon neden önemli? Her programlama dilinin ve kütüphanenin bir resmi referans sayfası vardır: fonksiyonun adı, parametreleri, kısa açıklaması ve çoğu zaman çalışan örnek kod burada yer alır. Kitap veya video her komutu dökemez; yeni bir fonksiyon gördüğünüzde ilk bakılacak yer dokümantasyondur. Özellikle geniş kütüphanelerde yüzlerce, bazen binlerce fonksiyon bulunur — hepsini ezbere bilmek ne gerekir ne de mümkündür. Asıl beceri, ihtiyacınız olan komutu nerede arayacağınızı bilmek ve referansı okuyup doğru kullanmaktır. p5.js için bu adres p5.js Reference sayfasıdır. Yapay zekâ yardımcı olabilir; ancak önce resmi sayfayı okumak hem doğruyu hem de parametre sırasını öğrenmenin en güvenilir yoludur.

Adım 1 — Referansı okuyun. Aşağıdaki fonksiyonların her biri için p5.js referans sayfasını açın. Sayfada ne işe yaradığı, parametreler ve varsa örnek kod bölümlerine bakın; birer cümleyle kendi notlarınıza yazın.

Tablo 6.

Fonksiyon Referans
noLoop() https://p5js.org/reference/p5/noLoop/
loop() https://p5js.org/reference/p5/loop/
triangle() https://p5js.org/reference/p5/triangle/
quad() https://p5js.org/reference/p5/quad/
square() https://p5js.org/reference/p5/square/
ellipse() https://p5js.org/reference/p5/ellipse/
arc() https://p5js.org/reference/p5/arc/

Adım 2 — Kısa karşılaştırma. Notlarınıza şunları ekleyin:

Adım 3 — Hâlâ belirsizse yapay zekâya sorun. Referansı okuduktan sonra anlamadığınız nokta kaldıysa sohbet robotuna gidin. Önce dokümantasyonu okuduğunuzu belirtin; böylece yanıt resmi tanıma bağlanır.

Örnek İstem: "p5.js Reference’ta noLoop, loop, triangle, quad, square, ellipse ve arc sayfalarını okudum. Hâlâ netleşmeyen noktalarım: (1) noLoop sonrası draw neden yeniden çalışmaz, loop ile nasıl açılır? (2) triangle ve quad parametre sırası nasıl? (3) arc’ta start/stop açıları derece mi radyan mı, örnek kodla göster. Kısa Türkçe açıkla; her fonksiyon için 3–5 satırlık çalışan bir p5.js örneği ver."

Adım 4: Yapay zekânın verdiği örnekleri Web Editor’de deneyin. Çıktı referanstaki açıklamayla örtüşüyor mu kontrol edin; çelişki görürseniz yine resmi sayfayı esas alın.

Sıra Sizde: Kendi günlük bir rutininizi (ör. çay demlemek) 4–6 adımlık bir algoritma gibi yazın. Ardından bu adımlardan hangilerinin setup()’a, hangilerinin draw()’a daha çok benzediğini bir cümleyle gerekçelendirin.

Yapay Zekâ Etkileşimi: Koordinat Tahmini Tahmini süre: 15–20 dakika.

Amaç: Sol-üst orijin alışkanlığını pekiştirmek.

Adım 1: 400×400 tuvalde merkezde bir daire için x,y tahmini yazın. Adım 2: Yapay zekâdan aynı tuvalde köşe ve merkez örnekleri isteyin; tahmininizle karşılaştırın. Adım 3: “y aşağı artar” kuralını bozan bir hata senaryosu sorup düzeltme önerisini kendi sketch’inizde deneyin.

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

A) Sağ alt köşe

B) Sol üst köşe

C) Tuval merkezi

D) Tarayıcı başlığı

E) CSS margin

Soru 2 setup ile draw farkı nedir?

A) İkisi de yalnızca bir kez çalışır

B) setup bir kez, draw her frame tekrarlanır

C) draw yalnızca farede çalışır

D) setup rengi yasaklar

E) Fark yoktur

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

A) DNS’i yenilemek

B) Önceki frame izlerini temizleyerek sahneyi yenilemek

C) Diziyi sıralamak

D) HTML’i silmek

E) Ses açmak

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

A) Tuval boyutunu

B) Sonraki şekillerin iç rengini (kırmızı)

C) FPS’i sıfırlar

D) Klavyeyi kilitler

E) Dosya adını değiştirir

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

Soru 2: Doğru Cevap: B

Soru 3: Doğru Cevap: B

Soru 4: Doğru Cevap: B

Yararlanılan Kaynaklar

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