2016-12-18

jQueryで投げやりなアニメーション

の12/19の記事です

はじめに

amaoto_live http://www2121uo.sakura.ne.jp/amaoto_live/ というサービスを作ったときの話を書こうと思います。

一番言いたいこと

amaoto_liveは気象センサの値から雨とか風の音を再現するサービスですが、そんなことは割とどうでもよくて、 f:id:sasamijp:20161218154850g:plain トップページの、マウスオーバーしたらニュッとセンサの情報が出て来るアニメーションがかっこいいので、これだけについて解説していこうと思います。

ライブラリ

DOMの透明度を変更したりマウスオーバーのイベントをとったりするのにjQueryを使います。 jquery.com

文字自体ををパタパタ表示させていくのにshuffleLetters.jsを使います。これを使うだけでSF感が出ます。 tutorialzine.com

アルゴリズム

センサの情報を表示するDOMの透明度が元々1.0に設定されていて、マウスオーバーイベントが発火したら透明度を0.0にします。 f:id:sasamijp:20161218162654g:plain ソースコードの一部をみてみると下のような感じになっていて、

gist.github.com

hover以下の処理がマウスオーバーで実行されます。ものすごく汚い書き方ですが、HTMLの仕組みだとこれだけで一応動く仕組みができて楽です。

おわりに

jQueryで雑にアニメーションが書けるのが楽しいぜ！という話でした。Webの仕組みで動いてくれると他の計算ロジックと連携して色々できてとてもいいです。ちなみに同じような仕組みでこういうのも作れます。 http://www2121uo.sakura.ne.jp/industrial/ f:id:sasamijp:20161218163513g:plain

産業革命の風を感じる...

2016-11-19

最近読んだ本を紹介するぜ！

読んだ本最近

これはすごい

【TVアニメ化】響け! ユーフォニアム北宇治高校吹奏楽部へようこそ (宝島社文庫)

作者: 武田綾乃
出版社/メーカー: 宝島社
発売日: 2013/12/05
メディア: 文庫
この商品を含むブログ (21件) を見る

これもいい

【TVアニメ化】響け! ユーフォニアム 2 北宇治高校吹奏楽部のいちばん熱い夏 (宝島社文庫)

作者: 武田綾乃
出版社/メーカー: 宝島社
発売日: 2015/03/05
メディア: 文庫
この商品を含むブログ (6件) を見る

これはかなりすごい

響け! ユーフォニアム 3 北宇治高校吹奏楽部、最大の危機 (宝島社文庫)

作者: 武田綾乃
出版社/メーカー: 宝島社
発売日: 2015/04/04
メディア: 文庫
この商品を含むブログ (7件) を見る

これはつらい

【TVアニメ化】響け! ユーフォニアム北宇治高校吹奏楽部のヒミツの話 (宝島社文庫)

作者: 武田綾乃
出版社/メーカー: 宝島社
発売日: 2015/05/25
メディア: 文庫
この商品を含むブログ (10件) を見る

これはすごくいい

響け! ユーフォニアム北宇治高校の吹奏楽部日誌 (宝島社文庫)

作者: 武田綾乃
出版社/メーカー: 宝島社
発売日: 2016/10/06
メディア: 文庫
この商品を含むブログを見る

以上だ！

2016-07-30

食器輪郭特徴量でじゃんけん画像識別

作ってみた

OpenCV + Pythonでじゃんけん画像の識別をやった。

github.com

画像から抽出した特徴量を比較してグーチョキパーに分類するという流れで、特徴量は食器輪郭特徴量を手の輪郭に対してほぼそのまま使った。食器輪郭特徴量の論文は

http://www.topic.ad.jp/sice/papers/236/236-12.pdf

食器輪郭特徴量はものの輪郭に対して重心からの距離と接線方向のヒストグラムをとる方法で、食器の分類に使える。図は食器輪郭特徴量の論文から引用

f:id:sasamijp:20160729221321p:plain:w300

じゃんけんの識別では、画像からラベルまでは

画像に対して大津の2値化をして背景と手を分離
ラプラシアンフィルタでエッジを検出
エッジを線をなす順番に並び替える
線から食器輪郭特徴量を抽出
Bhattacharyya距離とk-近傍法を使って学習データからクラス分類

みたいな流れで処理する。特徴量は大体下の図の感じのがとれる。重心からの距離は全ての輪郭点についての重心からの距離を$ \bf r $として$ \bf r \gets \frac{r}{\max({\bf r})} $と正規化するので0から1までの範囲で収まる。食器輪郭特徴量の論文ではカメラと食器の距離が全ての写真で一定なことを仮定していた(多分)ので手画像では正規化が必要になった。

f:id:sasamijp:20160730220016p:plain