PerfumeのモーションデータをiPhoneアプリにして動かしてみた：Retinaに映える！ iOS美麗アプリ制作入門（2）（3/3 ページ）

デザイン／アート用のC++フレームワーク「openFrameworks」でパーティクルやプリミティブを使ったRetinaに映える美麗なiPhone／iPadアプリの制作方法を紹介します

[蜜葉優，＠IT]

ソースコードをマージ

　次に、「perfume-dev-example-openFrameworks-45010ce/ofxBvh/example-bvh/src」の「testApp.cpp」「testApp.h」を「emptyExample/src」の「testApp.mm」「testApp.h」にマージします。

　まずは、「testApp.h」から始めましょう。「perfume-dev-example-openFrameworks-45010ce/ofxBvh/example-bvh/src/testApp.h」の以下の部分を「emptyExample/src/testApp.h」に書き加えます。

#include "ofxBvh.h"
 
   vector<ofxBvh> bvh;
   ofEasyCam cam;

　マージすると、「emptyExample/src/testApp.h」が以下のようになります。

#pragma once
 
#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"
#include "ofxBvh.h"
 
class testApp : public ofxiPhoneApp {
 
public:
    void setup();
    void update();
    void draw();
    void exit();
    
    void touchDown(ofTouchEventArgs &touch);
    void touchMoved(ofTouchEventArgs &touch);
    void touchUp(ofTouchEventArgs &touch);
    void touchDoubleTap(ofTouchEventArgs &touch);
    void touchCancelled(ofTouchEventArgs &touch);
 
    void lostFocus();
    void gotFocus();
    void gotMemoryWarning();
    void deviceOrientationChanged(int newOrientation);
    
    vector<ofxBvh> bvh;
    ofEasyCam cam;
};

　同様に、「testApp.mm」もマージします。主に、「setup()」部分に記述されているiOS用の記述をマージすればOKです。また、ロードしているbvhファイルもダウンロードしたモーションデータのファイルに差し替えます。

#include "testApp.h"
 
//--------------------------------------------------------------
void testApp::setup(){
    
    ofRegisterTouchEvents(this);
    
    // initialize the accelerometer
    ofxAccelerometer.setup();
    
    //iPhoneAlerts will be sent to this.
//    ofxiPhoneAlerts.addListener(this);
    ofSetFrameRate(60);
    ofSetVerticalSync(true);
    
    ofBackground(0);
    
    bvh.resize(3);
    
    // setup bvh
    bvh[0].load("aachan.bvh");
    bvh[1].load("kashiyuka.bvh");
    bvh[2].load("nocchi.bvh");
    
    for (int i = 0; i < bvh.size(); i++)
    {
        bvh[i].play();
        bvh[i].setLoop(true);
    }
}
 
//--------------------------------------------------------------
void testApp::update()
{
    for (int i = 0; i < bvh.size(); i++)
    {
        bvh[i].update();
    }
}
 
//--------------------------------------------------------------
void testApp::draw(){
    glEnable(GL_DEPTH_TEST);
    
    ofEnableBlendMode(OF_BLENDMODE_ALPHA);
    
    cam.begin();
    
    for (int i = 0; i < bvh.size(); i++)
    {
        bvh[i].draw();
    }
    
    cam.end();
    
}
 
//--------------------------------------------------------------
void testApp::exit(){
 
}
 
//--------------------------------------------------------------
void testApp::touchDown(ofTouchEventArgs &touch){
 
}
//--------------------------------------------------------------
void testApp::touchMoved(ofTouchEventArgs &touch){
 
}
 
//--------------------------------------------------------------
void testApp::touchUp(ofTouchEventArgs &touch){
}
//--------------------------------------------------------------
void testApp::touchDoubleTap(ofTouchEventArgs &touch){
 
}
//--------------------------------------------------------------
void testApp::lostFocus(){
 
}
 
//--------------------------------------------------------------
void testApp::gotFocus(){
 
}
 
//--------------------------------------------------------------
void testApp::gotMemoryWarning(){
 
}
 
//--------------------------------------------------------------
void testApp::deviceOrientationChanged(int newOrientation){
 
}
 
//--------------------------------------------------------------
void testApp::touchCancelled(ofTouchEventArgs& args){
 
}

testApp.mm全文

bvhファイルをコピー

　最後に、「data」フォルダにダウンロードしたbvhファイルをコピーします。Dataファイルはプロジェクト「/bin/data」にコピーされます。アプリ内で利用するリソースは、このフォルダに設置することになります。

実行

　実行してみましょう。冒頭の動画のようになっていますでしょうか。タッチして指をスライドさせると、視点を動かせると思います。

改良したら、Twitterでもつぶやこう

　公開されたopenFrameworksのサンプルプログラムはデスクトップ用のものでしたが、とても簡単にiOSアプリに移植できました。このように、openFrameworksはデータビジュアライズなどを得意としています。今回のように面白いデータやインプットがあれば、後は自由にopenFrameworksで表現するだけです。ぜひサンプルアプリを改良してみてください。

　さまざまな改良をした作品が、すでにWeb上にいくつか公開されているので、参考にしてみてはいかがでしょうか（perfumeのモーションキャプチャデータを公開！早速使ってみた人たちまとめ - NAVER まとめ）。ちなみに、早くも「Perfume Hackathon」が開催されるようです。

　なお、Perfumeのデータを使った場合は、作品に「http://www.perfume-global.com/」へのリンクを付けて、「#prfm_global_site」というハッシュタグを付けてTwitterでつぶやかないといけないとDOWNLOADページに記載があるので、ご注意ください。

著者紹介

蜜葉 優

1988年神戸生まれ。UIデザインからプログラミング、表現までやりたい、自称クリエイティブデザイナ。

“さわってみたい”を創ることが目標。フィジカルコンピューティングなどの試作を行う傍ら、コミュニティ活動ではExpression Blendを中心としたセッションを行っている

「次回」へ

「Retinaに映える！ iOS美麗アプリ制作入門」バックナンバー

• 画像をタッチ編集！ アートなiPhoneカメラアプリを作る
• PerfumeのモーションデータをiPhoneアプリにして動かしてみた
• Retinaに映える！美麗なiPhone／iPadアプリが作れるopenFrameworksとは