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

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


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

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

# タッチパネルフレーム

![ファイル_000.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/95e7681b-3930-42a1-73f1-ef66702dfc2c.jpeg)
自分が購入したのが[43inch 10点マルチタッチ紫外線タッチフレーム](https://www.amazon.co.jp/zhanchu-43inch/dp/B078SXHDR4/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%82%BF%E3%83%83%E3%83%81%E3%83%91%E3%83%8D%E3%83%AB%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0&qid=1613709448&sr=8-2)で2万くらいで購入出来ます．この大きさで2万は結構安いと思います．この他にも27inchや65inchなど各種サイズがあるので，見てみてください．PCとの接続もUSBで簡単に接続出来ます．

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

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

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

# 開発環境
windows10
openframeworks 0.11
addon : [ofxMultitouch](https://github.com/OliviaLynn/ofxMultitouch)

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

# アプリケーション
制作したプログラムは[GitHub](https://github.com/kikpond15/touch_frame_particle)に上げております。今回のプログラムはofxMultitouchのサンプルを参考に作成されています。タッチフレームでサンプルをそのまま使用することも出来ます。


```c++: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;
};
```


```c++: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](https://github.com/kikpond15/touch_frame_particle)に置いておきます。

こんな感じで指でなぞったところからきれいなパーティクルを発生させます。
色をランダムにするとポップな感じになりますね。
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/52e48ed6-b274-012b-842d-289d731c3932.gif) ![touch_frame_particle02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/62adf26c-42de-e496-a1a6-db5a21da7669.gif)

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