多摩美 – Media Lab. I 2016
openFrameworks作品制作のための実践テクニック – アドオンの追加、画像、動画、3Dオブジェクトの読込と表示
今日の内容
WSの中間制作や学外展など、各種発表が迫ってきました。今回は、具体的な作品制作のためのopenFrameworksの様々な実践的なテクニックについて紹介していきます。
まず始めに、機能拡張のためのアドオン(Addons)の追加方法とその利用方法について。次に、画像や動画をプロジェクトに読み込んで表示する方法。サウンドの読み込みと再生。さらに3Dオブジェクトをプロジェクトに追加して表示する方法について取り上げます。
画像のロードと表示
ロードする画像を選択して表示します。画像は、.gif、.jpg、または .png フォーマットが使用可能です。
oFのプロジェクトの bin/data フォルダー内に「image」という名前で新規にフォルダーを作り、画像を格納します。
ofApp.h ファイル内で :
ロードしたい画像のそれぞれに対して、 ofImage型のインスタンス変数を追加します。
|
1 2 |
ofImage bikers; ofImage bikeIcon; |
ofApp.cpp ファイル内で :
ofImageクラスのload()メソッドを呼びだして、画像をロードします。画像は相対パスで指定します。
|
1 |
imageName.load("INSERT FILE PATH HERE") |
例 :
|
1 2 3 4 |
void ofApp::setup(){ bikers.load("images/bikers.jpg"); bikeIcon.load("images/bike_icon.png"); } |
ofImageクラスのdraw()メソッドを呼びだして、画像を表示します。画面上の水平と垂直の座標上の点を指定して配置します。画像の左上の角が配置の基準点になります。
|
1 |
imageName.draw(xPosition, yPosition) |
例 :
|
1 2 3 4 |
void ofApp::draw(){ bikers.draw(0, 0); bikeIcon.draw(190, 490); } |
加えて、表示する画像の 幅 と 高さ を新たに指定してリサイズすることも可能です。
|
1 |
imageName.getColor(xPosition, yPosition, width, height) |
例 :
|
1 2 3 |
void ofApp::draw(){ bikeIcon.draw(190, 490, 20, 20); } |
詳細な情報
このサンプルを確認してください : examples/graphics/imageLoaderExample
ビデオをロードして再生する
ロードして再生するビデオファイルを選択します。
oFのプロジェクト内の bin/dataフォルダに “movies” と名前をつけた新規フォルダを作成し、そこにビデオファイルを格納します。
ofApp.hファイル内で :
ロードしたいビデオのためにofVideoPlayerクラスのインスタンス変数を追加します。
|
1 |
ofVideoPlayer fingerMovie; |
ofApp.cppファイル内で :
setup()関数内で :
ofVideoPlayerクラスのload()メソッドを呼び出して、相対パスで指定してビデオをロードします。
|
1 |
videoName.load("INSERT FILE PATH HERE"); |
ビデオの再生を開始します。
|
1 |
videoName.play(); |
例 :
|
1 2 3 4 |
void ofApp::setup(){ fingerMovie.load("movies/fingers.mov"); fingerMovie.play(); } |
update()関数内で :
|
1 |
videoPlayer.update(); |
例 :
|
1 2 3 |
void ofApp::update(){ fingerMovie.update(); } |
draw()関数内で :
|
1 |
videoPlayer.draw(xPosition, yPosition, width, height); |
例 :
|
1 2 3 |
void ofApp::draw(){ fingerMovie.draw(0, 0, 400, 300); } |
詳細な情報
このサンプルを確認してください : examples/video/videoPlayerExample
サウンドの読み込みと再生
音の読み込みと再生はとても簡単です。ofSoundPlayerを初期化して、サウンドファイルを読み込んで、再生するだけです。
まず最初に、サウンドファイルを、bin/dataフォルダ内に入れてください。
ヘッダーファイル(.h)内で
ofSoundPlayerを初期化します。
|
1 |
ofSoundPlayer mySound; |
実装ファイル(.cpp)内で
setupメソッド内で、サウンドファイルを読み込みます。.mpr、.wavなど、様々な種類のサウンドファイルを読み込むことができます。
|
1 2 3 |
void ofApp:setup(){ mySound.load("fileName.mp3"); } |
次に、サウンドファイルを再生します。もし、setupメソッドに下記のコードを加えると、サウンドはアプリケーションを開始した際に1回だけ再生されます。もし、継続して再生したい場合は、ループ再生するように設定することも可能です。
|
1 2 3 4 |
void ofApp:setup(){ mySound.load("fileName.mp3"); mySound.play(); } |
マウスボタンを押した際や、キー入力、マウスドラッグなどの際に再生をトリガーすることも可能です。例えば、以下のように記述します。
|
1 2 3 4 5 |
void testApp::keyPressed (int key){ if(key == "p"){ mySound.play(); } } |
詳細な情報
oFでサウンドを扱うより詳細な方法は、oF Bookのsound chapterを、参照してください。
3Dモデルを読み込む
openFrameworksのアプリケーションに3Dのモデルを読み込むには、ofxAssimpModelLoaderアドオンを使用しなくてはなりません。このアドオンはopenFrameworksをインストールした際に付属されています。
まず初めに、ofApp.h内で、ofxAssimpModelLoaderをインクルードして宣言します。
|
1 2 |
#include "ofxAssimpModelLoader.h" ofxAssimpModelLoader yourModel; |
そして、ofApp.cppのファイル内で、モデルを読み込んで描画します。
|
1 2 3 4 5 6 7 |
void ofApp::setup(){ yourModel.loadModel("squirrel/NewSquirrel.3ds", 20); } void ofApp::draw(){ yourModel.drawFaces(); } |
openFramworksのaddons/3DModelLoaderExample/フォルダの中に、完成された作動するサンプルが入っています。
プロジェクトにアドオンを追加する方法
アドオンはどこにあるの?
アドオンは、 oFをインストールした階層のaddonsフォルダに置いてあります。oFをダウンロードした段階で、addonsフォルダにはいろいろなコアアドオンがみつかるでしょう。あなた自身で開発したアドオンや、他の人達によって開発されたアドオンも、ここに入れましょう。
projectGeneratorを使う (OSX / Windows / Linux)
アドオンをGUIのドロップダウンメニューから選択できます。
generate ボタンを押すと、アドオンがプロジェクトに追加されます。
既存のプロジェクトをインポートして、使用するアドオンを追加したり削除して変更することも可能です。
