animated Gif question

[weirdrubikscube]

hello,

is it possible to generate the GIFs in another color (red shades) and with the strokes movement (just like in the SVG animations)?

super boulot! :)

[parsimonhi]

Thanks for the "super boulot". :-)

All is possible, but can be more or less complicated.

First take a look to the sample called "animatedGIF.html".

1) Using another color when generating animated GIF is not very complicated : just modify generateAnimatedGifFromSvg() function in samples/_js/magicAcjk.js script. The line to modify is: else paths[k2].fill="#000"; Replace #000 by any other color according to k2 value. For instance: else { var redColor; if (km>1) redColor=255*(1-k2/(km-1)); else redColor=255; paths[k2].fill="rgb("+parseInt(redColor)+",0,0)"; } Then run the "animatedGIF.html" sample.

2) Making strokes movement as SVG animations is more complicated. One has to generate many intermediate shapes. I didn't do it at the moment, but i think that it can work. The function to modify is again generateAnimatedGifFromSvg().

[weirdrubikscube]

merci!

my php is quite rusted, I'll try to tinker with your files :)

right now I use your demo site to make GIFs for my Anki cards (finally getting serious about learning Kanji after living in Japan for 2 years! ;)

[parsimonhi]

Ho! You can insert svg inside a anki card directly, because svg is a html tag.

To insert a svg coming from animCJK in a card: 1) add a card 2) click on the hamburger menu (icon with 3 horizontal lines) 3) select "modify the HTML" 4) open any svg files from animCJK in a text editor 5) copy the code of the svg and paste it in the anki card as is 6) tell me if you get what you need :-)

[parsimonhi]

You can also add a svg as a source file of a img tag.

When editing a card, just select the same icon as for an image, and add the convenient svg file from animCJK (the svg file will be added by anki to the src attribute of a img tag automatically).

Note: you can modify the css of a svg file as for any html tag.

[weirdrubikscube]

ho that's great!

yeah dropping the SVG worked better and faster than copying the code and pasting in HTML. also doing that will not display if I use {{#strokes}} {{strokes}} {{/strokes}} {{^strokes}}

but how can I easily find which SVG correspond the kanji I want (I'm building my deck from scratch)?

do you have a sample page that returns the name file perhaps?

[weirdrubikscube]

I see some php do return the ID number. ok so now I need to find a free php site to host your files so I can enter a kanji in a page and it returns that info

[parsimonhi]

You can use http://gooo.free.fr/animCJK/official/ : you enter a character (or chose a character in the bottom lists), then click on animate. The decimal unicode is displayed under the image. For instance, for "三", the line under the image is 三 U+04e09 三. The corresponding svg is the last number of this line plus the svg extension. That is 19977.svg.

[weirdrubikscube]

super!

thank you so much for all your help and wonderful work. :)

tu vis en France, n'est-ce pas? si jamais tu viens au Japon, dis-moi!

[parsimonhi]

tu vis en France, n'est-ce pas? si jamais tu viens au Japon, dis-moi!

Actuellement en France. Mais je suis souvent au Japon ou en Chine. Je ferai signe la prochaine fois (mais ce n'est pas prévu dans un futur proche).

[weirdrubikscube]

mon pere avait fonde le club du Go du havre il y a lurette. et avait aussi faire des kits a acheter (je me souviens avoir passe bien des heures a assembles ces kits ;)

je lui ai faire part de votre programme de Go du coup

[parsimonhi]

Je vois de qui il s'agit ! :-)

[weirdrubikscube]

vraiment? vous le connaissez?

[parsimonhi]

Un peu ! Le monde du go est petit ! (je vous ai envoyé une demande d'ami sur facebook, ce sera plus pratique qu'ici)