2

So I want to measure how fast and what direction a user swipes on an html5 canvas?

Seems like there should be something already written to do this so I dont have to re-invent the wheel, but I cant find anything. Anyone know of a JavaScript function?

If I had to do myself, I am thinking this:

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

any other ideas?

Here is my canvas and my shape, and it listens on touch events. When touch on my iphone or iphone simulator I usually get 1 or 2 events. I see the coordinates. I am using kineticjs for the stage and shape.

To try it, go to this url in your iphone and put your finger on the circle and push it somewhere. (or if you have ios simulator you can use that also)

Here is my 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 is ' + event.touches.length);
   for (var i = 0; i < 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 the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);
stage.add(messageLayer);

thanks Joel

Joelio
  • 4,621
  • 6
  • 44
  • 80
  • What have you done so far? – Mohsen Apr 18 '13 at 19:43
  • I have code that gets touchmove events and logs them so I can see what is fired. I haven't worked on the direction and velocity yet as I am hoping not to have to build something custom. – Joelio Apr 18 '13 at 20:14

2 Answers2

9

You can do it simply with these steps:

  • Touch down, store time and position
  • Touch up, store time and position

In the same handler as touch up continue with these steps:

To get a factor to relate to you divide distance on time difference. The higher value the faster the velocity.

Community
  • 1
  • 1
  • I will give this a try, thanks, so I guess there is nothing out there already – Joelio Apr 19 '13 at 18:47
  • @Joelio I have made a library [easyCanvas](]http://easyCanvasJS.com/) which can do this for you, but currently touch is not supported. The library also uses moving-average to calculate velocity to get a more accurate velocity value as well as getting 0 if one hold an object still. The library is free (GPL-3.0). –  Sep 27 '13 at 07:32
2

Velocity can be measured a number of ways:

  • Timestamps between your initial and final points measured in pixels per millisecond.
  • Framerate, for fixed rates, measured in pixels per frame or pixels per second.

Then convert the values to the scale used in your app, like kph or mph for racing.

Joseph
  • 117,725
  • 30
  • 181
  • 234