同時上映： HTML5 で飛行機

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

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

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

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

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

Processing.js で射影変換

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

---

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

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

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

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

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

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

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.

トイデジ探検隊

裏路地。

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

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

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

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

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

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

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

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

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

---

【Rainbow in the Night】

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

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

---

【White Cube】

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

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

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

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

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

Lua が気になるお年頃

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

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

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

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

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

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

新作です。

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

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

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

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

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