Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録

5,527 views

Published on

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

Published in: Technology
  • Be the first to comment

Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録

  1. 1. Raphael.jsを使ってSVGをモーフィングさせてみた 失敗の記録 2012/11/03 #daiNagoyaJS @girigiribauer
  2. 2. SVGのグラフィックライブラリを 使ってみたかった
  3. 3. SVGのグラフィックライブラリを 使ってみたかった• SVGでモーフィングさせるの どんな感じか試してみたい• SVGは結局XML形式なので、 ライブラリ使わなくても問題ないはず• SVGに慣れてないので とりあえず導入として使ってみる
  4. 4. ちょうどよさげなコンテストが やってた• HTML5実技コンテストってのが あるらしい• iPad miniとか買いたくないので欲しい
  5. 5. なので、作ってみた• SVGのグラフィックライブラリを 使いつつ、なんか面白いコンテンツ• bonsaiJSってのがあるらしい
  6. 6. 最初にbonsaiJSを使ってみた• bonsaiJS http://bonsaijs.org/• documentにもmorphToとかあったので... http://docs.bonsaijs.org/module-path.Path.html#morphTo• (結論からいうとRaphael.jsに切り替えた)
  7. 7. 作り方• 1. 公開されてたpngファイルを SVGファイルに変換• 2. SVGファイルのpathタグのd属性 (パスデータ)を拾ってくる• 3. bonsaiJSで動かしてみる
  8. 8. 1.pngファイルを SVGファイルに変換• Illustratorは偉大• ライブトレースという機能がある
  9. 9. 2.パスデータ拾ってくる• SVGで実用的に使うのはpathタグ• pathタグだけ知ってればいいのかも• 入門記事によくcircleタグとかrectタグ とかあるけど、実際どこで使うのか
  10. 10. 2.パスデータ拾ってくる• d属性はmoveTo, lineTo, curveToなどを 省略記法で書ける• ここ見るとよくわかる http://www.w3.org/TR/SVG/paths.html#PathElement
  11. 11. 順調だー
  12. 12. 3.bonsaiJSで動かしてみる• 動かしてみた
  13. 13. これはひどい
  14. 14. なにがダメだったのか• 単に中間を生成するだけなら簡単• そもそもモーフィングに向いているコン テンツなのか?• どのパーツがどこに対応しているのか が複雑すぎる
  15. 15. 前振りまとめ• 単にモーフィングさせるだけなら簡単• 意図したモーフィングは意外と難しい• ライブラリ使ったからといって、 勝手に空気読んで やってくれるわけじゃない
  16. 16. ここから実践編
  17. 17. 意図したものを作る 大まかな手順• 1. モーフィングさせるのに適切なコンテ ンツかどうか判断• 2. パーツ単位での対応付けを検討• 3. 点同士の対応付けを検討
  18. 18. 1. モーフィングさせるのに適切な コンテンツかどうか判断• 今回は変化前後とも手になるので、 たぶん適切• 勝手に6本指になったり耳が生えたりは しない
  19. 19. 2.パーツ単位での対応付けを検討• 握りこぶしと指とを分ける• 親指、人差し指、中指、薬指、小指 それぞれ分ける• 計6つのパーツで構成されているはず
  20. 20. 3. 点同士の対応付けを検討• パスの形状を全部合わせた方が良い →結局Illustrator上で変化させて作る• 影で隠れるところも含めて考える →指の付け根はオープンパス
  21. 21. 唐突にRaphael.js• きちんと設計していれば、 逆にライブラリは何でもいい• BonsaiJSはWebWorkersをサポートしていて、別 プロセス(スレッド?)でSVGをレンダリング しつつ、sendMessageなどを使って通信する仕組 みが備わってる• 今回はそこまでがっつりやらないので、このタ イミングでRaphael.jsに切り替えた(妥協)
  22. 22. (SVGや)Illustratorとの格闘の日々• 無駄にIllustratorが使えるようになった
  23. 23. 実際出来たもの• http://jsdo.it/pypupypa/slowMotionJanken
  24. 24. まとめ• ライブラリをポンと入れたら何でも解 決するわけじゃない• 当たり前だけど設計大事、 意図したモーフィングは難しい• “間”の表現は面白いよ

×