yoppa.org


第13回 : 最終課題のヒント – インタラクション

Reactive Books, John Maeda, 1995 – 1999

最終課題のテーマは「インタラクション」です。

今回は、この最終課題のテーマ「インタラクション」について、課題制作のヒントになりそうなトピックスをとりあげていきます。マウスやキーボードを使用した基本的なインタラクションから、音を使用したインタラクション(ofxFft)、映像を使用したインタラクション(ofxOpenCV、ofxCv) など応用的な内容までカバーしていきます。

最終課題について

最終課題のテーマ「インタラクション」

外部からの何らかのアクションに対して反応する作品を制作し発表してください。openFrameworksを使用していることを条件としますが、他のプログラムと組み合わせても構いません。

ユーザーのアクションはマウスやキーボードだけとは限りません。

  • 映像
  • ネットワーク
  • 各種センサー

など様々な入力を元にしてインタラクションについて面白いアイデアを実現してください。

スライド資料

サンプルファイル


第12回: Shader (GLSL) によるGPUプログラミング

Shaderとは、もともとは3Dコンピュータグラフィクスで、シェーディング (陰影処理) をするプログラムのことを指していました。従来は、開発者やデザイナーは、グラフィクスカード (GPU) に固定機能として実装された定形の処理しか使えませんでした (固定機能シェーダー)。2000年代に入って、プログラマブル・シェーダーが登場します。これまでブラックボックスだったシェーダー自体が、プログラム可能になりました。OpenGLではGLSLというプログラミング言語が策定されシェーダーをプログラムすることが可能です。画面上の膨大なピクセル情報を、高い並列処理性能を持つGPUで実行することにより、CPUで実行するよりもはるかに高いパフォーマンスを実現できるようになりました。

今回は、このShaderをopenFrameworksから操作して高度な表現に挑戦します。

スライド資料

サンプルファイル


第11回: openFrameworks – 映像を使ったインタラクション ofxOpenCv、ofxCv

今回は、Addonの利用の2回目として、ofxOpenCvとofxCvを扱います。メディアアート作品では、カメラから取得した映像を用いてインタラクションを行う事例が沢山存在しています。映像を使ったインタラクションは、特別なセンサーを使用することなく、また鑑賞者に直接接触することなく高度なインタラクションが可能となり、多くの可能性を秘めた手法です。また、近年では映像の中から物体を認識したり、映像の中の微妙な差分や動きを検出したりといった、コンピュータ・ビジョン(Computer Vision = CV)の技術が発展し、高度な映像解析が活用できるようになりました。今回は、こうしたCVの技術の中でもオープンソースで多くの利用実績のあるOpenCVというCVのためのライブラリをopenFrameworksで活用する方法について紹介していきます。

スライド資料

サンプルファイル


第10回: openFrameworks Addon 3 – Open Sound Control (OSC) によるアプリケーション間通信 ofxOsc

今回は、Addonの使用の3回目として、ネットワークを活用したインタラクションについて考えていきます。ofxOscは、openFrameworksでOpen Sound Control(OSC)という通信プロトコルを使用するためのAddonです。OSCは、openFrameworksのアプリケーション同士をEthernetを介して通信することができ、これにより、ネットワークを介して複数のユーザが1つのアプリケーションを操作することが可能となります。またopenFrameworksのアプリケーションを他のアプリケーション、例えば、Max/MSPやPd、SuperCollider、さらにはTouchOSCといったiPhoneアプリなどからコントロールすることが出来るようになります。

スライド資料

サンプルプログラム


openFrameworks – 物理シミュレーション ofxBox2D

今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。

ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。

スライド資料

サンプルファイル


第8回: openFrameworks – 3Dグラフィクス、メッシュの操作

この講義では、ここまで主に2次元平面上での描画による表現を扱ってきました。今回は2次元での表現からさらに(文字通り)次元を越えて、3次元空間での表現について考えていきたいと思います。

openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも3次元のグラフィクスの描画のために開発されたライブラリであり、最初から3次元空間をとり扱うための様々な機能が備わっています。

しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ(視点)、ライティング、光と影(シェーディング)、奥行の重なりなどといった2次元の平面には無かった様々な技術や概念の理解が必要となります。

スライド資料

サンプルファイル

プログラムのサンプルは、以下からダウンロードしてください。


第7回: openFrameworks Addon 1: Addonについて – ofxGui

Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。

今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。

スライド資料

サンプルコード


第6回 : 力と運動 : openFrameworksで動きを極める!

これまでやってきたように、openFrameworksで位置と運動のベクトル(glm::vec2)を操作することで、アニメーションを作成することができました。単純な動きの場合はこうした座標の足し算引き算で対応可能です。しかし、ここからさらに発展させて、よりリアルな動きを実現しようとすると、限界があります。今回は、単なる座標操作ではなく、運動の背後にある物理的な原理を理解して、その本質に迫ります。

アイザック・ニュートンは、運動の法則を基礎として構築した、力学体系を構築しました(ニュートン力学)。物体の運動や力、質量といったものは、ニュートンの運動の法則によって説明できます。

  • 第1法則(慣性の法則): 質点は、力が作用しない限り、静止または等速直線運動する
  • 第2法則(ニュートンの運動方程式): 質点の加速度は、そのとき質点に作用する力に比例し、質点の質量に反比例する
  • 第3法則(作用・反作用の法則): 二つの質点の間に相互に力が働くとき、質点 2 から質点 1 に作用する力と、質点 1 から質点 2 に作用する力は、大きさが等しく、逆向きである

今回は、このニュートンの運動の法則を援用しながら、様々な動きや力についてopenFrameworksで実装しながら、動きに関する理解を深めていきます。

スライド

サンプルファイル


第5回: openFrameworks + OOP – オブジェクト指向プログラミング入門

これまでのopenFrameworksのプロジェクトは、ofApp.h と ofApp.cpp という2つのファイルに全てのプログラムを記述してきました。しかし、この方法では徐々にプロジェクトが複雑になり巨大化するうちに、扱いが困難になってきます。プログラミングをわかりやすく保つには、役割ごとに内容を分割して記述すべきです。openFrameworksの元となるプログラミング言語であるC++では「オブジェクト」という単位でプログラムを構造化していきます。このオブジェクトを基本単位にしたプログラミング手法のことを「オブジェクト指向プログラミング (Object Oriented Programing = OOP)」と呼びます。OOPはC++だけでなく、Java、Python、Ruby、C#、Objective-C、Swiftなどでも利用されていて、現在のプログラミング言語の主流となっているパラダイムです。

今回は、このOOPをopenFrameworksで実現する方法を「生成的な形態を生成する」というテーマに沿って徐々に発展させていきます。今回の内容が今後のより本格的な作品制作のための重要なテクニックとなっていきます。しっかり理解していきましょう。

スライド資料

サンプルコード


第4回: openFrameworksアニメーションの基本

今回は、openFrameworksで図形を動かす「アニメーション」について、その基本を学んでいきます。まず始めに、位置と速度をベクトル(glm::vec2)で定義して、ベクトルの演算によって動きを生みだす方法について解説します。次に、そのベクトルを配列(Array)で表現することで、複数の物体を同時に動かしてみます。

物体の上限の数がプログラムを起動する段階で決まっていない場合もあります。そのような際には、配列の要素の数を動的に変更可能な可変長配列(std::vector)を使用すると便利です。可変長配列を使用してアニメーションする物体の上限数を可変にする方法を実際のサンプルを通して紹介していきます。

最後に簡単なインタラクションを実装してみます。マウスで画面上をクリックすると、クリックした場所から次々と物体が生成されアニメーションさせます。

スライド資料

サンプルコード

Example 1. アニメーションの基本

Example 2. 物体の数を増やしてみる – 配列とくりかえし

Example 3. 数の上限がわからない時には? – 可変長配列vectorを使う

Example 4. 一定の数に制限する

Example 5. マウスをドラッグした位置から物体を生成