Processing.jsでフリックを認識したい

スマホやタブレットでのフリック操作を認識し、ボールを指でフリックして動かしたい。ProcessingはmouseX, mouseYでマウス座標を取れ、また、pmouseX, pmouseYで前の(previous)座標を取れるみたい。それから、マウスクリック(タップ)開始、終了のイベントハンドラがそれぞれmousePressed, mouseReleasedと定義されてるので実装してみた。スマホとタブレットで確認したけど、感覚的でない。。

確認コード：fling.html

メモ

フリック≠スワイプみたい。違いは速さだけ？フリックは素早く(払う操作)て、スワイプはゆっくり(なぞる操作)なイメージ。
底面以外の境界との衝突は、反発係数を考慮していない。

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Processing: parabolic motion</title>
</head>
<body>
	<canvas id="mycanvas"></canvas><br />

	<script src="processing-1.4.1.min.js" type="text/javascript"></script>
	<script type="application/processing" data-processing-target="mycanvas">
		float vx, vy;
		float x, y;
		float g = 9.8;
		float t = 0.2;
		float e = -0.8;
		float r = 80.0;	// ball radius
		boolean targetPressed = false;

		void setup() {
		  size(640, 480);
		  background(#000000);
		  fill(#FFFFFF);
		  noLoop();

		  x = r;
		  y = height - r;

		  ellipse(x, y, r*2, r*2);
		}

		void draw() {
		  background(#000000);

		  x = x + vx;

		  vy = vy + g * t;
		  y = y + vy * t + 0.5 * g * t * t;

		  if (y + r > height) {
		    y = height - r;
		    vy = vy * e;
		  }
		  else if (y < r) {
			y = r;
		  }

		  if (x > width-r) {
			x = width - r;
		  }
		  else if (x < r) {
			x = r;
		  }

		  ellipse(x, y, r*2, r*2);
		}

		void mousePressed() {
			targetPressed = false;

			if (x-r <= mouseX && mouseX <= x+r) {
				if (y-r <= mouseY && mouseY <= y+r) {
					targetPressed = true;
				}
			}
		}

		void mouseReleased() {
			if (targetPressed) {
				vx = mouseX - pmouseX;
				vy = mouseY - pmouseY;

				loop();
			}
		}
	</script>
</body>
</html>

参考サイト