Sunday 27 June 2010

KanjiVG + HTML5 Canvas = Free stroke animations for all!

I spent half the day yesterday at 梅.py (a python "hack-a-thon" event in Osaka hosted by Accense) writing a 100% HTML5 Kanji stroke renderer that makes use of the excellent open-source KanjiVG dataset. The result is not what I'd call production ready but it still works quite well:

http://nippongrammar.appspot.com/

The KanjiVG XML data is parsed and thrown into a Google appengine data source and a JSON interface is provided to query individual kanji. The queried kanji's stroke data is retuned along with a group of up to 63 other kanji to save on server round-trips (the grouping is static).

My next step is to move the data to static JSON files that can be hosted anywhere and write client-side code to download the appropriate kanji data files directly.

3 comments:

  1. Hey there. I just came across this tool and I found it extremely awesome. I am also looking at the KanjiVG database and looking to write some online tools. Wanted to talk to you and see if I can use your JS library you use to render the various kanji strokes with animation. I'd rather get your permission than copy. Send me an email, very interested.

    ReplyDelete
  2. Might help, taylor@dondich.com

    ReplyDelete
  3. Glad you like it. Feel free to use it in your own projects but I'd love you to come back and drop the URL here (or to me directly) so I can check them out too. :)

    ReplyDelete