I am creating an interactive animation of a cat you can stroke, rub, poke etc.
I have implemented some basic functions in an attempt to recognize the different gestures, I am using the mouse down and mouse up events to track the duration and distance of the click.
My problem with this is that the 'distance' is measured from the start point and end point of the click, so if it ends near where it started you won't be able to tell how many times the click has 'rubbed' back and forth.
Is there anyway to track the distance based on the full path of the click? My code is below, does any one have some suggestions?
this.stage.addEventListener(MouseEvent.MOUSE_DOWN, pressed);
this.stage.addEventListener(MouseEvent.MOUSE_UP, released);
var firsttime:Number;
var lasttime:Number;
var firstx:Number;
var lastx:Number;
var firsty:Number;
var lasty:Number;
var duration:Number;
var distance:Number;
function pressed(e:MouseEvent):void {
firsttime = new Date().getTime();
firstx = mouseX;
firsty = mouseY;
trace("mouse down");
}
function released(e:MouseEvent):void {
lasttime = new Date().getTime();
lastx = mouseX;
lasty = mouseY;
duration = lasttime - firsttime;
distance = pythagoras((firstx-lastx), (firsty-lasty));
trace("mouse up");
trace( duration );
trace(distance);
trace(gesture(duration, distance));
}
function pythagoras(xlen:Number, ylen:Number):Number {
return Math.sqrt((xlen*xlen) + (ylen*ylen));
}
function gesture(duration:Number, distance:Number):String {
if (distance < 1 ){
if (duration < 200){
return "Sharp Poke";
}
return "Slow Poke";
}
if (duration < 500) {
return "Stroke";
}
return "Rub";
}