javascript - html5 canvas - touchmove - how to calculate velocity and direction? -

so want measure how fast , direction user swipes on html5 canvas?

seems there should written dont have re-invent wheel, cant find anything. know of javascript function?

if had myself, thinking this:

• grab touch events x & y, store them in array variable
• calculate slope between 2 points (maybe average out if slopes different)
• not sure how measure velocity, maybe distance between points?

any other ideas?

here canvas , shape, , listens on touch events. when touch on iphone or iphone simulator 1 or 2 events. see coordinates. using kineticjs stage , shape.

to try it, go url in iphone , put finger on circle , push somewhere. (or if have ios simulator can use also)

here fiddle: http://jsfiddle.net/jnylund/urgzz/16/

   function writemessage(messagelayer, message) {    var context = messagelayer.getcontext();    messagelayer.clear();    context.font = '18pt calibri';    context.fillstyle = 'black';    context.filltext(message, 10, 25);    var div = document.getelementbyid('tevents');    div.innerhtml = div.innerhtml + message + "<br/>";  }  var stage = new kinetic.stage({    container: 'container',    width: 460,    height: 320 });  var layer = new kinetic.layer(); var messagelayer = new kinetic.layer();  var circle = new kinetic.circle({    x: stage.getwidth() / 2,    y: stage.getheight() / 2,    radius: 40,    fill: 'red',    stroke: 'black',    strokewidth: 4 //,    // draggable: true });  circle.setx(230); circle.sety(160);  circle.on('touchmove', function (event) {    writemessage(messagelayer, 'touch event length ' + event.touches.length);    (var = 0; < event.touches.length; i++) {        var touch = event.touches[i];        writemessage(messagelayer, 'event x: ' + touch.pagex + ', y: ' + touch.pagex);    }     var touchpos = stage.gettouchposition();    writemessage(messagelayer, 'stage x: ' + touchpos.x + ', y: ' + touchpos.y);  });  // add shape layer layer.add(circle);  // add layer stage stage.add(layer); stage.add(messagelayer); 

thanks joel

you can these steps:

• touch down, store time , position
• touch up, store time , position

in same handler touch continue these steps:

• subtract start time end time
• calculate distance between start point , end point
• calculate angle between start point , end point

to factor relate divide distance on time difference. higher value faster velocity.