はてなブックマーク

こんにちは。最近、本業がプチ炎上しているたーせるです。どうしてこうなったし。 閑話休題。 今日のお便りコーナーは、筑波の学園都市で暮らす ぬっくんから。 @itercel なんかiPhoneアプリ作るのですか？自分はクラス間のデータの受け渡しでよくわからなくなって挫折しました… — ぬっさん (@linehat) 10月 6, 2012 @itercel たとえばあるビューから新しいビューを開いて、そこでなにかアクションを貰ってデータをその前のビューに渡すみたいなことです — ぬっさん (@linehat) 10月 6, 2012 というわけで、ぬっくんが挫折したポイントに僕も挑んでみようと思います（下図は、前画面から引き継いだデータを表示するイメージです）。 あ、言い忘れましたが、ぬっくんは GUI ビルダー（Story Board）がお嫌いらしい。 @itercel 友人から「よくわか

今日はちょっとしたパターン認識をやってみようと思います。あ、タイトルは釣りですよ。 とりあえずデモ動画をご覧ください。 こんな感じで、ある「特徴」を手掛かりにして正体をつきとめる処理は「パターン認識」と呼ばれており、文字認識などに応用されている技術です。 現在に至るまで、様々な認識手法（というか識別手法）が提案されていますが、今日はフィードフォワード型のニューラルネットワーク（3層パーセプトロン）にフォーカスを当てたいと思います。 【ニューラルネットワークの構成】 ここでは、ニューラルネットワークの理論的背景について、石井 健一郎ほか著『わかりやすいパターン認識』の 3 章に準拠して解説したいと思います。前提知識として、「パターン認識とは何か」という根本的な理解と、単純パーセプトロンを実装できる程度の能力があるとよいと思います。 まず、ニューロンと呼ばれる神経細胞の働きを、以下に示す閾値論

くろねこさんが、昨日のサンプルをさっそく fork して下さいました（→くろねこさんの記事）。 パーティクルの動きの改良に加え、ソースコードもリファクタリングされて品質が上がっています。さすが！ さてさて、今日は Processing を Twitter に組み合わせてへんなのを作りますよー∩( ・ω・)∩ なんか、テキスト領域に Twitter のユーザ名を入れると、フォローしているおともだちが3次元空間を漂うというなんとも愉快なスケッチです。 実は、ほとんど昨日のソースコードを流用しただけの手抜き更新というのは内緒だよ。 【Processing と GUI】 本日一発目のテーマは、Processing スケッチへの GUI コンポーネントの組み込みです。 とりあえず完成すると以下のようになります（少し見づらいですが、動画の下の方にある藍色の矩形がテキストフィールドです）。 Proces

今日はこういうものを作ります。たぶんきれいですね。 このスケッチは、いくつかのテクニックを組み合わせて作ります。 恐らく、Processing ユーザにとっては馴染みの薄いものもあるかと思いますので、今日はそれらをひとつひとつ紹介しつつ完成形に持っていこうと考えています。 【ビルボードをつくる】 ビルボードとは、3次元空間中のカメラに対して常に正面を向くような2次元オブジェクトの事です。一昔前のゲームなどではよく応用されていた技術です（今もかな）。これ自体が独立したひとつのトピックなので、まずはここから始めてみましょう。 以下のサンプルは、テキスト（Hello, World）をビルボード上に表示するというものです。 【理論の解説】 ビルボードは、以下のような同次形のモデル・ビュー変換行列 \begin{align} {}^{\Sigma_{\mathrm{View}}}\vect{M}_{

某所にて、『2 次元の Delaunay 分割は簡単だから別にいらない。むしろ 3 次元 Delaunay 分割のソースコードが欲しい』という要望を間接的に頂いたので、みんなが大好きな C++ で作ってみましたよー (´-ω-`) OpenProcessing に投稿した 3D Delaunay Triangulation よりも、若干ですがソースコードがブラッシュアップされているような気がします。 今回は 3D という事もあり、結果表示用のプログラムには DirectX 9 を使用しました。最新バージョンを使わなかったのは、Windows XP でも実行できるようにという配慮からです。あ、あくまで環境依存のプログラムは GUI 部分のみであり、アルゴリズム（Delaunay3d.h）は標準 C++ のみで実装しているため、他の環境にもそのまま移植できると思います。 使用方法は昨日の 2

P5 Advent Calendar 2011 3日目を担当しました。 本日のテーマは【かんたん！ 3Dアニメーション】です。みんな大好き Processing で、こんなものを作ってみました。 段ボール製ロボット“ダンボー”が、ただただ歩き続けるだけのシンプルな作品です。 【どうやって作ったの？】 この作品は、たくさんの直方体パーツを時間の経過とともに少しずつ動かして『歩いているように』見せています。 とはいえ、単純に一つひとつのパーツを無秩序に動かせばよいというわけではありません。 パーツ間の幾何構造をきちんと連携させるためにはそれなりの工夫が必要です。 そこでこの記事では、 3 次元アニメーションをそれっぽく見せるためのささやかなテクニックをご紹介していこうかと思います。 記事の前半で技術解説を適当にやって、後半で全ソースコードリストを公開します（ソースだけ欲しい方は記事の最後まで一

今日は、前回実装した Delaunay 分割のアルゴリズムをわかりやすく解説したいと思う。 まずは、前知識として 『詳解 OpenCV』 の記述をふたたび引用しよう。 外部三角形を作り、その頂点の 1 つを開始点とする（これにより、必ず外側の点から開始されることになる）。 内部の点を追加する。その後、すべての三角形の外接円を探索し、追加した点を含むような三角分割を削除する。 今削除した三角分割の外接円の内部にある、新しい点も含めて、グラフを三角分割し直す。 追加する点がなくなるまで、ステップ 2 に戻って繰り返す。 これをいかに解釈し、ソースコードに落とし込んでいくか。 計算幾何に興味がある方はもちろん、普段ネット上のソースをコピペして『動きさえすればそれでよい』と思っている方にも、この記事がプログラミングの楽しみを知るきっかけになれば幸いである（偉そうなこと言ってごめんなさいごめんなさい

【ミッション： Windows に Objective-C 開発環境を導入せよ】 iPhone アプリ開発者のしゃりんくんのお陰で、ぼくも Objective-C という言語に興味を持ってしまった。これは Apple 製品向け言語であり、iPhone や iPad 向けアプリのほぼ全てが Objective-C で開発されているという。 ぼくは Apple 製品に関してはあくまで一ユーザであり、決してディベロッパではない。そもそも Apple 製品向けアプリの開発には Mac が必要であり、いくらモチベーションが高くとも現状では難しいのだ。 しかし、今は金銭的事情によりすぐには無理でも、将来的には憧れの Mac を手に入れる日が来るかも知れない。 そこで、せいぜい Windows 上に何とかして Objective-C 環境を構築して、文法だけでも勉強してみようかなと思い立った。 Wind

一見、なんの変哲もない簡易的なパーティクルシステム。だけど、パーティクル用のテクスチャをプログラム中で動的に生成するのがちょっとしたオリジナリティだ。 ネットを適当に巡回すれば、似たようなものの作り方はいくらでも解説されているが、その殆どは予め画像処理ソフト等でテクスチャファイルを作成しておく必要がある。これを手間だと感じる人は意外に多い（と思う）。 しかし、ここでご紹介するサンプルは、そんなものをわざわざ作らなくてもソースコードをコピペするだけで動いてしまう。これを見ているよい子のみんなも手軽に試す事ができるぞ！ 【ソースコード】 申し訳ないことに、面倒だったのでパーティクルをクラスにまとめなかった。この程度なら差し支えあるまい。 int counter; // カウンタ PImage[] tex; // テクスチャ配列 PVector[] pos; // パーティクル位置ベクトル PV

【動機】 最近、C++ で効率的に GUI を構築する手段を探している。 ちなみに僕はそれまで、C/C++ で GUI を構築する場合には Windows API を直接叩いていた。『猫でもわかる』に洗脳された身としては、このスタイルこそが最もスタンダードな選択肢だと信じていたためである。 しかしコレ、他言語（というか Java）と比較して生産性が圧倒的に悪い。 RAD ツールの出来不出来以前の問題として、そもそも API の仕様が洗練されていないのだ。長い Windows の歴史の中で建て増しを繰り返すうちにすっかりカオスになってしまったらしい。 そして残念ながら、これをがんばって身につけるメリットを、僕はあまり見いだす事ができなかった。 ロジックの本質とは今ひとつ関係のないソースコードばかりが肥大化して、保守性や拡張性が著しく低下するのはどう考えても残念だし、そもそも人様が書いた GU

前々回のあらすじ： 砕け散るエフェクトを作った。 ……それはよいのだが、いかんせんやっつけ仕事だったため、砕け散る破片の形状生成がびっくりするほど適当だった。 もうちょっとうまく破片を作るために、今回は計算幾何のアルゴリズムの中でも比較的有名な Delaunay 分割に挑戦してみた。 まずはじめに、結果から示そう。 Delaunay 分割は、ランダムに与えられた点を結び、下のような無数の三角形を作る手法である。 さて。 Delaunay 三角分割法に関しては、Gary Bradski, Adrian Kaehler 著、松田 晃一 訳『詳解 OpenCV』にこんな解説がある。 Delaunay 三角分割法は、空間内の点を連結して三角形のグループにし、その三角形のすべての角に対する最小角度が最大になるようにするテクニックで、1934年に発明されました。　（中略）　与えられた任意の三角形の頂点

【ミッション： お買い物プログラムを作れ】 今日は、Objective-C のプロトコルを駆使して有限オートマトン（finite automaton）、別名：有限状態機械（finite state machine）を作りつつ、オブジェクト指向プログラミングに慣れていこうと思う。 とは言ってもそれほど難しいものではなく、今回作るのは、ユーザの入力によって以下のように状態が遷移する、簡単な『お買い物プログラム』だ。 最初に断っておくと、状態遷移を管理するプログラムの実装自体は、特別なテクニックが無くとも（一応）可能である。 上記の状態遷移を直線的に列挙すると、おおむね以下の通り。 1. 『いらっしゃいませ』　A. 買いにきた（→2）　B. 売りにきた（→9） 2. 『お買い上げですね』　A. 武器（→3）　B. 防具（→6） 3. 『どれにいたしますか？』　A. 剣（→4）　B. 銃（→5）

Webカメラで撮った数字を認識しているところ。背景のコマンドプロンプトには識別した数値が表示されている。 その他のウィンドウ ／ 左:カメラの映像、右上:2値化してトリミングした画像、右下:対応するテンプレート画像。 一応、プログラム自体はできたのだけど、精度が悪過ぎて到底使い物にならなかった。 恥の記録として残しておく事にする。 プログラムを書く前に、0 ～ 9 の数字の「お手本」となる画像を用意する必要がある。それぞれに、0.jpg、1.jpg、…、9.jpg という連番を振っておく。 これをソースと同じフォルダに入れて、以下のプログラムを書いてみた。 #include<cv.h> #include<cxcore.h> #include<highgui.h> #include<climits> #include<iostream> #include<string> #pragma co

【同時上映： ユーザー検出でバグってみた】 今日は、世界で初めて Kinect プログラミングを解説した技術書の発売日である。 ぼくはこれがすごく気になり、予約開始とともに Amazon に注文をして発売日を今か今かと待ちわびていたほどだった。 しかし突如として Amazon は予約を一方的にキャンセル。さらに「この本はお取り扱いできません」状態が今なお続いている。 仕方なくジュンク堂書店に行ってみたところ、出来たての『Kinect センサープログラミング』が折よく品出し用のワゴンに載っていたので早速ゲットして意気揚々と帰途についた。 今までは、奥行き情報から 3 次元再構成を行う話をしてきたので、そろそろ心機一転モーションキャプチャ的な事もやりたいなぁと思い、『3.2.7 ユーザーの検出をする（p.117）』を試してみる事にした。 これは、カメラに写った人間を識別し、色分けして表示すると

前回、形状マッチングで文字認識をさせようとして見事に失敗した。 しょうがないので、偉大な誰かが作った文字認識エンジンをありがたく使わせていただく事に。 そんなこんなで本日作ったガラクタは、以下のようなカメラ映像から、赤枠内の文字を認識してくれるというシロモノだよ。 こんなふうに認識してくれる。 これを作るためにいろいろ探していたら、Tesseract-OCR という文字認識エンジンを見つけたので、さっそくダウンロード。 Windows 環境なら、tesseract-ocr-setup-3.00.exe あたりを落とせば幸せになれると思う。 これを、C:\Program Files\Tesseract-OCR というフォルダにインストール。 使い方は、認識させたい画像を tiff 形式（たとえば tmp.tiff ）で保存して、コマンドラインに tesseract.exe tmp.tiff

【ミッション： OpenCVでNiSimpleViewerもどきを作ろう】 前回、Kinect の深度データと RGB 画像を OpenCV の IplImage で取得する実験をしてみた。 この調子で、OpenNI Tips に載っている『デプスと画像を重ね合わせするデモのサンプルコード』を試してみよう。 …って、あれ？ ずれていてうまく重ならない。なにこれダメじゃん。 どうやら、深度センサとカメラの位置が微妙にずれているため、単なるオーバレイ表示にしただけではダメらしい。 ところが、OpenNI に付属の NiSimpleViewer というサンプルでは、見事に深度データと画像がぴたっと重なった結果が得られている。 幸い、NiSimpleViewer のソースコードも同梱されていたので、深追いする事ができそうだ。 このサンプルは OpenGL 向けだが、解読してみる価値はある。 複雑な