Teknik Mengodekan Tulisan Tanganku

• Berawal dari generator alfabet huruf cetak di JavaScript blockchain, lalu dalam dua bulan berkembang menjadi proses mewujudkan tulisan tangan kursif dengan kode
• Huruf dibuat dengan menandai koordinat inti memakai alat p5js, lalu dirapikan dengan kurva Chaikin sebelum diubah menjadi jalur dengan ketebalan variabel
• Pada tulisan kursif, cara penyambungan berbeda untuk setiap pasangan huruf, sehingga di awal dan akhir jalur ditempelkan tag 0~3 untuk membedakan status tidak bisa tersambung, baseline, di atas baseline, dan dekat x-height
• Saat membentuk kata, salah satu dari 2~3 jalur per huruf dipilih, lalu titik ditambah, dihapus, atau diganti sesuai tinggi sambungan huruf tetangga, kemudian diberi goyangan dengan Perlin noise
• Setelah diperkecil, kelas huruf kursif berukuran 26.1kb, lebih besar daripada huruf cetak yang 9.7kb, karena banyaknya jalur dan fungsi penyesuaian untuk huruf tetangga

---

Memperluas dari cara membuat huruf cetak ke kursif

• Generator alfabet huruf cetak sebelumnya mendefinisikan titik inti setiap jalur huruf langsung di dalam kode
  • Sekitar 10 titik ditempatkan untuk setiap huruf
  • Jalur dihaluskan dengan algoritme kurva Chaikin
  • Jalur diubah menjadi bentuk dengan ketebalan yang berubah sepanjang arahnya
  • Bentuk akhir digambar dengan p5js
• Pada huruf cetak, koordinat ditulis langsung di kode, dan titik-titik harus disesuaikan secara manual sampai huruf terlihat alami
• Untuk implementasi kursif, dibuat alat perancangan huruf terpisah agar pekerjaan berulang ini berkurang

Alat untuk merancang jalur huruf di p5js

• Dibuat dan digunakan alat untuk mendefinisikan dan menampilkan titik inti di editor p5js
• Alat ini menampilkan huruf contoh untuk menunjukkan skala dan konteks, bersama area untuk merancang huruf baru
  • Jika titik inti jalur ditempatkan dengan klik, hasil yang sudah diberi kurva Chaikin akan ditampilkan
  • Beralih ke mode edit dengan tombol p
  • Setelah memilih titik, posisinya bisa disesuaikan dengan drag
  • Jalur dikeluarkan ke konsol dengan tombol enter
• Untuk setiap huruf dibuat 2~3 opsi, dan jalur hasilnya berbentuk array koordinat {x, y}
• Agar berdasarkan tulisan tangan sendiri, contoh huruf kecil dan huruf besar ditulis langsung, lalu gambarnya dimuat ke alat pembuat huruf untuk dijiplak
  • Gambar digeser dengan tombol w/a/s/d
  • Gambar diperbesar atau diperkecil dengan tombol r/e
  • Angka yang ditulis di kertas adalah koordinat x/y untuk menyesuaikan area itu dengan jendela pembuat huruf

Masalah sambungan kursif dan tag 0~3

• Beberapa pasangan huruf bisa tersambung alami hanya dengan menempelkan jalur titik inti huruf berikutnya setelah huruf sebelumnya lalu menerapkan kurva Chaikin sekaligus
• Namun pada beberapa kombinasi, garis sambungan merusak bentuk huruf
  • Pada na, titik terakhir n rendah sementara titik pertama a tinggi, sehingga garis sambungan bisa melintas diagonal melalui a dan membuatnya tampak seperti e
  • Pada ti, t berakhir tepat di atas baseline dan i dimulai dari baseline, sehingga muncul tonjolan yang tidak alami
• Alih-alih menulis aturan untuk setiap pasangan huruf tertentu, informasi tinggi sambungan ditempelkan sebagai angka pada awal dan akhir setiap jalur
  • 0: tidak bisa tersambung ke huruf lain
  • 1: tersambung ke huruf lain di sekitar baseline
  • 2: tersambung ke huruf lain tepat di atas baseline
  • 3: tersambung ke huruf lain di dekat x-height
• Bahkan untuk huruf yang sama, cara menambah atau menghapus titik berubah tergantung apakah huruf itu berada di awal kata atau huruf di depan dan belakangnya
  • Jika a berada di awal kata, titik tambahan terasa janggal
  • Pada a setelah w, garis bisa melintasi a dengan cara yang berbeda
  • Jika t tersambung dengan k, bentuknya bisa berubah
• Semua pasangan huruf diuji, dan variasi bentuk dibuat lewat beberapa opsi jalur serta penyuntingan berdasarkan huruf tetangga
• Idealnya, setiap huruf ingin punya 5~6 opsi jalur, tetapi harus diseimbangkan dengan ukuran berkas

Prosedur membuat kata

• Saat membuat kata, pertama-tama dipilih salah satu dari 2~3 jalur dasar untuk setiap karakter
• Informasi sambungan awal dan akhir dari jalur yang terpilih lalu diteruskan ke huruf yang bersebelahan
  • Bahkan untuk huruf yang sama, informasi titik akhir bisa berbeda tergantung opsi jalur yang dipilih, jadi semua jalur huruf harus ditentukan lebih dulu
• Setelah itu, jalur dasar disesuaikan dengan huruf tetangga
  • Jika tinggi akhir huruf sebelumnya adalah 2, satu titik awal pada jalur saat ini bisa dihapus
  • Jika tinggi awal huruf berikutnya adalah 1, titik bisa ditambahkan di posisi tertentu
• Fungsi penyesuaian bekerja berbeda untuk tiap huruf
  • Fungsi penyesuaian q menambahkan putus di akhir dengan probabilitas 70%, lalu mengganti atau menambah titik sesuai informasi akhir huruf sebelumnya atau awal huruf berikutnya
  • Fungsi penyesuaian n membuat putus dengan probabilitas 30% atau memindahkan titik terakhir saat huruf berikutnya dimulai dari 3
• Saat semua jalur dasar huruf digabungkan, 1, 2, 3 diabaikan, dan jika muncul 0, jalur baru dimulai untuk membuat putus
• Pada jalur yang sudah digabungkan diterapkan kurva Chaikin, lalu diubah menjadi bentuk dengan ketebalan variabel, kemudian ditambahkan sedikit goyangan dengan Perlin noise

Ukuran dan cara pemakaian

• Kelas huruf untuk huruf cetak berukuran 9.7kb, sedangkan kelas huruf kursif yang sudah diperkecil saat ini 26.1kb
• Versi kursif lebih besar karena tiap huruf punya beberapa jalur, dan ada fungsi untuk menyesuaikan titik sesuai huruf yang bersebelahan
• Masih ada ide penghematan tambahan
  • Saat ini huruf dirancang berdasarkan ukuran font dasar 20 lalu di-resize
  • Karena itu, banyak koordinat seperti x: 14.5
  • Jika ukuran dasar diubah menjadi 200, desimal bisa dihilangkan menjadi seperti 145 sehingga tiap huruf bisa diperkecil
  • Perubahan ini harus dilakukan dengan hati-hati, jadi masih ada di daftar pekerjaan berikutnya
• Kegunaan utama tulisan tangan ini adalah untuk judul, label, dan catatan coretan pada diagram yang sedang dikerjakan
• Dengan memakai jalur yang dikodekan alih-alih font, jalur bisa dimanipulasi secara langsung, misalnya dengan mengubah posisi huruf atau ketebalan di dalam tiap huruf
• Tersedia juga cetakan Meaningful Nonsense yang menggunakan versi lebih lanjut dari kode tulisan tangan ini, dan setiap cetakan adalah hasil unik yang dihasilkan saat dipesan

[GN⁺]

Opini di Hacker News

• Kalau tulisan tangan saya dienkode, rasanya bisa dianggap sebagai hash satu arah
  Kalau dibaca lagi nanti, sama sekali tidak ada cara untuk mendekripsi apa sebenarnya yang mau saya tulis

  • Kedengarannya seperti tantangan! https://www.handwritingocr.com :)
  • Karena itu, saat kuliah saya harus sengaja meninggalkan tulisan sambung
  • Saya juga sama; setelah beberapa jam saja, bahkan saya sendiri tidak bisa mendekripsinya

• Video YouTube dari Stuff Made Here yang membahas hal serupa cukup keren: https://www.youtube.com/watch?v=cQO2XTP7QDw
  Penjelasan tentang trial-and-error-nya juga menarik untuk ditonton, dan repositori sintesis tulisan tangan ini juga menarik: https://github.com/sjvasquez/handwriting-synthesis

• Artwork di bagian akhir cukup indah
  Saya penasaran apakah langkah berikutnya adalah menjadikannya font sungguhan agar bisa diketik di program apa pun

  • Font untuk plotter juga sudah ada
    Berbeda dari font yang biasanya kita bayangkan, ia harus berupa jalur untuk diikuti, bukan outline yang diisi
  • Kalau kurvanya sudah ada, ini cukup mudah dilakukan
    Namun bisa membosankan jika harus, atau ingin, dikerjakan secara manual
  • Saya sangat suka cara di sini memadukan teknologi dan seni

• Saya kurang paham bagian tentang sambungan huruf yang tidak pas
  Bagi saya, inti tulisan sambung adalah tidak mengangkat pena dari kertas, jadi cara menyambungkan huruf sudah termasuk dalam proses menulis sejak awal
  Sepertinya masalahnya muncul karena penulis sebenarnya tidak menulis seperti itu
  Meski begitu, bagian lain yang menyelesaikannya dengan cara paling sederhana untuk menggambar beberapa huruf di layar tanpa mengutak-atik font sangat menarik

  • Ungkapan “inti tulisan sambung adalah tidak mengangkat pena dari kertas” itu sendiri benar, tetapi penafsirannya berbeda
    Dalam tulisan sambung, sambungan antarhuruf bergantung pada konteks
    Misalnya, bentuknya bisa berubah demi keterbacaan tergantung apakah setelah b muncul a atau o, dan bahkan di dalam satu kata, pada kasus tertentu kita mungkin ingin mengangkat pena di antara huruf
    Itu tetap bukan berarti melanggar “aturan” tulisan sambung
    Mungkin saja Anda belajar dengan cara berbeda dan ajaran itu juga benar, tetapi saya kurang tahu gaya tulisan sambung yang sambungannya tidak semestinya bergantung pada konteks
  • Intinya tampaknya setiap pasangan huruf memiliki cara saling mengait yang berbeda, dan itu perlu ditangani
  • Setiap pasangan huruf tersambung dengan cara yang berbeda
    Bahkan pada font yang tidak tersambung pun, mirip dengan kerning, kita harus mengenkode bagaimana berbagai urutan huruf terlihat

• Indah! Saya berharap ada lebih banyak font tulisan tangan sambung
  Karya saya yang dibuat 2 tahun lalu ada di sini: https://certik.github.io/slabikar-otf/

• Keren sih, tapi saya berharap tulisan saya cukup bagus sampai layak dijadikan font pribadi :)
  Kalau mengganti ukuran default menjadi 200 alih-alih < 14.5, titik bisa didefinisikan sebagai 145 sehingga bisa mengurangi satu karakter desimal
  Saya melihat ada fungsi bernama adjust; saya tidak begitu paham spesifikasi font, tetapi mungkin 0,{x:12.2,y:13.2} bisa diserialisasi secara berbeda seperti 0,[12.2,13.2], lalu dikonversi di fungsi adjust

  • Seperti keterampilan lain, tulisan tangan juga bisa diperbaiki dengan sedikit usaha