Teknologi untuk Mengodekan Tulisan Tanganku

Skrip blok

• Artikel sebelumnya membahas alfabet dalam versi cetak blok.
• Singkatnya, itu dibuat melalui proses berikut:
  • Menulis kode yang mendefinisikan titik-titik utama pada jalur setiap huruf (~10 titik per huruf).
  • Menghaluskan jalur menggunakan algoritma kurva Chaikin.
  • Mengubah jalur menjadi bentuk dengan ketebalan yang bervariasi.
  • Menggambar jalur bentuk menggunakan p5js.
• Hasilnya terlihat seperti ini:
• Artikel tentang cara menghasilkan kalimat dengan sistem ini akan segera terbit. Silakan berlangganan newsletter untuk mendapatkan kabarnya.
• Awalnya, mendefinisikan jalur huruf dilakukan sepenuhnya secara manual dengan menuliskan posisi di dalam kode dan menyesuaikan titik-titiknya agar huruf terlihat benar.
• Saat mengodekan tulisan sambung, proses ini disederhanakan.

Desain huruf

• Saya membuat alat untuk mendefinisikan dan menampilkan titik-titik utama jalur agar mudah diakses di editor p5js.
• Alat ini menampilkan contoh huruf dan menyediakan area untuk merancang huruf baru.
• Lanjut ke langkah berikut:
  • Klik untuk menempatkan titik-titik utama jalur - jalur kurva Chaikin hasilnya akan ditampilkan.
  • Tekan p untuk beralih ke mode edit.
  • Pilih titik dan seret ke posisinya.
  • Tekan enter untuk mencetak jalur ke konsol.
• Saya membuat 2-3 opsi untuk setiap huruf.
• Jalur hasilnya seperti berikut:

  [{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}]
  

• Saya ingin menggunakan tulisan tangan saya sendiri sebagai panduan, jadi saya menulis contoh huruf kecil dan huruf besar, lalu memuat gambarnya langsung ke alat untuk dijiplak.
• Gunakan tombol w/a/s/d untuk menempatkan gambar di posisi yang tepat dan tombol r/e untuk memperbesar atau memperkecil gambar.
• Angka-angka itu adalah koordinat x y untuk menempatkan area tersebut di jendela pembuatan huruf.
• Setelah semua jalur dibuat, kurva digambar, dan diubah menjadi bentuk dengan lebar variabel, setiap huruf secara terpisah terlihat seperti ini.

Menjadikannya tulisan sambung

• Terkadang menghubungkan huruf itu mudah. Cukup pindah langsung dari jalur titik utama satu ke jalur berikutnya, lalu terapkan kurva Chaikin sekaligus.
• Namun, beberapa pasangan huruf tidak cocok dengan baik.
• Misalnya, pada pasangan na, titik terakhir n rendah sementara titik pertama a tinggi, sehingga muncul jalur yang melintas diagonal di a dan membuatnya tampak seperti e.
• Pada pasangan ti, t berakhir di atas baseline dan i dimulai dari baseline, sehingga muncul tonjolan yang tidak alami.
• Untuk mengatasi masalah ini, titik tambahan bisa ditambahkan di awal a dan dua titik terakhir t bisa dihapus.
• Namun, huruf tidak bisa diubah seperti itu untuk semua skenario.
• Misalnya, jika a ada di awal kata, titik tambahan itu berada di posisi yang salah, dan jika muncul setelah huruf seperti w, akan terbentuk garis yang melintasi a dengan cara berbeda.
• Jika t dipasangkan dengan k, hasilnya juga berubah bentuk.
• Titik awal dan akhir dari jalur huruf harus berubah tergantung posisinya terhadap huruf lain.
• Awalnya saya ingin memanggil pasangan-pasangan "bermasalah" tertentu dan menulis aturan untuk masing-masing, tetapi akhirnya saya menambahkan angka pada awal dan akhir setiap jalur untuk menunjukkan hal berikut:
  • Tidak terhubung dengan huruf lain (0)
  • Terhubung dengan huruf lain di sekitar baseline (1)
  • Terhubung dengan huruf lain tepat di atas baseline (2)
  • Terhubung dengan huruf lain di sekitar x-height (3)
• Contoh:
• Sekarang setiap jalur huruf terlihat seperti ini. Perhatikan angka satu digit di awal dan akhir:

  [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]
  

• Saya menguji semua pasangan huruf:
• Di sini, untuk setiap huruf ada beberapa opsi jalur, dan Anda bisa melihat perubahan yang muncul karena huruf diedit sesuai huruf di sebelahnya.
• Idealnya, saya ingin memiliki setidaknya 5-6 opsi jalur untuk setiap huruf, tetapi itu harus diseimbangkan dengan ukuran file.

Pembuatan kata

• Saat sebuah kata dibuat:
  • Untuk setiap huruf, jalur dasar dipilih dari 2-3 opsi yang berbeda.
  • Informasi tentang ujung jalur diteruskan ke huruf yang bersebelahan (karena opsi jalur lain untuk huruf yang sama bisa memiliki endpoint yang berbeda, semua jalur huruf harus dipilih terlebih dahulu).
  • Jalur dasar kemudian disesuaikan sebagai respons terhadap huruf tetangganya. Misalnya, jika tinggi akhir huruf sebelumnya adalah 2, hapus 1 titik dari awal jalur ini, atau jika tinggi awal huruf berikutnya adalah 1, tambahkan titik ekstra di posisi tertentu.
• Fungsi penyesuaian bisa sedikit rumit. Misalnya, fungsi untuk huruf q adalah sebagai berikut:

  // ip = jalur
  // pc = informasi akhir huruf sebelumnya
  // nc = informasi awal huruf berikutnya
  // n = indeks jalur yang dipilih untuk huruf ini
  adjust: (ip, pc, nc, n) => {
    // tambahkan putus di akhir huruf ini dengan probabilitas 70%
    if (rand() < 0.7 ) ip.splice(-1, 1, 0);
    // jika [2] dipilih untuk jalur ini dari 4 opsi
    if (n < 2) {
      // jika huruf sebelumnya berakhir di 3, ganti dua titik pertama dengan titik lain
      if (pc == 3) ip.splice(1, 2, {x:10,y:12});
      // jika tidak, tambahkan titik di awal selama bukan 0
      else if (pc > 0) ip.splice(1, 0, {x:10,y:20});
    }
    // jika tidak ada putus antara huruf ini dan huruf berikutnya (0)
    if (nc > 0 && ip[ip.length-1] != 0){
      // ganti dua titik terakhir dengan titik lain
      ip.splice(-3, 2, {x:16,y:34});
    }
  }
  

• Namun, sering kali lebih singkat. Misalnya, fungsi untuk huruf n adalah sebagai berikut:

  adjust: (ip, pc, nc) => {
    // jika huruf berikutnya dimulai dari 3, buat putus secara acak atau pindahkan titik terakhir
    if (nc == 3) rand() < 0.3 ? ip.splice(-1, 1, 0) : ip.splice(-2, 1, {x:17,y:23.8});
  }
  

• Berikutnya, semua jalur dasar huruf digabungkan. Dalam proses ini, 1, 2, dan 3 di dalam jalur diabaikan, tetapi setiap kali ada 0, jalur baru dimulai untuk membuat putus.
• Setelah itu, jalur dijadikan kurva, diubah menjadi bentuk dengan lebar variabel, lalu ditambahkan sedikit getaran menggunakan Perlin noise, dan tulisan sambungnya terlihat seperti ini.
• Artikel tentang cara menghasilkan kalimat ini akan segera terbit. Silakan berlangganan newsletter untuk mendapatkan kabarnya.
• Sekadar untuk bersenang-senang, ini adalah perbandingan berdampingan antara tulisan tangan terkode yang dijalankan melalui plotter dan tulisan tangan asli.

Berapa bobotnya?

• Kelas huruf untuk cetak blok berukuran 9.7kb.
• Kelas huruf tulisan sambung saat ini berukuran 26.1kb (setelah dikompresi).
• Kelas ini lebih besar karena mencakup beberapa jalur untuk setiap huruf dan fungsi untuk menyesuaikan titik-titiknya. Namun, ada juga beberapa cara lain untuk menghemat ukuran.
• Sepertinya masih mungkin dihemat lebih jauh. Saya bukan penyihir code golf, tetapi saya punya beberapa ide.
• Misalnya, saat ini huruf dirancang berdasarkan ukuran font dasar 20 lalu diskalakan. Artinya banyak titik didefinisikan seperti x: 14.5, tetapi jika ukuran dasar diubah menjadi 200, titik bisa didefinisikan sebagai 145 untuk menghilangkan desimal. Perubahan ini harus dilakukan dengan hati-hati, jadi masuk daftar pekerjaan nanti.

Cara menggunakannya

• Tujuan utama tulisan tangan ini adalah untuk judul, label, dan catatan coretan pada diagram yang sedang saya kerjakan.
• Namun, memainkan teks itu sendiri juga sangat menyenangkan.
• Karena jalurnya sudah dienkodekan, saya bisa bermain-main dengan jalurnya alih-alih memakai font. Misalnya, mengubah posisi huruf dan mengubah ketebalan tiap huruf secara individual.
• Berikutnya saya akan mengintegrasikan tulisan tangan ini ke dalam diagram, tetapi saya juga berencana membuat sesuatu yang berfokus pada teks itu sendiri. Ini sangat indah dan punya banyak kemungkinan.

Pendapat GN⁺

• Artikel ini memberikan contoh menarik tentang proses mendigitalisasi tulisan tangan menggunakan JavaScript dan p5.js. Ini bisa menjadi peluang bagus bagi software engineer untuk melatih keterampilan coding lewat proyek kreatif.
• Anda bisa mempelajari cara menerapkan algoritma matematis seperti algoritma kurva Chaikin ke proyek nyata. Ini membantu memperdalam pemahaman tentang pemrograman grafis.
• Anda bisa mempelajari cara menangani logika kompleks seperti fungsi penyesuaian jalur. Ini adalah keterampilan penting untuk meningkatkan fleksibilitas dan skalabilitas kode.
• Proyek ini menangani masalah praktis seperti optimasi ukuran file. Ini adalah pertimbangan penting dalam pengembangan perangkat lunak nyata.
• Saat mengadopsi teknik ini, perlu diingat bahwa mendefinisikan jalur dan menulis fungsi penyesuaian bisa memakan banyak waktu. Namun, hasilnya memberikan ekspresi teks yang sangat personal dan unik.