El Yazımı Kodlama Tekniğim

Blok yazı

• Önceki yazı, alfabenin blok baskı sürümü hakkındaydı.
• Özetle, şu süreçle oluşturuldu:
  • Her harfin yolundaki ana noktaları tanımlayan kod yazıldı (harf başına yaklaşık 10 nokta).
  • Yol, Chaikin'in eğri algoritması kullanılarak yumuşatıldı.
  • Yol, değişken kalınlıklı bir şekle dönüştürüldü.
  • Şekil yolu p5js kullanılarak çizildi.
• Görünümü şöyleydi:
• Bu sistemle cümlelerin nasıl üretildiğine dair bir yazı yakında gelecek. Haberdar olmak için bültene abone olabilirsiniz.
• Başlangıçta harf yollarını tanımlamak çok elle yapılan bir işti; koddaki konumlar yazılıyor ve harf doğru görünene kadar noktalar ayarlanıyordu.
• Bitişik el yazısını kodlarken bu süreci sadeleştirdim.

Harf tasarımı

• Yolun ana noktalarını tanımlayıp dışa aktarmak için, p5js editöründe kolayca erişilebilen bir araç yaptım.
• Örnek harfleri gösteriyor ve yeni harfler tasarlamak için bir alan sunuyor.
• Sonraki adımlar şöyle:
  • Yolun ana noktalarını tıklayarak yerleştirme - ortaya çıkan Chaikin eğrisi yolu görüntülenir.
  • Düzenleme moduna geçmek için p tuşuna basma.
  • Bir noktayı seçip konumuna sürükleme.
  • Yolu konsola yazdırmak için enter tuşuna basma.
• Her harf için 2-3 seçenek oluşturdum.
• Ortaya çıkan yol şu şekilde:

  [{x:0.7,y:22.5},{x:8.2,y:18.1},{x:8.9,y:11.2},{x:3.7,y:11.4},{x:1.7,y:18.9},{x:8.4,y:22.4},{x:17.7,y:22.0}]
  

• Kendi el yazımı kılavuz olarak kullanmak istediğim için küçük ve büyük harf örnekleri yazdım, ardından görselleri doğrudan araca yükleyip üzerinden geçtim.
• Görseli doğru konuma yerleştirmek için w/a/s/d, büyütüp küçültmek için r/e tuşlarını kullandım.
• Sayılar, harf oluşturma penceresinde ilgili alanı yerleştirmek için kullanılan x y koordinatlarıdır.
• Tüm yollar oluşturulup eğrilere çevrildikten ve değişken genişlikli şekillere dönüştürüldükten sonra, her harf tek başına şöyle görünüyordu.

Bitişikleştirme

• Bazen harfleri bağlamak kolaydır. Ana nokta yolunda doğrudan bir sonraki yola geçip ardından Chaikin eğrisini tek seferde uygularsınız.
• Ancak bazı harf çiftleri iyi oturmaz.
• Örneğin, na çiftinde n harfinin son noktası alçak, a harfinin ilk noktası ise yüksektir; bu da a harfinin çaprazından geçen bir yol üretir ve e gibi görünmesine neden olur.
• ti çiftinde t taban çizgisinin üstünde biter ve i taban çizgisinde başlar; bu da doğal olmayan bir çıkıntı oluşturur.
• Bu sorunları çözmek için a harfinin başına ek noktalar eklenebilir ve t harfinin son iki noktası silinebilir.
• Ancak her senaryoda harfleri bu şekilde değiştiremezsiniz.
• Örneğin a bir kelimenin başındaysa ek nokta yanlış yerde olur; w gibi bir harften sonra gelirse de a harfinin üzerinden farklı şekilde geçen bir çizgi oluşur.
• t, k ile eşleştiğinde de bozulur.
• Harf yolunun başlangıç ve bitiş noktaları, komşu harflerle ilişkisine göre değişebilmelidir.
• Başta belirli "sorunlu" çiftleri tespit edip bunlar için kurallar yazmayı düşündüm, ama sonunda her yolun başına ve sonuna şu anlamlara gelen sayılar ekledim:
  • Başka bir harfe bağlanmıyor (0)
  • Başka bir harfe taban çizgisi civarında bağlanıyor (1)
  • Başka bir harfe taban çizgisinin hemen üstünde bağlanıyor (2)
  • Başka bir harfe x-yüksekliği civarında bağlanıyor (3)
• Örnek:
• Artık her harf yolu şöyle görünüyor. Başta ve sondaki tek basamaklı sayılara dikkat edin:

  [0,{x:12.2,y:13.2},{x:13.5,y:11.0},{x:6.2,y:8.4},{x:1.1,y:13.0},{x:1.8,y:19.0},{x:7.0,y:23.4},{x:15.2,y:23.6},{x:18.4,y:22.1},1]
  

• Tüm harf çiftlerini test ettim:
• Burada, her harf için birden fazla yol seçeneği bulunduğunu ve harflerin komşularına göre düzenlenmesiyle ortaya çıkan değişimleri görebilirsiniz.
• İdeal olarak her harf için en az 5-6 yol seçeneği olmasını isterdim, ancak dosya boyutuyla denge kurmak gerekiyor.

Kelime üretimi

• Bir kelime üretilirken:
  • Her harf için 2-3 farklı seçenek arasından temel yol seçilir.
  • Yolun bitişine dair bilgi komşu harflere aktarılır (aynı harfin farklı yol seçenekleri farklı bitiş noktalarına sahip olabildiği için, önce tüm harf yollarının seçilmesi gerekir).
  • Temel yol, komşu harflere tepki vererek ayarlanır. Örneğin, önceki harfin bitiş yüksekliği 2 ise bu yolun başından 1 nokta kaldırılır ya da sonraki harfin başlangıç yüksekliği 1 ise belirli bir konuma ek bir nokta eklenir.
• Ayarlama fonksiyonları biraz karmaşık olabiliyor. Örneğin, q harfi için fonksiyon şu şekilde:

  // ip = yol
  // pc = önceki harfin bitiş bilgisi
  // nc = sonraki harfin başlangıç bilgisi
  // n = bu harf için seçilen yolun indeksi
  adjust: (ip, pc, nc, n) => {
    // Bu harfin sonuna %70 olasılıkla bir kopma ekle
    if (rand() < 0.7 ) ip.splice(-1, 1, 0);
    // Bu yol için 4 seçenekten [2] seçildiyse
    if (n < 2) {
      // Önceki harf 3'te bitiyorsa ilk iki noktayı farklı bir noktayla değiştir
      if (pc == 3) ip.splice(1, 2, {x:10,y:12});
      // Aksi halde 0 değilse başlangıca bir nokta ekle
      else if (pc > 0) ip.splice(1, 0, {x:10,y:20});
    }
    // Bu harfle sonraki harf arasında kopma yoksa (0)
    if (nc > 0 && ip[ip.length-1] != 0){
      // Son iki noktayı farklı bir noktayla değiştir
      ip.splice(-3, 2, {x:16,y:34});
    }
  }
  

• Ama çoğu zaman daha kısa oluyor. Örneğin, n harfi için fonksiyon şu şekilde:

  adjust: (ip, pc, nc) => {
    // Sonraki harf 3'ten başlıyorsa rastgele bir kopma oluştur veya son noktayı taşı
    if (nc == 3) rand() < 0.3 ? ip.splice(-1, 1, 0) : ip.splice(-2, 1, {x:17,y:23.8});
  }
  

• Ardından tüm harflerin temel yolları birleştirilir. Bu sırada yollardaki 1, 2 ve 3 yok sayılır; fakat 0 görüldüğünde her seferinde yeni bir yol başlatılarak kopmalar üretilir.
• Sonra yol eğriye dönüştürülür, değişken genişlikli bir şekle çevrilir ve Perlin noise ile hafif bir titreme eklenir; sonuçta bitişik el yazısı şöyle görünür.
• Bu cümlenin nasıl üretildiğine dair bir yazı yakında gelecek. Haberdar olmak için bültene abone olabilirsiniz.
• Eğlence için, plotter üzerinden üretilmiş kodlanmış el yazısı ile gerçek el yazısını yan yana karşılaştırdım.

Ağırlığı ne kadar?

• Blok baskı için harf sınıfı 9.7kb idi.
• Bitişik el yazısı harf sınıfı şu anda 26.1kb (sıkıştırılmış).
• Bu sınıf, her harf için birden fazla yol ve noktaları ayarlayan fonksiyonlar içerdiği için daha büyük. Ancak başka tasarruf yöntemleri de var.
• Muhtemelen daha fazla tasarruf mümkün. Kod golfü sihirbazı değilim ama birkaç fikrim var.
• Örneğin, harfler şu anda varsayılan 20 punto yazı boyutuna göre tasarlanıp ölçekleniyor. Bu da birçok noktanın x: 14.5 gibi tanımlanması anlamına geliyor; ama taban boyutu 200'e çıkarırsam noktaları 145 olarak tanımlayıp ondalıkları kaldırabilirim. Bu değişikliği dikkatli yapmak gerektiğinden, şimdilik yapılacaklar listesinde.

Nasıl kullanıyorum

• Bu el yazısının temel amacı, üzerinde çalıştığım diyagramlardaki başlıklar, etiketler ve karalama notları.
• Ama metnin kendisiyle oynamak da çok eğlenceli.
• Yolları kodladığım için bir font kullanmak yerine doğrudan yollarla oynayabiliyorum. Harflerin konumunu değiştirmek, tek tek harflerin kalınlığını ayarlamak gibi.
• Sırada bu el yazısını diyagramlara entegre etmek var; ama aynı zamanda doğrudan metnin kendisine odaklanan bir şey de yapmayı planlıyorum. Çok güzel ve pek çok olasılık sunuyor.

GN⁺ görüşü

• Bu yazı, JavaScript ve p5.js kullanarak el yazısını dijitalleştirme sürecine dair ilginç bir örnek sunuyor. Yazılım mühendisleri için yaratıcı projeler üzerinden kodlama becerilerini geliştirmek adına iyi bir fırsat olabilir.
• Chaikin'in eğri algoritması gibi matematiksel algoritmaların gerçek projelerde nasıl uygulanabileceğini gösteriyor. Bu da grafik programlamaya dair anlayışı geliştirmeye yardımcı olabilir.
• Yol ayarlama fonksiyonları gibi karmaşık mantıklarla nasıl çalışılabileceğine dair fikir veriyor. Bu, kodun esnekliği ve genişletilebilirliği açısından önemli bir beceri.
• Proje, dosya boyutu optimizasyonu gibi pratik sorunları da ele alıyor. Bu, gerçek dünyadaki yazılım geliştirmede önemli bir değerlendirme alanı.
• Bu tekniği uygularken yol tanımlama ve ayarlama fonksiyonları yazmak ciddi zaman alabilir. Ancak sonuç, son derece kişisel ve özgün bir metin ifadesi sunuyor.