SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
Raphael.jsを使って
SVGをモーフィングさせてみた
       失敗の記録
          2012/11/03
   #daiNagoyaJS @girigiribauer
SVGのグラフィックライブラリを
   使ってみたかった
SVGのグラフィックライブラリを
     使ってみたかった

• SVGでモーフィングさせるの
 どんな感じか試してみたい

• SVGは結局XML形式なので、
 ライブラリ使わなくても問題ないはず

• SVGに慣れてないので
 とりあえず導入として使ってみる
ちょうどよさげなコンテストが
     やってた


• HTML5実技コンテストってのが
 あるらしい

• iPad miniとか買いたくないので欲しい
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
なので、作ってみた


• SVGのグラフィックライブラリを
 使いつつ、なんか面白いコンテンツ

• bonsaiJSってのがあるらしい
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
最初にbonsaiJSを使ってみた


•   bonsaiJS
    http://bonsaijs.org/

•   documentにもmorphToとかあったので...
    http://docs.bonsaijs.org/module-path.Path.html#morphTo

•   (結論からいうとRaphael.jsに切り替えた)
作り方

• 1. 公開されてたpngファイルを
 SVGファイルに変換

• 2. SVGファイルのpathタグのd属性
 (パスデータ)を拾ってくる

• 3. bonsaiJSで動かしてみる
1.pngファイルを
  SVGファイルに変換


• Illustratorは偉大
• ライブトレースという機能がある
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
2.パスデータ拾ってくる


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


• d属性はmoveTo, lineTo, curveToなどを
 省略記法で書ける

• ここ見るとよくわかる
 http://www.w3.org/TR/SVG/paths.html#PathElement
順調だー
3.bonsaiJSで動かしてみる



• 動かしてみた
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
これはひどい
なにがダメだったのか

• 単に中間を生成するだけなら簡単
• そもそもモーフィングに向いているコン
 テンツなのか?

• どのパーツがどこに対応しているのか
 が複雑すぎる
前振りまとめ

• 単にモーフィングさせるだけなら簡単
• 意図したモーフィングは意外と難しい
• ライブラリ使ったからといって、
 勝手に空気読んで
 やってくれるわけじゃない
ここから実践編
意図したものを作る
    大まかな手順

• 1. モーフィングさせるのに適切なコンテ
 ンツかどうか判断

• 2. パーツ単位での対応付けを検討
• 3. 点同士の対応付けを検討
1. モーフィングさせるのに適切な
    コンテンツかどうか判断


• 今回は変化前後とも手になるので、
 たぶん適切

• 勝手に6本指になったり耳が生えたりは
 しない
2.パーツ単位での対応付けを検討



• 握りこぶしと指とを分ける
• 親指、人差し指、中指、薬指、小指
 それぞれ分ける

• 計6つのパーツで構成されているはず
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
3. 点同士の対応付けを検討



• パスの形状を全部合わせた方が良い
 →結局Illustrator上で変化させて作る

• 影で隠れるところも含めて考える
 →指の付け根はオープンパス
唐突にRaphael.js
•   きちんと設計していれば、
    逆にライブラリは何でもいい

•   BonsaiJSはWebWorkersをサポートしていて、別
    プロセス(スレッド?)でSVGをレンダリング
    しつつ、sendMessageなどを使って通信する仕組
    みが備わってる

•   今回はそこまでがっつりやらないので、このタ
    イミングでRaphael.jsに切り替えた(妥協)
Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録
(SVGや)Illustratorとの格闘の日々




•   無駄にIllustratorが使えるようになった
実際出来たもの
• http://jsdo.it/pypupypa/slowMotionJanken
まとめ
• ライブラリをポンと入れたら何でも解
 決するわけじゃない

• 当たり前だけど設計大事、
 意図したモーフィングは難しい

• “間”の表現は面白いよ

Weitere ähnliche Inhalte

Was ist angesagt?

2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rbUeki Kouji
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScripthideaki honda
 
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話Yuki Kuramochi
 
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのことKasumi Morita
 
20160727 jaws ug-kobe_short_speak_alexa
20160727 jaws ug-kobe_short_speak_alexa20160727 jaws ug-kobe_short_speak_alexa
20160727 jaws ug-kobe_short_speak_alexaDaiki Mori
 
JavascriptでRubyの作り方
JavascriptでRubyの作り方JavascriptでRubyの作り方
JavascriptでRubyの作り方Shuyo Nakatani
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話Yuki Ishikawa
 
Juzu Frameworkを使ってみた @第四回 渋谷java
Juzu Frameworkを使ってみた @第四回 渋谷javaJuzu Frameworkを使ってみた @第四回 渋谷java
Juzu Frameworkを使ってみた @第四回 渋谷javaKazuhiro Serizawa
 
Ember コミュニティとわたし
Ember コミュニティとわたしEmber コミュニティとわたし
Ember コミュニティとわたしRyunosuke SATO
 
NGK2014 ヤマオススメ
NGK2014 ヤマオススメNGK2014 ヤマオススメ
NGK2014 ヤマオススメRyo RKTM
 
ヤマオススメ@NGK2014
ヤマオススメ@NGK2014ヤマオススメ@NGK2014
ヤマオススメ@NGK2014Ryo RKTM
 
THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)KatsuyaENDOH
 
JRubyで作るapiサーバー
JRubyで作るapiサーバーJRubyで作るapiサーバー
JRubyで作るapiサーバーYamamoto Kazuhisa
 
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!Kazuya Hiruma
 
AWSが誰でも使える理由
AWSが誰でも使える理由AWSが誰でも使える理由
AWSが誰でも使える理由Nobuhiko Futagami
 

Was ist angesagt? (19)

gulp芸
gulp芸gulp芸
gulp芸
 
2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
 
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
 
20160727 jaws ug-kobe_short_speak_alexa
20160727 jaws ug-kobe_short_speak_alexa20160727 jaws ug-kobe_short_speak_alexa
20160727 jaws ug-kobe_short_speak_alexa
 
JavascriptでRubyの作り方
JavascriptでRubyの作り方JavascriptでRubyの作り方
JavascriptでRubyの作り方
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
 
Juzu Frameworkを使ってみた @第四回 渋谷java
Juzu Frameworkを使ってみた @第四回 渋谷javaJuzu Frameworkを使ってみた @第四回 渋谷java
Juzu Frameworkを使ってみた @第四回 渋谷java
 
Ember コミュニティとわたし
Ember コミュニティとわたしEmber コミュニティとわたし
Ember コミュニティとわたし
 
NGK2014 ヤマオススメ
NGK2014 ヤマオススメNGK2014 ヤマオススメ
NGK2014 ヤマオススメ
 
ヤマオススメ@NGK2014
ヤマオススメ@NGK2014ヤマオススメ@NGK2014
ヤマオススメ@NGK2014
 
Raytracing4
Raytracing4 Raytracing4
Raytracing4
 
THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)
 
Kyakusaki.rb
Kyakusaki.rbKyakusaki.rb
Kyakusaki.rb
 
JRubyで作るapiサーバー
JRubyで作るapiサーバーJRubyで作るapiサーバー
JRubyで作るapiサーバー
 
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
 
AWSが誰でも使える理由
AWSが誰でも使える理由AWSが誰でも使える理由
AWSが誰でも使える理由
 
JQuery入門
JQuery入門JQuery入門
JQuery入門
 

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

Three.js使ってみた
Three.js使ってみたThree.js使ってみた
Three.js使ってみた晴哉 谷口
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションKohei Kadowaki
 
20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのかKatsunori Kanda
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたKohei Kadowaki
 
WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいWebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいHiroyuki Anai
 
はじめてのWallaby.js
はじめてのWallaby.jsはじめてのWallaby.js
はじめてのWallaby.jsShunta Saito
 
JavaScriptで味わう! 関数型プログラミングのメリット!!
JavaScriptで味わう! 関数型プログラミングのメリット!!JavaScriptで味わう! 関数型プログラミングのメリット!!
JavaScriptで味わう! 関数型プログラミングのメリット!!Keigo Magami
 
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングRubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングTakuro Sasaki
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみKohei Kadowaki
 
libpgenでパケット操作
libpgenでパケット操作libpgenでパケット操作
libpgenでパケット操作slankdev
 
A look back on my Rails porftolio
A look back on my Rails porftolioA look back on my Rails porftolio
A look back on my Rails porftoliossuser9a4523
 

Ähnlich wie Raphael.jsを使ってSVGをモーフィングさせてみた失敗の記録 (12)

Three.js使ってみた
Three.js使ってみたThree.js使ってみた
Three.js使ってみた
 
I want Make full svg website
I want Make full svg websiteI want Make full svg website
I want Make full svg website
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
 
20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
 
WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいWebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろい
 
はじめてのWallaby.js
はじめてのWallaby.jsはじめてのWallaby.js
はじめてのWallaby.js
 
JavaScriptで味わう! 関数型プログラミングのメリット!!
JavaScriptで味わう! 関数型プログラミングのメリット!!JavaScriptで味わう! 関数型プログラミングのメリット!!
JavaScriptで味わう! 関数型プログラミングのメリット!!
 
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングRubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピング
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
libpgenでパケット操作
libpgenでパケット操作libpgenでパケット操作
libpgenでパケット操作
 
A look back on my Rails porftolio
A look back on my Rails porftolioA look back on my Rails porftolio
A look back on my Rails porftolio
 

Mehr von girigiribauer

黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみようgirigiribauer
 
JSHint を自分好みにする話
JSHint を自分好みにする話JSHint を自分好みにする話
JSHint を自分好みにする話girigiribauer
 
CSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバいCSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバいgirigiribauer
 
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたフロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたgirigiribauer
 
Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?girigiribauer
 
WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人girigiribauer
 
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこWebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこgirigiribauer
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方girigiribauer
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでgirigiribauer
 

Mehr von girigiribauer (9)

黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう黒い画面超入門 - tmux を使ってみよう
黒い画面超入門 - tmux を使ってみよう
 
JSHint を自分好みにする話
JSHint を自分好みにする話JSHint を自分好みにする話
JSHint を自分好みにする話
 
CSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバいCSS の Flexible Box Layout がヤバい
CSS の Flexible Box Layout がヤバい
 
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたフロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
 
Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?Webアプリのマークアップ、どうすればいいの?
Webアプリのマークアップ、どうすればいいの?
 
WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人WebRTC + Web Audio API = スーパーサイヤ人
WebRTC + Web Audio API = スーパーサイヤ人
 
WebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこWebRTCでドラゴンボールごっこ
WebRTCでドラゴンボールごっこ
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
 

Kürzlich hochgeladen

2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 

Kürzlich hochgeladen (12)

2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 

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

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n