bbinet · December 11, 2015 13:39
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Drag test</title>
  </head>
  <body>
    Drag inside the box and see the graphs below.
    <div style="width:800px; height:400px; border:solid;" id="box"></div>
    <p>x, y:</p>
    <div style="width:800px; height:400px;" id="x_y">...</div>
    <p>vx, vy:</p>
    <div style="width:800px; height:400px;" id="vx_vy">...</div>
    <p>v:</p>
    <div style="width:800px; height:400px;" id="v">...</div>
    <p>angle:</p>
    <div style="width:800px; height:400px;" id="a">...</div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//g.raphaeljs.com/g.raphael.js"></script>
    <script src="//g.raphaeljs.com/g.line.js"></script>
    <script>
      var box = document.getElementById("box");
      var previous, t0, t, x, y, dx, dy, vx, vy, v, a, g_x_y, g_vx_vy, g_v, g_a;
      var values = {t:[], x:[], y:[], vx:[], vy:[], v:[], a:[]};
      var mouseify = function(evt) {
        var nativeTouch = evt.touches[0];
        evt.clientX = nativeTouch.clientX;
        evt.clientY = nativeTouch.clientY;
      }
      var update = function(evt) {
        if (previous) {
          t = Date.now() - t0;
          x = evt.clientX;
          y = evt.clientY;
          dx = x - previous.x;
          dy = y - previous.y;
          vx = dx / (t - previous.t);
          vy = dy / (t - previous.t);
          v = Math.sqrt(vx*vx + vy*vy);
          a = Math.atan2(dy, dx) * 180 / Math.PI;
          previous = {x: x, y: y, t: t};
          values.t.push(t);
          values.x.push(x);
          values.y.push(y);
          values.vx.push(vx);
          values.vy.push(vy);
          values.v.push(v);
          values.a.push(a);
        }
      };
      var start = function(evt) {
        t0 = Date.now();
        t = 0;
        x = evt.clientX;
        y = evt.clientY;
        previous = {x: x, y: y, t: t};
        values = {t:[], x:[], y:[], vx:[], vy:[], v:[], a:[]};
      };
      var end = function() {
        document.getElementById("x_y").innerHTML = "";
        g_x_y = new Raphael(document.getElementById("x_y"));
        g_x_y.linechart(15, 10, 780, 380,
          values.t,
          [values.x, values.y],
          {axis: "0 0 1 1", symbol: 'circle'});
        document.getElementById("vx_vy").innerHTML = "";
        g_vx_vy = new Raphael(document.getElementById("vx_vy"));
        g_vx_vy.linechart(15, 10, 780, 380,
          values.t,
          [values.vx, values.vy],
          {axis: "0 0 1 1", symbol: 'circle'});
        document.getElementById("v").innerHTML = "";
        g_v = new Raphael(document.getElementById("v"));
        g_v.linechart(15, 10, 780, 380,
          values.t,
          values.v,
          {axis: "0 0 1 1", symbol: 'circle'});
        document.getElementById("a").innerHTML = "";
        g_a = new Raphael(document.getElementById("a"));
        g_a.linechart(15, 10, 780, 380,
          values.t,
          values.a,
          {axis: "0 0 1 1", symbol: 'circle'});
      };

      // mouse events
      box.addEventListener("mousedown", function(evt) {
        start(evt);
        evt.preventDefault();
      });
      box.addEventListener("mousemove", function(evt) {
        update(evt);
        evt.preventDefault();
      });
      box.addEventListener("mouseup", function(evt) {
        //update(evt); same values as last mousemove
        if (values.t.length > 2) {
          end();
        }
        evt.preventDefault();
      });

      // touch events
      box.addEventListener("touchstart", function(evt) {
        mouseify(evt);
        start(evt);
        evt.preventDefault();
      });
      box.addEventListener("touchmove", function(evt) {
        mouseify(evt);
        update(evt);
        evt.preventDefault();
      });
      box.addEventListener("touchend", function(evt) {
        if (values.t.length > 2) {
          end();
        }
        evt.preventDefault();
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Drag test</title>
	</head>
	<body>
	Drag inside the box and see the graphs below.
	<div style="width:800px; height:400px; border:solid;" id="box"></div>
	<p>x, y:</p>
	<div style="width:800px; height:400px;" id="x_y">...</div>
	<p>vx, vy:</p>
	<div style="width:800px; height:400px;" id="vx_vy">...</div>
	<p>v:</p>
	<div style="width:800px; height:400px;" id="v">...</div>
	<p>angle:</p>
	<div style="width:800px; height:400px;" id="a">...</div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
	<script src="//g.raphaeljs.com/g.raphael.js"></script>
	<script src="//g.raphaeljs.com/g.line.js"></script>
	<script>
	var box = document.getElementById("box");
	var previous, t0, t, x, y, dx, dy, vx, vy, v, a, g_x_y, g_vx_vy, g_v, g_a;
	var values = {t:[], x:[], y:[], vx:[], vy:[], v:[], a:[]};
	var mouseify = function(evt) {
	var nativeTouch = evt.touches[0];
	evt.clientX = nativeTouch.clientX;
	evt.clientY = nativeTouch.clientY;
	}
	var update = function(evt) {
	if (previous) {
	t = Date.now() - t0;
	x = evt.clientX;
	y = evt.clientY;
	dx = x - previous.x;
	dy = y - previous.y;
	vx = dx / (t - previous.t);
	vy = dy / (t - previous.t);
	v = Math.sqrt(vxvx + vyvy);
	a = Math.atan2(dy, dx) * 180 / Math.PI;
	previous = {x: x, y: y, t: t};
	values.t.push(t);
	values.x.push(x);
	values.y.push(y);
	values.vx.push(vx);
	values.vy.push(vy);
	values.v.push(v);
	values.a.push(a);
	}
	};
	var start = function(evt) {
	t0 = Date.now();
	t = 0;
	x = evt.clientX;
	y = evt.clientY;
	previous = {x: x, y: y, t: t};
	values = {t:[], x:[], y:[], vx:[], vy:[], v:[], a:[]};
	};
	var end = function() {
	document.getElementById("x_y").innerHTML = "";
	g_x_y = new Raphael(document.getElementById("x_y"));
	g_x_y.linechart(15, 10, 780, 380,
	values.t,
	[values.x, values.y],
	{axis: "0 0 1 1", symbol: 'circle'});
	document.getElementById("vx_vy").innerHTML = "";
	g_vx_vy = new Raphael(document.getElementById("vx_vy"));
	g_vx_vy.linechart(15, 10, 780, 380,
	values.t,
	[values.vx, values.vy],
	{axis: "0 0 1 1", symbol: 'circle'});
	document.getElementById("v").innerHTML = "";
	g_v = new Raphael(document.getElementById("v"));
	g_v.linechart(15, 10, 780, 380,
	values.t,
	values.v,
	{axis: "0 0 1 1", symbol: 'circle'});
	document.getElementById("a").innerHTML = "";
	g_a = new Raphael(document.getElementById("a"));
	g_a.linechart(15, 10, 780, 380,
	values.t,
	values.a,
	{axis: "0 0 1 1", symbol: 'circle'});
	};

	// mouse events
	box.addEventListener("mousedown", function(evt) {
	start(evt);
	evt.preventDefault();
	});
	box.addEventListener("mousemove", function(evt) {
	update(evt);
	evt.preventDefault();
	});
	box.addEventListener("mouseup", function(evt) {
	//update(evt); same values as last mousemove
	if (values.t.length > 2) {
	end();
	}
	evt.preventDefault();
	});

	// touch events
	box.addEventListener("touchstart", function(evt) {
	mouseify(evt);
	start(evt);
	evt.preventDefault();
	});
	box.addEventListener("touchmove", function(evt) {
	mouseify(evt);
	update(evt);
	evt.preventDefault();
	});
	box.addEventListener("touchend", function(evt) {
	if (values.t.length > 2) {
	end();
	}
	evt.preventDefault();
	});
	</script>
	</body>
	</html>