PROCESSING.JS

My Free Upgrade of Windows 7 ( which was my idea ), finally arrived, so I dived head-first into Processing.js, equipped with a very special build of Firefox by Felipe Gomes. I have been following Felipe since I found out he was working on Multi-Touch JavaScript events for Firefox. Unfortunately this stuff does not work in Linux yet, but it's great to see the Web heading in the right direction.

Using Multi-Touch Events in Firefox

The usage for multi-touch Javascript events goes a little something like this. document.multitouchData = true;, which I am guessing turns on the touch listeners ;) one that's active, you will need to add event listeners.

      document.multitouchData = true;
      
      document.addEventListener( "MozTouchDown", function( e ){ 
        console.log( e );
      }, false );
    

But you're not limited to "MozTouchDown", you can also use "MozTouchUp" and "MozTouchMove". More information on touch Events for Firefox can be found here: Multitouch Polish DOM Events and you can download Felipe's javaScript touch demos from: Felipe's Demos from Video.

Hooking It All Together

Armed with my new toys, I added some real basic multi-touch event handling for Processing.js. I am sure this code will change a lot once I have had more time to develop and try out other devices with more points and pressure sensors. Here is the code I added to Processing.js which ( in theory ) should be able to automatically expand to handle infinite touch points:

      document.multitouchData = true;
      
      var buildTouchPoint = function buildTouchPoint( e, touchPointIndex ){
        return {
          x: e.clientX - curElement.offsetLeft + p.scrollX,
          y: e.clientY - curElement.offsetTop + p.scrollY,
          down: e.type=='MozTouchDown',
          move: e.type=='MozTouchMove',
          release: e.type=='MozTouchRelease',
          touchPointIndex: touchPointIndex, eventType: e.type, id: e.streamId
       };
      };

      // Filter the event and bind object streams to touchPoint[] array
      // ( Allow for infinite touch-points if the  hardware could support it! )
      var touchFilter = function touchFilter( e ){
        var id = e.streamId;
        var streamLink = p.touchStreams[ id ];
        if( streamLink ){
          return p.touchPoint[ streamLink.touchPointIndex ] = buildTouchPoint( e, streamLink.touchPointIndex );
        } else {
          var len = p.touchPoint.length;
          return p.touchPoint[ len ] = p.touchStreams[ e.streamId ] = buildTouchPoint( e, len );
        }
      }

      // Listener for touch events and send them to the filter
      attach( curElement, "MozTouchDown", function( e ){ p.touchDown( touchFilter( e ) ) }, false );
      attach( curElement, "MozTouchMove", function( e ){ p.touchMove( touchFilter( e ) ) }, false );
      attach( curElement, "MozTouchRelease", function( e ){ p.touchRelease( touchFilter( e ) ) }, false );
    

Processing.js Usage

Then I added the following event handlers for use in a Processing.js sketch. This allows you to grab point information from the event, but also provides an expandable touchPoint[] array that stores the last event call for each point used since your script began.

 
void touchDown( point ){
  console.log( point );
};

void touchMove( point ){
  // Logs array of touchPoints
  console.log( touchPoint );
}   


void touchRelease( point ){
    // Logs X when the first touch point pressed..
    // ..becomes released.
    console.log( touchPoint[ 0 ].x );
}; 

There are a few things I will probably change when receiving events from a pressure enabled screen, but the event handlers were good proof of concept. I choose not to handle too much in Processing.js and pass the control back to the user for greater flexibility.

The Live Demo

If you are surfing with a multi-touch device in an equipped build of Firefox, you should be able to drag, scale and rotate this red square using your screen. If you have a touch device and would like to start playing around with touch events in Processing.js, come along to the Procesing.js IRC channel and we will hook you up with everything you need to start your own experiments.

F1LT3R