読者です 読者をやめる 読者になる 読者になる

ささみろぐ

チラシの裏

Krile Advent Calendar 2016 21日目

www.adventar.org

今日はフリップフラッパーズというアニメについて紹介します。毎週観てる人も多いんじゃないでしょうか?

TVアニメ「フリップフラッパーズ」公式サイト

ではあらすじをみてみましょう。

あなたには、世界はどう見えているんだろう 扉をひらくカギを手にした二人のヒロイン、パピカとココナ。 少女と少女は出会い、そして別の時間、 異なる空間「ピュアイリュージョン」での冒険が始まる。 願いを叶えてくれるという”ミミの欠片“を求め、 ピュアイリュージョンを巡る二人の前に様々な困難が立ちふさがる。 二人に危機が迫ったとき“ミミの欠片”が輝き、 そして彼女たちは変身するのだった。 STORY | TVアニメ「フリップフラッパーズ」公式サイト

ざっくり言えば異世界バトルものです。二人のヒロインの気持ちがシンクロすることで強い力が生まれ、全てが解決する....。素晴らしいですね。これはもう完全に百合で、 Krile Advent Calendar 2016 7日目 - NTTrfでした。 の分類で言えば精神的百合にあたります。

手書きイラストで説明します。 f:id:sasamijp:20161220230649p:plain 基本の型を導入しました。ヒロインの性格がそれぞれ「明るく活発」「慎重」であることから、この関係は自明です。性格の違う二人が惹かれあうストーリー、完全に百合です。

f:id:sasamijp:20161220225622p:plain RSフリップフロップ回路とその真理値表です。この回路には前の状態を保持するという機能があります。以前に入力された値に依存して出力が決まる回路、完全に順序回路です。

f:id:sasamijp:20161221182708p:plain RSフリップフロップ回路を写像と捉えます。以前の入力値に依存する性質はこの際無視します。

f:id:sasamijp:20161221212314p:plain:w300

つぎに色とビットの一対一対応 { \displaystyle \phi } を準備します。

f:id:sasamijp:20161221212715p:plain 組み合わせるとこうです。変身すると髪の色が入れ替わります。

f:id:sasamijp:20161221213858p:plain 異世界でしか変身ができないんですね。

f:id:sasamijp:20161221214133p:plain 図からフリップフラッピング演算が導かれます。それはそうとして本当にいいアニメなのでぜひ観てください。

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

この記事は www.adventar.org

の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

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

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

これはすごい

これもいい

これはかなりすごい

これはつらい

これはすごくいい

以上だ!

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

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

github.com

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

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

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

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

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

  1. 画像に対して大津の2値化をして背景と手を分離

  2. ラプラシアンフィルタでエッジを検出

  3. エッジを線をなす順番に並び替える

  4. 線から食器輪郭特徴量を抽出

  5. Bhattacharyya距離とk-近傍法を使って学習データからクラス分類

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

f:id:sasamijp:20160730220016p:plain

Bhattacharyya距離で各ヒストグラムを比較すると重心からの距離ヒストグラムについての距離\( d_r \)と接線方向ヒストグラムについての距離 \( d_\theta \)がとれるが、これらを

{ \displaystyle
d = wd_r+ (1-w)d_\theta    (0 \leq w \leq 1)
}

として線形結合して最終的な画像間の距離 \( d \) を決める。

画像から輪郭線を並び替えたところまでを出力するスクリプト:

gist.github.com

輪郭線から特徴量を抽出してk近傍でクラス分類して識別成功率をみるスクリプト:

gist.github.com

実験

PRMUのデータセットを学習データにして自分で撮った写真19枚を分類してみて成功率をみる。

自分で撮った写真:

f:id:sasamijp:20160704220926j:plain:w100 f:id:sasamijp:20160710123426j:plain:w100 f:id:sasamijp:20160710123433j:plain:w100

PRMUのデータセット(http://www.ccm.media.kyoto-u.ac.jp/alcon2011/):

f:id:sasamijp:20160730212704p:plain:w100 f:id:sasamijp:20160730212620p:plain:w100 f:id:sasamijp:20160730212643p:plain:w100

PRMUのデータセットは12枚を90度ずつ回転させて48枚分の学習データにした。k近傍はk=3で固定して、輪郭点の数dを10から150まで10刻み、重心からの正規化距離と接線方向の距離の重みw(どちらのヒストグラムを比較においてより重視するかの値)は0から1まで0.05刻みで振った。

f:id:sasamijp:20160730213600p:plain

やはり輪郭点の数が多いほうが成功率が高い傾向がある。グーチョキパーでヒストグラムの差異がより大きくなるからだと思う。あと、重心からの距離の割合が大きくなると成功率がやたら下がる傾向がある。これは重心からの正規化距離だけだとグーとパーの区別がつかなくなることから起こっている。

画像から抽出した輪郭点を線をなす順番に並び替えるアルゴリズムがオリジナルなせいで1枚2分ぐらいかかる。リアルタイムに処理できるようにしたい。

おすしの世界のだいぼうけん

さあみんな!ぼくとおすしの世界を見に行こう! f:id:sasamijp:20151129184236p:plain うわああああ!!!!!!!!!!!!!!! f:id:sasamijp:20151129184337p:plain

天海春香さんと会話したい 20

f:id:sasamijp:20151126233453p:plain

グラフの出し方があまりよくない気がするが、これは返答発言に含まれる名詞数を表したものである。

f:id:sasamijp:20151126234923p:plain

返答発言の名詞数が10を超えたものを抽出した。こういった感じの返答は往々にして「変な返答」になってしまう。一定の基準でコーパスからこういったセットを取り除かなければならない。

名詞数に制約を設けたところ、28214 → 16726 と減少した。まあまだ使える数あるからいいでしょう