El yazımı kodlama tekniğim

 (amygoodchild.com)
1 puan yazan GN⁺ 2024-05-20 | 1 yorum | WhatsApp'ta paylaş
  • JavaScript blok harf alfabesi üreticisinden yola çıkıp, iki ay sonra bitişik el yazısını da kodla üretme sürecini anlatıyor
  • Harfler, p5js aracıyla ana koordinatlar işaretlenip Chaikin eğrisiyle yumuşatıldıktan sonra değişken kalınlıklı yollara dönüştürülüyor
  • Bitişik yazıda her harf çifti farklı bağlandığı için, yolun başlangıç ve bitişine 0~3 etiketleri eklenerek bağlanamaz, taban çizgisi, taban çizgisinin üstü ve x-height yakını durumları ayırt ediliyor
  • Kelime oluştururken her harf için 2~3 yoldan biri seçiliyor, komşu harfin bağlanma yüksekliğine göre noktalar eklenip siliniyor ya da değiştiriliyor, ardından Perlin noise ile hafif titreme ekleniyor
  • Küçültmeden sonra bitişik el yazısı harf sınıfı 26.1kb olup, blok harflerin 9.7kb boyutundan daha büyük; bunun nedeni birden çok yol ve komşu harf düzeltme fonksiyonları

Blok harf üretim yönteminden bitişik el yazısına genişletme

  • Önceki blok harf alfabesi üreticisinde her harf yolunun ana noktaları kodla tanımlanıyordu
    • Her harf için yaklaşık 10 nokta yerleştiriliyordu
    • Chaikin eğrisi algoritmasıyla yol yumuşatılıyordu
    • Yol, uzunluğu boyunca kalınlığı değişen bir biçime dönüştürülüyordu
    • Son biçim p5js ile çiziliyordu
  • Blok harflerde koordinatlar doğrudan koda yazılıyor, harf doğal görünene kadar noktalar elle ayarlanıyordu
  • Bitişik el yazısı uygulamasında bu tekrar eden işi azaltmak için ayrı bir harf tasarım aracı yapılmış

p5js içinde harf yolu tasarlama aracı

  • p5js editöründe ana noktaları tanımlayıp dışa aktaran bir araç oluşturulup kullanılmış
  • Araç, ölçeği ve bağlamı gösteren örnek harflerle yeni harfin tasarlanacağı alanı birlikte sunuyor
    • Tıklayarak yolun ana noktaları yerleştirildiğinde Chaikin eğrisi uygulanmış sonuç gösteriliyor
    • p tuşuyla düzenleme moduna geçiliyor
    • Bir nokta seçilip sürüklenerek konumu ayarlanıyor
    • enter tuşuyla yol konsola yazdırılıyor
  • Her harf için 2~3 seçenek oluşturulmuş ve ortaya çıkan yol {x, y} koordinat dizisi biçiminde oluyor
  • Kendi el yazısını temel almak için küçük ve büyük harf örneklerini bizzat yazıp, bu görseli harf üretim aracına yükleyerek üzerinden geçmiş
    • w/a/s/d tuşlarıyla görsel taşınıyor
    • r/e tuşlarıyla görsel büyütülüp küçültülüyor
    • Kağıda yazılan sayılar, ilgili alanı harf üretim penceresine hizalamak için kullanılan x/y koordinatları

Bitişik el yazısı bağlantı sorunu ve 0~3 etiketleri

  • Bazı harf çiftlerinde, bir harfin ana nokta yolunun sonuna sonraki harfin yolunu ekleyip Chaikin eğrisini tek seferde uygulamak doğal bir bağlantı sağlıyor
  • Ancak bazı kombinasyonlarda bağlantı çizgisi harfin biçimini bozuyor
    • na durumunda n harfinin son noktası alçak, a harfinin ilk noktası yüksek olduğundan bağlantı çizgisi a harfinin içinden çapraz geçip onu e gibi gösterebiliyor
    • ti durumunda t taban çizgisinin hemen üstünde biterken i taban çizgisinden başladığı için yapay bir sırt oluşuyor
  • Her özel harf çifti için kural yazmak yerine, her yolun başlangıç ve bitişine bağlantı yüksekliği bilgisi sayı olarak eklenmiş
    • 0: Diğer harflerle bağlanamaz
    • 1: Diğer harflerle taban çizgisi civarında bağlanır
    • 2: Diğer harflerle taban çizgisinin hemen üstünde bağlanır
    • 3: Diğer harflerle x-height civarında bağlanır
  • Aynı harfte bile kelimenin başında olup olmamasına ya da önündeki ve arkasındaki harflere göre nokta ekleme/silme yöntemi değişebiliyor
    • a kelimenin başındaysa ek bir nokta tuhaf görünebiliyor
    • w sonrasındaki a için çizgi a harfini başka bir şekilde kesebiliyor
    • t, k ile bağlandığında biçimi değişebiliyor
  • Tüm harf çiftleri test edilmiş ve birden fazla yol seçeneğiyle komşu harfe göre düzenlemeler kullanılarak çeşitlilik üretilmiş
  • İdeal olarak her harf için 5~6 yol seçeneği isteniyor, ancak dosya boyutuyla denge kurulması gerekiyor

Kelime üretim süreci

  • Kelime oluştururken önce her karakter için 2~3 temel yoldan biri seçiliyor
  • Seçilen yolun başlangıç ve bitiş bağlantı bilgisi komşu harflere aktarılıyor
    • Aynı harfte bile seçilen yol seçeneğine göre bitiş noktası bilgisi değişebildiğinden, önce tüm harf yollarının seçilmesi gerekiyor
  • Ardından temel yol komşu harflere göre ayarlanıyor
    • Önceki harfin bitiş yüksekliği 2 ise mevcut yolun başlangıç noktasından biri kaldırılabiliyor
    • Sonraki harfin başlangıç yüksekliği 1 ise belirli bir konuma nokta eklenebiliyor
  • Ayarlama fonksiyonları her harfte farklı çalışıyor
    • q için ayarlama fonksiyonu %70 olasılıkla sona bir kopukluk ekliyor ve önceki harfin bitiş bilgisi ya da sonraki harfin başlangıç bilgisine göre noktaları değiştiriyor veya ekliyor
    • n için ayarlama fonksiyonu, sonraki harf 3 seviyesinden başlıyorsa %30 olasılıkla kopukluk oluşturuyor ya da son noktayı taşıyor
  • Tüm harflerin temel yolları birleştirilirken 1, 2, 3 yok sayılıyor; 0 geldiğinde yeni bir yol başlatılarak kopukluk oluşturuluyor
  • Birleştirilen yola Chaikin eğrisi uygulanıyor, ardından değişken kalınlıklı bir şekle dönüştürülüyor ve Perlin noise ile hafif bir titreme ekleniyor

Boyut ve kullanım biçimi

  • Blok harfler için harf sınıfı 9.7kb iken, küçültülmüş bitişik el yazısı harf sınıfı şu anda 26.1kb
  • Bitişik el yazısı tarafının daha büyük olmasının nedeni, her harf için birden fazla yol bulunması ve komşu harflere göre noktaları ayarlayan fonksiyonların yer alması
  • Daha fazla küçültme için fikirler de duruyor
    • Şu anda harfler varsayılan 20 punto temel alınarak tasarlanıp sonra yeniden boyutlandırılıyor
    • Bu yüzden x: 14.5 gibi çok sayıda koordinat var
    • Temel boyut 200 yapılırsa 145 gibi değerlerle ondalıklar kaldırılıp harf başına yer kazanılabilir
    • Bu değişiklik dikkat gerektirdiği için sonraki işler listesinde duruyor
  • Bu el yazısının başlıca kullanım alanı, üzerinde çalışılan diyagramın başlıkları, etiketleri ve karalama notları
  • Font yerine kodlanmış yollar kullanmak, harflerin konumunu ya da tek tek harflerin iç kalınlığını doğrudan değiştirerek yolu manipüle etmeyi mümkün kılıyor
  • Bu el yazısı kodunun gelişmiş bir sürümünü kullanan Meaningful Nonsense baskısı da sunuluyor ve her baskı sipariş anında üretilen benzersiz bir çıktı oluyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-20
Hacker News yorumları

  • El yazımı kodlarsam, sanırım tek yönlü hash sayılabilir.
    Sonradan okuyunca ne yazmaya çalıştığımı çözmenin hiçbir yolu olmuyor.

    • Meydan okuma gibi duruyor! https://www.handwritingocr.com :)
    • Bu yüzden üniversitede el yazısını bilerek bırakmak zorunda kaldım.
    • Bende de aynı; birkaç saat geçince kendim bile deşifre edemiyorum.

  • Stuff Made Here'ın benzer bir konuyu ele alan YouTube videosu epey güzel: https://www.youtube.com/watch?v=cQO2XTP7QDw
    Deneme-yanılma sürecini de anlattığı için izlemesi keyifliydi; el yazısı sentezi deposu da ilginç: https://github.com/sjvasquez/handwriting-synthesis

  • Sondaki sanat çalışması oldukça güzel.
    Bir sonraki adımın bunu gerçek bir yazı tipine dönüştürüp herhangi bir programda yazılabilir hâle getirmek olup olmayacağını merak ediyorum.

    • Plotter için yazı tipleri zaten var.
      Bizim genelde düşündüğümüz yazı tiplerinden farklı olarak, doldurulacak konturlar değil, izlenecek yollar olmaları gerekiyor.
    • Eğriler zaten varsa bu oldukça kolay yapılabilir.
      Ama elle yapmak gerekiyorsa ya da öyle yapmak isterseniz sıkıcı olabilir.
    • Burada teknoloji ile sanatı karıştırma biçimini gerçekten seviyorum.

  • Harf bağlantılarının uymadığı kısmı pek anlamadım.
    Bana göre bitişik el yazısının özü kalemi kâğıttan kaldırmamaktır; bu yüzden harfleri birleştirme biçimi en baştan yazma eyleminin içindedir.
    Yazar aslında böyle yazmadığı için sorun çıkmış gibi görünüyor.
    Yine de yazı tipine dokunmadan ekranda birden çok harf çizmenin en basit yoluyla çözülen yazının geri kalanı çok ilginç.

    • “Bitişik el yazısının özü kalemi kâğıttan kaldırmamaktır” ifadesi kendi başına doğru, ama yorumu farklı.
      Bitişik el yazısında harfler arasındaki bağlantılar bağlama bağlıdır.
      Örneğin b harfinden sonra a mı yoksa o mu geldiğine göre okunabilirlik için şekil değişebilir; bir kelimenin içinde bile bazı durumlarda harfler arasında kalemi kaldırmak isteyebilirsiniz.
      Yine de bu, bitişik el yazısının “kurallarını” çiğnemek değildir.
      Farklı öğrenmiş olabilirsiniz ve o öğreti de doğru olabilir, ama bağlantıların bağlama bağlı olmaması gereken bir bitişik el yazısı biçimini pek bilmiyorum.
    • Mesele, her harf çiftinin birbirine geçme biçiminin farklı olması ve bunun ele alınması gerekiyor gibi görünüyor.
    • Tüm harf çiftleri birbirine farklı şekillerde bağlanır.
      Bağlantısız yazı tiplerinde bile kerninge benzer şekilde, çeşitli harf dizilerinin nasıl görüneceğini kodlamak gerekir.

  • Çok güzel! Daha fazla bitişik el yazısı yazı tipi olmasını isterdim.
    2 yıl önce yaptığım çalışma burada: https://certik.github.io/slabikar-otf/

  • Harika ama keşke yazım, kendi yazı tipimi yapmak isteyecek kadar iyi olsaydı :)
    < 14.5 yerine varsayılan boyutu 200 yaparsanız noktayı 145 olarak tanımlayabilirsiniz; böylece bir ondalık karakter azaltılabilir.
    adjust adlı bir fonksiyon görüyorum; yazı tipi spesifikasyonunu iyi bilmiyorum ama 0,{x:12.2,y:13.2} ifadesini 0,[12.2,13.2] gibi farklı serileştirip adjust fonksiyonunda dönüştürmek nasıl olur diye düşündüm.

    • Diğer becerilerde olduğu gibi, el yazısı da biraz çabayla geliştirilebilir.