6 ms·

Hanzi Writer – JavaScript library for Chinese character stroke order animations

111 points by 0x54MUR41 8y ago

nothrabannosir 8y ago
This is gorgeous, and it works beautifully on a touchscreen. Incredibly valuable tool for learning mandarin, I bet. It even works with traditional characters! How did you do this??? Was there a database with stroke orders somewhere? Love this app. It would be wonderful if this could be included in a spaced repition app somehow! Thanks for sharing this.
- eismcc 8y ago
  Author references the makemehanzi project: https://github.com/skishore/makemeahanzi https://github.com/skishore/makemeahanzi
- j_shi 8y ago
  https://www.skishore.me/inkstone/ https://www.skishore.me/inkstone/
- redthrow 8y ago
  >> Incredibly valuable tool for learning mandarin, I bet. If someone were actually trying to Mandadin, Prof Victor Mair at Penn tells people to mostly ignore the characters for the first few years. Victor Mair, at Penn, remarks (in an e-mail I quote with permission): “It’s a tragedy that so many young Americans spend years stuffing their heads with hundreds of Chinese characters, gaining no usable proficiency, and then forgetting them all by the time they’re 25.” Mair thinks that “if the Chinese would wake up and permit pinyin to function as part of a genuine digraphia, then I would say it might make sense for maybe 2 percent of the population to learn up to third-year level of Mandarin—strictly romanized, mind you. But there are exceedingly few teachers who are enlightened enough to teach it that way.” https://www.chronicle.com/blogs/linguafranca/2012/03/02/more-on-how-to-argue-for-foreign-language-instruction/ https://www.chronicle.com/blogs/linguafranca/2012/03/02/more...
  - brownbat 8y ago
    With Chinese, I felt like sunk a lot of time into memorizing characters for the illusion of progress without actually learning how to engage with the language. On the other hand, with Korean, I spent some time up front learning to type, and that paid dividends as I was able to text with people and read maps before long. Maybe if I had learned characters in Chinese not with the goal of being a master calligrapher, but with the goal of communicating with other people using today's tools, they would have had similar benefits.
  - yorwba 8y ago
    > It’s a tragedy that so many young Americans spend years stuffing their heads with hundreds of Chinese characters, gaining no usable proficiency, and then forgetting them all by the time they’re 25. There are similar complaints about all kinds of languages, even when they're written in Latin script. (The proverbial "high school French" comes to mind.) I think Mair is mistaken about the characters being the culprit. Most people taking a language class are simply not invested enough to actually practice, and then they forget everything they did learn once they stop using the language. While it's true that it would be unnecessary to learn the characters if Chinese were usually written in Pinyin, that's unfortunately not the case and so you'd better memorize them if you want to learn the language without remaining an analphabet. It's also not like you need to know all that many characters right off the bat. The most common 300 make up about 80% of every text; you can get to that level in a month if you learn 10 new characters per day. Most of the effort is in learning words formed by combining those characters, just like learning any other language.
    - redthrow 8y ago
      French isn't held back by its script, even though its script is far from great. Chinese and Japanese are definitely held back by their awful script + many people who confuse language with script.
      - glasslion 8y ago
        Sure, anything non Anglo-Saxon is awful
- etskinner 8y ago
  > Hanzi Writer uses character data from the Make Me a Hanzi project
est 8y ago
Fun fact about stroke orders, many people regard Chinese ideograph as some sort of bitmap, but if you watch calligraphy artists[1] you will discover they are not only some straight lines, but the the speed and acceleration also varies when drawing different part of the line. It's an important factor for distinguish writing styles. So far we have character as bitmaps, as vector graphics, and vector graphics with stroke order, but we've yet to see a db about the composition speed of the strokes. [1] https://youtu.be/8-99YB4iou0?t=45 https://youtu.be/8-99YB4iou0?t=45 as an example. You can find plenty.
- randomcommentt 8y ago
  I wonder if you can implement that in this demo by inferring the speed from the thickness of the stroke in the font. Making pixel area fill rate constant is probably another decent approximation.
- mncharity 8y ago
  > speed and acceleration also varies Also tilt and pressure. But I didn't notice rotation in the sections I skimmed. With XR coming to unshackle visual output from fixed flat small screens, the question arises: how might we unshackle input? Say one can type while holding a single chopstick. What might one do with 7DOF fingers and brush in 2D and 3D? If a laptop keyboard was also a touch surface, and the space above it were tracked? What does an IDE look like for typing and painting code, where the "paint" is alive? So I'm interested in stylus and brush movement vocabularies, and gesture recognition.
vortico 8y ago
Can this be considered to work with Japanese kanji?
- CarVac 8y ago
  Sometimes the stroke order differs even if the character is the same. Like 必.
- gourlaysama 8y ago
  There are differences between Chinese and Japanese stroke order. See the animCJK [0] project for support for Japanese kanji and kanas (demo: [1]). [0]: https://github.com/parsimonhi/animCJK https://github.com/parsimonhi/animCJK [1]: http://gooo.free.fr/animCJK/official/ http://gooo.free.fr/animCJK/official/
  - yorwba 8y ago
    animCJK is great, but it only covers the most commonly used Kanji and Hanzi. For example, it doesn't have 鱚. If you need a database that also has hyōgai kanji, KanjiVG [1] is a better choice. (鱚 can be seen here [2]). There's also the Kanimaji project [3] to animate files in the KanjiVG format, which could be used to get results similar to the Hanzi Writer project. If you use it to produce GIFs rather than animated SVGs, the resulting files are somewhat large though, so I wrote my own (ugly) renderer [4] to get better compression. [1] https://github.com/KanjiVG/kanjivg https://github.com/KanjiVG/kanjivg [2] https://kanjivg.tagaini.net/viewer.html?kanji=%E9%B1%9A https://kanjivg.tagaini.net/viewer.html?kanji=%E9%B1%9A [3] https://github.com/aehlke/kanimaji https://github.com/aehlke/kanimaji [4] https://github.com/Yorwba/kanjivg-gif https://github.com/Yorwba/kanjivg-gif
  - ElBarto 8y ago
    Even in Chinese the order may change depending on style or when writing quickly in cursive. So I think this tool is useful for both.
titanix2 8y ago
Awesome. Really well made and open-source, I’ll probably use it in the future.
salzig 8y ago
Is there any such thing for European calligraphy?
anonytrary 8y ago
This could probably be implemented with an animated flood-fill algorithms.

111 points by 0x54MUR41 8y ago

This is gorgeous, and it works beautifully on a touchscreen. Incredibly valuable tool for learning mandarin, I bet. It even works with traditional characters! How did you do this??? Was there a database with stroke orders somewhere? Love this app. It would be wonderful if this could be included in a spaced repition app somehow! Thanks for sharing this.

eismcc 8y ago
Author references the makemehanzi project: https://github.com/skishore/makemeahanzi https://github.com/skishore/makemeahanzi
j_shi 8y ago
https://www.skishore.me/inkstone/ https://www.skishore.me/inkstone/
redthrow 8y ago
>> Incredibly valuable tool for learning mandarin, I bet. If someone were actually trying to Mandadin, Prof Victor Mair at Penn tells people to mostly ignore the characters for the first few years. Victor Mair, at Penn, remarks (in an e-mail I quote with permission): “It’s a tragedy that so many young Americans spend years stuffing their heads with hundreds of Chinese characters, gaining no usable proficiency, and then forgetting them all by the time they’re 25.” Mair thinks that “if the Chinese would wake up and permit pinyin to function as part of a genuine digraphia, then I would say it might make sense for maybe 2 percent of the population to learn up to third-year level of Mandarin—strictly romanized, mind you. But there are exceedingly few teachers who are enlightened enough to teach it that way.” https://www.chronicle.com/blogs/linguafranca/2012/03/02/more-on-how-to-argue-for-foreign-language-instruction/ https://www.chronicle.com/blogs/linguafranca/2012/03/02/more...
- brownbat 8y ago
  With Chinese, I felt like sunk a lot of time into memorizing characters for the illusion of progress without actually learning how to engage with the language. On the other hand, with Korean, I spent some time up front learning to type, and that paid dividends as I was able to text with people and read maps before long. Maybe if I had learned characters in Chinese not with the goal of being a master calligrapher, but with the goal of communicating with other people using today's tools, they would have had similar benefits.
- yorwba 8y ago
  > It’s a tragedy that so many young Americans spend years stuffing their heads with hundreds of Chinese characters, gaining no usable proficiency, and then forgetting them all by the time they’re 25. There are similar complaints about all kinds of languages, even when they're written in Latin script. (The proverbial "high school French" comes to mind.) I think Mair is mistaken about the characters being the culprit. Most people taking a language class are simply not invested enough to actually practice, and then they forget everything they did learn once they stop using the language. While it's true that it would be unnecessary to learn the characters if Chinese were usually written in Pinyin, that's unfortunately not the case and so you'd better memorize them if you want to learn the language without remaining an analphabet. It's also not like you need to know all that many characters right off the bat. The most common 300 make up about 80% of every text; you can get to that level in a month if you learn 10 new characters per day. Most of the effort is in learning words formed by combining those characters, just like learning any other language.
  - redthrow 8y ago
    French isn't held back by its script, even though its script is far from great. Chinese and Japanese are definitely held back by their awful script + many people who confuse language with script.
    - glasslion 8y ago
      Sure, anything non Anglo-Saxon is awful
etskinner 8y ago
> Hanzi Writer uses character data from the Make Me a Hanzi project

est 8y ago

Fun fact about stroke orders, many people regard Chinese ideograph as some sort of bitmap, but if you watch calligraphy artists[1] you will discover they are not only some straight lines, but the the speed and acceleration also varies when drawing different part of the line. It's an important factor for distinguish writing styles. So far we have character as bitmaps, as vector graphics, and vector graphics with stroke order, but we've yet to see a db about the composition speed of the strokes. [1] https://youtu.be/8-99YB4iou0?t=45 https://youtu.be/8-99YB4iou0?t=45 as an example. You can find plenty.

randomcommentt 8y ago
I wonder if you can implement that in this demo by inferring the speed from the thickness of the stroke in the font. Making pixel area fill rate constant is probably another decent approximation.
mncharity 8y ago
> speed and acceleration also varies Also tilt and pressure. But I didn't notice rotation in the sections I skimmed. With XR coming to unshackle visual output from fixed flat small screens, the question arises: how might we unshackle input? Say one can type while holding a single chopstick. What might one do with 7DOF fingers and brush in 2D and 3D? If a laptop keyboard was also a touch surface, and the space above it were tracked? What does an IDE look like for typing and painting code, where the "paint" is alive? So I'm interested in stylus and brush movement vocabularies, and gesture recognition.

vortico 8y ago

Can this be considered to work with Japanese kanji?

CarVac 8y ago
Sometimes the stroke order differs even if the character is the same. Like 必.
gourlaysama 8y ago
There are differences between Chinese and Japanese stroke order. See the animCJK [0] project for support for Japanese kanji and kanas (demo: [1]). [0]: https://github.com/parsimonhi/animCJK https://github.com/parsimonhi/animCJK [1]: http://gooo.free.fr/animCJK/official/ http://gooo.free.fr/animCJK/official/
- yorwba 8y ago
  animCJK is great, but it only covers the most commonly used Kanji and Hanzi. For example, it doesn't have 鱚. If you need a database that also has hyōgai kanji, KanjiVG [1] is a better choice. (鱚 can be seen here [2]). There's also the Kanimaji project [3] to animate files in the KanjiVG format, which could be used to get results similar to the Hanzi Writer project. If you use it to produce GIFs rather than animated SVGs, the resulting files are somewhat large though, so I wrote my own (ugly) renderer [4] to get better compression. [1] https://github.com/KanjiVG/kanjivg https://github.com/KanjiVG/kanjivg [2] https://kanjivg.tagaini.net/viewer.html?kanji=%E9%B1%9A https://kanjivg.tagaini.net/viewer.html?kanji=%E9%B1%9A [3] https://github.com/aehlke/kanimaji https://github.com/aehlke/kanimaji [4] https://github.com/Yorwba/kanjivg-gif https://github.com/Yorwba/kanjivg-gif
- ElBarto 8y ago
  Even in Chinese the order may change depending on style or when writing quickly in cursive. So I think this tool is useful for both.

titanix2 8y ago

Awesome. Really well made and open-source, I’ll probably use it in the future.

salzig 8y ago

Is there any such thing for European calligraphy?

anonytrary 8y ago

This could probably be implemented with an animated flood-fill algorithms.