Bölüm 1 · Sunum 2

Koordinat sistemi, şekiller ve renkler

Bir şekli tuvalde tam istediğimiz yere, istediğimiz renkte çizmeyi öğreneceğiz.

(0, 0) nerede?rect, ellipse, linefill ve strokeRGB ve alfa

Matematik dersinde (3, 2) noktasını nasıl buluyordunuz?

Önce hangi yöne, sonra hangi yöne gidiyordunuz? (0, 0) neredeydi?

Hatırlayalım: matematikteki koordinat düzlemi

(0, 0) noktası, yani orijin, ortada.
x sağa doğru artar.
y yukarı doğru artar.
(3, 2): üç birim sağa, iki birim yukarı.

Peki ekranda (0, 0) nerede?

Bir tahmin yürütün: ortada mı, sol altta mı, başka bir yerde mi? y hangi yöne artıyor olabilir?

p5.js tuvalinde y aşağı doğru artar

Orijin (0, 0) sol üst köşede.
x sağa doğru artar. Burası aynı.
y aşağı doğru artar. Fark burada.

Neden böyle?Ekrandaki piksel satırları yukarıdan aşağı numaralanır. Ekrana çizen kütüphanelerin çoğunda düzen budur.

Fareyi tuvalde gezdirin, koordinatı okuyun

Kodun kendisi şimdilik önemli değil. Sol üst köşeye gidin: x ve y kaç? Sağ alt köşede?

Tuvalde koordinat okumak

Canvasta koordinatlar: point, rect, ellipse, line, text — Eksendeki her sayı ayrı renkte; aynı sayı komutta da aynı renkle yazılmış. Görsele tıklayınca büyür.

Görselden beş komut

Komut	(x, y) neresi?	Görseldeki örnek
`point(x, y)`	Noktanın kendisi	`point(90, 55)`
`rect(x, y, w, h)`	Sol üst köşe; w genişlik, h yükseklik	`rect(40, 195, 100, 55)`
`ellipse(x, y, w, h)`	Merkez; w ve h çap	`ellipse(310, 320, 70, 70)`
`line(x1, y1, x2, y2)`	Başlangıç ve bitiş noktası	`line(230, 100, 340, 160)`
`text(metin, x, y)`	Yazının sol-alt ucu	`text("Hi", 265, 285)`

Genişlik ve yükseklik nasıl bulunur?Eksenlerdeki farktan: w = 140 − 40 = 100, h = 250 − 195 = 55.

Şekil çizen komutlar

Komut	Ne çizer?	Örnek	Örnekte ne olur?
`rect(x, y, w, h)`	Dikdörtgen	`rect(50, 50, 100, 80)`	Sol üst köşesi (50, 50); 100 piksel geniş, 80 piksel yüksek.
`ellipse(x, y, w, h)`	Elips ya da daire	`ellipse(200, 200, 60, 60)`	Merkezi (200, 200); çapı 60 olan daire.
`line(x1, y1, x2, y2)`	Doğru parçası	`line(0, 0, 400, 400)`	Sol üstten sağ alta bir köşegen.
`point(x, y)`	Tek nokta	`point(100, 150)`	(100, 150) konumuna bir nokta.
`text(metin, x, y)`	Yazı	`text("Skor: 7", 20, 40)`	Yazı (20, 40) noktasından başlar; hiza sol-alt.

İkisi de (0, 0). Aynı yerde mi görünürler?

Karenin ne kadarı tuvalin içinde? Dairenin ne kadarı?

`rect` köşeden, `ellipse` merkezden çizer

En sık konum hatasıKarenin tamamı içeride. Dairenin ise yalnızca çeyreği görünüyor; çünkü (0, 0) onun merkezi.

Görünümü ayarlayan komutlar

Komut	Ne yapar?	Örnek
`fill(r, g, b)`	Sonraki şekillerin iç dolgu rengini ayarlar.	`fill(255, 0, 0)` → içi kırmızı
`stroke(r, g, b)`	Sonraki şekillerin kenar çizgisi rengini ayarlar.	`stroke(0)` → kenar siyah
`strokeWeight(n)`	Kenar kalınlığını piksel olarak ayarlar.	`strokeWeight(2)`
`noFill()`	Dolguyu kapatır; yalnızca kenar çizilir.	İçi boş çerçeve
`noStroke()`	Kenarı kapatır; yalnızca dolgu görünür.	Kenarsız şekil

Bu komutlar kendileri bir şey çizmez. Kendilerinden sonra çizilen şekillerin görünümünü belirlerler.

İkisi de 100 × 100. Hangisi daha büyük görünür?

`strokeWeight`: kenar, sınırın ortasına oturur

Neden alttaki şişti?Kenarın yarısı sınırın içinde, yarısı dışında kalır. Kalınlık 50 olunca her yöne yaklaşık 25 piksel taşar.

Aynı etki daire ve dikdörtgende de var

…çizgide ve noktada da

Pikselleri büyütünce

strokeWeight: daire, dikdörtgen, çizgi, nokta ve büyütülmüş piksel ızgarası — Kesik çizgi, verdiğiniz boyut. Koyu kenarın bir sırası içeride, bir sırası dışarıda.

`noFill()` ve `noStroke()` birlikte yazılırsa ne çizilir?

Dolgu yok, kenar da yok. Geriye ne kalır?

Dört kombinasyon (1/2)

fill ve stroke her zaman şekilden önce yazılır.

Dört kombinasyon (2/2)

Dördüncü daire çiziliyor ama görünmüyor: dolgusu da kenarı da kapalı.

Ayar, çizim sırasında değişebilir (1/2)

Ayar, çizim sırasında değişebilir (2/2)

Kural: her şekil, çizildiği andaki ayarı kullanır

Ayar kalıcıdırfill ve stroke bir kez çağrılınca sonraki bütün şekiller aynı rengi kullanır. Yeni renk istiyorsanız komutu yeniden yazın.

Geriye işlemezYeni ayar, daha önce çizilmiş şekilleri değiştirmez.

SıraÖnce fill / stroke, sonra rect / ellipse / line.

line ve dolguÇizginin içi yoktur; fill onu etkilemez. Rengini stroke belirler.

RGB renk modeli

RGB (Red–Green–Blue)Ekran rengini kırmızı (R), yeşil (G) ve mavi (B) ışığın karışımıyla ifade eden modeldir. p5.js’te her bileşen 0 ile 255 arasında bir tam sayıdır: 0 kapalı, 255 tam güç.

fill(255, 0, 0)
Yalnızca kırmızı açık.

fill(0, 255, 0)
Yalnızca yeşil açık.

fill(0, 0, 255)
Yalnızca mavi açık.

Ekran ışıkla çalışır: bileşenler birleştikçe renk aydınlanır. Üçü de 255 ise beyaz, üçü de 0 ise siyah.

Sayıları okuyalım

Komut	R / G / B	Sonuç
`fill(255, 255, 255)`	Üçü de tam güçte	Beyaz
`fill(0, 0, 0)`	Üçü de kapalı	Siyah
`fill(128)`	Tek sayı = gri ton (R=G=B=128)	Orta gri
`fill(220, 50, 50)`	Kırmızı baskın, diğerleri düşük	Soluk kırmızı
`fill(255, 255, 0)`	Kırmızı + yeşil	Sarı
`fill(0, 255, 255)`	Yeşil + mavi	Cyan
`fill(255, 0, 255)`	Kırmızı + mavi	Magenta

Rengi yazmanın üç biçimi ve alfa

Biçim	Örnek	Anlamı
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ü sayı alfa

Alfa (alpha) kanalıRengin ne kadar opak ya da saydam olduğunu belirleyen dördüncü bileşendir. 0 tamamen görünmez, 255 tamamen opak, aradaki değerler yarı saydam.

stroke ve background da aynı sayı biçimlerini kullanır.

RGB ve alfa, yan yana

RGB örnekleri ve alfa kanalı: opak, yarı saydam, görünmez — En altta aynı kırmızı: alfa 255, 120 ve 0.

Alfa: arkadaki şekil görünür mü?

Alfa oyunlarda nerede işe yarar?

Üst üste binen şekillerArkadaki çizim kısmen görünür.

Vurgu efektleriBir nesnenin üstüne soluk bir parlama koymak.

HUD (Heads-Up Display)Ekranın üstünde ya da köşesinde duran skor, can gibi bilgi paneli.

fill(255, 0, 0) opak kırmızı; fill(255, 0, 0, 80) arkasındaki çizimin kısmen göründüğü soluk kırmızıdır.

Renk sayılarını ezberlemek gerekmez

Renk seçici (color picker)Bir rengi tıklayınca R, G, B değerlerini verir. Google’da “color picker” araması, HTML Color Codes, Coolors ya da tarayıcının geliştirici araçları iş görür. Üç sayıyı fill, stroke ya da background içine yazmanız yeter.

Başka renk modelleri de varHSB (ton, doygunluk, parlaklık; p5.js’te colorMode(HSB)) ve HSL. Bu derste RGB ve alfa ile yetiniyoruz.

Hepsi bir arada

Koordinat tahmini

400 × 400 tuvalin tam ortasına bir daire çizmek için x ve y ne olmalı? Önce kâğıda yazın.
Bir yapay zekâdan aynı tuval için köşe ve merkez örnekleri isteyin. Tahmininizle karşılaştırın.
“y aşağı artar” kuralını unutunca çıkan bir hata senaryosu isteyin. Önerdiği düzeltmeyi kendi sketch’inizde deneyin.

Çizin bakalım

400 × 400 tuval. Çapı 80 olan bir daire tam ortada dursun.
Aynı daire sol alt köşeye içeriden değsin. Merkezin y değeri kaç olmalı?
Dört köşeye 50 × 50 birer kare koyun; her biri farklı renkte olsun.
Tuvalin iki köşegenini kalın, turuncu çizgilerle çizin.
Ortadaki dairenin üstüne yarı saydam, sarı, daha büyük bir daire ekleyin.

Zorlu görev: dart tahtası ve ev

Dart tahtasıAynı merkezli dört daire: en dışta siyah, sonra beyaz, sonra mavi, en içte kırmızı. Hangi sırayla çizmelisiniz? Sırayı ters çevirince ne oluyor?

EvKare bir gövde, iki line ile çatı, bir kapı ve kenarsız, yarı saydam bir pencere. Evin tamamı tuvalin alt kenarına otursun.

İpucu: sonra çizilen şekil, öncekinin üstüne gelir.

400 × 300 tuvalin sağ alt köşesine içeriden oturan 60 × 40 dikdörtgen hangisi?

rect(400, 300, 60, 40)
rect(340, 260, 60, 40)
rect(370, 280, 60, 40)
rect(340, 300, 60, 40)

rect sol üst köşeden çizer: x = 400 − 60, y = 300 − 40.

Üçüncü daire nasıl görünür?

Kırmızı, kenarsız
Yeşil, mavi kenarlı
Yeşil, kenarsız
Görünmez

Son fill yeşildi ve hâlâ geçerli. noStroke yalnızca kenarı kapattı.

`strokeWeight(20)` ile çizilen `rect(100, 100, 100, 100)` ekranda kaç piksel genişlik kaplar?

Kenar sınırın ortasına oturur: solda 10, sağda 10 piksel dışarı taşar.

Bugün ne öğrendik?

Tuvalde (0, 0) sol üst köşe; x sağa, y aşağı artar.
rect sol üst köşeden, ellipse merkezden konumlanır.
fill, stroke, strokeWeight, noFill, noStroke kendilerinden sonraki şekilleri etkiler.
Kalın kenar, şeklin sınırının iki yanına taşar.
Renk: tek sayı gri, üç sayı RGB, dördüncü sayı alfa. Hepsi 0–255.

Sıradaki ders

Şekiller nasıl hareket eder?

setup, draw, frameCount ve ilk animasyon.

Sonraki sunum →← Önceki