sfpgmr

SVGからthree.jsのshapeへの変換(4)

エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。

sfpgmr

SVGからthree.jsのshapeへの変換

エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。

見ていただくとわかりますが、Bugが残ってます。あとIEとFirefoxでは動作しません。私のコードが悪いようです。 下記のURLから動くデモが見れます。

http://bl.ocks.org/sfpgmr/6dcbf6d5f51d719bc764

sfpgmr

About

WebGLとThree.jsを使用した自己学習用のサンプルです。

sfpgmr

##このサンプルについて

nodeからYoutube Data APIを呼んでd3とectを使用しサムネイルHTMLファイルを静的に生成する。

生成した静的ページは以下のリンクを参照。

http://www.sfpgmr.net/test/Youtube/0001/

sfpgmr

このサンプルについて

Youtube Data APIとYoutube Player APIを使用して、サムネイル表示の上にマウスカーソルを重ねるとプレビュー再生します。

http://bl.ocks.org/sfpgmr/raw/0671168256d7b4c09d34/

使用したライブラリ

• d3.js
• q.js

sfpgmr

このサンプルについて

Youtube Data APIとYoutube Player APIを使用した勉強を兼ねたサンプルコードです。

まずプレイリスト一覧を表示します。クリックするとプレイリストの中身をサムネイル表示します。 サムネイルの上にマウスカーソルを重ねるとプレビュー再生します。

ChannelIDを変更すると他のチャンネルのプレイリストを表示します。

※このサンプルは「Open in a new window」で確認してください。

sfpgmr

ゲームとしての体裁を整えた

• 文字列表示・スコア表示を追加
• ES6ジェネレータによるゲームフローの実装

sfpgmr

難易度を徐々に上げていく

• ボールのスピードを上げていく

sfpgmr

Pointer Lock APIを使ってみる

• Pointer Lock APIを使って、マウスを占有してみた。
• ESCを押すとPointer Lockを停止します。
• EdgeではPointer Lock APIが未実装のため、Pointer Lockできません。
• iPhoneでは今のところ動作しません。理由は不明ですが、おそらくES6 Generatorを使っているせいだと思われます。

sfpgmr

パドルでボールをコントロールする

• 簡単なベクトル演算を行い、ボールを跳ね返す時のx軸をコントロールできるようにしてみる。
• まずはパドルの直近のx移動量(Δpx)をボールに反映するコードを追加してみる。アルゴリズムは以下の通り。