Hatena::ブログ(Diary)

eryngii_moriのAndroidな日記

2015-12-14

加速度センサーからハイパス・ローパスフィルターでの重力除去方法

18:55

僕のお気に入りのアルゴリズムで「ハイパスフィルター」「ローパスフィルター」というのがあります。

これは加速度センサーで重力と意図的に加わった加速を分類する時などに使われます。

なのでHTML5アプリを作る時に重力とその他の加速を分ける時などに使えます。

下記に「ハイパスフィルター」と「ローパスフィルター」のサンプルコードを書きました。


This Blog is Japanese language only Write not rule. I write English Blog.

I like algorithm “High-pass filter” And “Low-pass filter”.

This Algorithm Gravity or Other-Acceleration Identify. it use Acceleration Sensor.

it Example “High-pass filter” And “Low-pass filter”.

<script>

/*
  Device Acceleration Sensor is get time interval case by case.
  Reference get time interval : iPhone5(25 millisecond).   
*/
/*
  デバイスにより加速度センサーの取得時間が異なります。
  iPhone5ではおおよそ25ミリ秒です。
*/

window.addEventListener("devicemotion", motion, true);

//Low-pass Filter setting clear value.
//ローパスフィルタの値を初期化
var low_x = parseFloat(0);
var low_y = parseFloat(0);
var low_z = parseFloat(0);

function motion(event){

    //Popular filtering value.
    //一般的なフィルタリングの値。
    var FILTERING_VALUE = parseFloat(0.1);

    //HTML5 API Getting Acceleration Sensor Value.
    //HTML5 APIから加速度センサーの値を取ってくる。
    var x = parseFloat(event.accelerationIncludingGravity.x);
    var y = parseFloat(event.accelerationIncludingGravity.y);
    var z = parseFloat(event.accelerationIncludingGravity.z);

    //Low-Pass Filter
    //ローパスフィルター
    low_x = eval(x * FILTERING_VALUE + low_x * (1.0 - FILTERING_VALUE));
    low_y = eval(y * FILTERING_VALUE + low_y * (1.0 - FILTERING_VALUE));
    low_z = eval(z * FILTERING_VALUE + low_z * (1.0 - FILTERING_VALUE));

    //High-Pass Filter
    //ハイパスフィルター
    var high_x = eval(x - low_x);
    var high_y = eval(y - low_y);
    var high_z = eval(z - low_z);

    //Your Action start IF method.
   //あなたが設定した加速度に加わる値をif分で分ける
    if(high_y <= 3 && high_x > 1.8 && high_z <= 3){
        //Do You Action Method (Event).
        // あなたが行いたいイベントを記述
    }
}
</script>

HTML5APIで取り出した重力などすべての加速が加わった値から

「ローパスフィルター」で重力を取り出します。

その次にローパスフィルターから一定時間の平均を取得し、

その平均をローパスフィルター(重力)を引いた値が「ハイパスフィルター」つまり

「意図的に加わった加速」になります。

これを加速度センサーやジャイロセンサーコンパス)などの複数のセンサーを

複合的に算出されたデータで

「ユーザーがポケットに入れて歩いているのか?」「激しく端末を振っているだけなのか?」などの

参考になるデータを抽出することができます。

HTML5ではこの様なアプリウェブベースで開発できる様になったことは非常に素晴らしいと思います。

ありがとうございました。


Gravity OR Other-Acceleration “Low-pass filter” Extraction. for Data output HTML5 API.

Next Step. Constant Time Average value get it “Low-pass filter”.

“High-pass filter” value is Constant Time Average value minus Low-Pass Filter value.

Acceleration And Gyro (Compass) etc Sensor Data Complex calculations Data

for “User walking device in pocket?”, “Shake device only?” etc Calculation Data and UX Case.

I am impressed Amazing of Used Technology in HTML5 Web-base.


Thank you read.

クロパンダクロパンダ 2015/12/15 07:28 タイトルすらわからないので日本語でお願いします…

eryngii_morieryngii_mori 2015/12/15 12:43 すまん、英語変やったから直した。
英語わからなかったらGoogle翻訳でBlog見たらわかる様にしておいたよ〜

クロパンダクロパンダ 2015/12/15 19:32 すいません。やっぱり文法がさっぱりわからず読めません…

Are you HTML5 App use Acceleration Sensor?

これも英語として成り立ってないと思います。be動詞があるのにuseが動詞として出てきてますし、HTML5 Appとyouも繋がりません。

日本語でお願いします。

eryngii_morieryngii_mori 2015/12/15 21:01 了解しました。申し訳ありません。
日本語の原稿を再度提出いたします。

トラックバック - http://d.hatena.ne.jp/eryngii_mori/20151214

2015-01-04

Your Question Easy English Comment OK.

01:27

This blog read over Question this comment send OK.

Please English Easy. I can English read and write level Easy and low speed.

Me Recruit OK.

Twitter : @eryngii_mori

facebook : 宮地尚希 (Naoki Miyachi)

トラックバック - http://d.hatena.ne.jp/eryngii_mori/20150104

2014-12-24

AR技術を一から勉強する方法。(長文)

17:06

ARのadventカレンダー20日目担当をしました再び登場のeryngii.mori(エリンギの森)です。


Androidアプリエンジニアだったけどネットの情報で半年くらいでARアプリの仕組みを理解できたので記録として残しておいた資料をご紹介いたします。


AR技術はもともとComputer Visionというコンピューターに画像を認識させる技術でした。しかし、ハードウェア・強力なアルゴリズムソフトウェアが開発されAndroidアプリでも利用することができるくらいにまでなりました。

私は元々AndroidアプリケーションエンジニアだったのですがAR技術に興味を持ち、大学や研究者・企業の現場のの方が公開されているスライドを元に半年程度で基礎的なことを独学で学習することができました。

もちろん、本業の方からすれば抜けている技術もありますがOpenCVなどのライブラリを使えばAndroidプラットフォームでも実装可能なこと、Github等でOpenCVを使って実際に動くアプリを見られたことで幸運にも今自分で実装しているARアプリケーションの仕組みがわかるようになります。

時間はかかるかもしれないですが貴重な資料を公開されている学者・エンジニアの方がいらっしゃるのでGoogleで資料を探したり、Youtubeで動作を見たり、Githubソースコードに触れることでAR技術を堪能することができます。

そして、仕事や趣味でプログラムを組むときに役立つことが非常に大きいと思います。


もしよろしければAR技術を一から勉強した私の経験がお役に立つことがあれば幸いです。


//藤吉先生のスライドとの出会い。

まず、最初の最初システムの動きやアルゴリズム・色々なアルゴリズムの種類を中部大学の藤吉先生のスライド資料を見て勉強しました。

画像認識アルゴリズムには種類があって特徴検出器やパターン検出器・学習アルゴリズムなど多岐に渡る資料を整理・分類して勉強することができました。

かいつまんで言うとORB特徴検出器とSIRF特徴検出器は画像を64次元や128次元で表した特徴点を元に特徴点ごとの距離を計測して画像を判別しているとか、

Haar-Like特徴量は幾つかのパターンに沿って画像の一部に適用して学習機能と連携させ顔を認識したり、女性か男性かを判別したりするなどを学ぶことができました。

それらをグループ分けして「AR技術ではこの技術を使う」とか「この技術ではこの方法で実装している」など非常に勉強になりました。

藤吉先生本当にありがとうございました。


藤吉先生のスライドURLhttp://www.slideshare.net/hironobufujiyoshi/presentations


//Youtubeで動作が見られる幸せ。

自分で実装する方法がわからなかったり、実際の動きを見るときにはYoutubeなど動画サイトが非常に参考になりました。大学生の方が投稿してくれたアプリケーションを見て実際の動きやORB特徴検出器やSIRF特徴検出器の比較画像なども参考にさせていただきました。

多くの方が動画を投稿していただいているおかげで実際の動きや挙動などが感覚としてわかることができました。

ありがとうございました。


//Githubで公開されているOpenCVAndroidアプリに触れる。

検出方法の分類・実装するアルゴリズムが分かっていても実装方法が全く分からないときにGithubAndroid向けのライブラリを見つけることができ特徴点検出の実際の動きや判別方法を自分の端末で検証することができました。下に貼っているGithubAndroidプロジェクトは2つの画像から特徴点検出を行い、共通しているかどうかを検証するときに役に立ちました。比較前の手続きや検証、実際の実装方法がソースコードとしてみることができて非常に嬉しかったです。


以前Qiitaに投稿したGithubソースコードを利用する記事を書いていたいのでご参考までにどうぞ。


リンク:http://qiita.com/eryngii_mori/items/c2ea382ad90ab226e820


あと、ORB特徴検出器という最新技術もアプリソースコードが公開されています!!

超嬉しい!!!

Google PlayORB特徴検出器のアプリ

https://play.google.com/store/apps/details?id=in.mustafaak.imagematcher&hl=ja

ソースコードまで公開してある!!!

Githubhttps://github.com/mustafaakin/image-matcher


//実際にどこで使われているのか?

実際に使われる要素というとあんまり浮かばないと思いますが、サイバーエージェントさんが公開しているスライドで「Blogで顔写真をアップするときにOpenCVを使って名前のタグ付けをアシスタントしている」というスライドがありました。実際、サイバーエージェントさんに限らず、Facebookなどでも顔を検出して「知り合い?」っという昨日を利用したことがあると思いますが、処理の後ろ側ではComputer Visionの技術を使ってUXの向上を進めているようです。


サイバーエージェントさんのOpenCV記事:http://www.slideshare.net/siamtakashade/opencv-10319188


//Vuforiaとの出会い。

最初はOpenCVアプリケーションを実装するために頑張っていましたが、技術的・人員的な問題でVufoiriaというQualcommが提供しているUnty向けのARライブラリを使いました。マーカーにする画像から多少外れてもKLT法?などを使って補完する機能が実装してあり、ライセンスも無料で公開する場合はフリーで提供されていることもあったため最近はこちらを利用しています。


ほとんど、OpenCVライブラリを頑張って実装して1〜2年かかるところをVuforiaなどのライブラリを使うとUnityのグラフィック描画処理まで含めて30分程度で可能になりました。

もちろん基礎を知って動きを見るのも楽しく、また、Metaioというライブラリとも競争していうるので今後が楽しみです。


皆さんももしよろしければARアプリを作ってみてはいかがでしょうか?時間を見つけて色々勉強してると成長が実感できてとても楽しいです。僕も独学でできました。皆さんもできると思います。

トラックバック - http://d.hatena.ne.jp/eryngii_mori/20141224

2014-12-19

Amazon App StoreにHTML5アプリをリリースしてみた。

17:16

HTML5のadventカレンダー20日目担当をしましたなぜかHTML5で再び登場のeryngii.mori(エリンギの森)です。


Amazon App StoreHTML5のWebアプリ開発者にとってとても有効な宣伝ツールになると思います。

特にお金を掛けずに問題箇所を詳細に指摘してくれる所は

この記事を読んでくださる皆さんにとって一番の魅力ではないでしょうか。


わたくしもHTMLのリンクのミスを指摘していただきました。

また、条件次第では無料広告枠などのボーナス特典もあります。

Chrome Web Storeと共にHTML5Webアプリを作っていただける機会になりましたら幸いです。


今回はAmazon App StoreにHTML5Webアプリを「公開するまでの手順」・「公開して気づいたこと」を書いてみます。

Webアプリはすでに稼働中で全て無料であるという前提です。


//事前準備

1.英語と日本語の説明を準備。

2.対応機種。(YouTubeはあんまし好きではなさそう)

//登録

3.アプリを登録する。

4.米国国税庁なんたらかんたら。

5.Amazonさんからの修正依頼・再申請。

//完了後

6.完了した時のメール。

7.Amazon.co.jpで自分の名前で検索。

//おまけ

8.実は大きいボーナス特典。



1.英語と日本語の概要を準備。

基本的に日本語だけに公開したい場合でも英語版を作らないとダメみたいです。

その際に必要なことは以下の通りです。

・Webアプリの概要。・Webアプリの特長を簡潔に5くらい。


2.対応機種。

Amazon App StoreAndroid専用なのでWebアプリであってもiPhoneで購入できません。

あと、Amazonが発売しているKindle系のアプリストアの性質が強いためKindleアプリとして入っていないYouTubeの製品紹介ビデオがあると「Kindle系も対応する」とすると修正依頼が来ます気をつけてください。

紹介VTRを使う場合は他のHTML5系のビデオサイトにしておくと吉かもです。(2014/12/01現在調査中)


3.アプリの登録

・だいたい下記を入力します。ChromeGoogle翻訳しながらでOK。

アプリタイトル/Webアプリの概要/簡潔な5つの特長/カテゴリー/検索キーワード(複数)/販売地域・価格/すでにどこかでリリース済みか?/Amazonでの承認後公開日/大アイコン・小アイコンスクリーンショット/MP4形式の動作動画/コンテンツの性質(性的表現・暴力的など)/個人情報を取集するか/宣伝アプリか(イベントなど一時的か?)/位置情報を使うか?/対象年齢は13歳以上か/ギャンブル/プライバシーポリシーURL/

上記だいたいこれくらい。

・対応機種(Kindle/Non-Amazon Android/FirePhoneなど)をチェックマークで入力。


4.米国国税庁に関する申請書

・開発者は米国国籍か。

アプリの有料/無料について。


5.Amazonさんの修正依頼

リンク等に問題があったら修正依頼が申請後18時間程度で来ます。

問題箇所は詳細に書かれているため例えば「~URLのリンク先が参照できない」などが英語のメールで返ってくるので修正して「マイアプリ」の右下の「アプリを申請」ボタンを押して申請しましょう。


6.完了したら

メールで通った旨のメッセージが送られれてきます。この時にボーナス特典に関する情報が記載されているので翻訳して見てみましょう。ちなみに公開日を指定していない場合は承認後自動的に12時間くらい経って公開されます。


7.Amazon.co.jpで自分の開発者名で検索。

あなたの名前がAmazon.co.jpで検索すると出てきます!!!


//おまけ

8.ボーナス特典

さっきのボーナス特典は実は「自分のWebアプリの無料広告枠の案内と50万コインを受け取ることができる」という案内が入っていました。

条件は「デベロッパーセレクト」に該当している場合に適用されるみたいです。後になって知ったので現在調査中ですがKindleデバイスに対応していることが条件のようです。

デベロッパーセレクトは承認後に申請することも可能なようですのでベース基準をクリアしてからでも構わないかもしれません。

トラックバック - http://d.hatena.ne.jp/eryngii_mori/20141219

2014-12-16

ARToolKitでARを前に試しに作ってみた感じ。

15:36

ARのadventカレンダー16日目担当をしました再び登場のeryngii.mori(エリンギの森)です。


前にAndroid向けにARToolkitMMDライブラリを使ってARを実装した時のお話です。

なんとなく作って覚えている程度です。


何がどうなってこうなるっていう説明が全くできません。


なぜかというとソースコードライブラリが複雑なのと統一のドキュメントが全く無いので

完全にAndroid職人の勘で作ったためです。ゴメンちゃい。


先に言うとARToolkitMMDライブラリ(その他モデル・モーションデータ)が無いとARを作ることができません。ARToolkitはマーカーの位置座標を2次元の射影行列とかで返しますがその後にOpenGL用に変換してMMD投影する必要があります。


なので下記のようにいくつものライブラリ/ソースコード/データ入り混じっています。

・マーカー特定用のARToolkit

OpenGL用に座標を変換するソースコード

MMDを動かすためのライブラリ

MMDのモデルデータ/モーションデータ。(アニメキャラは著作権が云々)


↓作った動画

D


なのでソースコードを作った人が誰でどう承諾をとっていいのか

わかんなくなったのでGoogle Playに気軽にアップできませんでした。


あと、明確に断言しておきたいのはDisっている訳ではありません。(`・ω・´)キリッ


ちなみにARToolkitでつくられるARはマーカーARと言われる

QRコードみたいな感じの上にモデルを描画する方式です。

これだとHT-03Aの用な低スペックなスマートフォンでも軽快に動きますし特許的な問題も軽減されます。


一方の先日のUnityを使ったVuforiaなどはマーカレスARと呼ばれるもので

一般的な画像を特徴検出器などを複雑に使って実装されていて

ハイスペックなスマートフォン(最新式のNexus5とか)を必要とします。

Vuforiaは最新技術を使っているので特許などが複雑になるため普通はライセンスを結びます。

ちなみに無料ライセンスもあります。

トラックバック - http://d.hatena.ne.jp/eryngii_mori/20141216