iPhoneアプリ実践開発講座 1 – 画像ファイルの読み込み 画像でアニメーションを作成する
これから数回のわたって、openFrameworksを使用したiPhoneアプリの開発をサンプルプログラムを解説しながら実践的に解説していきます。今回は画像ファイルを使用して、ファイルを表示したりアニメーションさせたりする手法について説明していきます。
openFrameworks基礎 OOoF : オブジェクト指向 oF
オブジェクト指向プログラミング（object-oriented programming, OOP）とは相互にメッセージを送りあうオブジェクトの集まりとしてプログラムを構成する、プログラミングの手法です。openFrameworksでプログラムする場合にも、ある程度以上の規模のプロジェクトになってきた際にこのOOPの手法で、機能ごとにプログラムを分割していく方法が有効です。今回は、このオブジェクト指向によるopenFrameworks、Object-oriented openFrameworks = OooF! について学んでいきます。
サンプルファイルのダウンロード
解説したプログラムの全てのソースコードは下記のGithubのリポジトリからダウンロード可能です。
TumblrでWebサイトを作成
これまでは、Webサイトを作成するにあたり全てのページをHTML+CSSで記述してきました。しかし、最近ではある程度以上のWebサイトを作成するにあたり、コンテンツマネジメントシステム（Content Management System, CMS）という、Webコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムが広く利用されています。
今回は、このCMSの一例としてTumblrというWebサービスを使用してWebサイトの作成に挑戦します。
「ラングトンのアリ」openFrameworks版
「50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！」という記事に触発されて、「ラングトンのアリ」のopenFrameworks版をつくってみた。C++のスピードを生かして40匹のアリを一気に野に放ってみる。
最初地道にトンネルを掘っているのだが、一度トンネルが開通するとそのトンネルを利用してどんどん移動が高速化していく様子が面白い。たまにせっかく掘ったトンネルを塞いでいくマヌケなアリもいたりして… シンプルなルールなのに、まるで一つ一つのアリが知能を持っているように感じられるのが不思議。ラングトンはやっぱり面白い。10年ちょっと前のA-Lifeブームの後、この界隈ってどういう発展をしているんだろう…
プロジェクション・マッピング基礎練
今年の多摩美のopenFrameworksの授業(Media art II)では、プロジェクション・マッピングをとりあげていこうという方針になった。ところが、実は今まで知識としてはプロジェクション・マッピングについて知っていても、自分でゴリゴリとプログラムを書いてこなかった。主な理由としては、身近にプロジェクションしながら試す環境が無いというのが大きい。これではいかんということで、奮発して小型プロジェクターを購入してみた。
TwitterとFacebookでおすすめの小型プロジェクターを募ったところ、複数の方からQUMI Q5が良いという評判が寄せられた。それではということで、amazonで購入。あわせて、SLIKのミニ三脚も買ってみた。
数日で届いたので早速試してみたところ、期待していた以上に明るい。そして小さくて軽い。評判が良いだけあると実感。手元にあったNexus 7と大きさを比較してみると、こんな感じ。
道具は揃ったので、早速プロジェクション・マッピングの基礎練習。まずは、基本中の基本ということで、透視変換をつかってプロジェクターとは並行になっていない平面にピッタリと画像を投影する実験。本来はOpenCVで行列の計算をしなければいけない(と思う)のだが、便利なアドオンを開発している人が既にいるので、それを利用。julapyさんによるofxQuadWarpを使用すると、とても簡単に実現できる。
サンプルをちょっと修正して、ルービックキューブにoFロゴを投影してみた。プロジェクターが明るくて鮮明なので、なかなか良い感じ。
ここまで出来ると、いよいよ立体の複数の面にマッピングしたくなってくる。より本格的なキャリブレーションのシステムが必要となってくるのだが、まずは出来合いのプログラムを活用してみた。Kyle McDonaldさんが、YCAM InterLabに滞在して制作したプロジェクションマッピングのためのツールキット、「mapamok」を使用して、実験してみた。
Google Sketchupでルービックキューブをモデリングして(といっても、立方体を並べただけだけど)、それをモデルとしてmapamokに読み込む。キャリブレーションは慣れるまではちょっと戸惑うのだけれど、一度コツをつかめば意外と簡単だった。それぞれの頂点を選んで投影された図形をみながら調整していく。10分ほど調整して、ルービックキューブにピッタリとマッピングできた。サイバー!
アニメーションしてみるとこんな感じ。
なかなか楽しい!
まずは、既存のツールで試せたので、次のステップとしては自作のプログラムでマッピングできるようにしていきたい。
openFrameworks iOS 入門
今回の講義は、このワークショップで主に使用する開発フレームワークであるiOS版のopenFrameworksについての概要を解説し、簡単なプログラムを作成してみます。
イントロダクション・開発環境の準備
iTamabi初回の授業は、まずこのワークショップ全体のガイダンス・イントロダクションを行います。
openFrameworks基礎 – 配列とくりかえし、ベクトルを使用したアニメーション
今回から数回にわたって、openFrameworksの基本をマスターして、作品制作のための基礎体力をつけていきたいと思います。
今回は、Q&A方式でステップアップしながら、以下の項目について理解していきます。
- 乱数、ランダム
- くりかえし – for
- 配列
- 配列を使用したアニメーション
- 条件分岐 – if
- ベクトルの基礎概念
- 位置ベクトルと、速度ベクトル
- ベクトルを使用したアニメーション (ofVec2f)
- 摩擦力の表現
- 重力の表現
全てのサンプルファイルは以下からダウンロード可能です。
coma – creator’s talk session でのプレゼン資料公開
9月14日、西麻布のBullet’sで開催された「coma – creator’s talk session」でopenFrameworksについて喋ってきました。主催の青木さん始め、出演者の皆様方、ありがとうございました!
例によって、当日プレゼンした資料公開しました。若干技術的な細々した内容が多かったかも。もう少し内容を絞り込んだほうが良かったのかな。ちょっと反省…
後半の、「アドオンを作ろう!」のサンプルファイルは下記からダウンロードしてください。
ofxAddons.comの”make your own”の日本語訳はこちら。
ガイダンス、openFrameworks入門
初回の授業は、まずこの講義全体のスケジュールと目標を説明します。
全体の概要を理解したら、この講義で使用していくプログラミング環境の中心となるopenFrameworksについて、その基本的なコンセプトや開発の経緯などの説明を映像を交えて解説します。後半は、実際にopenFrameworksを用いた簡単なインタラクティブなアニメーションの制作に挑戦します。
サンプルファイルのダウンロード
解説したプログラムの全てのソースコードは下記のGithubのリポジトリからダウンロード可能です。