Submit Search
Upload
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
•
15 likes
•
19,537 views
minoru nakanou
Follow
HTML5飯 http://atnd.org/events/52477 発表資料 ぱんちら.js -JavaScriptでテクスチャマッピング-
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
minoru nakanou
Bootstrap
Bootstrap
Masaki Kusuhata
最近知ったBootstrapの注意点
最近知ったBootstrapの注意点
Kawaji Masaki
120225 bootstrap
120225 bootstrap
TechGardenSchool
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Make TypingGame in JavaScript
Make TypingGame in JavaScript
undertale1
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Kawaji Masaki
Recommended
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
minoru nakanou
Bootstrap
Bootstrap
Masaki Kusuhata
最近知ったBootstrapの注意点
最近知ったBootstrapの注意点
Kawaji Masaki
120225 bootstrap
120225 bootstrap
TechGardenSchool
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Make TypingGame in JavaScript
Make TypingGame in JavaScript
undertale1
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Kawaji Masaki
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
matsuohideaki
Bootstrap
Bootstrap
kenji goto
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
schoowebcampus
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
高速化はじめの一歩
高速化はじめの一歩
Yuki Nakane
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
Laravel vue-project-upload
Laravel vue-project-upload
小川 昌吾
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
Hidetaka Okamoto
140119 hackathon
140119 hackathon
Marie Suenaga
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Androiderとi os屋さんがfirefoxosアプリを作ったら
Androiderとi os屋さんがfirefoxosアプリを作ったら
Kazuhiro Furue
真のレシポンシブって何だろう
真のレシポンシブって何だろう
Yumi uniq Ishizaki
WordPressのサイト内検索を使ってみよう
WordPressのサイト内検索を使ってみよう
Kawaji Masaki
CSSのカバレッジツール
CSSのカバレッジツール
sinsoku listy
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
Yuriko Kamimori
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
WebアプリをElectronに乗せる
WebアプリをElectronに乗せる
Hiroyuki Anai
More Related Content
What's hot
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
matsuohideaki
Bootstrap
Bootstrap
kenji goto
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
schoowebcampus
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
高速化はじめの一歩
高速化はじめの一歩
Yuki Nakane
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
Laravel vue-project-upload
Laravel vue-project-upload
小川 昌吾
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
Hidetaka Okamoto
140119 hackathon
140119 hackathon
Marie Suenaga
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Androiderとi os屋さんがfirefoxosアプリを作ったら
Androiderとi os屋さんがfirefoxosアプリを作ったら
Kazuhiro Furue
真のレシポンシブって何だろう
真のレシポンシブって何だろう
Yumi uniq Ishizaki
WordPressのサイト内検索を使ってみよう
WordPressのサイト内検索を使ってみよう
Kawaji Masaki
CSSのカバレッジツール
CSSのカバレッジツール
sinsoku listy
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
Yuriko Kamimori
What's hot
(20)
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
Bootstrap
Bootstrap
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
高速化はじめの一歩
高速化はじめの一歩
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Laravel vue-project-upload
Laravel vue-project-upload
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
140119 hackathon
140119 hackathon
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Androiderとi os屋さんがfirefoxosアプリを作ったら
Androiderとi os屋さんがfirefoxosアプリを作ったら
真のレシポンシブって何だろう
真のレシポンシブって何だろう
WordPressのサイト内検索を使ってみよう
WordPressのサイト内検索を使ってみよう
CSSのカバレッジツール
CSSのカバレッジツール
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
Similar to ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
WebアプリをElectronに乗せる
WebアプリをElectronに乗せる
Hiroyuki Anai
おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
tomohiro morishita
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
自作アプリ7月号
自作アプリ7月号
Tsuyoshi Kinoshita
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
ASP.net MVC で Stripe課金を実装してみた話
ASP.net MVC で Stripe課金を実装してみた話
Yukihito Kataoka
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
Ryoya Kawai
たのしいアノテーション
たのしいアノテーション
Kazuhiro Sasao
おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
tomohiro morishita
Meaning of law specialist join to hackathon
Meaning of law specialist join to hackathon
Hidemi Arai
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
WebRTCでリアル店舗を作ってみる
WebRTCでリアル店舗を作ってみる
Junichi Okamura
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Kensaku Komatsu
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Yoshifumi Kawai
Webの勉強会#11
Webの勉強会#11
MarlboroLand
Force.comサイトで動かすWeb Starter Kit
Force.comサイトで動かすWeb Starter Kit
Taiki Yoshikawa
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
Yusuke Kawasaki
Similar to ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
(20)
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
WebアプリをElectronに乗せる
WebアプリをElectronに乗せる
おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
Html5 and Graphics
Html5 and Graphics
自作アプリ7月号
自作アプリ7月号
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
ASP.net MVC で Stripe課金を実装してみた話
ASP.net MVC で Stripe課金を実装してみた話
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
たのしいアノテーション
たのしいアノテーション
おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
Meaning of law specialist join to hackathon
Meaning of law specialist join to hackathon
Swaggerのさわりだけ
Swaggerのさわりだけ
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
WebRTCでリアル店舗を作ってみる
WebRTCでリアル店舗を作ってみる
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Webの勉強会#11
Webの勉強会#11
Force.comサイトで動かすWeb Starter Kit
Force.comサイトで動かすWeb Starter Kit
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
1.
ぱんちら.js JavaScriptで テクスチャマッピング Webフロントエンジニア交流会 @横浜 #HTML5飯
2.
面白法人カヤック HTMLファイ部 中農稔/ねろ ! エンジニア:JSer、ASer、Flasher 兼ウェブアニメーター SNS:nenjiru http://twitter.com/nenjiru http://qiita.com/nenjiru http://github.com/nenjiru http://www.kayac.com/team/nakano-minoru
3.
さいきんの仕事
4.
Yahoo!JAPAN 祝っていいとも 公開終了
5.
面白法人カヤック カヤックサイト2013版 http://www.kayac.com/
6.
おとこ大学 アダルトあ Private http://adult-ah.com/
7.
NHK HACKATHON NEWS CALL Private http://create.kayac.com/web/newscall/
8.
つくってみたラボ 現実の鍵でウェブサイトに ログインする http://create.kayac.com/electronic-work/real-keychain/ Private
9.
本日のテーマ
10.
11.
ぱんちら.js JavaScriptでテクスチャマッピング
12.
demo http://nenji.ru/_/pantira.js/
13.
レイヤー構造 img canvas
14.
テクスチャマッピング • 3D(2D)モデルにテクスチャを貼る • 形状にあわせて画像を変形するマッピング これを
canvas でやれば スカートを自由に変形できる!?
15.
canvasでできる変形 • 拡縮(scale) • 傾斜(skew) •
移動(translate) • 回転(rotate) 台形変形がない!
16.
17.
どうするか?
18.
三角形をつかう
19.
三角形をつかう
20.
21.
バージョン1 http://nenji.ru/_/pantira.js/
22.
スカートのふわふわ感たりなくない?
23.
バージョン2 http://jsdo.it/nenjiru/eXkp
24.
バージョン1との違い スカートの頂点座標の計算に ベレの方法を採用
25.
ベレの方法 ベレ法はラグドール物理ともよばれIKを実現するのにも利用されている 速度を明示的に保存しないことが特徴。速度が必要ときには、前回との座標との差分から求める 対になった粒子を引き寄せたり話したという拘束条件を行う。 ベレは、点と線でオブジェクトを構成する。棒は2つの点で構成され、構造物は一つ以上の棒か ら構成される ようするに・・・ 2点間の振る舞いを表すアルゴリズム
26.
Verlet polygon http://jsdo.it/nenjiru/pCaT
27.
28.
資料 テクスチャマッピング 最速チュパカブラ研究会 http://d.hatena.ne.jp/gyuque/20090211 ベレの方法 詳解 ActionScript 3.0アニメーション http://www.amazon.co.jp/dp/4873114373
29.
ご静聴ありがとうございました
30.
http://twitter.com/nenjiru
Download now