Space Invader Çizme Yöntemi

• Space Invader Generator tanıtılıyor ve çeşitli piksel sanat invader'ları otomatik olarak üretme prensibi açıklanıyor
• Basit vektör çokgen gövde üretimi ile simetri, rastgele noktalar, yansıtma gibi geometrik kurallardan yararlanılan bir yapı kullanılıyor
• Kol, tentakül, boynuz gibi uzuv öğeleri de rastgelelik ve geometrik yöntemlerle genişletilerek kolay ve yaratıcı varyasyon imkanı sunuyor
• Vektör formundan piksele dönüştürme ve renk uygulama, göz ekleme gibi adımlarla tanıdık oyun grafikleri tamamlanıyor
• Tüm üretim süreci ve kod uygulama mantığı paylaşılıyor; böylece öğrenenler ve geliştiriciler doğrudan özelleştirme yapabiliyor veya pratik edebiliyor

---

Genel Bakış

Space Invader Generator, herkesin piksel sanat tarzı invader'ları kolayca rastgele oluşturabilmesini sağlayan bir araç. Bu yazıda çalışma mantığı ve yaratıcı rastgele üretim süreci, animasyonlar ve örneklerle birlikte anlatılıyor. Invader'ın geometrik yapısı, vektör-piksel dönüşümü ve renk uygulaması gibi tasarım ile kodu birleştiren yaklaşımı öne çıkıyor.

Başlangıç Arka Planı

• Rayven adlı bir 3D renderer aracı geliştirirken, gerçek yaratıcı çıktılar üretmenin önemini fark ediyor
• Basit ve eğlenceli bir sonuç için Space Invader gibi sezgisel ve kolay tanınan bir nesne seçiliyor
• Vektör tabanlı 3D render ile çeşitli klasik invader'ları çizdikten sonra, bunu rastgele bir üreticiye genişletmenin eğlenceli olacağı düşüncesiyle proje başlatılıyor
• Bu üretim deneyimi Creative Coding Amsterdam'ın kod meydan okuması kapsamında da paylaşılıyor

Kod Meydan Okuması

• Space Invaders kod meydan okuması birçok üretici ve geliştiricinin ilgisini çekiyor
• Farklı uygulamalar ve sonuçlar toplanıyor, geliştirici topluluklarında aktif biçimde paylaşılıyor

Eskizden Piksele

• İlk olarak kağıt üzerinde elle karalamalar ve eskizler yapılarak invader yapısı analiz ediliyor
• Aseprite aracıyla 15x15 piksel ızgara üzerinde çeşitli invader formları dijital olarak çiziliyor
• Ortak geometrik desenler keşfediliyor: merkezi eksen simetrisi, basit çokgen gövde gibi
• Piksel sanat ile vektör grafiğin avantajları birleştirilerek, çoğu elde çizilmiş tasarımı otomatik üreten bir işlev başarıyla uygulanıyor
• Uygulama ayrıntıları için GitHub deposuna bakılabiliyor

Invader Üretim Süreci

Merkez Bulma

• Tüm işlemlerin referans noktası olan merkez nokta belirleniyor
• Tentaküller altta üretildiği için ana gövde biraz yukarı yerleştiriliyor
• Genel simetriden yararlanılarak yalnızca bir taraf çiziliyor, sonra sağa-sola aynalanarak tamamlanıyor

Üst ve Altı Tanımlama

• Gövdenin yan tarafı tasarlanırken üst ve alt noktalar rastgele seçiliyor
• Simetri ekseni sayesinde iki tarafın biçimi aynı kalıyor

Sol Tarafı Çizme

• Gövdenin sol yanına 1 ila 5 nokta rastgele yerleştiriliyor
• Basit dışbükey çokgenden serbestçe sapılarak çeşitli sonuçlar üretiliyor
• Çizgi çakışmaları pikselleştirme aşamasında doğal biçimde düzeltiliyor

Sağa Yansıtma

• Soldaki tepe noktası verileri kullanılarak otomatik olarak sağ yansıma oluşturuluyor

Gövde Çokgenini Birleştirme

• Noktalar birleştirilerek vektör çokgen gövde tamamlanıyor
• Bunun üzerine uzuvlar eklendiğinde invader'ın temel formu ortaya çıkıyor

Uzuv Ekleme

Tentakül ve Boynuz Üretim Yöntemi

• Alttaki tentaküller ve üstteki boynuzlar ayrı ayrı üretiliyor; aynı yöntem yalnızca konum ve açı farkıyla uygulanıyor

Tentakül Kökünü Bulma

• Gövdenin en alt noktasını referans alarak sol tentakül rastgele üretilmeye başlanıyor

Merkez Çizgisini Eskizleme

• Rastgele noktalar kullanılarak bir polyline (merkez çizgisi) oluşturuluyor
• Tentakülün uzunluğu ve şekli çok farklı açılardan değiştirilebiliyor

Kalınlık Uygulama (fat line)

• Yalnızca merkez çizgisi çok ince kaldığı için iki yana noktalar eklenerek kalın tentakül formu oluşturuluyor
• Gövdeye yakın yerler daha kalın, uca doğru daha ince oluyor (taper efekti)
• Keskin açılı bölgelerde çizgi kalınlığı azaltılarak daha doğal birleşim yerleri elde ediliyor
• Genişlik ayarı için easing parametresi kullanılıyor

Tentakülü Tamamlama

• Her iki uç noktası bağlanarak kalın tentakül tamamlanıyor

Çoklu Tentakül ve Boynuzlara Genişletme

• Aynı yöntemle sağ-sol simetrisi, merkez tentakül ve üst boynuzlar gibi yapılar üretilebiliyor
• Merkez tentakülde, daha önce çizilmiş yan tentaküllerle çarpışmayı önlemek için işlem erken sonlandırılıyor
• Boynuzlarda ise alan çakışmasını önlemek için açı aralığı daraltılıyor ve iki yana yerleştiriliyor

Vektörden Piksele Dönüştürme

Gövdeyi Pikselleştirme

• Her pikselin merkezi vektör çokgenin içinde mi sorusuna göre gövde pikselleri belirleniyor
• Hassasiyetten çok sadelik ve çalışma hızı önceliklendiriliyor

Uzuvları Pikselleştirme

• Tentakül ve boynuzlar ince olduğundan, çoğu durumda merkez noktası içeride kalmıyor
• Noktalar ile bitişik piksel merkezleri arasındaki mesafe kontrol edilerek piksel ataması yapılıyor
• Tentakül doğallığını artırmak için mid-line ayrıntılandırması (line splitting) uygulanabiliyor

Göz Ekleme

• Önceden hazırlanmış çeşitli göz setleri arasından rastgele seçim yapılıyor
• Gözler gövdenin merkezine yakın yerleştiriliyor, dış kısma bumper pikseller ile padding ekleniyor
• Çakışan pikseller otomatik boşaltılarak delik benzeri bir görünüm veriliyor

Renk Uygulama

Renk Üretim Mantığı

• OKLCH renk uzayı kullanılıyor
• HSL'ye kıyasla daha tutarlı parlaklık (lightness) korunurken canlı renk kombinasyonları elde edilebiliyor
• Parlaklık tek bir değerde sabitleniyor, diğer iki parametre rastgele belirlenerek farklı varyasyonlar oluşturuluyor
• Böylece süreklilik ve görsel tutarlılık taşıyan bir invader görünümü sağlanıyor

CSS Varyasyonlarından Yararlanma

• Renkler CSS değişkenleriyle ayarlanabiliyor
• Arayüz öğeleriyle kontrast, debug modu gibi durumlara göre açıklık ve doygunluk değişimleri uygulanabiliyor

Animasyon Uygulaması

• Orijinal oyundaki gibi 2 karelik basit animasyonla tentaküllere, boynuzlara ve gözlere hareket veriliyor
• Uzuvların mid-line'ı kopyalanıp rastgele kaydırılarak değiştirilmiş kare oluşturuluyor
• Gözler de bir piksel kaydırılarak daha canlı bir görünüm elde ediliyor

Boyutlandırma

• Izgara boyutu büyüdükçe invader'lar giderek daha ayrıntılı ve karmaşık hale geliyor
• Çok büyüdüğünde vektörel soyutlama öne çıkıyor ve asıl invader hissi azalıyor
• Boyut 31x31 pikselle sınırlandırılmış, gizli bir seçenekle en fazla 51x51 mümkün

Sonuç

• Sonsuz çeşitlilikte renkli invader üreten bir jeneratör tamamlanıyor
• Üretim ve yazım süreci boyunca öğrenme, eğlence ve yaratıcı özgürlük sağlanıyor
• Kod ve mantık tamamen açık olduğundan pratik, deney ve özelleştirme için uygun bir yapı sunuluyor

Yapım Notları

• Yazı içindeki JavaScript kodu öğrenme ve referans amaçlı kullanışlı biçimde saklanıyor
• Anime.js ve çeşitli dış bağımlılıklar kullanılarak animasyon tasarlanıyor, uygulama TypeScript ile geliştiriliyor
• Ayrı bir debug modu ve step seçenekleri sayesinde üretim süreci doğrudan incelenebiliyor

Bonus - Halat Çizme Yazısı

• SVG ve JavaScript ile halat (rope) biçimi çizen önceki etkileşimli yazı da incelenmeye değer