マルチタッチフレーム＆openFrameworksでインタラクティブアートを作る

14643 ワード
touchpanel openFrameworks openFrameworks テキストリンク

はじめに

少し前に研究目的で中国zhanchu社のマルチタッチフレームを購入しました。最初は正直ちゃんと使えるのか心配でしたが、
普通にタッチパネルとして使えてopenFrameworkやProcessingからでもデータアクセスする事が出来ました。
テーブルトップUIやジェスチャラルUIを簡単に実装したい人にはおすすめだと思います！

参考までに自分がタッチフレームで制作した作品のリンクも貼っておきます。
https://kikpond15.github.io/portfolio/kui_based_puppet.html

今回はこのタッチフレームとパーティクルシステムを使って、簡単なインタラクティブアートを制作したいと思います.

タッチパネルフレーム


自分が購入したのが43inch 10点マルチタッチ紫外線タッチフレームで2万くらいで購入出来ます．この大きさで2万は結構安いと思います．この他にも27inchや65inchなど各種サイズがあるので，見てみてください．PCとの接続もUSBで簡単に接続出来ます．

商品名に紫外線と書いてありますが、多分赤外線を使用していると思います。

Windows or Mac?

Windowsの場合、USB接続するだけで勝手にHID認識してくれるのでそのままマウスとして使用できます。

Macの場合ドライバーをインストールする必要があります。自分はこちらのUPDD TUIO Serverを使用しました。
TUIOとはテーブルトップUIをサポートするために開発された通信プロトコルで、OSCがベースとなっています。
少し前に流行ったreacTIVisionでもこのTUIOを使用しています。

開発環境

windows10
openframeworks 0.11
addon : ofxMultitouch

このofxMultitouchを使えば簡単にタッチフレームからマルチタッチポイントを取得することが出来ます。

アプリケーション

制作したプログラムはGitHubに上げております。今回のプログラムはofxMultitouchのサンプルを参考に作成されています。タッチフレームでサンプルをそのまま使用することも出来ます。

ofApp.h
#pragma once

#include "ofMain.h"
#include "ofxMultitouch.h"
#include "particleSystem.hpp"

class ofApp : public ofBaseApp {
public:
    void setup();
    void update();
    void draw();

    // add the touch listeners
    void touchDown(ofTouchEventArgs& touch);
    void touchMove(ofTouchEventArgs& touch);
    void touchUp(ofTouchEventArgs& touch);

    ParticleSystem particleSystem;
};
ofApp.cpp
#include "ofApp.h"
#include <list>
list <ofTouchEventArgs> touches;
//--------------------------------------------------------------
void ofApp::setup() {
    ofBackground(0);
    ofSetFrameRate(60);
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    ofHideCursor();
    ofxMultitouch::EnableTouch();
    // タッチイベントリスナーを追加
    ofAddListener(ofxMultitouch::touchDown, this, &ofApp::touchDown);
    ofAddListener(ofxMultitouch::touchMoved, this, &ofApp::touchMove);
    ofAddListener(ofxMultitouch::touchUp, this, &ofApp::touchUp);

    particleSystem = ParticleSystem(ofVec2f(0,0));
}
//--------------------------------------------------------------
void ofApp::update() {

    list<ofTouchEventArgs> ::iterator it;
    for (it = touches.begin(); it != touches.end(); ++it) {
        //タッチポイントを表示
        ofDrawCircle((*it).x, (*it).y, 50);

        //パーティクルシステムに、検出されている指の座標ごとにパーティクルを追加する
        particleSystem.addParticle(ofVec2f((*it).x, (*it).y));
        //パーティクルに対してランダムな方向に力を加える
        ofVec2f force(ofRandom(-1, 1), ofRandom(-1, 1));
        particleSystem.applyForce(force);
    }
    particleSystem.update();
}
//--------------------------------------------------------------
void ofApp::draw() {
    particleSystem.display();
}

//--------------------------------------------------------------
void ofApp::touchDown(ofTouchEventArgs & touch) {
    //タッチが検出されたら、ポイントを追加する
    touches.push_back(touch);
}
//--------------------------------------------------------------
void ofApp::touchMove(ofTouchEventArgs & touch) {
    //タッチポイントの移動を検出
    std::list <ofTouchEventArgs> ::iterator it;
    for (it = touches.begin(); it != touches.end(); ++it) {
        if (it->id == touch.id) {
            *it = touch;
        }
    }
}
//--------------------------------------------------------------
void ofApp::touchUp(ofTouchEventArgs & touch) {
    //タッチポイントが離れたときに、ポイントを削除する
    ofTouchEventArgs touchToRemove;
    std::list <ofTouchEventArgs> ::iterator it;
    for (it = touches.begin(); it != touches.end(); ++it) {
        if (it->id == touch.id) {
            touchToRemove = *it;
        }
    }
    touches.remove(touchToRemove);
}

パーティクルシステムも含めたコードはこちらのGitHubに置いておきます。

こんな感じで指でなぞったところからきれいなパーティクルを発生させます。
色をランダムにするとポップな感じになりますね。

皆さんも大型のタッチディスプレイを使った作品など作りたいときは是非使ってみて下さい！