後期のメディア芸術演習IIでは、文書を掲載するメディアという枠を越えて、Webブラウザ自体を表現のためのメディアとして活用していきます。
現在WWWに関する技術トレンドは大きく変化しています。そこでキーワードとなっているのが「HTML5」という技術です。HTML5という単語自体はここ数年よく耳にするようになりました。しかし、その実態は具体的に何なのかは、まだあまり理解されていないのが現状です。今回は、まずこのHTML5とは何かということについて、具体的なサンプルを交えて紹介します。
講義の後半は、実際に簡単なHTML5の文書の作成に挑戦します。HTML5で導入された意味構造(セマンティクス)を記述する様々な新要素を活用して、既存のHTML5以前の文書を書き換えてみます。さらにそのHTML5の文書に、CSS3を用いた高度なデザインを実践してみましょう。
今回は、openFrameworksを用いて、プログラムを制御するいくつかのパターンについて解説します。
大規模なプログラムでも、ひとつひとつの基本的な制御構造は単純なパターンの組み合わせから構成されてることがほとんどです。また、実際のプログラムで頻出する制御構造の種類は、いくつかの種類に収斂されます。つまり、基本的な制御構造のパターンを理解することができれば、既存のコード多くの部分を読み解いて理解することが可能となります。
今回の授業では、プログラムの基本制御構造を「継続」「選択」「くりかえし」「サブルーチン」という4つのパターンに分類して解説します。この4つのパターンは、今後openFrameworksで実践的なプログラムを作成していく上での基礎といえます。実際にサンプルのコードを題材にしながら、この4つのパターンについて解説していきます。
今日の講義は、まず初回ということで、このワークショップで使用するopenFrameworksという開発環境とは何なのか、どのような作品を実現できるのかについて説明します。その上で、プログラミングの第一歩として、openFrameworksのプロジェクトの基本的な構造を理解した上で、簡単な図形を描画してみます。さらに着色の方法や画面設定の基本を解説していきます
8月の大学の夏休み中に、比較的まとまった時間がとれるので、CityCompilerというプロジェクトのお手伝いしていました。なかなか面白い環境なのでこのBlogでもちょっとご紹介。
たとえば、プロジェクターやモニタを使用したちょっとした規模のインスタレーションをやりたいと思ったとき、ソフトウェアの部分はいろいろ試行錯誤できても、ハードウェアの部分は余程めぐまれた環境や機材がないといろいろ試したりするのは困難だったりします。そんな時に便利なプロトタイピングツールとして、慶應義塾大学の中西泰人さんおよび中西研究会で開発が進められているCityComilerという開発環境があります。オフィシャルページはこちら。
CityCompilerはjMonkey engineというJavaベースのゲームエンジンをベースにした開発環境で、仮想空間に物体を簡単に配置することができ、さらにそこに仮想のディスプレイやカメラ、プロジェクター、仮想のセンサーなどを配置していくことが可能となっています。さらに嬉しいのは、Javaベースの開発環境なので、仮想のディスプレイやプロジェクターにProcessingでつくったスケッチを簡単に組みこめます。このことで、実際に空間に配置しながらプログラムを修正したり配置を調整したりといった作業が簡単にできるわけです。
これをつかってどんなことができるかというと、例えば個人ではとても無理なような巨大な規模のシミュレーション。CityCompilerではGoogleスケッチアップなどで作成した3Dモデルを.obj形式に変換することでシーンに配置可能なので、有名建築にプロジェクションマッピングすることが可能。
CityCompiler_test.mov from Atsushi Tadokoro on Vimeo.
さらには、大量の物体もプログラムでくりかえし複製して、メモリや処理速度が追い付く限り、いくらでも配置できます。たとえば広大な地表にディスプレイを大量に配置するインスタレーションのシミュレーションなど。
CityCompiler multi monitor sketch from Atsushi Tadokoro on Vimeo.
jMonkey Engineのアニメーション機能をつかって、物体を動かすことも可能。例えばディスプレイ自体を大量に生成して動かしたり。
CityCompiler kinetic monitor sketch from Atsushi Tadokoro on Vimeo.
さらには、物体を動かしたところにプロジェクションをしたり。
CityCompiler kinetic projection sketch from Atsushi Tadokoro on Vimeo.
プロジェクションの際には、影の形状なども細かくシミュレーションしている様子がよくわかります。さらには、仮想の距離センサーを配置することも可能。鑑賞者との距離によって変化するオブジェクトの実験。
CityCompiler distance sensor sketch from Atsushi Tadokoro on Vimeo.
実際にいろいろ試してみると、とても楽しい環境です。今後はこの環境を活用したワークショップなども企画中。乞うご期待!!