ProcessingでAndroidのマルチタッチをやってみる。

ProcessingのAndroidModeがそれなりに使えるようになってきたみたいなのでやってみてる。

環境というか前提

僕の使用環境は以下の通り。

Ubuntu 12.04
Processing 2.0b6
Nexus7(Android4.1)

これ以外の環境でできるか知りません。ごめんなさい。
Android4.0以上だといいかんじに動くとかなんとか??

ちなみにAndroidMode動かすのにADTがいるぽいので、適当に入れますｗ
ここらへんを参考に -> Android-Processing
(そもそもエミュレータは動作しなくて、涙目過ぎるので*1デバッグモードでUSBにNexus7ぶっ挿してやってます)

ちょっとだけ説明的な話

さっさと書き方だけ教えろーな人は読み飛ばしてもらって結構です。

AndroidやiOS系のスマートフォンだけにある機能って、なんだと思います??

ふつーのパソコンだと、カチカチとマウスを触りますよね??
なので、Processingの標準的なメソッドにはmouseHoge()というのがあります。
mouseClicked()とかmouseReleased()とか。そんなのマウスのイベントですね。
なんですけども、スマートフォンだとタッチじゃないですか。右クリックなんてないし、できませんよね。(マウスをUSBでつなげるとかそういうのはなしで)
なので標準的なProcessingのイベントだけを使うとタップとドラッグくらいしか表現できないんです。。。

(´・ω・｀)

で、これじゃあ残念ですね。ってだけで終わってしまうので、それを解決するライブラリが存在してたりします。
KetaiLibrary for Processing

日本語である「ケータイ」から名前付いてるんだから、凄いですね。
このライブラリを使えばマルチタッチに対応した、Processigのコードが書けます(ﾄﾞﾔｯ
(マルチタッチだけじゃなくてNFCとか位置情報使ったりとかできるらしい)

よく考えたらスマートフォンのディスプレイって、地味に多彩なアクションを感知してるわけだから凄いですよね。
タップ、ダブルタップ、ドラッグ、フリック、ピンチ、長押し、スワイプとかとか…。

というわけで実践↓↓
ProcessingでAndroidのマルチタッチをやってみた

実際に書いてみた

import ketai.ui.*;

KetaiGesture gesture;
float rectSize = 100;
float rectAngle = 0;
int x,y;
color c = color(255);
color bg = color(78,93,75);

void setup(){
  size(displayWidth, displayHeight);
  orientation(LANDSCAPE);
  gesture = new KetaiGesture(this);
  
  textSize(32);
  textAlign(CENTER, BOTTOM);
  rectMode(CENTER);
  noStroke();
  
  x = width/2;
  y = height/2;
}

void draw(){
  background(bg);
  pushMatrix();
  translate(x,y);
  rotate(rectAngle);
  fill(c);
  rect(0,0, rectSize, rectSize);
  popMatrix();
}

void onTap(float x, float y){
  text("SINGLE",x,y-10);
}

void onDoubleTap(float x, float y){
  text("DOUBLE",x,y-10);
  if(rectSize > 100){
    rectSize = 100;
  }else{
    rectSize = height - 100;
  }
}

void onLongPress(float x, float y){
  text("LONG",x,y-10);
  c = color(random(255),random(255),random(255));
}

void onFlick(float x, float y, float px, float py, float v){
  text("FLICK",x,y-10);
  bg = color(random(255),random(255),random(255));
}

void onPinch(float x, float y, float d){
  rectSize = constrain(rectSize+d, 10, 500);
}

void onRotate(float x, float y, float angle){
  rectAngle += angle;
}

void mouseDragged(){
  if(abs(mouseX - x) < rectSize/2 && abs(mouseY -y) < rectSize/2){
    if(abs(mouseX - x) < rectSize/2){
      x += mouseX - pmouseX;
    }
    if(abs(mouseY - y) < rectSize/2){
      y += mouseY - pmouseY;
    }
  }
}

public boolean surfaceTouchEvent(MotionEvent event){
  super.surfaceTouchEvent(event);
  return gesture.surfaceTouchEvent(event);
}

*1:あくまでも僕の環境ややり方がまずいからかもだけど