[UserScript] Stroke animation for reviews and lessons

Ethan · August 28, 2015, 6:02am

I saw this website: http://nippongrammar.appspot.com/
I saw that its Github project was released on an MIT license.
I adapted it into a userscript for Wanikani: https://greasyfork.org/en/scripts/12034-wanikani-nippongrammar-extension

Now with hotkeys:

Shift + left/right to switch between original and strokes.
Click on the strokes to make it play again.

Pictures of it in action:

Note: Depending on your internet connection, it might take a while to load, and there is currently no indication whether it is loading at all.
I will look into it for the next update, but I don’t know when that will be.

Ethan · August 28, 2015, 6:08am

It’s a lot slower in Firefox. Change ‘30’ to something lower if it’s unbearable, I’ll make it automatic in the future, and add options for colour and stroke width.

Also I’ll include the radical images in future (when I have time to mess around with it), but for now they just display as normal.
I’ll put a switch in there too for when you want to do your reviews at a decent pace (It will obviously slow down your reviews if you have to wait for every word to animate).

Note: If some of the libraries haven’t loaded, it just won’t draw the kanji, which I will also need to put a check for in the future. (you might get gaps in the words, or they just won’t show up)

jneapan · August 28, 2015, 7:02am

Wow, this looks awesome. Does it also have a “replay” button to trigger the animation again once it’s over?

Rouz275 · August 28, 2015, 7:19am

This is honestly really cool and a great way to learn stroke order if you also want to learn to write, like me. Honestly though, I just tried it for a couple reviews and a replay function would be such a huge help. Especially if you’re seeing some kanji stroke orders for the first time. I’m not sure how plausible it is, but it would really be a great and needed addition.

Ethan · August 28, 2015, 8:01am

Rouz275 said... This is honestly really cool and a great way to learn stroke order if you also want to learn to write, like me. Honestly though, I just tried it for a couple reviews and a replay function would be such a huge help. Especially if you're seeing some kanji stroke orders for the first time. I'm not sure how plausible it is, but it would really be a great and needed addition.

Updated. Now clicking on the word will replay the animation.

Rouz275 · August 28, 2015, 9:33am

Nice job! This will be a great help, especially when learning new kanji in lessons. Thanks so much!

hoovard · August 28, 2015, 9:39am

Ooh, this is great. Nice work.

Thanks for sharing it.

janeness · August 28, 2015, 3:23pm

Awesome! Thanks so much!

henrikp · August 31, 2015, 12:36pm

I’m bit lazy right now but how is the stroke show speed controlled, via animateWriting? Bit fast for me in current Chrome.

Ethan · August 31, 2015, 10:41pm

henrikp said... I'm bit lazy right now but how is the stroke show speed controlled, via animateWriting? Bit fast for me in current Chrome.

I'm going to add an option in the future but for now you'd have to change it in the code.
Where it says:

        animateWriting(text,'strokeChar',15),

The number controls the speed. The higher the number, the slower the stroke.

Increase the number to make it draw slower.

JacobW · September 1, 2015, 4:50pm

Edit: I truly am stupid, I got tampermonkey and installed the scripts. Ignore my post below, unless you want a good laugh, in which case, go crazy.

I am sorry, but I am completely ignorant of how this kind of thing works… How would I activate this?
I tried opening it but got this:

Line: 15
Char: 1
Error: Object expected
Code: 800A138F
Source: Microsoft Jscript runtime error.

Do I have to activate the script whilst in a lesson? Or how does it work. So sorry for my newbness. I am level 1, and everything is incredibly easy, so I am in no rush to get this running, but if someone can shoot me a way to fix my stupidity, that would be appreciated.

acetylide · September 1, 2015, 6:25pm

This is beautiful. Thank you for your work.

lacinoire · September 1, 2015, 6:32pm

This looks soooo beautiful - -
Thank you for creating it! :3

Yabba · September 1, 2015, 7:09pm

Looks amazing!
One thing I have to now consider… I can no longer quickly rikaichan things I get wrong, I must click the lower WK taskbar… I guess I’ll have to get used to that.

edit: I’m a pro at not reading everything
> Shift + left/right to switch between original and strokes.
A little finicky, but it kinda works.

Nanati · September 1, 2015, 9:53pm

I installed the script and the animated words are really small on my screen, smaller than the translation below. Is there any way I can change the size value or anything? I’m not a programmer or anything myself so if there’s a simple way to change it, please tell me. I know I can use ctrl + mouse wheel to change the overall size of text but I would like to apply it only on the animated stroke order words.
I noticed shift + left/right doesn’t work for me either. Not sure why.

By the way, thank you very much for the script!

Ethan · September 1, 2015, 10:58pm

Nanati said... I installed the script and the animated words are really small on my screen, smaller than the translation below. Is there any way I can change the size value or anything? I'm not a programmer or anything myself so if there's a simple way to change it, please tell me. I know I can use ctrl + mouse wheel to change the overall size of text but I would like to apply it only on the animated stroke order words.
I noticed shift + left/right doesn't work for me either. Not sure why.

By the way, thank you very much for the script!

Which browser are you using?
Can you open the console and see if any errors come up?

Ethan · September 2, 2015, 8:49am

Yabba said...> Shift + left/right to switch between original and strokes.
A little finicky, but it kinda works.

Happy to take suggestions. :-)

Nanati · September 2, 2015, 9:23am

I’m using Chrome. No errors came up if I looked it up correctly. The size on the reviews is fine but way too small on the lessons.
No error on lessons but if I do the reviews, the console says: Uncaught ReferenceError: animateWriting is not defined session:46

optosi · September 2, 2015, 10:06am

A somewhat serious error I’ve encountered: with vocab with ~ before it (~台, etc.), it completely screws up and displays the wrong (previous?) item in the normal font once that answer’s been inputted (for every single subsequent item until you refresh). Switching with shift-right doesn’t fix it.

Also, sometimes, the answer box shakes as if a wrong answer’s been inputted, and it only loads the default font. This gets fixed by refreshing and doesn’t actually get in the way of anything, but it’s still a thing you might wanna know.

Oh yeah, and the first item is always in the default font, but that’s not really an issue.

Ethan · September 2, 2015, 10:31am

optosi said... A somewhat serious error I've encountered: with vocab with ~ before it (~台, etc.), it completely screws up and displays the wrong (previous?) item in the normal font once that answer's been inputted (for every single subsequent item until you refresh). Switching with shift-right doesn't fix it.

Also, sometimes, the answer box shakes as if a wrong answer's been inputted, and it only loads the default font. This gets fixed by refreshing and doesn't actually get in the way of anything, but it's still a thing you might wanna know.

Oh yeah, and the first item is always in the default font, but that's not really an issue.

by "the first item" you mean the ~ right? I think that is because there isn't stroke information for it.
I noticed that the one time I remember getting a ~ word, the original didn't show up at all when trying to switch back so I'll have to replicate it in my browser and sort it out.