2011/12/30

Javaでできるだけ安全にデータを直列化するためのてきとう備忘録

現在絶賛放置中の Web サイトを今後の発信基地として再開発したいと思い立った事がきっかけで、最近は Web サイトの簡易更新支援ツールの開発を考えている。

簡単な HTML ジェネレータと FTP クライアントを一緒にしたようなものを作りたい。

特に、FTP クライアントを作る際には、ユーザビリティのためにアカウント情報(ユーザ名とかパスワードとか)をローカルに保存しておき、できるだけワンタッチでサーバにアクセスできる仕様にしたいなと考えている。

データのセーブとロードは至るところで使いそうだし、今日はそこらへんの実装をステップバイステップで書き残しておこうと思う。

あ、この記事のサンプルコードには FTP 接続の実装例は含まれていないので、そういう内容を期待している方にはごめんなさい。あくまでデータのアーカイブに関する話題に絞ってもそれなりの分量になってしまったので……。

2011/12/28

近況報告

先日、研究室の忘年会に参加してきた。

仮配属の3年生に、『興味深い研究テーマとかはあるかな?』と訊いたところ、『たーせるさんのテーマは面白いと思います』と言ってもらえた。社交辞令だとは思うけど、なかなか嬉しいものだ。



現在は、学位論文の執筆・校訂やらプレゼン用のスライドづくりやらで、猫の手も借りたいほど忙しい状態だが、それほど焦る気持ちはない。

同時進行で複数の課題を片付ける事が、昔ほど苦手ではなくなったのはよい事だと思う。



うちの B4 で気がかりなのが、理屈を知らずに人の成果に乗っかる研究姿勢が治らないという事。 しかもそれを抜いてしまうと、成果といえるほどの成果が残らないのもまた問題。

既存技術を組み合わせるにしても、誰もが思いつくような組み合わせ方では何の面白みも感じない。 『そうきたか!』と思わせる意外性の一つでもあればよいのだが。



先日、ついに炭酸飲料を自作できる夢のような道具を買った。コーラとかが作れる。最初は炭酸を吹きこぼしたり、味の加減を失敗したりと色々あったが、今はなんとか上手にできるようになった。

買い物に行くたびに重たいペットボトルを持って帰らなくてよくなった事と、ペットボトルゴミが減った事は個人的にかなり幸せな事である。



ネットワークスペシャリストに合格したからと言って、その日から何かが変わるわけではない。

今にして思えば、資格自体は別にネットワークである必要はなかった。とにかく“苦手な状態からスタートして、短期間でその分野の最難関資格を取った”という事実が自分の中で大きな自信になった。



今はやりたい事が溢れている状態。

2011/12/21

これなら受かる! 『ネスペ22 (β版)』

高度情報処理技術者試験の参考書選びは難しい――。

IT パスポートや基本情報技術者のような万人向けの入門資格では、懇切丁寧な解説やかわいいイラストをふんだんに盛り込んだやさしい参考書が充実しており、受験者は自分にあった教材を選ぶ事ができます。

しかし、試験のレベルが高度化するにつれて、こうしたとっつきやすい参考書が減っていき、よく言えば質実剛健、悪く言えば無味乾燥な参考書ばかりになっていきます。受験層を考えれば致し方のない事かも知れませんが、正直、僕には少々きつい。

というわけで、前置きが長くなりましたが、久しぶりの書評ということで、本日は「本物のネットワークスペシャリストになるための最も詳しい過去問解説と合格のコツ」という副題のついた『ネスペ』シリーズをご紹介したいと思います。

『ネスペ22 β版』

2011/12/16

ネットワークスペシャリスト試験に合格しました

応援してくださった皆さん、本当にありがとうございました。




【1月5日追記】

合格証書が届きました。応用情報技術者の証書と併せて。

2011/12/03

Processingでかんたん3Dアニメーション

P5 Advent Calendar 2011 3日目を担当しました。

本日のテーマは【かんたん! 3Dアニメーション】です。みんな大好き Processing で、こんなものを作ってみました。

段ボール製ロボット“ダンボー”が、ただただ歩き続けるだけのシンプルな作品です。



【どうやって作ったの?】

この作品は、たくさんの直方体パーツを時間の経過とともに少しずつ動かして『歩いているように』見せています。

とはいえ、単純に一つひとつのパーツを無秩序に動かせばよいというわけではありません。 パーツ間の幾何構造をきちんと連携させるためにはそれなりの工夫が必要です。

そこでこの記事では、 3 次元アニメーションをそれっぽく見せるためのささやかなテクニックをご紹介していこうかと思います。

記事の前半で技術解説を適当にやって、後半で全ソースコードリストを公開します(ソースだけ欲しい方は記事の最後まで一気にスクロールして下さい)。

技術解説は、3 次元を扱う上で基礎中の基礎となるお話から始まり、座標変換の話題からデータ構造の考察へと話が繋がります。高校レベルの簡単なベクトルや行列の概念を知っている方を想定していますが、本文中には数式が登場しませんので、理系以外の方々にもご理解いただけるかと思います。モーションアニメに限らず、考えを広げるヒントになるかも知れません。

また、OpenProcessing の当該ページからはプロジェクトを一括してダウンロードして頂けます。

2011/11/21

C++ で 3 次元 Delaunay 分割

某所にて、『2 次元の Delaunay 分割は簡単だから別にいらない。むしろ 3 次元 Delaunay 分割のソースコードが欲しい』という要望を間接的に頂いたので、みんなが大好きな C++ で作ってみましたよー (´-ω-`)
OpenProcessing に投稿した 3D Delaunay Triangulation よりも、若干ですがソースコードがブラッシュアップされているような気がします。



今回は 3D という事もあり、結果表示用のプログラムには DirectX 9 を使用しました。最新バージョンを使わなかったのは、Windows XP でも実行できるようにという配慮からです。あ、あくまで環境依存のプログラムは GUI 部分のみであり、アルゴリズム(Delaunay3d.h)は標準 C++ のみで実装しているため、他の環境にもそのまま移植できると思います。

使用方法は昨日の 2 次元 Delaunay 分割とほぼ同じで、以下の通りです(Main.cpp のコールバック関数、および render() 関数に実際のサンプルがあります)。

(※ただし、2 次元と 3 次元のモジュールを共存させようとすると、いたるところで名前が衝突するので注意)
  1. 頂点セット(std::set<Tercel::Vector> オブジェクト)を宣言します。
  2. 先ほどの頂点セットに、適当な頂点オブジェクトを格納します。
  3. 三角形セット(std::set<Tercel::Triangle> オブジェクト)を宣言します。
  4. Tercel::Delaunay3d::getDelaunayTriangles() 関数を呼びます。
このとき、getDelaunayTriangles() の第一引数に頂点セットの『参照』を、第2引数には三角形セットの『ポインタ』を渡します。

例によって、三角形(Tercel::Triangle)は、頂点オブジェクトのポインタを保持していますので、頂点セットから要素を削除した場合(あるいはメモリ上の位置が変わるような事が起きた場合)には、三角形の頂点は不正なポインタになってしまいます。

ご注意ください。

2011/11/20

続: C++ で Delaunay 分割

昨日、C++ で Delaunay 分割を実装しました。

で。昨日はデータ構造に線形リスト(std::list)のみを用いており、コーディングしやすい代わりにあまり効率的とはいえない実装になっていました。

今回は、リストの代わりにセット(std::set)を用いる事で、内部処理の効率化を図りました。セットの実体は二分探索木(おそらくは赤黒木)であり、『重複する要素を持たない』『要素の探索が対数時間』というなかなかおいしいデータ構造のため、昨日の段階でネックになっていた冗長な重複判定処理がかなり省かれています。

ではなぜ最初からそれを使わなかったかというと、ずばり std::set の使い方をよく知らなかったからです。……恥ずかしい。

前述の通り、セットの内部構造は二分探索木ですので、セットに格納する要素同士の大小関係を判定できなくてはなりません。単純に比較できない『頂点』や『三角形』の大小関係をどう定義するかで悩みましたが、結局辞書式順序で順序づける事にしました(Tercel::VectorTercel::Triangle 構造体の operator< が、比較関数として機能します)。

ソースコードは以下。

2011/11/19

C++ で Delaunay 分割(ただし2次元)

ちょっと学業の方が忙しくなってしまい、ウェブログを放置していました……。

忘れていたわけじゃないんだよ。ただちょっとモチベーションが足りなかっただけ。

今日は、某所(CG 系の研究室)で需要がありそうだったので、以前 Processing で書いていた Delaunay 分割を C++ で実装し直してみる事にしました。
ただし、C++ はものすごく苦手なので、ちょっと残念なソースになってしまっています。 ⇒ 11月20日追記:もうちょっと内部実装がマシになりました

ソースコード上部の「view plain」という文字をクリックするとコピペ用の窓が出ますので、使いたい方はご自由にどうぞ。

2011/11/05

Processing : P3D モードのヘンなクセ

現行バージョンの Processing には、ソフトウェアレンダリングで 3D を描画できる『P3D モード』が備わっています。

これは、3次元的な情報を視覚化する際にたいへん便利なのですが、実はちょっとした癖もあるため、うまく使うにはそれなりのコツが必要となってきます。

というわけで今日は、P3D モードで遭遇しがちな不具合と、その回避策を紹介したいと思います。



【地面のグリッド表示がおかしくなる現象】

以下のように、地面をグリッドで描画したい場合があったとしましょう。


素直にコードを書くとこんな感じになります(展開してご覧ください)。

void setup() {
  size(800, 600, P3D);
}

void draw() {
  // カメラを適当に設定
  camera(0, -100, 500, 0, 0, 0, 0, 1, 0);
  
  background(255);

  /* ====================== */
  /* 地面の描画(てきとう) */
  /* ====================== */
  stroke(100);
  noFill();  // ←塗りつぶさない
  
  final int step = 20;  
  for(int i = -width; i < width; i += step) {
    beginShape(QUAD_STRIP);
    for(int j = -width; j <= width; j += step) {
      vertex(i, 0, j);
      vertex(i + step, 0, j);
    }
    endShape();
  }
}

上記のプログラムは、いっけん正しく動きそうですが、いざ実行してみるとこんなふうにぶっ飛んだ結果になってしまいます。


なぜこんな事になったのでしょうか。

2011/10/24

いまさらVisual Basic(オブジェクト指向篇)

本日は Visual Basic のオブジェクト指向篇です。

とはいえ、今回のお話はどちらかというと Java や C++ の学習によるシナジー効果で身に付けた知識だったりします。『VB しか必要ないから VB だけがんばる』という硬直した方針では、なかなか前に進めないものだなぁと思ったり思わなかったり。

そんなわけで本日は、GoF のデザインパターンの中から個人的に気に入っているものを独断と偏見でチョイスして、実際のソースコードとともにご紹介したいと思います。



【Singleton パターン】

まずは、理解しやすく実装も容易な Singleton パターンからご紹介しましょう。

これは、プログラム内に存在するオブジェクトが 1 つだけである事を保証するための仕組みです。一体それが何の役に立つのでしょうか。その答えの一つが『ゲームプログラマになる前に覚えておきたい技術』の p.183 で述べられていますので、当該箇所を引用します。
シングルトンクラスの目的は以下のようにまとめられる。
  • 1. グローバル変数の危険さを軽減する
  • 2. グローバル変数と同じように使えるようにする
要するに、安全性を高めたグローバル変数のことである。
……だそうです。

実際には、オブジェクトを生成する際に New が実行されるたび、(新たなオブジェクトを格納するための)メモリ領域が逐一確保されます。そのため、このままでは『オブジェクトが 1 つである事』を保証できません。

Singleton クラスでは、コンストラクタを Private にする事によって、外側から New の実行を禁止します。Singleton クラスは、内部的に静的な唯一の自己参照 _instance を持ち、外部から Singleton オブジェクトを要求された場合は、その _instance を返却します。

以下に実装例を示します(展開してご覧ください)。

'  ========================================
'                 Singleton
'  ========================================


' -----------------------------------------
' Singletonクラス
Public Class Singleton

    Private Shared _instance As Singleton = New Singleton()

    ' インスタンス取得
    Public Shared ReadOnly Property Instance() As Singleton
        Get
            Return _instance
        End Get
    End Property

    Private Sub New()
        Console.WriteLine("オブジェクトを生成しました")
    End Sub

End Class

' -----------------------------------------


' テスト用モジュール
Module Module1
    Sub main()
        ' Singleton であるオブジェクトの取得
        Dim singleton1 = Singleton.Instance
        Dim singleton2 = Singleton.Instance

        If singleton1 Is singleton2 Then
            Console.WriteLine("同じオブジェクトです")
        Else
            Console.WriteLine("異なるオブジェクトです")
        End If

    End Sub
End Module

実行すると、コンストラクタが 1 回しか実行されていない事、および main 内の singleton1 と singleton2 が同じオブジェクトを共有している事が分かります。

Singleton クラスがデータを適切にカプセル化していれば、前述の通り安全なグローバル変数として使用する事ができますし、また、New が重たいオブジェクトを使い回す際にも効果的でしょう。

2011/10/23

いまさらVisual Basic(手続き指向篇)

今でこそ『MacBook がほしい』と口癖のように言っている僕ですが、実はビルゲイツとマイクロソフトに魂を売り渡しており、少年期は Visual Basic とともに過ごしておりました。

そんな事はどうでもよいのですが、このたび情報処理技術者試験も終わって気持ちに少し余裕が生まれた事ですし、原点回帰という事で、ふたたび Visual Basic を動かしてみようと思い立ったわけです。

折しも、僕の周りに『将来的に仕事で使うかも知れない』という方がいらっしゃるようなので、その方の為にもなればと簡単に VB の雰囲気をまとめてみる事にしました。


2011/10/21

Javaのよくわからない仕様

ちょっと落とし穴にはまったので備忘録。Java よりもテストコードが簡潔に書ける Processing で検証します。

まず、こちらをご覧ください。
Boolean b = Boolean.TRUE;  // TRUEで初期化した後に、
b = Boolean.FALSE;         // FALSEを代入する

なんの変哲もない、フラグの切り替えです。もちろんこれは、問題なく実行できます。

ところがこれ、List などのコレクションに集成すると、途端におかしくなる事に気付きました。

List<Boolean> boolList = new ArrayList<Boolean>();  // Booleanのリスト

  for(int i = 0; i < 10; i++) {
    boolList.add(Boolean.TRUE);     // 要素の初期化
  }

  boolList.get(0) = Boolean.FALSE;  // 代入(ここでエラー)
//~~~~~~~~~~~~~~~

これを実行すると、こんなふうに怒られちゃいます。
The left-hand side of an assignment must be a variable
えー、なんでー。

これじゃあフラグを切り替えられないじゃん!!

※ 余談ですが、『フラグをリストに格納する』というシチュエーションは、グラフアルゴリズムなどで活躍します。



実は、Boolean に限らず、コレクションの get() メソッドで取得したオブジェクトに代入しようとすると上記の現象が発生するようです。……にも拘わらず、今までこの問題を意識した事はありませんでした。

というのも、普通は、
Hoge h = hogeList.get(i);
のように、一旦 Hoge 型の変数 h にオブジェクトを代入して、h 経由でメソッドを呼んだりフィールドをいじったりできるため、『リストの特定の要素を全く別のオブジェクトで上書きしたい』という発想自体がそもそも無かったわけです。

ところが、Boolean クラスはたいへん素性の悪いもので、Java の公式ドキュメントを見ても状態を変更するメソッドが見当たりません。

そこで、スイッチしたいフラグを List#get() メソッドで取ってきて、そこへおニューのオブジェクトを代入しようという力技を思いついたのですが、まぁ前述の通りうまく行かず途方に暮れた次第であります。



【解決篇】

あれこれ悩んで Java が嫌いになりかけた頃、試しに List#set() メソッドを使ってみたら超呆気なく解決しました。なんだこれ。

List<Boolean> boolList = new ArrayList<Boolean>();  // Booleanのリスト

for(int i = 0; i < 10; i++) {
  boolList.add(Boolean.TRUE);     // 要素の初期化
}
  
boolList.set(0, Boolean.FALSE);  // 置換(これでうまくいく)

やったね。ねむい。

2011/10/18

線分の交叉判定(てきとう)

今日のテーマは、平面上における線分の交叉性を判定する計算幾何の問題です。

地味な上にそれほど大した事はない(というかつまらない)なのですが、備忘録的な意味で残しておきます。

以下の動画は、マウスで描画したストロークのうち、交叉している領域を(半リアルタイムで)見つけ出してマーキングする様子のデモです。交叉している領域は、で囲われます。



今回は、2線分の交点座標を求めず、単に交叉性のみを判定する事によって、処理を少しだけ軽くしてある辺りがチャームポイント。動画の 1 分前後からはワンストロークにおける自分自身との交叉判定も可能である事を示しています。

最適化のために頑張った割には、デモが地味すぎて悲しいので今日はこの辺で……。

2011/10/17

Processingアプリケーションでファイルのドラッグ&ドロップをサポート

秋の情報処理技術者試験も終わり、まったりと Twitter を巡回していたところ、『Processing で作成したアプリケーションウィンドウにファイルのドラッグ & ドロップ機能をサポートしたい』と考えている方を(今さらながら)発見しました。


こんにちは!Processingって、ドラッグ&ドロップを実現するコードないですよね?今後でる可能性ってあるんでしょうか… 直感的な操作を実装したい場合、D&Dは必須だと思うんです。そういう情報ってご存知ですか?2011年9月16日 10:49 via web

要するに、以下の図のように、マウスのワンジェスチャでファイルを読み込めたら便利じゃね?っていう話だと思います。


基本的には、2月7日の日記に書いた方針で実現可能なのですが、Processing の(言語的な)制約のため、当該日記のソースコードにちょっと手を加える必要があります。

2月7日の日記では、簡単のためメインクラスそのものが DropTargetListener を実装していましたが、Processing の場合はウィンドウを作成するクラス(PApplet)が隠蔽されてしまっており、(DropTargetListener に限らず)インタフェースを実装する事が事実上不可能になっているためです。

そこで、Processing 用のサンプルを超適当に作りました。早い話が手抜き更新ですが、ソースコードをコピペするだけでそれなりに動くように調整してあるのでちょっと便利です。

2011/10/16

ネットワークスペシャリストを受けてきました

本日、ネットワークスペシャリストを受けてきました。
 
準備不足を痛感させられた試験でしたが、それでも最後の最後まで力を尽くす事ができたと思います。



突然ですが…

【恐怖の午前II自己採点コーナー】

というわけで、現時点で解答が公表されている午前 II の成績を調べてみました。

合格ラインとされる正答率は 60% ですが、僕はギリギリの 64% あと 2 問不正解ならば午前で足切りされているところでした。

※ 実際の正答率は 68% でした。マークした答えをメモする際に写し間違えてしまったのでしょうか。

しかし、問題は午後 I なのです。



午後 I は、解答に全く自信がない。体感的には、たとえ部分点をかき集めても合格点に達しないのではないかというギリギリの手応え。

ネットワークスペシャリスト合格者のほとんどが及第点すれすれでパスしている事を考えると、やはり一筋縄ではいかない試験なのでしょう。

僕にとっても、これまでとは比べ物にならない難しさでした。

ですが、午後 II は意外にも 6 割を超えた自信があります。 問題文を読んだときに、『これ以外考えられない』という解答が頭に浮かぶ事が多かったです。

ですから、午後 I さえ突破できれば、合格はかなり近いのではないかと考えます。

たとえ今回落っこちたとしても、午後 I を重点的に対策して再挑戦します。まずは取り急ぎご報告まで。

2011/10/06

追悼 - Steve Jobs

2011年10月5日、Apple の元最高経営責任者 Steve Jobs が逝去した。

先日の Apple Special Event October 2011 にて iPhone 4S の発表があった直後というタイミングなだけあって、Jobs は史上最高の iPhone を見届けた上で天国へと旅立ったのだろうかと想いを馳せずにはいられない。

私は決して“信者”と呼ばれるほど Apple に傾倒していた訳ではない。 そんな私の目から見ても、彼の遺した功績はあまりにも偉大であり、今は耐え難い喪失感に打ち拉がれている。

最後に、“革新的な魔法” を私に掛けてくれた Jobs には深い哀悼と謝意を表すとともに、これからの Apple には、常に情報家電に変革をもたらし続ける存在であって欲しいと切に願うばかりである。

R.I.P.

2011/09/27

頂点の可視性判定(同時上映:Processingで行列操作)

3次元情報が与えられた頂点集合のうち、実際にレンダリングする際にカメラに写るものとそうでないものを判定する実験です。

通常、3D における可視性の判定は非常に重たい問題なのですが、今回は単に、『頂点とカメラの間に遮蔽物が存在するか否か』という簡単な問題だけを扱う事にしました。

テストデータはこんなの(↓)。四角形の板がたくさんあり、それぞれの頂点は 3 次元世界座標が既知であるとします

 

愚直な方法ではありますが、判定したい頂点とカメラ視点とを結ぶ線分が、任意のポリゴンと交差するか否かで可視性を決定できます。

通常、より手前のポリゴンに覆い隠されてしまう頂点は、カメラに写りません。

Processingでお絵描きテクスチャマッピング

ご無沙汰でした。

夏休みぼけが酷いので、ちょっとリハビリがてら、『ペイントソフトの要領で、テクスチャをお絵描きできるサンプル』を作ってみました。


2011/09/16

ウニと仲良く

ウニ本 7 章。

遂に、プレイヤーキャラクタに命が吹き込まれます。

キャラクタのモデルや歩行・ジャンプといった標準的なモーションはデフォルトで用意されているので、それらを適当に配置するだけで簡易的なウォークスルーが完成します。
手乗り状態のおじさん。シュール。

実行すると、こんな感じ。
不気味な空き地を我が物顔で闊歩するおじさん。手には凶器。
なんか雰囲気がバイオハザードですが、そこは気にしない。

2011/09/14

OpenCV で Tilt Shift もどき

ある日突然、「3年生の向けの『画像情報処理』の演習課題を作ってほしい」と言われました。なんじゃそりゃ。

軽く考えていたものの、いざ作り始めてみると意外なほど制約が多い事に気付きました。

まず、この学校ではなぜか C++ のカリキュラムが存在しないため、サンプルコードもオブジェクト指向を極力避ける形になります。加えて、3年生は JABEE の関係上、非常に過酷な実験科目が別途課されているため、あんまり追いつめるわけにもいきません。

そんなこんなで、ひとまず「Gaussian フィルタによる画像平滑化を利用した Tilt Shift 画像の生成」と題して、デジカメで撮った写真をファンタジックに加工する処理でも実装して頂こうかと考えています。なんじゃそりゃ。



Tilt Shift で画像検索すると、風景がまるでジオラマのように写っている写真が多く見られます。この効果を狙って、Tilt Shift レンズが装着されているカメラも存在します(4月25日の日記参照)。

本来は、アオリ撮影を応用して被写界深度を狭めるテクニックなのですが、通常の画像でも簡単な画像処理を施す事によってその効果を疑似的に再現する事が可能です。

今回、試作したプログラムで写真を加工した結果はこんな感じになりました。

【Before】
【After】

上下にぼかしが加わっているのがお判りいただけますでしょうか。

彩度やコントラストを強調したり、構図を工夫したりすれば、よりジオラマのような質感が得られますが、今回は簡単のため省略。

UnityでJavaScriptと仲良くなってみる

すみません、こんな事になりました。


食中毒でも起こしたのか、体内は上下線ともに特別急行。腹痛と悪心でこの世が終わりそう。2011年9月13日 6:59 via Echofon

一日中床に伏せっていて、登校したのは結局23時40分。昼夜逆転どころの話ではありません。

2011/09/12

Unity がはじまった!

先日、O'reilly の動物シリーズに、『Unity による 3D ゲーム開発入門』が仲間入りしました。


表紙のウニは、恐らく Unity を意識したのでしょう。

好評のためか、現在は O'reilly の通販や Amazon.co.jp では入荷待ち状態となっています。

2011/08/29

Processing でオーロラ・改 (特別付録「作り方解説」)

前回のオーロラを、Windows 以外(というか Mac)でも見られるようにしました。こちらで公開しています。


@black_tercel きれいなオーロラがiMacでみれた!!2011年8月29日 20:12 via YoruFukurou

どうやら Windows と Mac では、Java 仮想マシンの実装(仕様?)が違うらしく、あまりにも贅沢にメモリを使おうとすると、実行環境によってはうまくいかなくなってしまうようです。

そこで、前回実装していた、『テクスチャの先読み機能』を削る事で、Mac 環境でもオーロラを楽しめるようになりました。わーい。

Mac でも動作するようになったオーロラ(Ver.2)

2011/08/26

Processing でオーロラ

【新作です】

オーロラを作ってみました。……というよりも、別のものを作ろうとしていたら偶然できてしまっただけです。

実際に動くデモ、及びソースコードはこちらで公開していますが、なぜか Windows 以外ではうまく動作しない事が判っています(原因は不明)。

そこで、不幸にも動かない環境の方のために、スクリーンショットをご用意しましたので、これでご容赦ください……(´・ω・`) ショボーン





【本日のこだわりポイント】

ポリゴンがカクカクしているのはご愛嬌です。実は、この無機質で直線的な質感を低減するテクニックもあるのですが、ジオメトリックな印象が素敵だったので敢えてこのままにしておきました。

オーロラの形状は Perlin ノイズによって生成しています。ただし、毎フレームごとに計算するとかなりパフォーマンスが落ちるため、予め全ての Perlin ノイズを計算してバッファに格納しています。

テクスチャマップに関しては、ありえないほどぜいたくなリソースの使い方をしているため、ロードが非常に重くなってしまいました。Mac やその他の Unix 互換 OS の Java プラグイン 環境で正常に動作しない原因はここにあると考えています。

しかし、Java は実行速度が遅くても WORA だから、多くの方に自分の作品を見ていただけると思っていたのに……。残念です……。

2011/08/24

部品: ディスクフロー

例によって、Processing ネタです。

以前作った Cover Flow を派生させて、レコード盤をぱらぱらめくるような効果を作ってみました。小型のジュークボックスに搭載されているディスクチェンジャーをイメージしたものです。

使途は模索中ですが、多少改良すれば音ゲーの選曲画面のインタフェースとして使えない気がしなくもないです。

操作方法は、マウスをドラッグするだけ。レコード盤のフリップと、上下方向の視点操作が可能です。


地味なこだわりとして、右上に別視点からの映像を表示させてみました。

ちなみに、何か適当なキー(Spece とか)を押すと、画面がくだけ散って Cover Flow (プロトタイプ版)を見る事もできます。

2011/08/22

ビギナーなのに、スペシャリストに挑むとか…

【はじめてのネットワークスペシャリスト勉強日記 Vol.1】

いよいよ秋季試験まで 2 ヶ月(くらい)。そろそろ、教材の後略に取り掛かりたいところである。


誕生日に贈られた参考書と問題集。

数ある教材の中でも、特にこの 2 冊は学習における負担が比較的軽めの書籍だと思う。

僕はネットワーク機器なるものにほとんど触れた事がない(ネットワークやサーバの構築・運用・管理に関しても未経験に近い)という壊滅的な経験値。 お城を出た直後の勇者がいきなりラスボスに挑むくらい無謀な挑戦であろう。

ほとんど勉強が進んでいない状態ではあるが、まずは力試しに平成 22 年度の問題を解いてみた。手応えは惨憺たるものであったが、試験問題の雰囲気だけは大まかに掴む事ができたと思う。

その後、知識不足を補うために、VLANIEEE802.1X といった今まで馴染みのなかったトピックについて調べ、改めて午後 II 問 (1) の問題文を読んでみた。

すると『VLAN 環境下において IEEE802.1X によるアクセスコントロールを導入する動機』がおぼろげながら浮かび上がってくる。もともと午後問題は解答に一意性が生じるよう慎重に作問されており、問題文もかなり誘導的な内容になっているため、長文を読解するだけでも頭の中の断片的な知識を整理する訓練になりそうだ。

2011/08/19

トイデジ探検隊

城下町



Processing で水上の観覧車

【新作です】

先日の灯籠流しのテクニックを用いて、水上観覧車を作ってみました。

ここでは、スクリーンショットのみを掲載します(実際に動作するサンプルをご覧になるには、画像をクリックして下さい)。


リフレクションやグローなどは、灯籠流しのソースコードをほとんどそのまま用いましたが、今回は視点の操作ができなくなっています。

つまり、ただ眺めるだけの作品です。

水面に映える観覧車の静かな情景をお楽しみください。

2011/08/18

おもしろい小悪魔女子大生の本

今日は運転免許証の更新のため、最寄りの交通センターへ。

高校時代に免許を取って以来、無事故無違反 ペーパードライバーのまま今に至りますので、今回の更新できんいろの免許証になります。やったー!

電車に揺られている間の暇つぶしに、今日はこんな本を持ってきました。

『小悪魔女子大生のサーバエンジニア日記』

これ、Amazon では微妙な評価がなされている上、表紙に描かれているくまちゃんとかうさちゃんとかのイラストが恥ずかしくて、クールな僕はなかなか手を出せずにいたのです。

しかし、いざ読んでみると、解説書としての完成度の高いこと高いこと。

それこそ、図解を謳っていながら肝心の図版が四角形と矢印だけだったりとか、『マンガでわかる~』と言いながら結局ふきだしの中身は事務的な解説だったりとか、そういう期待はずれのがっかり解説書とは根本的に違います。

2011/08/12

お誕生日プレゼント

【ネットワークスペシャリストを受ける事になりました】

寝っ転がってぐだぐだしていたら、突然玄関のチャイムが鳴りました。

ドアの外には郵便屋さん。『お届け物ですが、郵便受けに入らないため手渡しします』と、それはそれは巨大で分厚い封筒を僕に託してきました。

なんだろうと思い、開封してみると、そこには『情報処理教科書 ネットワークスペシャリスト 2011年版』とか『2011 徹底解説 ネットワークスペシャリスト 本試験問題』とかが入っていました。やったー!

ちなみに送り主いわく、この秋の合格を目指して勉強に励むべしだそうです。

さてさて。

『ネットワークスペシャリスト試験』は、情報処理技術者という国家資格の中でも『高度区分』に位置する難関資格で、Wikipedia には以下のように記されています。
本試験はネットワーク設計・管理における専門性を有することを認定する試験である。システムエンジニアの中でも主にネットワークの設計担当者や管理責任者を対象としている。試験のレベルは高く、ネットワークに関する試験の中でも最難関のものの一つである
実のところ、僕はネットワークとデータベースが致命的なまでに苦手。 かつて下位資格を受けた際にも、この 2 分野は特に手こずった単元でありました。

今から 2 ヶ月間で合格水準に達するのは決して容易ではないと思いますが、まぁいつも通りまったりとがんばってみます。

ということで、今日さっそく受験を申し込んで参りました。僕は既に応用情報技術者資格を保持していますので、午前 I 試験は免除されます。これで、心置きなくネットワーク技術に学習の焦点を当てる事ができます。

新潟拉麺愛好會活動報告(侍元篇)

寺尾の人気店・侍元に行ってきた(……それも今は昔で、実はこの記事を書いたあと数ヵ月に亘って放置していた)。

燕でおなじみの“背脂チャッチャ系”スープに定番の具。

一見、昔懐かしい醤油ラーメンだが、この中には恐るべき爆弾が眠っている。

そう、実はチャーシューの存在感がやばいのだ。

2011/08/10

Processing で灯籠流し

もうすぐお盆です∩( ・ω・)∩

そして、余談ですが、もうすぐぼくのお誕生日です!

今日はちょっと夏っぽいものを作りたくなったので、Processing で灯篭流しを作ってみました。


グローエフェクトや水面のリフレクションなど、かなり実験的な技術をたくさん盛り込んだため、ロースペックなマシンでは処理落ちしてしまうかも知れません(それでも、ボトルネックとなっている処理に関してはかなりの軽量化を試みたのですが……)。

そんなわけで、実際に動くサンプルはこちらです。

灯籠のテクスチャが欲望丸出しなのは、お誕生日が近いからです(※大切な事なので猛烈アピール)。



【8月11日 追記】

僕のミスで、OpenProcessing の当該ページから灯篭流しを誤って削除してしまいました。

そこで、反射エフェクトのクオリティ改善と、さらなる処理の最適化を加えてこちらに再アップロードしました。

ぜひご覧ください。

2011/08/09

Java で、てきとう Twitter クライアント

前回、ポータブル版の Eclipse を導入したので、調子に乗って超手抜き Twitter クライアント『たーちんII号』を作ってみる事にしました。


なんでこんな事をしたかというと、表示される Twitter クライアント名にオリジナリティを出したかったからです(えっへん)。

うまくいかない…(´;ω;`)ウッ…2011年8月9日 20:54 via たーちんII号

2011/08/05

ポータブル版 Eclipse と、らくちん GUI ビルダー

2011年8月某日。

何故か USB メモリが異様に余るという怪奇現象が発生したので、統合開発環境 Eclipse のポータブル版、その名も EclipsePortable を入れてみる事にしました。

8月5日現在の最新版は Eclipse 3.7 で、通称は『Indigo』。

このバージョンからは、待望の GUI ビルダー『WindowBuilder』が追加され、それまで NetBeans が得意としていた効率的なインタフェース構築が Eclipse でも可能になったといいます。

WindowBuilder のスクリーンショット

2011/08/04

フェニックス

突然ですが、イラストサイト 『ビンヅメソウコ』 管理人のピクロさん、iPhone アプリ開発者のしゅーしゅーと一緒に、日本三大花火大会の一つである長岡大花火大会(以下、長岡花火)を見に行ってきました。


もともと長岡まつりは長岡空襲による戦災殉難者の鎮魂のための行事でしたが、現在の長岡花火の目玉となっている『フェニックス』には7.13水害中越地震、そして豪雪被害からの復興への祈りが込められており、今回新たに東日本大震災からの復興祈願という意味づけがなされました。

今回の最大の目的は、もちろん『フェニックス』を鑑賞する事です。

2011/08/02

たーせるの用法用量は正しくお使いください

7月31日から8月2日まで、所用で関東地方にお出掛けしておりました。

その間に、このブログの累計ページビュー が 20,000 件を突破した模様です。

プログラムネタがメインで、その上携帯電話やスマートフォンやタブレットコンピュータや低スペック PC からの閲覧性を徹底的に無視しているにも拘わらず、いつも訪問してくださっている皆様には本当に頭の下がる思いです。

これからもまったりがんばりますので、どうか宜しくお願いいたします∩( ・ω・)∩



【たーせる meets つまっち】

くだんの関東出張中、ぼくが密かに愛読しているブログ『つまっちの用法用量は正しくお使いください。』の管理人・つまっちにお会いする事になりました。

@tercel_s おし!秋葉でセレブに松屋オフだ!щ(゚Д゚щ)カモォォォン2011年7月31日 17:58 via Azurea

2011/07/28

同時上映: HTML5 で飛行機

OpenProcessing トップページの『favorites of the last 7 days』に、あろうことか僕のスケッチが 2 つも上がっていました。恐縮です。


一つは、先日作った Rainbow in the Night という地味なパーティクルエフェクトで、公開当初は見向きもされなかった作品です。

もう一つは、3次元 Delaunay 分割のデモ。プログラム自体は 1 年生の頃に作ったものの移植ですが、こっそり仕込んだトランジションエフェクトが割とよかった模様です。

【追記】 3次元 Delaunay 分割が、open architecture open design のコレクションに加わりました。これは僕にとって初めての経験で、具体的に何がどうなるかはまだよく判っていませんが、なんかちょっとドキドキです。

うれしいので、ちょっとしたおまけを作りました。

2011/07/25

Processing.js で射影変換

!今日の日記は Internet Explorer ではご覧いただけません!



ここ最近、Processing で 3D なプログラムをちょこまかと作っているたーせるですこんにちは。

ぼくはこれまで Applet をべたべた貼っていましたが、動作させるためには Java プラグインが必要だったり起動が若干重かったりと、そろそろ不満な点が出てきました。

せっかくなので、インタラクティブな 3D 絵をなんとかして超ナウい HTML5 として吐き出してみようというのが本日のテーマです。

こういった不満を解消する一つの選択肢として Processing のプログラムを HTML5 の canvas で動作させてしまえるライブラリ「Processing.js」が存在します。

次期 Web 標準と目される技術ですから前途有望ですし、今後さらなる普及が期待できるスマートフォンにも対応可能。

ここまでいい事ばかり書いてきましたが、実は一つ大きな問題があるのです。

2011/07/22

Processing でモーションビューア

今日は、こんなモーションビューアを作ってみました。

This browser does not have a Java Plug-in.
Get the latest Java Plug-in here.
このデモでは、新潟大学工学部情報工学科・山本研究室が開発した『ユビキタスモーションキャプチャシステム』によって測定された結果を使用しています。

すべて独自技術ですので、Processing を除いて第三者が開発した外部ライブラリは一切使用していません。

本来ならば文献を引用しつつ技術解説等をしたいところですが、あんまりおもしろくないと思うので省略。参考リンクとしてこの辺をご紹介しておきます。



【参考文献コーナー】
  • M.Yamamoto, A.Sato, S.Kawada, T.Kondo and Y.Osaki, ”Incrementaltracking of human actions from multiple views”, CVPR98, pp.2-7, 1998.
  • 山本正信, ドリフト修正機能を有する動画像からの身体動作推定法, 信学論, Vol.J88-D-II, No.7, pp.1153-1165, 2005.

2011/07/17

2011/07/15

セロテープぺったん画像ジェネレータ(リベンジ篇)

そういえば2月6日くらいに、このブログのために写真を加工するプログラムを作りました。 


だけどこれ、よく見ると汚いよね。特に電線のあたり。

それまで、画像のスケーリングやアフィン変換は Processing に任せていましたが、どうも内部で単純に画素を間引いているらしく、いわゆる高周波成分を含んだ画像に対して処理を施すと仕上がりが残念な事になってしまうのです。

そこで、画像を加工してもジャギーが目立たなくなるように、このたびプログラムを修正してみました。

2011/07/12

ビジュアルエフェクト試行錯誤

今日は、実験作 2 作のご紹介です。

重くならないように、このページにはサムネイル画像を貼りました。 各作品名のハイパーリンクを踏めば、動作を確認できるページへジャンプします。

ぜひ実際に動作するサンプルをご覧ください。



Rainbow in the Night

きらきら輝くパーティクル。シンプルなピクセル操作を組み合わせで、あたかも発光しているかのような視覚効果が得られます。

マウスボタンを押し続けると、オーロラが出現します。




White Cube

ルービックキューブの柔軟な回転動作の可視化を実現するためにあれこれ考えた結果です。

パフォーマンス的な意味では、さらなる最適化の余地もありますが、『連鎖的な行列の作用がどんな幾何学的変化をもたらすのか』というもう一つのテーマを追究するため、敢えて行列スタックを多用しています。


2011/07/11

Processingで しっぽさんの「Smolder Effect」

しっぽさんが wonderfl で公開していらっしゃる Smolder Effect が激しく気に入ったので、Processing で再現してみようと思ったら見事に劣化しました(ごめんなさいごめんなさい)。

ささやかなオリジナリティとして、回転した画像にも(一応)対応してはいますが、マスクが二値画像のためエイリアシングが酷く、描画品質が残念な事になってしまいました。

2011/07/04

Lua が気になるお年頃

突然ですが、Lua が気になるお年頃がやってきました。たぶん思春期です。

TIOBE Programming Community Index for June 2011 によると、Lua は人気の高いプログラミング言語・第 10 位だとか。

派手さや嫌味のないシンプルでスマートな言語でありながら、連想配列クロージャなどのナウい仕様も備わっており、さらに数あるスクリプト言語の中でも屈指の実行速度を誇っているそうです。

まぁここまでは人から聞いた話ですが、聞けば聞くほど気になってしまい、たまたま Lua も手元にある事だし(なんであるの!?)、せっかくだからちょっとつまみ食いしてみる事にしました。

ちなみに、今回は Lua 5.1.3 に、Visual Studio 2008 Professional Edition を使いました。たぶんもっと新しいバージョンも探せばどこかに転がっていると思います。

2011/07/03

Processing でページめくりエフェクト

新作です。

マウスをクリックするとページがめくれるデモです。

地味ですが、私なりにこだわった点がいくつかあります。

まず、リアリティを出すために加えた『陰』は、毎回動的に生成しています(※ 処理落ちの原因は 8 割方これのせい)。

次に、めくられていく途中のページを見ると、うっすらと裏うつりしているのがわかります。

これらのこだわりを実現するために、なかなかシビアなピクセル処理を行っていて、微調整しているうちに日付が変わってしまいました。

2011/06/27

Processing でマルチスレッド

最近ちょっと重たい記事が続いたので、今日は軽めにいきたいと思います。

Processing 等で大量のリソースを読み込む際、それらの処理をコンストラクタや初期化用メソッドに記述すると、フレームレートが激落ちくんになってしまいます。

例えば Cover Flow なんかも、読み込んだ画像から鏡面反射用のテクスチャを構築するため、多くの画像を表示させる場合は初期化の際のオーバヘッドが高くなってしまいます。

そこで今日は、ロード処理をバックグラウンドで動かし、表向きには『Now Loading...』的なアニメーションをぬるぬる表示させるためのちょっとした Tips をお話ししましょう。
ロード中は、進捗バーが表示されるよ

2011/06/26

いまさら DirectX10(なんちゃってオブジェクト指向篇)

昨日のソースコードが、あまりにもアレだったので、せめて DirectX の初期化関連だけでも別クラスに分けようと思いました。

本日はその成果報告です。

成果といっても、今日は簡単のためブルースクリーンを表示するだけ。昨日よりひどい
さて。

オブジェクト指向というからには、本来ならウィンドウもクラスにすべきところですが、OS からコールバックされる関数(ウィンドウプロシージャ)をメンバ関数にするにはちょっとしたトリックを仕込まねばなりません。

※ C++ において、static なメンバ関数は、暗黙のうちに自クラスへのポインタを引数として受け渡す性質があるので、コールバック関数をそのままクラスのメンバにしようとすると、『引数の数が合わないよ!』と叱られちゃうのです。

原因が判れば回避策を講じるのもそう面倒ではないのですが(たとえば追加のメッセージ処理関数を独自にフックさせるとか、あるいは思い切ってウィンドウプロシージャだけ static なメンバ関数にしちゃうとか)、それだけに極端な『オレ流ソース』になりやすく、あんまりよろしくないなぁと思ったので、ウィンドウに関してはそのまま放置にしました。

2011/06/25

いまさら DirectX10(はじめの一歩篇)

※ このブログはただのお勉強日記だよ! 参考になるような解説記事は一切ないよ!

今は昔。

ぼくもネイティブな 3D プログラミングなるものに憧れ、当時主流だった DirectX9 をつまみ喰いした事がありました。
当時、DirectX9 をあれこれ試したときに作ったプログラミングノート
あれから時代は移ろい、いつの間にか最新のトレンドも DirectX11 に代わってしまったようです。

そんなわけで、そろそろ最新の API を学び直す時期かなぁと思い立ったわけですが、残念ながらぼくのパソコン(のグラボ)は DirectX11 には対応していないので、仕方なく DirectX10 に手をつけてみる事にしました。

さてさて。

DirectX10 からは固定機能パイプラインが無くなり、プログラマブルシェーダの理解が不可欠となってしまいました。 Vista 時代を迎えてかなり思い切った仕様変更だと思います。

何を隠そう、ぼくはこのシェーダに手を付ける事が怖くて、DirectX9 の頃まではほぼ固定機能パイプラインに頼りっきりだったため、DirectX10 になって開発の敷居ががくんと上がってしまいました。

こうやってどんどん梯子を外されていくうちにゲイツ様への忠誠心が確実に薄らいでいますが、それはさておき。

今回は、おっかなびっくり DirectX10 なるものに触れてみようかと思います。

2011/06/20

Processing で Cover Flow

iTunes や iPod でおなじみの Cover Flow 効果を、Processing で再現してみました。

マウスのドラッグでフォーカスが移ります。

この Cover Flow のエフェクト、実はずっと作ってみたかったものです。

線型代数に不慣れだった頃なら、どうやって作ったらいいのか見当すらつかなかったでしょうが、今は多少なりとも理解しているつもりですので、作り始めて 30 分ほどでプロトタイプが完成しました。

かつてのぼくだったら、『たとえ汚くてもいいのでソースコードが欲しい』と願ったでしょうから、拙いながらこちらで公開しています。

2011/06/17

OpenProcessingはじめました

突然ですが、p5info さんに見習われてしまいました。非常に畏れ多いです。


私もたーせるさんを見習うべくブログを建てることにする。
今までコードはる場所なかったのが痛いな。2011年6月17日 10:8 via web


改めてご紹介すると、p5info さんは、Proce55ing.walker (Beta) で Processing 言語の情報提供に尽力されている方です。

当該サイトは日本語で読める貴重な情報源の一つですので、今後ブログが開設されたらぜひ入り浸りたいと思います。

2011/06/16

Processingで光の粒を飛ばしてみた

本日のがらくたはこちら。


一見、なんの変哲もない簡易的なパーティクルシステム。だけど、パーティクル用のテクスチャをプログラム中で動的に生成するのがちょっとしたオリジナリティだ。

ネットを適当に巡回すれば、似たようなものの作り方はいくらでも解説されているが、その殆どは予め画像処理ソフト等でテクスチャファイルを作成しておく必要がある。これを手間だと感じる人は意外に多い(と思う)。

しかし、ここでご紹介するサンプルは、そんなものをわざわざ作らなくてもソースコードをコピペするだけで動いてしまう。これを見ているよい子のみんなも手軽に試す事ができるぞ!

2011/06/15

Processingのカメラ行列にアクセスしたい

【何の役に立つか分からない技術コーナー】

Processing で 3D を扱っていて、地味に不便だなぁと感じるのが、カメラ行列(射影行列ではない)に直接アクセスできない事。

printCamera() メソッドでカメラ行列をコンソールに表示する事は可能だけど、これを眺めるだけでカメラの並進量や回転量を把握するのは、残念ながら普通の人には難しい。

加えて、そのカメラ行列をプログラム内で使う事は(現時点では)できないようである。

これができないと、たとえばデバッグカメラ(カメラ配置を第三者視点から確認する事)が多少やりづらい(工夫次第でなんとかなりそうだが)。

そこでひとまず、Processing 標準の camera() メソッドをエミュレートするものを作ってしまう事にした。

以下に当該メソッドのソースコードを示す。使い方は camera() メソッドと基本的に一緒。
// 世界座標を、カメラに合わせて動かす
// 引数の意味は、camera()メソッドと同じ
void worldToCamera() {
  worldToCamera(
    width/2.0, height/2.0, (height/2.0) / tan(PI*60.0 / 360.0), 
    width/2.0, height/2.0, 0,     
    0, 1, 0);
}
void worldToCamera(float eyeX, float eyeY, float eyeZ,
                   float centerX, float centerY, float centerZ, 
                   float upX, float upY, float upZ) {
  
  // カメラ座標空間の3軸
  PVector r3 = new PVector(eyeX-centerX, eyeY-centerY, eyeZ-centerZ);
  PVector r2 = new PVector(upX, upY, upZ);
  PVector r1 = r2.cross(r3);
  r2 = r3.cross(r1);
  
  // 正規化
  r1.normalize();
  r2.normalize();
  r3.normalize();
  
  /* ================================================== */
  /*  各軸まわりの回転量、および並進量を個別に求める例  */
  /* オイラー角表現はヘディング・ピッチ・バンクに準ずる */
  /* ================================================== */
  float h, p, b;
  p = asin(-r2.z);
  if (cos(p) != 0) {
    h = atan2(r1.z / cos(p), r3.z / cos(p));
    b = atan2(r2.x, r2.y);
  } else {
    b = 0;
    h = atan2(-r3.x, r1.x);
  }

  resetMatrix();
  rotateY(h);  // ヘディング角
  rotateX(p);  // ピッチ角
  rotateZ(b);  // バンク角
  translate(-eyeX, -eyeY, -eyeZ);

  /* ================================================== */
  // 別解:applyMatrix による一括変換の例
  /* ==================================================
  
     // 並進成分の計算
     PVector t = new PVector(
       -(eyeX * r1.x + eyeY * r1.y + eyeZ * r1.z),
       -(eyeX * r2.x + eyeY * r2.y + eyeZ * r2.z),
       -(eyeX * r3.x + eyeY * r3.y + eyeZ * r3.z)
     );
     // 変換行列の作成・適用
     resetMatrix();
     applyMatrix(r1.x, r1.y, r1.z, t.x,
                 r2.x, r2.y, r2.z, t.y,
                 r3.x, r3.y, r3.z, t.z,
                  0.0,  0.0,  0.0, 1
     );

     ================================================== */
}

このままでは camera() と一緒だけど、たとえば MyCamera クラスとかで包んでやって、カメラの並進量・回転量(あるいは行列そのもの)に対するアクセサを定義してやれば、もうちょっと高度なカメラ制御が可能になると思う。

2011/06/09

遺伝的アルゴリズムとか

ちょっと興味があったので、小高 知宏 著 『はじめての機械学習』 を読んでみた。

で。 5 章 2 節 「遺伝的アルゴリズムによる知識獲得」には、簡単な GA (SGA: Simple GA)の実装例が掲載されている。

今回は、その挙動を Processing で可視化してみた。

完成品はこんな感じ。
各世代における適応度の推移グラフをProcessingで可視化したもの。
赤はエリート個体の適応度、青は当該世代における適応度の平均値。

2011/06/06

くだけちるエフェクト(改訂篇)

先月作ったくだけちるエフェクトの改良版。

破片の形状生成アルゴリズムを Delaunay 分割に変更し、さらに各破片の飛び散り方を 3 次元的にしてみた。

2011/06/03

ProcessingでDelaunay分割(解説篇)

今日は、前回実装した Delaunay 分割のアルゴリズムをわかりやすく解説したいと思う。

まずは、前知識として 『詳解 OpenCV』 の記述をふたたび引用しよう。
  1. 外部三角形を作り、その頂点の 1 つを開始点とする(これにより、必ず外側の点から開始されることになる)。

  2. 内部の点を追加する。その後、すべての三角形の外接円を探索し、追加した点を含むような三角分割を削除する。

  3. 今削除した三角分割の外接円の内部にある、新しい点も含めて、グラフを三角分割し直す。

  4. 追加する点がなくなるまで、ステップ 2 に戻って繰り返す。
これをいかに解釈し、ソースコードに落とし込んでいくか。

計算幾何に興味がある方はもちろん、普段ネット上のソースをコピペして『動きさえすればそれでよい』と思っている方にも、この記事がプログラミングの楽しみを知るきっかけになれば幸いである(偉そうなこと言ってごめんなさいごめんなさい)。

ProcessingでDelaunay分割(ジェネリクス対応篇)

昨日まで、Processing のプログラムは、プログラマの性善説に基づいて組んでいた。

つまり、function(ArrayList pointList) とかいうメソッドがあったら、それを使う側は、間違いなく引数に PVector オブジェクトが格納されたリストを渡してくるだろうと想定していたのだ。

万一にもおかしなものが渡された場合、ClassCastExceptionNullPointerExceptionthrow されるので、それを catch するようにプログラムしてはいたけれど、やはりコレクションフレームワークに何が入れられてくるのか判らない事に対する気持ち悪さは拭えずにいた。

さてさて、そんなうららかな金曜日の昼下がり。暇だったので、Processing の最新版(1.5.1)を落として遊んでいたら、ある事に気付いた。

なんと、Processing の言語仕様がジェネリクスに対応しているではないか。

これなら、明示的に List や Map などのコレクションフレームワークに格納できる型を明示的に指定する事が可能である。

というわけで、昨日の Delaunay 分割のうち、コレクションフレームワークを駆使した DelaunayTriangles クラスを、新仕様に合わせて改訂してみた。それ以外のクラスについてはいじる必要なし。

2011/06/02

ProcessingでDelaunay分割(実装篇)

前々回のあらすじ砕け散るエフェクトを作った。

……それはよいのだが、いかんせんやっつけ仕事だったため、砕け散る破片の形状生成がびっくりするほど適当だった。

もうちょっとうまく破片を作るために、今回は計算幾何のアルゴリズムの中でも比較的有名な Delaunay 分割に挑戦してみた。

まずはじめに、結果から示そう。

Delaunay 分割は、ランダムに与えられた点を結び、下のような無数の三角形を作る手法である。


さて。

Delaunay 三角分割法に関しては、Gary Bradski, Adrian Kaehler 著、松田 晃一 訳『詳解 OpenCV』にこんな解説がある。
Delaunay 三角分割法は、空間内の点を連結して三角形のグループにし、その三角形のすべての角に対する最小角度が最大になるようにするテクニックで、1934年に発明されました。 (中略) 与えられた任意の三角形の頂点に接する任意の円の内部には、その他の頂点が含まれないようにして三角分割が行われています。これは、外接円特性と呼ばれています。
正直、さっぱり意味がわからない。Delaunay 分割を全くご存知ない読者がこれを一度読んだだけで完全理解できたら大した読解力だと思う。少なくともぼくは数日間悩んだ。

2011/06/01

Processing でイテレータ

昨日、超てきとうにあんな記事を書いたところ、Processing 日本語コミュニティサイト p5info.com の方の目に留まり、激しく恐縮していますこんにちはこんにちは。


おお、面白い RT @tercel_s: Processingで画面遷移効果(くだけちるエフェクト) http://bit.ly/mHXM0e2011年5月31日 22:53 via web

で。

p5info.com さんの他のツイートを見ていたところ、ちょうど 『Processing で学ぶデザインパターン』 とかオブジェクト指向的な話がでてきていて、『おぉっ』と思ってしまった。

個人的に、Processing はオブジェクト指向色の薄い言語だと思うけれど、それでも時と場合によってはデザインパターンを採り入れた方がプログラムしやすくなったり安全になったりするし、そういった経験則を通して設計面の楽しさを知る機会はあったほうがうれしい。

実際、たとえ意識しなくても Processing で void setup() とか void draw() を書いている時点で、Template Method パターンを利用している事になるわけで、やっぱりぼくらは知らず知らずのうちにデザインパターンの恩恵を受けている。



というわけで、今日の話題は GoF のパターンの一つである『イテレータ』について。

ただし、『イテレータを一から設計するにはどうすればよいか』という話はできないのでしない。代わりに、『それを使うと何が便利なのか』という動機づけの話をしよう。

ArrayList とか LinkedList とかを使用していて、『ある条件に一致する要素すべてをリストから削除したいなあ』というシチュエーションを考える。

たとえば、以下のようなリストから、「要素が3であるもの」をすべて除去したいとしよう(実際はもっと複雑な状況を想定している)。

intList
 3   1   2   3   3   3   7   0 

こんなとき、初心者(というか僕)が真っ先に思い浮かぶのがこんな方法だ。
// リストを作って
ArrayList intList = new ArrayList();

// 要素を設定
intList.add(new Integer(3));
intList.add(new Integer(1));
intList.add(new Integer(2));
intList.add(new Integer(3));
intList.add(new Integer(3));
intList.add(new Integer(3));
intList.add(new Integer(7));
intList.add(new Integer(0));

// 最初の中身を表示
println("intList:");
for(int i = 0; i < intList.size(); i++) {
  print(intList.get(i) + " ");
}
println();

// 3を削除?
for(int i = 0; i < intList.size(); i++) {
  Integer element = (Integer)intList.get(i);
  if(element.intValue() == 3) {
    intList.remove(element);
  }
}

// 削除後の中身を表示
println("intList:");
for(int i = 0; i < intList.size(); i++) {
  print(intList.get(i) + " ");
}
println();

しかし、実行してみると分かるが、明らかに「削除漏れ」が起きている。
【実行結果】
intList:
3 1 2 3 3 3 7 0
intList:
1 2 3 7 0
この現象は、削除すべき要素が連続しているところで発生している。