Processingでくろねこさんを……

ちょっと前のお話になりますが、Processing オフ会にて、くろねこさんをはじめ、 P5 ユーザの皆様とお会いしてきました。 とりにくおいしかったです∩( ・ω・)∩

さてさて。

くろねこさんから頂いたメッセージを少し加工して、ちょっとしたエフェクトを作ってみました（→OpenProcessing）。

Processingでスカイボックス ほか

【ぐりぐり動かせるパノラマ背景】

ゲームづくりにおいてリアルなフィールドを構築するために、「スカイボックス」と呼ばれるパノラマ背景が使用される事があります。

これを Processing で再現してみようというのが今回のテーマです。実際は、単にカメラをテクスチャつきのポリゴンで囲っただけなのですが、演出次第ではそこそこ使えるかな……という印象です。

なお、実際に動作するサンプルはこちらです。マウスでぐりぐり視点変更ができますよー。

画像をクリックすると、サンプルに飛びます

ちなみに景観は Terragen というソフトウェアで作りました。 Processing 側ではそれらを繋ぎ合わせているだけです。

本当はこれを使ってもっとカオスなものを作る予定でしたが、いろいろ間に合わなかったので今日はこれだけですごめんなさい。

---

【データベーススペシャリスト、受けます】

どさくさに紛れてデータベーススペシャリスト試験を受ける事になりました。

ここに書こうかどうしようか迷いましたが、それなりにプレッシャーになるので宣言してみる事にしました。これで、たとえ落ちても“なかった事”にはできなくなります。

とりあえず肩慣らしとして午前問題から攻略する事にしましょうか。……試験までに間に合うかな、かな。

ProcessingでXファイルを解析（スタティックメッシュ篇その2）

昨日の続きです。ほんのちょっと進歩してマテリアルを反映できるようになりました。

こういうかっこいい戦車も……

Metasequoia にプリセットされている「Tank」

ちゃんと質感を保ったまま^※ Processing に持ってくる事ができました。やったー！

Processing で表示した結果

※ というのは大ウソで、法線無視、フラットシェーディング一択という男らしい割り切り方をしています。P3D モードにおけるレンダリングのクオリティならばこのくらいばっさり行っても許容範囲な気がします（おい

ProcessingでXファイルを解析（スタティックメッシュ篇その1）

今日は、DirectX で標準的に使用されていた X ファイルを読み込んで、Processing で表示してみたいと思います。 すなわち ——

Metasequoia にプリセットされている「日本橋麒麟像」

こんなふうに任意のモデリングソフトで作成したデータを、

上図のように、Processing でそのまま使えるようにしてしまおうという試みです。

しかし僕がアホすぎるせいで、まだ静止した 3D モデルの幾何形状だけしか読めていませんごめんなさい（アニメーションはおろか物体の色付けやテクスチャも無し）。

Processingでスキンメッシュアニメーション

【とにかく、ぐにゃぐにゃ】

今まで黙っていましたが、実はこれまで Processing で表示させていた立体オブジェクトは、そのほとんどが剛体でした（オーロラは例外）。

というわけで、ブログをご覧の皆さんに僕が剛体しか出せない事がバレる前に、スキンメッシュという謎の技術を使って時々刻々と変形する形状の表示に挑戦してみたいと思います。

……と見せかけて、僕は根性無しなので、小規模のサンプルを作ったところで力尽きました⊂⌒~⊃｡Д｡)⊃

たいへん気色悪い物体がぐにゃぐにゃ動いているのがお解りいただけたかと思います。

スキンメッシュは、その名の通り表皮っぽいメッシュの事で、ボーンと呼ばれる仮想的な剛体の動きに追従して頂点が変形します（→OpenProcessing）。

この記事でも手法を詳しく紹介しようかと思いましたが、理論自体は大した事ないくせに解説がやたら面倒なのでやめました。理論の詳細は『ゲームエンジンアーキテクチャ』の第11章や『MESH GURU with Direct3D 10/11』 の第12章あたりにざっくりまとめられていますし、Web にも良質なドキュメントがあるのでそちらを参照してください（逃

ただ、OpenProcessing で “Skinning” や “Skin Mesh” で検索してもそれっぽい先行作品がヒットしなかったので、恐らく今回のスキニングは OpenProcessing 史上初の試みだと思います。えっへん。

Processingで魔法使いの組分け帽子を作る

今日はちょっとしたパターン認識をやってみようと思います。あ、タイトルは釣りですよ。

とりあえずデモ動画をご覧ください。

こんな感じで、ある「特徴」を手掛かりにして正体をつきとめる処理は「パターン認識」と呼ばれており、文字認識などに応用されている技術です。

現在に至るまで、様々な認識手法（というか識別手法）が提案されていますが、今日はフィードフォワード型のニューラルネットワーク（3層パーセプトロン）にフォーカスを当てたいと思います。

ProcessingでAI

【Boid 理論を眺める】

くろねこさんが Boid 理論を使ってパーティクルを動かしていたのが気になって、僕もちょっと背伸びをして大風呂敷を広げてみました。……あ、タイトルは釣りです。

Boid 理論とは、団体行動を取っているような「群れ」を再現するシミュレーションです。ご存知ない方は、先入観なしに以下の動画をご覧ください。

ProcessingとArduinoをくっつける

【本日のお便りコーナー】

twitter4Jかー。この前購入してたarduino使うのかと思ってた∩（・ω・）∩2012年2月16日 9:7 via HootSuiteくろねこ
laprasDrum

—— というわけで、今日は Processing と Arduino を合体させてこんなの（↓）を作ってみようと思います。わー（歓声） ぱちぱち（拍手） ……あ、ちなみにこれの正体は最後に明らかになりますよ。

ProcessingとTwitterをくっつける

くろねこさんが、昨日のサンプルをさっそく fork して下さいました（→くろねこさんの記事）。

パーティクルの動きの改良に加え、ソースコードもリファクタリングされて品質が上がっています。さすが！

---

さてさて、今日は Processing を Twitter に組み合わせてへんなのを作りますよー∩( ・ω・)∩

なんか、テキスト領域に Twitter のユーザ名を入れると、フォローしているおともだちが3次元空間を漂うというなんとも愉快なスケッチです。

実は、ほとんど昨日のソースコードを流用しただけの手抜き更新というのは内緒だよ。

Processingできらきら3次元パーティクル

今日はこういうものを作ります。たぶんきれいですね。

このスケッチは、いくつかのテクニックを組み合わせて作ります。

恐らく、Processing ユーザにとっては馴染みの薄いものもあるかと思いますので、今日はそれらをひとつひとつ紹介しつつ完成形に持っていこうと考えています。

【予告】 Processingで講演します（？）

少し先のお話ですが、来たる3月20日～23日に開催される電子情報通信学会・総合大会に参戦する事になりました。講演分野は『パターン認識・メディア理解』だそうです。

今回は「Processing で『立体おえかきツール』を作ってみたよ」みたいな内容です。とりあえず予告篇のようなデモムービーをてきとうに作ったので、こっそりご紹介しておきますね（※注意：音が鳴ります）。

あまり大規模な制作物ではありませんが、もしよろしければどうぞおたのしみに。

Processingでてきとう3次元バンプマッピング

学位論文の方が一段落しそうなので、空き時間を使ってバンプマッピング（のようなもの）を実装してみました。ちょっとしたリハビリです。

バンプマッピングとは、ポリゴン上の凹凸を擬似的に再現する技術で、テクスチャマッピングでは表現できない質感表現を実現できます。

実際に動作するデモは OpenProcessing で公開していますので、是非ご覧ください。

相対参照を適当に考慮したHTMLファイルの移動

1月2日の続きで、自分用ひとこと日記支援システム（？）的なものをだらだら作っています。

ちなみに前回は、「HTML ファイルを生成する仕組みを作ろう」という、なんともややこしい話をしていたのでした。

※ ちなみにあの後、くろねこさんからも非常に有益なアドバイスを頂きました。記事になるところまでできたらここに書きたいと思います。

 せっかくですから、ひとこと日記を単に書き溜めるだけでなく、月別のアーカイブページなども生成できれば、情報が整理できて閲覧性も高まるのではないかと考えました（というか、至って平凡な思いつきですが）。

さて、ここで問題になるのが HTML に記述された相対参照の扱いです。

もしも HTML ファイル中に  

<img src="baka/aho/img.png" /> 

とか、 

<a href="../../hoge/piyo.html" /> 

みたいな相対参照が仕組まれていた場合、何も考えずに階層の異なる別ディレクトリ移動・複製すると、リンク切れを起こしてしまうのです。

どうにかしたいですよね。

しかし、この問題を完全に解決しようとすると果てしなく面倒なので、実用上それほど問題が出ないレベルで適当に対処しようというのが本日のテーマです。

冬休みのてきとうアプリケーションづくり

【プログラミング初め】

ちょっと前に『作りたい』とか言っていた Web サイトの更新支援ツールの開発をてきとうに始めました。

手始めに前回のネタを GUI 化。

秘密鍵の設定画面

秘密鍵の設定は初回起動時だけ（ただし、変更は可能）。

次回の起動時からは下のような認証画面が表示されるようにしました。 GUI めんどくさい。

秘密鍵の認証画面

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

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

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

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

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

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

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

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

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

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

---

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

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

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

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

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

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

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

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();
  }
}

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

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

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);  // 置換（これでうまくいく）

やったね。ねむい。

線分の交叉判定（てきとう）

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

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

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

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

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

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

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

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

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

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

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

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