Bölüm 1 · Sunum 2
Koordinat sistemi, şekiller ve renkler
Bir şekli tuvalde tam istediğimiz yere, istediğimiz renkte çizmeyi öğreneceğiz.
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.
İki dünya, iki y ekseni
Bu şaşkınlık bir iki haftada geçer. O zamana kadar şekil ters yöne giderse ilk bakılacak yer y’nin işaretidir.
Neden sol üst? Ekran resmi böyle boyar
Eski tüplü ekranlar görüntüyü soldan sağa, yukarıdan aşağıya satır satır tarardı; tıpkı yazı yazar gibi. İlk boyanan nokta sol üst köşe olduğu için sayma da oradan başlar.
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
Turuncu nokta, komuttaki (x, y) çiftinin tuvaldeki yeridir; kesikli çizgiler aynı sayıları eksenlerde gösterir.
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) |
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. |
Oyun karakterleri de şekillerden yapılır
Altı komut, bir hayalet. İlk oyunların karakterleri birkaç dikdörtgen ve daireden ibaretti; bugün de prototipler böyle başlar.
İ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
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
Aynı etki daire ve dikdörtgende de var
…çizgide ve noktada da
Pikselleri büyütünce
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
fill 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.fill / stroke, sonra rect / ellipse / line.line ve dolguÇizginin içi yoktur; fill onu etkilemez. Rengini stroke belirler.RGB renk modeli
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.
Üç ışığı siz karıştırın
Çubukları sürükleyin. Üçü de 255 olunca beyaz, üçü de 0 olunca siyah. Sarıyı bulmak için hangi ikisini açmak gerekir?
Ekrana büyüteçle bakınca
Her piksel aslında üç küçük ışıktır: kırmızı, yeşil, mavi.
fill(255, 140, 0): kırmızı ışık sonuna kadar açık, yeşil yarıda, mavi kapalı.- Gözümüz bu üçünü ayrı ayrı seçemez; tek bir turuncu görür.
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 |
stroke ve background da aynı sayı biçimlerini kullanır.
RGB ve alfa, yan yana
Alfa: arkadaki şekil görünür mü?
Alfa oyunlarda nerede işe yarar?
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.
Alfa iş başında: hayalet, hasar, gece
Üçünde de arkadaki sahne aynı; üstüne yarı saydam bir şekil çiziliyor. Alfa sayısı değiştikçe arkası daha çok ya da daha az görünür.
Renk sayılarını ezberlemek gerekmez
fill, stroke ya da background içine yazmanız yeter.colorMode(HSB)) ve HSL. Bu derste RGB ve alfa ile yetiniyoruz.Hepsi bir arada
Amiral Battı: koordinat söyleme oyunu
Bir öğrenci “sütun 3, satır 2” desin, bir diğeri tıklasın. Oyunlardaki her nesnenin yeri de böyle bir sayı çiftidir: Minecraft’ta F3’e basınca karakterin koordinatları ekrana gelir.
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
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?
- 100
- 110
- 120
- 140
Kenar sınırın ortasına oturur: solda 10, sağda 10 piksel dışarı taşar.
Merak edenler için kaynaklar
Bugün ne öğrendik?
- Tuvalde (0, 0) sol üst köşe; x sağa, y aşağı artar.
rectsol üst köşeden,ellipsemerkezden konumlanır.fill,stroke,strokeWeight,noFill,noStrokekendilerinden 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.