生成するhtmlコードに関する部分が中心。 まだ修正・追記をする予定。Adobe Edgeを追加予定。 [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正] Swiffy v3.6 Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScrip…

ChromeとSafariの最新版で動きます。 自動で回転 javascript:(function(){var%20url='http://ndruger.lolipop.jp/hatena/20110919/css_3d_bookmarklet.js';var%20e=document.createElement('script');e.charset='UTF-8';e.src=url;document.getElementsByTag…

iPhoneでのCSS 3D Transforms利用の可能性を探るために、CSS 3D Transformsを使って3Dゲームを作ってみました。 javascriptによる3DゲームですがiPhoneのブラウザで結構スムーズに動きます。 デモページ http://ndruger.lolipop.jp/hatena/20110705/css_3d_g…

iPhoneのキャラクターがヌルヌル動いて、それらのキャラクターにタップ・フリックでいろいろ出来るアクションゲームの作成方法 canvasを使ったり、left, topをいじるとキャラクターのスムーズでないため、css animations + css transformsのtranslate()でキ…

基本 拡大・縮小を避ける 下記の指定 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> iPhone4の解像度はiPhone3Gより縦・横に倍大きいが、width=device-widthを指定してもiPhone3Gと同じ320pxが返り、表示時に2倍に拡大されて描画される。style指定で見かけ上の拡大を避けれなくはないが、今回はしない。 </meta>…

CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndr…

正確にはDocumentのroot elementが属するツリーのサブツリーでないDOMツリーから要素を探す場合。下記のようなケース。 htmlの塊をテンプレートとして使いたいので、Documentに繋がってない要素にinnerHTMLでhtmlの塊を挿入する そのhtmlの塊の中に、属性の…

こてさきAjax:Stream APIで、カメラの映像をWebSocket ライブ配信 - livedoor Blog（ブログ） http://blog.livedoor.jp/kotesaki/archives/1667452.html 上記のブログで、Stream APIを使ってカメラの映像をブラウザで取得できると知ったので、下記のjavascri…

Firefox 4 for Mobile: Demos! ✩ Mozilla Hacks – the Web developer blog http://hacks.mozilla.org/2011/03/webowonder-mobile/ 上記のページを見て、WebGLはどうだろうと思ってFirefox for Mobile4.0b1で試したら動いた。・・・ただし、なぜか逆さま。ま…

さくらVPSにてzshの環境でnvmを使ってnode.jsをインストールしたら、エラーが2つ発生したので対応方法をメモ source ~/.nvm/nvm.shでのエラー $ source ~/.nvm/nvm.sh error message: /home/snow/.nvm/nvm.sh:175: parse error near `|'私がPをperl用のパイ…

自動で動く 主に乗り物が動く。MSのkinectのゲームはこれが多い 足踏み 足が別なことに使えなくなる wiimote / iPhone / Android パンチと相性が悪い 見ずに操作するので、実ボタンがないiPhone / Androidは厳しそう 体を傾ける 向きの変更は、体をひねる HM…

Kinect(キネクト)勉強会 Vol.1で発表した物です。以前Kinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは？にて、Kinectとブラウザをnode.jsで繋げたので、それを少し発展させて、ゲーム(?)を作ってみました。 HMD(VR920)使っ…

Kinect(キネクト)勉強会 Vol.1で私が発表に使ったスライドです。(2011/03/01 追記) 現在"iframe → Google Gadgetコンバータ"がうまく動いてないようなので、リンクも張っておきます。Kinect + node.js + WebGLで作る簡易ゲーム利用したプログラムとソースはK…

Kinect + WebGLのゲームで人体に何らかのフィードバックを行いたい。 動き回る点と実現の容易さから、振動によるフィードバックが妥当なので方法を整理。 できればjavascriptで簡単に実現したい。 案1. Flash Liteのfscommand2のStartVibrate iPhoneはFlash …

HMDのVR920には加速度センサーがついているので、それを使うと、顔をどこに向けているのか分かります。 その情報を、node.jsのアプリを経由してWebSocketに送ると、顔の向きでWebGL内の視点の方向を動かして、WebGL内を見渡せます。 不完全な部分が多いので…

この作品は「第0回 HTML5プログラミング＆クリエイティブ・コンテスト」へ応募した作品です。 WebSocketの普及により、ブラウザの載っている端末は、他のブラウザで表示している物の、リアルタイムなコントローラーとして利用できるようになることを実感でき…

せっかくWebGLで3D内を移動できるのだから、視点も、平面的なマウスじゃなくて、何かの角度や顔の位置・角度に合わせて動かしたいということで検討用に整理。 案 1. flash + webカメラ + javascriptライブラリ + canvasでの顔認識 顔の位置認識: 可能 顔の角…

Androidはorientationchangeイベントが来ても、その時点でまだdocument.documentElement.clientHeight / document.body.clientHeight / window.innerHeightがまだ変わっていない。iPod touchは変わっている。 Androidはorientationchangeがアラートダイアロ…

Firefox 4 Beta 9 – a huge pile of awesome ✩ Mozilla Hacks – the Web developer blog 上記の気になった点をメモ。 JavaScript typed arrays File操作、画像操作、WebGLにいかがですか？ Compartments ヒープがOriginごとになって、Originが同じwindowごと…

それぞれのパターン 同列に比較するのは微妙な物もあるが、とりあえず一覧にした。 パターン1. 機器 --> ブラウザ --> コンテンツ 説明: ブラウザの機能として機器からの入力をコンテンツで受け取る 例: DeviceMotion Event, Geolocation API, Touch Event, …

仕組みはほとんどKinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは？と同じ。 デモムービー ムービーではChrome10のWebGLでWiiリモコン入力の棒を動かしています。ちょっと入力を省きすぎたのかカクカクしてます。Firefox4 …

1. 赤青メガネの作成 色付きセロハンを使って作る。色付きセロハンが近くの文房具屋になかったので、Amazonで購入。教育セロファン15出版社/メーカー: トーヨーメディア: オフィス用品購入: 3人 クリック: 87回この商品を含むブログ (1件) を見るiZ3Dのデフ…

Kinectを買ったので、最近熱いWebGLの入力として使ってみた。 遊び・デモ用で汎用的には作ってない。 デモムービー ムービーではChrome10のWebGLでKinect入力の棒人間が動いてます。Firefox4 / Safari5とかでも動きます。 Firefox3でも動かなくはないですが…

知らないことが多い分野のメモなので、間違いが多数あるかも。 方式 入力方式 インターリーブ方式 youtube 3dの"Interleaved rows, columns or checkerboard"に相当。縦or横orチェックの1pxごとに入れ替え。 サイドバイサイド方式 youtube 3dの"Side by side…