大なごやJS vol.4 (#daiNagoyaJS) で発表した内容です。 iPad miniほしいです。

1. Raphael.jsを使って
SVGをモーフィングさせてみた
失敗の記録
2012/11/03
#daiNagoyaJS @girigiribauer

2. SVGのグラフィックライブラリを
使ってみたかった

3. SVGのグラフィックライブラリを
使ってみたかった
• SVGでモーフィングさせるの
どんな感じか試してみたい
• SVGは結局XML形式なので、
ライブラリ使わなくても問題ないはず
• SVGに慣れてないので
とりあえず導入として使ってみる

4. ちょうどよさげなコンテストが
やってた
• HTML5実技コンテストってのが
あるらしい
• iPad miniとか買いたくないので欲しい

6. なので、作ってみた
• SVGのグラフィックライブラリを
使いつつ、なんか面白いコンテンツ
• bonsaiJSってのがあるらしい

8. 最初にbonsaiJSを使ってみた
• bonsaiJS
http://bonsaijs.org/
• documentにもmorphToとかあったので...
http://docs.bonsaijs.org/module-path.Path.html#morphTo
• （結論からいうとRaphael.jsに切り替えた）

9. 作り方
• 1. 公開されてたpngファイルを
SVGファイルに変換
• 2. SVGファイルのpathタグのd属性
（パスデータ）を拾ってくる
• 3. bonsaiJSで動かしてみる

10. 1.pngファイルを
SVGファイルに変換
• Illustratorは偉大
• ライブトレースという機能がある

14. 2.パスデータ拾ってくる
• SVGで実用的に使うのはpathタグ
• pathタグだけ知ってればいいのかも
• 入門記事によくcircleタグとかrectタグ
とかあるけど、実際どこで使うのか

15. 2.パスデータ拾ってくる
• d属性はmoveTo, lineTo, curveToなどを
省略記法で書ける
• ここ見るとよくわかる
http://www.w3.org/TR/SVG/paths.html#PathElement

16. 順調だー

17. 3.bonsaiJSで動かしてみる
• 動かしてみた

23. これはひどい

24. なにがダメだったのか
• 単に中間を生成するだけなら簡単
• そもそもモーフィングに向いているコン
テンツなのか？
• どのパーツがどこに対応しているのか
が複雑すぎる

25. 前振りまとめ
• 単にモーフィングさせるだけなら簡単
• 意図したモーフィングは意外と難しい
• ライブラリ使ったからといって、
勝手に空気読んで
やってくれるわけじゃない

26. ここから実践編

27. 意図したものを作る
大まかな手順
• 1. モーフィングさせるのに適切なコンテ
ンツかどうか判断
• 2. パーツ単位での対応付けを検討
• 3. 点同士の対応付けを検討

28. 1. モーフィングさせるのに適切な
コンテンツかどうか判断
• 今回は変化前後とも手になるので、
たぶん適切
• 勝手に6本指になったり耳が生えたりは
しない

29. 2.パーツ単位での対応付けを検討
• 握りこぶしと指とを分ける
• 親指、人差し指、中指、薬指、小指
それぞれ分ける
• 計6つのパーツで構成されているはず

31. 3. 点同士の対応付けを検討
• パスの形状を全部合わせた方が良い
→結局Illustrator上で変化させて作る
• 影で隠れるところも含めて考える
→指の付け根はオープンパス

32. 唐突にRaphael.js
• きちんと設計していれば、
逆にライブラリは何でもいい
• BonsaiJSはWebWorkersをサポートしていて、別
プロセス（スレッド？）でSVGをレンダリング
しつつ、sendMessageなどを使って通信する仕組
みが備わってる
• 今回はそこまでがっつりやらないので、このタ
イミングでRaphael.jsに切り替えた（妥協）

34. （SVGや）Illustratorとの格闘の日々
• 無駄にIllustratorが使えるようになった

35. 実際出来たもの
• http://jsdo.it/pypupypa/slowMotionJanken

36. まとめ
• ライブラリをポンと入れたら何でも解
決するわけじゃない
• 当たり前だけど設計大事、
意図したモーフィングは難しい
• “間”の表現は面白いよ