मेरी हैंडराइटिंग को कोड करने की तकनीक

• JavaScript ब्लॉक लेटर alphabet generator से शुरुआत करके, दो महीने बाद cursive handwriting तक कोड में लागू करने की प्रक्रिया
• अक्षरों के लिए p5js टूल से core coordinates मार्क किए गए, Chaikin curve से उन्हें smooth किया गया, फिर variable-width path में बदला गया
• cursive में हर letter pair का connection तरीका अलग होता है, इसलिए path की शुरुआत और अंत पर 0~3 tags लगाकर connect न हो सकना, baseline, baseline के ऊपर, और x-height के पास वाली अवस्थाओं को अलग किया गया
• word बनाते समय हर letter के 2~3 paths में से एक चुना जाता है, पड़ोसी letters की connection height के हिसाब से points add/delete/replace किए जाते हैं, फिर Perlin noise से हल्का wobble जोड़ा जाता है
• minify करने के बाद cursive letter class 26.1kb है, जो block letters के 9.7kb से बड़ी है; multiple paths और neighbor-letter correction functions इसका कारण हैं

---

ब्लॉक लेटर बनाने के तरीके से cursive तक विस्तार

• पहले वाला block letter alphabet generator हर letter path के core points को code में define करने के तरीके पर आधारित था
  • हर letter में लगभग 10 points लगाए जाते थे
  • Chaikin curve algorithm से path को smooth बनाया जाता था
  • path को length direction में बदलती thickness वाले shape में बदला जाता था
  • p5js से final shape draw किया जाता था
• block letters में coordinates सीधे code में लिखने पड़ते थे, और letter natural दिखने तक points को manually adjust करना पड़ता था
• cursive implementation में इस repetitive काम को कम करने के लिए अलग से letter design tool बनाया गया

p5js में letter paths design करने का tool

• p5js editor में core points define और output करने वाला tool बनाकर इस्तेमाल किया गया
• tool scale और context दिखाने वाले sample letters के साथ नया letter design करने का area भी देता है
  • click करके path के core points place करने पर Chaikin curve applied result दिखता है
  • p key से edit mode में switch करता है
  • point select करने के बाद drag करके position adjust करता है
  • enter key से path console में output करता है
• हर letter के लिए 2~3 options बनाए गए, और result path {x, y} coordinate arrays के रूप में बना
• अपनी handwriting को reference बनाने के लिए lowercase और uppercase examples खुद लिखे, और उस image को letter generation tool में load करके trace किया
  • w/a/s/d keys से image move की जाती है
  • r/e keys से image zoom in/out की जाती है
  • paper पर लिखे numbers उस region को letter generation window से match कराने के लिए x/y coordinates हैं

cursive connection problem और 0~3 tags

• कुछ letter pairs में एक letter के core point path के बाद अगले letter path को जोड़कर एक बार में Chaikin curve apply करने भर से natural connection बन जाता है
• लेकिन कुछ combinations में connecting line letter shape बिगाड़ देती है
  • na में n का last point low होता है और a का first point high, जिससे connecting line a को diagonal में पार करती है और वह e जैसा दिख सकता है
  • ti में t baseline के ठीक ऊपर खत्म होता है और i baseline से शुरू होता है, जिससे unnatural ridge बनती है
• हर specific letter pair के लिए rules लिखने के बजाय, हर path की शुरुआत और अंत पर connection height information number के रूप में जोड़ी गई
  • 0: दूसरे letters से connect नहीं हो सकता
  • 1: baseline के पास दूसरे letters से connect करता है
  • 2: baseline के ठीक ऊपर दूसरे letters से connect करता है
  • 3: x-height के पास दूसरे letters से connect करता है
• वही letter भी word की starting position या आगे-पीछे के letters के हिसाब से points add/delete करने के अलग तरीके रखता है
  • अगर a word की शुरुआत में हो, तो extra point अटपटा लगता है
  • w के बाद आने वाले a में line अलग तरीके से a को cross कर सकती है
  • t अगर k से जुड़ता है, तो shape deform हो सकता है
• सभी letter pairs test किए गए, और multiple path options तथा neighbor-letter-specific edits से variation बनाई गई
• ideally हर letter के लिए 5~6 path options रखना चाहेंगे, लेकिन file size और balance भी देखना होगा

word generation procedure

• word बनाते समय पहले हर character के लिए 2~3 base paths में से एक चुना जाता है
• selected path की start/end connection information adjacent letters तक pass की जाती है
  • वही letter भी selected path option के हिसाब से अलग endpoint information रख सकता है, इसलिए पहले सभी letter paths चुनने पड़ते हैं
• इसके बाद base path को neighbor letters के हिसाब से adjust किया जाता है
  • अगर previous letter की end height 2 है, तो current path का एक starting point हटाया जा सकता है
  • अगर next letter की starting height 1 है, तो किसी specific position पर point add किया जा सकता है
• adjustment function हर letter के लिए अलग तरह से काम करता है
  • q का adjustment function 70% probability से end पर break जोड़ता है, और previous letter की end information या next letter की start information के आधार पर points replace या add करता है
  • n का adjustment function अगले letter के 3 से शुरू होने पर 30% probability से break बनाता है या last point move करता है
• सभी letters के base paths merge करते समय 1, 2, 3 को ignore किया जाता है, और 0 आने पर नया path शुरू करके break बनाया जाता है
• merged path पर Chaikin curve apply किया जाता है, variable-thickness shape में बदला जाता है, फिर Perlin noise से हल्का wobble add किया जाता है

size और इस्तेमाल का तरीका

• block letters के लिए letter class 9.7kb थी, और minify की गई cursive letter class अभी 26.1kb है
• cursive वाली class बड़ी इसलिए है क्योंकि हर letter के कई paths हैं और adjacent letters के हिसाब से points adjust करने वाले functions शामिल हैं
• कुछ और size reduction ideas बाकी हैं
  • अभी letters base font size 20 के आधार पर design करके resize किए जाते हैं
  • इसी वजह से x: 14.5 जैसे coordinates बहुत हैं
  • base size को 200 में बदलने पर 145 की तरह decimal हटाकर एक character कम किया जा सकता है
  • यह change सावधानी से करना होगा, इसलिए future to-do list में है
• इस handwriting का मुख्य use काम में चल रहे diagrams के titles, labels और scribbled notes के लिए है
• font की जगह encoded paths इस्तेमाल करने पर letters की position या individual letters के अंदर thickness को सीधे बदलने जैसे तरीके से paths manipulate किए जा सकते हैं
• इस handwriting code के advanced version का इस्तेमाल करने वाला Meaningful Nonsense print भी उपलब्ध है, और हर print order के समय generate होने वाला unique result होता है

[GN⁺]

Hacker News पर टिप्पणियाँ

• मेरी हैंडराइटिंग को encode कर दिया जाए तो उसे one-way hash माना जा सकता है
  बाद में पढ़ने पर समझने का कोई तरीका नहीं बचता कि आखिर लिखना क्या चाहा था

  • चुनौती जैसी लग रही है! https://www.handwritingocr.com :)
  • इसलिए कॉलेज में मुझे cursive writing जानबूझकर छोड़नी पड़ी
  • मेरे साथ भी यही है, कुछ घंटे बीतते ही खुद मेरे लिए भी decrypt करना असंभव हो जाता है

• Stuff Made Here का इसी तरह के विषय पर YouTube वीडियो काफी शानदार है: https://www.youtube.com/watch?v=cQO2XTP7QDw
  इसमें trial-and-error भी समझाया गया है, इसलिए देखने में मज़ा आता है, और handwriting synthesis repository भी दिलचस्प है: https://github.com/sjvasquez/handwriting-synthesis

• आखिर का artwork काफी सुंदर है
  सोच रहा हूँ कि अगला कदम क्या इसे असली font बनाना होगा, ताकि किसी भी program में इसे type किया जा सके

  • plotter के लिए fonts पहले से मौजूद हैं
    वे उन fonts जैसे नहीं होते जिनकी हम आम तौर पर कल्पना करते हैं; वे भरने वाली outlines नहीं, बल्कि follow करने वाले paths होने चाहिए
  • अगर curves पहले से हैं, तो यह काफी आसानी से हो सकता है
    हालांकि अगर इसे manually करना पड़े, या आप ऐसा करना चाहें, तो यह उबाऊ हो सकता है
  • यहाँ technology और art को मिलाने का तरीका वाकई अच्छा है

• मुझे यह हिस्सा ठीक से समझ नहीं आया कि अक्षरों का connection सही नहीं बैठता
  मेरे लिए cursive writing की असली बात यह है कि pen को paper से उठाया न जाए, इसलिए अक्षरों को जोड़ने का तरीका तो शुरू से ही writing में शामिल होता है
  लगता है लेखक असल में उस तरह नहीं लिखते, इसलिए समस्या आई
  फिर भी font को छेड़े बिना screen पर कई अक्षर draw करने का सबसे सरल तरीका निकालने वाला बाकी लेख बहुत मजेदार है

  • “cursive writing की असली बात pen को paper से उठाना नहीं है” वाला कथन अपने आप में सही है, लेकिन उसकी interpretation अलग है
    cursive में अक्षरों के बीच connections context-dependent होते हैं
    उदाहरण के लिए b के बाद a आता है या o, इसके हिसाब से readability के लिए shape बदल सकता है, और शब्द के अंदर भी कुछ मामलों में आप अक्षरों के बीच pen उठाना चाह सकते हैं
    फिर भी यह cursive के “rules” तोड़ना नहीं है
    हो सकता है आपको अलग तरह से सिखाया गया हो और वह सिखाना सही भी हो, लेकिन मैं ऐसी cursive style से परिचित नहीं हूँ जिसमें connections context-dependent न होने चाहिए
  • मुख्य बात यह लगती है कि हर letter pair का fit होने का तरीका अलग होता है, और उसे handle करना पड़ता है
  • हर letter pair अलग तरीके से जुड़ता है
    non-joining fonts में kerning जैसा ही, कई letter sequences कैसे दिखते हैं, यह encode करना पड़ता है

• खूबसूरत! cursive handwriting fonts और ज्यादा हों तो अच्छा लगेगा
  2 साल पहले बनाया मेरा काम यहाँ है: https://certik.github.io/slabikar-otf/

• अच्छा तो है, लेकिन काश मेरी handwriting इतनी अच्छी होती कि मैं उसे अपना font बनाना चाहता :)
  < 14.5 के बजाय default size को 200 कर दें, तो dot को 145 के रूप में define किया जा सकता है, जिससे decimal point वाला एक character कम हो जाएगा
  adjust नाम का function दिख रहा है; font spec मुझे अच्छी तरह नहीं पता, लेकिन शायद 0,{x:12.2,y:13.2} को 0,[12.2,13.2] की तरह अलग ढंग से serialize करके adjust function में convert किया जा सकता है

  • दूसरी skills की तरह, handwriting भी थोड़ी मेहनत से सुधारी जा सकती है