openFrameworks中級編4：アドオンを使う3 – ofxOsc
授業スライド
Sbaw091027
View more presentations from Atsushi Tadokro.
スライドをダウンロード (PDF形式)
サンプルファイル
授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。
第4回：映像のカノン
前回まで学習してきた、タイムラインを用いたアニメーションで、「映像のカノン」を作成してみましょう。
映像のカノンとは、「輪唱」のように一つのテーマを繰り返すことで、映像のハーモニーを生み出そうという実験です。Flashを用いた制作方法を解説していきます。
カノンって何？
カノン(かのん ／ canon英語フランス語Kanonドイツ語)
音楽用語。「規範」を意味するギリシア語に由来し、もっとも厳格な模倣対位法様式による作曲技法をさす。この意味でのカノンは二つ以上の声部から成り立ち、一声部（先行声部）の旋律を他の声部（後続声部）が厳格に模倣してともに進むもので、いわゆる輪唱はもっとも単純なカノンの一種である。声部の数により二声カノン、三声カノンのように表示されるほか、先行声部と後続声部との音程関係により、五度のカノン、八度のカノンなどとよばれる。カノンには後続声部の模倣の仕方によってさまざまな種類がある。単独で、あるいは組み合わせて楽曲全体またはその一部に用いられる。（抄録）
「大日本百科全書」（ニッポニカ）より引用
映像のカノン
カノンをメロディーではなく、映像で表現することを試みる。同じ動きを繰り返していく映像を一つの声部にみたてて、そのシーケンスを同じ長さづつずらしていくとで「映像のカノン」を作る。
このアイデアは、ノーマン・マクラレンの1964年の作品「カノン」に見ることができる。
ノーマン・マクラーレン「カノン」視聴(DVD)。
-
ポイント
- 様々なカノンのバリエーション：移調、反転、変奏、etc.
- 時間の構成
- 音との同期
「カノン」Flash版を作る
基本形：4声のカノン
変奏1：色によるヴァリエーション
変奏2：変形と色によるヴァリエーション
ソースファイルのダウンロード
「カノン」の作成方法
- ムービーの1フレーム目にアニメーションさせるオブジェクトを描きシンボル化する。シンボルのタイプは「グラフィック」。(詳細は前章の説明を参照)
- アニメーションと同期させるサウンドトラックの長さにあわせて、「挿入」→「フレームを挿入」でフレームを挿入。この例では、193フレーム。フレームは「挿入」→「モーショントゥイーンを作成」でモーショントゥイーンにして、イージングを設定しておく。
- 音楽の拍(リズム)のフレーム数先に進み、「挿入」→「キーフレーム」でキーフレームを挿入。この例だと、一拍が1秒で、ムービーが12flame/secなので、12フレーム先にすすめて13フレーム目にキーフレームを挿入。キーフレームを選択た状態で、ステージ上のオブジェクトを移動する。
- さらに一拍分先に進め、キーフレームを挿入し、物体を移動。この例では、13 + 12 = 25フレーム。
- この操作をくりかえして、最後のフレームまで物体を移動していく。
- メニュー「挿入」→「レイヤー」を選らんで、タイムトラックのレイヤーを追加する。
- 矢印ツールを使って、1つ目のレイヤーすべてを選択する。選択された状態で「編集」→「フレームのコピー」でフレームをコピーする。
- 2つ目のレイヤーに移動して、「編集」→「フレームのペースト」でコピーしたフレームを貼り付ける。
- 全てが選択されている状態でマウスをドラッグして、音楽の1小節分だけ右へずらす。この例では、49フレーム目までずらしている。
- この操作を3回繰り返し、おなじ幅づつ右へシフトした、4つのレイヤーを作成する。
- 「ファイル」→「読み込み」でファイルダイアログを表示して、音声ファイルをインポートする。インポートされた音声はライブラリに登録されている。
- 「挿入」→「レイヤー」で新規にレイヤーを作成し、ライブラリパレットから作成したレイヤーに音声を貼り付ける。
- 貼り付けたサウンドのフレームを矢印ツールで選択すると、プロパティインスペクタにサウンドの設定が表示される。「同期」のプルダウンメニューから、「ストリーミング」を選択する。
- 「ファイル」→「パブリッシュ」を選択して、ムービーをパブリッシュする。htmlファイルとswfファイルが生成される。これで完成!
openFrameworks中級編3：アドオンを使う2 – ofxOpenCv
授業スライド
Sbaw091020
View more documents from Atsushi Tadokro.
スライドをダウンロード (PDF形式)
サンプルファイル
授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。
第3回：アニメーション表現(2)：加速・減速
講義スライド
Flashで、等速・加速・減速を用いて表現してみる
モーショントゥイーンでの動きの種類、「加速」「減速」の設定をするには、フレームプロパティーのイージングの設定で変化させます。
イージングを用いて「加速」と「減速」を効果的に適用することで、様々なアニメーション表現が可能となります。いろいろ試してみましょう。
サンプル1：加速と減速のスペクトラム
加速
減速
サンプル2：反射 + 物質の重量の表現
物体の衝突
重力
サンプル3：遠近・奥行の表現
openFrameworks中級編2：アドオンを使う
授業スライド
Sbaw091013
View more presentations from Atsushi Tadokro.
スライドをダウンロード (PDF形式)
サンプルファイル
授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。
OpenFrameworks中級編：クラス構造を理解する
授業スライド
Sbaw091006
View more presentations from Atsushi Tadokro.
スライドをダウンロード (PDF形式)
サンプルファイル
授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。
第２回：アニメーション表現1
そもそもアニメーションとはどうやって作るのか？
DVD視聴
DVD, “Norman McLaren Film Works Collection”より「マクラーレンのアニメーション講座1」を視聴。
- アニメーションの原理：どうして動いて見えるのか
- 古典的なアニメーション制作装置
- アニメーションの撮影方法
- カウンター
- テンポ
Flashでも、アニメーションを作る基本はこうした古典的なアニメーション制作の方法を踏襲している。しかし、実際にはDVDで紹介されていたアナログな方法よりもはるかに効率良くアニメーションを作っていくことが可能である。今日の講義では、物体の位置が一定の「テンポ」で移動するアニメーションを制作してみる。
Flashワークエリア各部機能
ワークエリアは名前の通り、アニメーションを作っていくための「作業台」。このなかに様々な道具が詰っています。各部の機能をひとつづつ見ていきたい。
ワークエリア
ムービーの作成に必要な機能が各部にまとめられている。
ステージ
アニメーションさせるグラフィックやボタンなどが配置される「撮影台」。ステージでの動きが最終的にムービーとして出力される。
ツールボックス
シンボルの選択や、グラフィイクの作成、変形などの各種のツールが入った「道具箱」。
パネル
ステージ上のオブジェクトやムービー全体に関するさまざまな操作を行うための画面。
タイムライン
ムービの時間の流れに沿って、オブジェクト等の動き、変化などを制御する画面。
ライブラリ
シンボル化されたエレメントが登録されている。シンボルは再利用が可能。
プロパティインスペクタ
ツールやオブジェクトの頻繁に使用される設定を表示。
2.2.物体が移動するアニメーションを作ってみる
2.2.1.完成サンプル
2.2.2.作成手順
- ツールボックスの楕円ツールを選択して、ステージ上に円を描く。
- 矢印ツールで描いた円の全体を選択する。網点で選択範囲が表示される。
- メニューから「挿入」→「シンボルに変換」を選択。ダイアログボックスが表示されるので、このエレメントの名前をつけ、タイプを「グラフィック」にしてOKする。
- ※シンボルは、ドキュメントで使用する再利用可能なエレメントです。作成された新しいシンボルは、ファイルのライブラリに保存されます。シンボルを効率的に使うことにより、ファイルサイズを小さくできます。これは、インスタンスをいくつ作成しても、ファイルにはシンボルが 1 つしか保存されないためです。ドキュメント内で 2 回以上表示されるエレメントは、アニメーションであるかどうかにかかわらず、シンボルに変換すると便利です。
- 物体を移動させる際のフレーム数分先のフレームを矢印ツールで選択する。
- 選択された状態のまま、メニューから「挿入」→「フレーム」を選択。間のフレームが自動的に灰色に埋められる。
- メニューから「挿入」→「モーショントゥイーンを作成」を選択。フレームの色が紫色に変化し、中にモーショントゥイーンが完成していないことを示す点線が表示される。
- フレームの最後が選択されている状態で、矢印ツールを使って、作成した円のシンボルを選択しそのまま移動したい先までドラッグする。自動敵に新しいキーフレームが生成され、点線が実線に変化します。
- キーフレームを選択するとプロパティインスペクタにイージングというプロパティが表示されます。この値を負の値(0〜-100)にすると、「加速」の効果が得られます。反対にこの値を正の値(0〜100)にすると「減速」の効果になります。
AR化する社会
セカイカメラ、なかなか公開されずじらされたけど、先週ようやくリリースされた。早速iPhoneにインストールして楽しんでる。初日はサーバーが大混雑でなかなか繋らず、大丈夫かと心配したが、最近は通信にも問題なく安心して使えるようになってきた。
ネットのレビューを読んでいたりしたので概略は知っていたつもりだったが、いざ実際に自分で使用してみると想像を越えて面白い。渋谷や新宿など人が集中する場所には既に大量のエアタグが貼りつけられていて、その浸透度に驚く。秋葉なんかはもっと凄いのかもしれない。iPhone 3GSだともっと面白いんだろうな…。
今後、こうしたAR的なアプローチで現実世界とリンクするアプリがiPhoneだけでなくいろいろなメディアで普及していくのかもしれない。Nintendo DSiで同じようなアプリが出たら、もっと爆発的に流行るんじゃないだろうか。
ただ、そうすると、いろいろな混乱や問題も起こりそう。例えば、ラーメン屋の店先に「ここマズい」というエアタグを貼るひとが出たり、芸能人の住むマンションの入口に「ここに○○が住んでるよ」とか。もちろん、いままでのネットでもそういった評判や裏情報はやりとりされてたんだけど、それが場所と結びついて、誰でも見られる形で公開されるというのはインパクトが違う。
個人的には、2ch的な殺伐とした世界はあまり好きではないので、うまく運用することで平和なムードが続いて欲しいと思う。たぶん頓知社内ではそうした社会的な影響についても、いろいろ議論をしているのだろうとは思うけれど。
こうした現実世界にタグを貼るというサービス、Googleストリートビューと連携するとさらに面白そう。Googleのことだから、既に着々と準備してそうな気もするが…。
写真は渋谷駅の東横線ホーム。