Firefox/Projects/Multitouch Polish/DOM Events/Examples

Tracking divs

var assignedFingers = {};
var lastused = 0;

function touchMove(event) {
var divId;
if (lastused >= 4) return;
if (assignedFingers[event.streamId]) {
  divId = assignedFingers[event.streamId];
} else {
  divId = "trackingdiv" + (++lastused);
  assignedFingers[event.streamId] = divId;
}
  document.getElementById(divId).style.left = event.clientX + 'px';
  document.getElementById(divId).style.top  = event.clientY + 'px';
}
document.addEventListener("MozTouchMove", touchMove, false);
document.addEventListener("MozTouchRelease", function() { lastused--; }, false);

Drawing canvas

var canvasctx = null;
 
function fadeOut() {
  canvasctx.fillStyle = 'rgba(255,255,255,.15)';
  canvasctx.fillRect(0,0,1100,600);
}
window.setInterval(fadeOut,180);

function listenTo(event) {
  canvasctx.fillStyle='rgba(0,0,0,1)';
  canvasctx.beginPath();
  canvasctx.arc(event.clientX, event.clientY, 20, 0, Math.PI*2, 1);
  canvasctx.fill();
  canvasctx.closePath();
}

document.addEventListener("MozTouchMove", listenTo, false);
document.addEventListener("DOMContentLoaded", function() {
canvasctx = document.getElementById("drawingcanvas").getContext('2d');
}, false);

Image resizing

This example keeps the image ratio to a square by calculating the distance between the two fingers and using that as the diagonal size of the image

document.addEventListener("MozTouchDown", touchdown, false);
document.addEventListener("MozTouchRelease", touchrelease, false);
document.addEventListener("MozTouchMove", touchmove, false);

var X1, Y1, X2, Y2;

var fingersTracked = 0;

var fingerIds = [-1,-1,-1,-1];

function touchdown(e) {	
  if (fingersTracked < 4)
    fingerIds[fingersTracked] = e.streamId;
  fingersTracked++;
}

function touchrelease(e) {
  fingersTracked--;
}

function dist(x1,x2,y1,y2) {
  return Math.sqrt( (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) );
}

function touchmove(e) {

  var img1 = document.getElementById("image1");
  var img2 = document.getElementById("image2");
  var diagonal, sidesize;
  
  if (fingerIds[0] == e.streamId) { // finger 1
    X1 = e.clientX;
    Y1 = e.clientY;

  } else if (fingerIds[1] == e.streamId) { // finger 2
    diagonal = dist(X1, e.clientX, Y1, e.clientY);
    sidesize = diagonal / Math.sqrt(2);
	
    img1.style.left = ((e.clientX < X1) ? e.clientX : X1) + "px"
    img1.style.top  = ((e.clientY < Y1) ? e.clientY : Y1) + "px"
	
    img1.style.width  = sidesize + "px"
    img1.style.height = sidesize + "px"

  } else if (fingerIds[2] == e.streamId) { // finger 3
    X2 = e.clientX;
    Y2 = e.clientY;

  } else if (fingerIds[3] == e.streamId) { // finger 4
    diagonal = dist(X2, e.clientX, Y2, e.clientY);
    sidesize = diagonal / Math.sqrt(2);
	
    img2.style.left = ((e.clientX < X2) ? e.clientX : X2) + "px"
    img2.style.top  = ((e.clientY < Y2) ? e.clientY : Y2) + "px"

    img2.style.width  = sidesize + "px"
    img2.style.height = sidesize + "px"	
  }

}

Image crop

The code for the image crop is just about resizing as well, except that we let a free aspect ratio resize of the div.

function touchmove(e) {

  var t = document.getElementById("cropbox");
  
  if (fingerIds[0] == e.streamId) { // finger 1
    t.style.left = e.clientX + "px";
    t.style.top  = e.clientY + "px";
    X = e.clientX;
    Y = e.clientY;
  } else if (fingerIds[1] == e.streamId) { // finger 2
    t.style.width  = (e.clientX - X) + "px"
    t.style.height = (e.clientY - Y) + "px"
  }

}

Pong

Omitting the code for rendering the graphics and the game logic, the part that controls the game pads is really simple: the contact point that is moving on the left side of the game area sets the position for the first player, and the contact point on the right side is the second player

function touchmove(e) {
  if (e.clientX < screen.width / 2)
    //we subtract padsize/2 to center the pad on the touch point
    player1 = e.clientY - padsize/2;
  else
    player2 = e.clientY - padsize/2;
}