javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？
CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。 ソースコード https://github.com/ndruger/css-game 技術的な説明 アニメーションはCSS Animationを使うだけなので簡単ですが、問題は状態管理です。 アクションゲームを作るには、基本的に下記の要素が必要です。 1. ユーザー入力に対する状態の変更 2. 状態の保持 3. 状態に応じて見た目
スマートフォンのブラウザでのアニメーションに関するツールのメモ - 最高のコンピューティング環境とは？
生成するhtmlコードに関する部分が中心。 まだ修正・追記をする予定。Adobe Edgeを追加予定。 [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正] Swiffy v3.6 Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScript2まで対応。 Google Lab廃止から生き残ったし、アップデートもされているので、Googleも力を入れている模様。 生成するhtmlコード Flashの変換結果として大量のjsonデータが出力され、それがランタイム(runtime.js)によって実行される。 Flashのアニメーションのオブジェクトの移動は、SVGのtransform属性のmatrixに変換している。相当重くiPhone4ではシンプルなコンテンツでないと厳しい。 ベクタ画像はSVGに変換される ja
WiiリモコンをNode.jsを使ってWebGL内で動かしてみた - 最高のコンピューティング環境とは？
仕組みはほとんどKinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは？と同じ。 デモムービー ムービーではChrome10のWebGLでWiiリモコン入力の棒を動かしています。ちょっと入力を省きすぎたのかカクカクしてます。 Firefox4 / Safari5とかでも動きます。 やってることとそれぞれのソースコード 1.Wiiリモコン --> 2.WiiYourself!のデモを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示 "2.WiiYourself!のデモを改造したアプリ" WiiYourself!のデモに、ビルドのためにDDKのパスを追加して、TCPで回転座標を投げるように改造した物。差分が小さい場合は送ら
Androidのorientationchangeの振る舞い - 最高のコンピューティング環境とは？
Androidはorientationchangeイベントが来ても、その時点でまだdocument.documentElement.clientHeight / document.body.clientHeight / window.innerHeightがまだ変わっていない。iPod touchは変わっている。 Androidはorientationchangeがアラートダイアログで発生するので、orientationchangeのリスナー内でアラートダイアログを出すと無限ループする。iPod touchはアラートダイアログでは発生しない。 参考 javascript - Android Browser orientationchange event keeps firing - Stack Overflow この仕様の理由は、Androidはアプリ切り替えが前提にあるので、ブラウザから
Stream APIを使ってAndroidのカメラの映像をjavascriptでリアルタイム顔認識(難航中) - 最高のコンピューティング環境とは？
こてさきAjax:Stream APIで、カメラの映像をWebSocket ライブ配信 - livedoor Blog（ブログ） http://blog.livedoor.jp/kotesaki/archives/1667452.html 上記のブログで、Stream APIを使ってカメラの映像をブラウザで取得できると知ったので、下記のjavascriptで顔認識ができるライブラリを使って、カメラの映像の顔認識を試してみた。 JavaScript+canvasで顔認識 - 開発な日々 http://hinata.in/blog/20100227231617.html 実行 1. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview にあるOpera mobileのテクニカルプレビューをインストール 2. op
HMD(VR920)使ってWebGL内を見渡してみた(試作) - 最高のコンピューティング環境とは？
HMDのVR920には加速度センサーがついているので、それを使うと、顔をどこに向けているのか分かります。 その情報を、node.jsのアプリを経由してWebSocketに送ると、顔の向きでWebGL内の視点の方向を動かして、WebGL内を見渡せます。 不完全な部分が多いので試作ですが、別な作業に移るので一旦ポストします。 デモムービー 実現方法とソースコード 1.VR920 --> 2.VR920のSDKのサンプルを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(scene.js)を使って表示 "2.VR920のサンプルを改造したアプリ" HelloTracker2を改造。適当にフィルターしてTCPで投げる。 改造点のdiff: http://ndruger.lolipop.jp/ha
WebGLでの視点移動に使えそうな入力デバイスの整理 - 最高のコンピューティング環境とは？
せっかくWebGLで3D内を移動できるのだから、視点も、平面的なマウスじゃなくて、何かの角度や顔の位置・角度に合わせて動かしたいということで検討用に整理。 案 1. flash + webカメラ + javascriptライブラリ + canvasでの顔認識 顔の位置認識: 可能 顔の角度認識: 難しい いくらjavascriptが早くなったと言っても、リアルタイム認識はまだ厳しいだろう。精度の問題も難しい。 マーカーやピンポン球の認識ならまだ軽いだろうけどそれでも厳しそう。 参考: JavaScriptとHTML5 Canvasを使って顔認識するコードがすごい:phpspot開発日誌 3. Wiiリモコンの赤外線カメラ + 頭にLED + wiimoteアプリ + node.jsでブラウザに投げる 顔の位置認識: 可能(距離は不可能) 顔の角度認識: 難しい 電子工作は好きだけど、体験で
Kinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは？
Kinectを買ったので、最近熱いWebGLの入力として使ってみた。 遊び・デモ用で汎用的には作ってない。 デモムービー ムービーではChrome10のWebGLでKinect入力の棒人間が動いてます。 Firefox4 / Safari5とかでも動きます。 Firefox3でも動かなくはないですが、WebGL非対応なので檄重です。 やってることとそれぞれのソースコード 1.Kinect --> 2.OpenNI(PC用のKinect対応フレームワーク)を使ったアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示 最初はDepthJSを使おうとしたけど、特定のブラウザでしか動かない拡張らしく、OpenCVとかも面倒だと思っていた時に、下記のサイトでOpenNIから簡単
HMDの3Dに関する入力方式の整理と、WebGLの立体視の検討 - 最高のコンピューティング環境とは？
知らないことが多い分野のメモなので、間違いが多数あるかも。 方式 入力方式 インターリーブ方式 youtube 3dの"Interleaved rows, columns or checkerboard"に相当。縦or横orチェックの1pxごとに入れ替え。 サイドバイサイド方式 youtube 3dの"Side by side"に相当。視点のずれた画像を横に並べる。 アナグリフ方式 youtube 3dの"Colored Glasses"に相当。 フィールドシーケンシャル方式 インターリーブ方式と同じ？ フレームシーケンシャル方式 フレームごとに入れ替え。HMDの入力方式では通常使われない。(2011/01/10 [修正]: VR920の機器への入力はこれが使われている)。3DTVの出力としてシャッター方式のメガネと同時に利用される。 HMDの例 Wrap920 PC以外のメディア機器用。
web対応のエアコンを作る (ハードウェアプロトタイプ完成) - 最高のコンピューティング環境とは？
目的 エアコンはWeb対応が必要だと思います。 なぜなら、会社から帰ってきたら、部屋が冷えていてほしいから。 会社を出るときに、家のクーラーをOnにできればいいのです。 実際にそういうのはもちろん存在します。 これ(http://www.itmedia.co.jp/news/0104/12/carrier.html)とか。 問題は、「私の自宅のエアコン」が対応していないことなのです。 しょうがないので、無理やり対応させることにしましたー。 実現方法 PCからモーターを動かして、エアコンのリモコンのボタンを押す。 赤外線を使ったほうが楽だが、汎用性を考え(お風呂の湯張り対応なども・・・)、モーターを使う。 シーケンス 1. 会社で帰宅前に、ブラウザで自宅鯖にアクセスして、「家のクーラーを オン」ボタンを押す。 2. 自宅鯖のCGIが呼び出される 3. CGIから、USB-IO(PCから外部ハ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
