2015年9月26日土曜日

[javascript][gyrosensor] html5 でジャイロセンサーをいじくる。

休みの朝の小一時間のプログラミング。
javascript で、ジャイロセンサー(傾きセンサー) も触れるみたいすね。

http://ics-web.jp/lab/archives/4095

html5 の navigator.geolocation の heading が端末によって?取れねーと思ってて、
どうやって解決しましょということで、触ってみました。

http://www.psychedesire.org/sample/test_gyro.html

スマホのブラウザ(Android Chrome or Android Firefox)で開いてみてください。
で、押してみるってボタンを押すと、
なんか、テキストボックスが傾きによって動くと思います。

で、ほげもん豪にこれを組み込みました。

http://www.psychedesire.org/sample/test_hoge_a3.html


http://www.psychedesire.org/sample/test_hoge_a4.html

例によってAndroid の Firefox のみで動作確認。
右上の緑ニコチャンを押して緑の四角を表示させると、
緑の四角が傾きによって動くと思います。
これ、結構THREE.js の視野角と、
実際のスマホのジャイロセンサーの傾き角度の感覚を、
人間の体感感覚に合わせる調整が必要ですね。
一応、既に調整はしてあります。

http://www.psychedesire.org/sample/script/GPS.js

の28行目と29行目の0.1とかかけてあるところですね。
あと、回転角の符号反転をしないと、
自分のスマホの傾きと、
画面上のオブジェクトの見え方が一致しなくなります。

地球が丸いという事実に合わせて、
色々と修正しまくっているので、
その都度 GPS.js を観察してくださいw
この辺にやり方書いてあった。

http://stackoverflow.com/questions/28365948/javascript-latitude-longitude-to-xyz-on-sphere-three-js

2015年9月21日月曜日

ポケモンGO 的なもの?を WEBブラウザだけで作ってみてるんだけども

はい。進捗報告です。まだまだできてません。
が、まぁまぁ形は見えてきてるんですけども。
こちらから試せます。

http://www.psychedesire.org/sample/test_hoge_a2.html

Android 版の Firefox でしかまだ動いてません。多分。
Android 版の Chrome はダメっぽいのは直してません。
直るのかもわからん。調べてない。後回し。
カメラ許可とGPS許可が必要です。

なんか次へ次へすると、カメラの画面が起動すると思うんですけど、
その画面に行ったら、右上のニコちゃんマークを押してください。
そしたら、アラートが出て、緑色の四角が出てくると思うんですけども、
それがモンスターの代わりです。

その状態でうろうろすると、多分、緑の四角が画面から消えます。
今んとこはそこまで。
右下のセンサーが赤くなったり、攻撃出来たり、
ちゃんとしたモンスターが表示されたりってのは、まだまだって感じ。

で、まぁ、問題は、スマホの向きですね。方角です。
これ、navigator.geolocation で取れたり取れなかったりします。
端末の問題なのかなんなのかはわかりません。

Ingress でも、自分は北を向いてるのに、
緑の三角(自分)はわけわかんない方角向いてるって経験、
ないでしょうかね?私はしょっちゅうです。
Ingress では『位置』が大事で、
『どの方角を向いているか』はゲームの本質に関わるようなもんじゃないので、
なんか方角が違う気持ち悪さはあっても、そこまで気になりませんでしたけど、

ポケモンGOが、こういう、
実際のカメラ画面上にモンスターが表示されるゲームだ、
仮定した場合は、やばいっすね。

ポケモンのいる方を向いているはずなのに、ポケモンが画面に表示されなくなります。

まぁ、どんなゲームなのか、わかりませんけどね。
上記仮定にあるようなゲームであった場合、
ポケモンGOPLUS?が、
その辺のGPS位置情報(主に方角)補正機能も兼ねるのかも知れませんし。


2015年9月16日水曜日

[virtualbox][genymotion]起動させる

動いたわ。
てか、自分のパソコンぶっ壊れて、
おふくろのパソコン曲がり中なんだけど、
VirtualBox入れたらネット繋がらなくなって焦った。
まぁ、ルータのISP接続し直したら直ったんだけども。

で、まぁ、Virtualbox入れる所は、どうでもいいと。
で、genymotion をインストールするのもどうでもいいと。

ただ、genymotion で適当な Android 端末を作って起動させようとしたら、
VT-x is not available.
だかのなんちゃら言うエラーが出る。
調べてみると、アクセラレーションの設定を、
ホストのPC(おふくろのパソコン)のBIOSをいじるか、
VirutualBox のアクセラレーションの設定をいじるか、
みたいな感じみたいなんだけど、
おふくろのパソコンのBIOS見ても、そんな項目がない。
VirtualBox 上のマシン(Android 端末)の設定→システム→アクセラレーションのタブが、
選択不可になっていて変更できない。

VirtualBox 上のマシンを右クリック→エクスプローラを表示で出てくるフォルダの中の、
[Android端末名].vbox や[Android端末名].vbox-pref の中を、
この記事みたいに書き換えてもダメ。

で、どうしたもんかわからないから、
『アクセラレーションが有効ならなんでもいいんだろ!』
ってことで、
VirtualBox 上のマシンの設定→ディスプレイ→3Dアクセラレーションを有効化に
チェックを入れたら、起動した。
その下の 2Dビデオアクセラレーションを有効化 もチェックしたら、
俺の環境(てか、おふくろのパソコン)だと無効な設定ですって怒られて、
勝手にチェック外されました。
 
爆速!という触れ込みに違わず、速い。これは凄い。

2015年9月15日火曜日

ポケモンGO的なやつ

今日の叡王戦の鈴木大介先生はシュークリーム一杯食べてたと思う。(81並感

ポケモンGO的なやつは全然進んでおりません。
寝る時間は惜しむタイプです。
変な時間に目覚めたら書きますよー書く書く。

http://www.psychedesire.org/sample/test_gps2.html

スマホはFirefoxでしかチェックしてません。
PCだと画面サイズがフルのとこにカメラが表示されるから
ウィンドウサイズでかいと大変なことになると思います。

1・なんでスマホのChromeだと動かないのか調べる
 (URL 作るとこか createObject() が独特なんじゃないか説。調べる。)
2・ウィンドウサイズを変えたらリサイズするようにする。

[Appcelerator Studio] sh.exe titanium command not found の時の対処。

ほい。なんかこれTitaniumStudioの時もやらなかったか?
まぁいいか。
まぁ、ここに書いてあるけど、英語が嫌な人向け。


まずは、Appcelerator Studio コマンドプロンプトを開く。
まぁ、ツールバーみたいなとこにある如何にもコンソールが開きそうな黒いアイコンを押す。

npm 使うので、前提として node.js がインストールされてるか確認のコマンド

$ node -v

する。バージョンが表示されたらOK。

で、

$ npm install -g titanium

する。ごばーと出てくる。
で、なんかコンソールの表示が変になるかも知れないけど完成。多分。

テストで、

$ti config

もしくは

$titanium config

ってやって、
設定がどばーと表示されたら大丈夫。

$ ti config android.emulatorStartTimeout 600000

とかやったらいいとこちらに書いてありました。
それでもエミュレータ起動しないんで Genymotion インスコ中。
ここら辺が詳しいっぽい

2015年9月13日日曜日

ポケモンGO的なものを作るということについて、ちょっとくらい、まともに考えてみなくもない。

まぁ、折角GPSカメラをjavascriptであれこれできるんだから、
ちょっとくらい、考えてみる。

視野角は、真正面を見たとき、
ばっちり認識できるのが左右に35度ずつとかそんくらい、
まぁまぁ見えてるのが左右に60度くらい。
無意識でも認識できてるのが左右に100度くらい。

奥行は、まぁ、1kmまでは見えないよね。
なんせ視力次第ではある。
なんかすっごい視界のこと書いてあるとこ見つけたけど、難し過ぎてわからん。 
めんどくさいから、Ingress持って柳町公園行った方が早いな。
ポータルキーで距離分かるから。

あとは、方向。これは、navigator.geolocation で heading が取れるから、
端末がまともなら、なんとかなる。

自分を中心として、
向いている方角から真正面の奥行までを半径とした円を描き、
左右に60度ずつを取り出す、か、最初から円弧を描くか、みたいな感じ。
そのピザのひとかけみたいな範囲内にある、
疑似的に位置情報を与えられた3Dオブジェクトは見えると。

昔、セカイカメラってのがあったんだけど(2014年にサービス終了したらしい)、
そんな感じすかね?まぁ、使ったことないんだけど。

てか、まぁ、一番の問題は、多分、
GPS起動しながらスマホ充電しながら歩いてると、
カメラが本体の熱で起動しない点だと思う。
Ingressでポータル申請しようとして、
本体の熱の所為でカメラ起動しないとかよくあったからなぁ。
アプリ自体が処理が多かったりするとっていうのもあるんだろうけど。

やっぱめんどくせー。

[javascript][getUserMedia] スマホのカメラをWebカメラに出来るんだねー。

WebRTCってのがあって、
まぁ、リアルタイムであれこれできるっつーやつなんだけども、
ほんで、まぁ、なんだろ、html5 で Webカメラを使えるっていうのは、
前にJSARToolkit 使ってみようと思った時に知ったんだけど、
スマホのカメラも使えるっつーのは知ってたような、
忘れたような。忘れただけかも。

というわけで、まぁ、画面サイズのフレキシブルなのには対応してないけど、
作った。スマホでも動く。

スマホだと、Chromeだと動かない。Operaも知らん。
Firefoxのスマホ版だと、とりあえず動いた。
パソコンだと、ChromeとFirefoxで動いた。Webカメラつないでなきゃだめだけどね。

http://www.psychedesire.org/sample/test_webcam.html

あ、あと、前回のGPSのやつも

http://www.psychedesire.org/sample/test_gps.html

で見れますよ。

てか、今回のWebカメラのやつもむりくりオブジェクト指向ぽくしようとして、
見事に破綻しているどころか、
なんかもう、酷過ぎて酷過ぎて。
あれだよね。callback関数のやつとか、ダメだよねあれ。
this を引き継げないでしょ。
引き継げる書き方すると、functionネスト深くなるから、
なんか、ジレンマみたいになるね。
なんかうまいやり方あったような気もするけど、忘れた。
結局、CAM.prototype にcallback関数を外に放り出した奴からアクセスする感じになって、
今度は this.からアクセスできなくなったりするでしょ。
もうわけわかめだよ。
まぁ、ソースコードみて笑ってやってください。

あ、あと、Webカメラの画面の下に、
同じ(スマホでは全然違う感じになってると思うけど)画面が表示されて、
右下に数字がすごい勢いで表示されてると思うけども、
あれは、Webカメラの画面をcanvas で再描画して、
再描画したcanvas 上に現在時刻秒を表示してるんです。
JSARToolkit のやつでやり方を知った感じ?
つまり、何ができるかっていうと、
ポケモンGOの発売より先にポケモンGO的な何かが作れるってことだよね。
前にWebカメラの画面にMMDの初音ミク表示しようとしたりしたんだけど、
そういうノリですね。
Three.js でモンスターの3Dオブジェクト表示すればいいっていうね。
で、そのオブジェクトに疑似GPSの位置を与えて、
実際にその位置との距離で3Dオブジェクトの表示倍率変えれば、
近づけば大きく見えて、離れれば小さく見えて、みたいなね。

まぁ、めんどくさいからやらないけどね。

ていうか、前にGoogleStreetView上に勝手にモンスター表示させて
GoogleStreetViewをダンジョンみたいにするゲーム作ろうとして、
途中までやりかけてやめたんだけど、あれどこいったんだろ?
ふくろう?owl?みたいなレンタルサーバに上げたんだけどなぁ。

このブログに書いてあるじゃねーかwwww

クソワロタwwwwwwwwwww

まぁ、動かなかったけどね!

なんだろ?CDNのリンク切れかなぁ?別にいいや。

2015年9月12日土曜日

[javascript][geolocation] ややハマりマジコスメ

あ、プログラマっぽい職種に就職しました。
ありがとうございます。

で、ブラウザで、javascirpt でも位置情報取得できるじゃないですか。
navigator.geolocation.getCurrentPoition(succ,err,opt);
みたいなやつ、

あれ、結果返ってくるまでに時間かかりますので、気をつけて下さい。
調子こいてオブジェクト化して楽して使いまわせるようにしようとか思って、


  1. var GPS = function(){
  2.  this.curr();
  3. }
  4. _GPS = GPS.prototype;
  5. _GPS.geo = navigator.geolocation;
  6. _GPS.lat  = 0; // latitude
  7. _GPS.lng  =0; // longitude
  8. _GPS.time = 0 // time
  9. _GPS.e = false // error -> true;
  10. _GPS.opt = {
      enableHighAccuracy : true,
      timeout            : 5000,
      maximumAge         : 0
  11. };
  12. _GPS.getTime = function(){
  13.  this.time= (new Date()).getTime();
  14. }
  15. _GPS.succ = function(pos){
     var co = pos.coords;
  16.  _GPS.lat = co.latitude;
  17.  _GPS.lng = co.longitude;
     _GPS.getTime();
    }
  18. _GPS.err = function(e){
     _GPS.e = true;
     _GPS.lat = -1;
     _GPS.lng = -1;
     _GPS.getTime();
  19. }

  20. _GPS.curr = function(){
  21.  var _t = this;
     _t.geo.getCurrentPosition(_t.succ,_t.err,_t.opt);
  22. }

とかだと、

var gps = new GPS();
alert(gps.lat); => 0

で、はぁ?ってなります。

なので、

  1. var GPS = function(){
  2.  this.curr();
  3. }
  4. _GPS = GPS.prototype;
  5. _GPS.geo = navigator.geolocation;
  6. _GPS.lat  = 0; // latitude
  7. _GPS.lng  =0; // longitude
  8. _GPS.time = 0 // time
  9. _GPS.e = false // error -> true; 
  10. _GPS.get = false // got location -> true
  11. _GPS.opt = {
      enableHighAccuracy : true,
      timeout            : 5000,
      maximumAge         : 0
  12. };
  13. _GPS.getTime = function(){
  14.  this.time= (new Date()).getTime();
  15. }
  16. _GPS.succ = function(pos){
     var co = pos.coords;
  17.  _GPS.lat = co.latitude;
  18.  _GPS.lng = co.longitude;
     _GPS.getTime();
  19.  _GPS.get = true;
    }
  20. _GPS.err = function(e){
     _GPS.e = true;
     _GPS.lat = -1;
     _GPS.lng = -1;
     _GPS.getTime();
  21.  _GPS.get = true;
  22. }

  23. _GPS.curr = function(){
  24.  var _t = this;
     _t.geo.getCurrentPosition(_t.succ,_t.err,_t.opt);
  25. }

で、
var gps = new GPS();

var loop = setInterval(function(){
 if(gps.get){
  alert(gps.lat + " - " + gps.lng);
  clearInterval(loop);
 }
},500);

とかみたいにしなきゃダメっすね。
まぁ、結論としては、普通に書いた方がいいって感じ。
どうしてもグローバルにいろいろ書きたくないんじゃーって人は、
こんな感じになるんでしょうかね。
あと、success の function の中が深くなるのが嫌な人とかかな?

まぁ、そんな感じで。