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

ささみろぐ

チラシの裏

markdownでレポートを書く

日ごと夜ごとに積もり積もるレポート課題からなる圧倒的需要にお答えして、今日はmarkdownで爆速かつ高品質なレポートを書く環境を作っていきたいと思います。材料はこちら

全体のイメージとしては markdowntex ➔ pdf という順番で変換していく仕組みを作ります。

まずtex ➔ pdfです。dockerのlatexイメージはこれ

GitHub - thii/docker-platex: Docker image for pLaTeX

latex環境を作ろうとして失敗することはよくありますが、これはdockerで動くので失敗しません楽勝です。 githubのREADMEにもありますが、dockerをインストールしてdockerコマンドを使えるようにした後、

docker pull thii/platex
docker run --rm -v `pwd`:/latex thii/platex build example.tex

などのコマンドでtexファイルをビルドしてpdfファイルが得られます。

つぎにmarkdowntexという変換をするrubyスクリプトはこれ

md2tex.rb · GitHub

例えばmarkdownのほうに

あ


# はじめに
## はじめに1
### はじめに2

enumerate
- 粒子の速度から粒子を移動する
- 粒子の衝突規則から値のみを変更する
- 速度ベクトルの平均を求める
- 二次元平面に全てのベクトルをプロットする
\enumerate

![包含判定アルゴリズムのフローチャート](img/flow.png) w=9 l=aa

というふうに書くと、出力は

\documentclass[onecolumn, a4paper, dvipdfmx, 12pt]{jsarticle}
\usepackage{listings}
\usepackage{color}
%\usepackage{pdfcolparallel}
\usepackage{layout}
\usepackage[dvipdfmx]{graphicx}
\usepackage[margin=2cm, bottom=3cm, footskip=1.5cm]{geometry}
\usepackage{url}
\usepackage{amsmath}
\usepackage{amsfonts}
\usepackage{here}
\usepackage[caption=false]{subfig}

\begin{document}
  \definecolor{OliveGreen}{cmyk}{0.64,0,0.95,0.40}
  \definecolor{colFunc}{rgb}{1,0.07,0.54}
  \definecolor{CadetBlue}{cmyk}{0.62,0.57,0.23,0}
  \definecolor{Brown}{cmyk}{0,0.81,1,0.60}
  \definecolor{colID}{rgb}{0.63,0.44,0}

  \lstset{
      breaklines=true,%折り返し
  }

\title{あ}
\author{おなまえ}
\maketitle



\section{はじめに}
\subsection{はじめに1}
\subsubsection{はじめに2}

\begin{enumerate}
\item 粒子の速度から粒子を移動する
\item 粒子の衝突規則から値のみを変更する
\item 速度ベクトルの平均を求める
\item 二次元平面に全てのベクトルをプロットする
\end{enumerate}

\begin{figure}[H]
\centering
  \includegraphics[width=9.0cm]{./img/flow.png}
  \caption{包含判定アルゴリズムのフローチャート}
  \label{aa}
\end{figure}

\end{document}

これを先ほどのdockerコマンドでビルドして f:id:sasamijp:20170330215811p:plain 簡単な置き換えをしてるだけですが結構楽になりました。

最後にmarkdowntex ➔ pdfの流れをシェルスクリプトで自動化します。

ruby /path/to/main.rb report.md > main.tex
docker run --rm -v `pwd`:/latex thii/platex build main.tex
open main.pdf

3行だけですがこれで完了です。rubyスクリプトシェルスクリプトは自分で書いてみると自分好みにできて楽しいと思います。

p.s. 画像を貼り付けるとき、pngファイルに対応するxbbファイルが生成できないエラーが出ることがありますが

cd img
for f in *.png; do
  docker run --rm -v `pwd`:/latex thii/platex extractbb -x $f
done
cd ../

こういう感じに、platexイメージ内にあるextractbbコマンドを使って無理やり生成するワザがあります。

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