• autokana – jQuery plugin

    autokana – jQuery plugin

    Autokana is a jQuery plugin that automatically converts latin (roumaji) to kana (hiragana / katakana) using the auto-correct principle (keep in mind that it’s not suitable for converting copy/pasted but only typed-in text). You can check out how it works at autokana example page.

    You can also download the plugin (including a simple usage example) from github and use it for free.

    To use it, you will have to add the following somewhere at the beginning of your body tag:

    <script type="text/javascript">
       // bind events when document is ready
       $(document).ready(function() {
          // attach auto-kana plugin with default options

    After that add the input box itself wherever you need it (make sure to use the same ID in the above part and in the input field itself):

    <input id="kana_text_box" type="text" />
    <script type="text/javascript">
       // this part will clear and set focus on the input field on refresh
       // feel free to remove that part if you don't need it

    If you have any suggestions or bug reports, feel free to leave a comment.

  • Mapping Japanese kana characters (hiragana/katakana) for use in programming

    Mapping Japanese kana characters (hiragana/katakana) for use in programming

    When I started working on Zanzou, I had to find a way to somehow map the whole kana so I could later use it in my webapp. I simply used 2D array to accomplish this. It’s no nuclear science but to save you the trouble of copying and pasting all the symbols into a single file yourself (I think it actually took me around an hour to do it :D), here is my kana.js file (note that if if you open the file itself in the browser, it will most probably display some strange characters instead of proper UTF-8 encoded kana symbols but when you open the file in your text editor, it should be usable and displayed just fine).

    I divided it into 4 major groups (arrays): monographs, digraphs, monographs with diacritics and digraphs with diacritics. Each array element (representing sound) consists of 3 subelements (roumaji record, and hiragana and katakana symbols).

    With some minor modifications, this could easily be used in any other programming language. Just make sure if you edit the file to save it in UTF-8.

    Hope it helps, がんばって!

  • 残像 – Zanzou

    残像 – Zanzou

    Zanzou is alive. =)

    Zanzou an e-learning tool I made as my computer science master’s degree thesis project at the Faculty of electrical engineering, Osijek, Croatia. Its goal is to help people memorize kana using flashcards. Based on unsuccessful answering, Zanzou will repeat certain symbols more frequently and (depending on the chosen difficulty level) it will group and present some of the similar symbols together to make it harder to “guess the answer”. Global user success statistics are also available.


    • memorize hiragana and katakana using flashcards
    • three difficulty levels
    • three types of exercises
      • kana to roumaji
      • roumaji to kana
      • voice to kana
    • customize your kana practice set
    • flashcard frequency based on correct answers
    • free

    Thanks to

    For any feedback or bug reports, feel free to contact me through email or just drop a comment bellow. =)

  • cmik.fm


    Some time ago I noticed I often fall into the habit of repeating a single song over and over – until I can’t listen to it any more that is. I have also often been wondering how much more or less do I do it compared to my friends. Curious enough to want to find out, having a few years old last.fm account, and (so it happens) being on a side-quest for finding myself a small web project to work on in my free time and learn something new, I started working on cmik.fm. Finally it’s done, I learned quite a lot in the process and it was quite a joyful experience coding it.

    So, if you ever wanted to know this useless piece of information about your life (like I did :D), you could give cmik.fm a try. If you like it, perhaps show it to your friends who use last.fm.

    Special thanks to:

    Feel free to leave a comment with your feedback, any suggestions you might have, a bug you noticed or whatever! =)

    Read more:
    cmik.fm at build.last.fm + source at github

  • Swarm Intelligence in HTML5 Canvas

    Swarm Intelligence in HTML5 Canvas

    Swarm Intelligence – I wanted to visualize different ways of particles following each other for some time now but have never really gotten to the point of doing it until one day, I was browsing through lots of amazing things people have made using HTML5 Canvas. One of these things was Daniel Puhes Liquid Particles canvas thingy which immediately reminded me of my idea and I thought – why not try and do it using HTML5 canvas? I wanted to try canvas out a little bit anyway. So, I asked Daniel for permission to use his code as an “engine” for my idea and he was ok with that. Thanks Daniel! He also made some more pretty cool stuff so go and check that out if you want.

    So I took his code, refactored it a fair bit, made it so that particles follow each other instead of following the mouse and that’s how Swarm Intelligence was born. I do know that this is not real AI but I don’t care, I just like to call it that way anyways. :)

    At the moment there are three different algorithms that make particles follow each other:

    • swarm – each particle targets a random particle from the swarm and follows it for next 5000-10000 canvas refresh cycles. after that, it randomly finds a new one and follows it for next 5000-10000 refresh cycles and so on
    • tail – each particle targets a different random particle on each canvas refresh cycle and follows it for a single refresh cycle after which it targets a new random particle and then follows than one for a single refresh cycle and so on
    • lead – all particles follow the same (single) particle which moves randomly inside the canvas a bit faster than all the other particles

    Algorithms change randomly over time but can also be changed manually by clicking  the left mouse button somewhere inside the canvas. I also introduced some chaos into the system so it wouldn’t stabilize itself over time. For example, every now and then some particles get randomly blown away from the swarm a little bit. Also, after some time all the particles will get blown away at the same time. I plan to add two or three more following algorithms when I get the time. One of them will be following the nearest particle but I will have to come up with one bad-ass algorithm to not kill the performance. Soon I guess. Or not. :D

    Algorithm indicator in the top left corner of the canvas introduced some performance problems. Apparently, drawing text inside canvas is very, very poorly implemented in all browsers except Chromium. The problem I had was that I would redraw a line of text inside canvas on each refresh cycle (every 70ms) which slowed it down a fair bit if you tried to run it in anything else except Chromium. Redrawing the text on each cycle wasn’t really necessary since the text stays the same most of the time so what I did was – on top of the old canvas frame I added a new one which redraws text only when the following algorithm gets changed. That turned out to be a pretty good solution.

    Nothing more to say about this small experiment I guess.. except – enjoy it! :)

Back to top