touch events in processing.js

Demo.

With the buzz and attention around processing.js’s 1.0 release, my boss’s(David Humphrey) boss Evan Weaver was trying processing.js on his new ipad, and the touch events didn’t quite work.

The issue is because the touch events didn’t exist at all, and was trying to interpret the basic mouse events best it can… So I wanted to get a version of processing.js using the touch events if the environment was a touch environment, and use the normal mouse events if it was a mouse only environment.

The events are easy to understand, are a translated from mouse events as follows:

touchstart – triggered when a touch is initiated. Mouse equivalent – mousedown
touchmove – triggered when a touch moves. Mouse equivalent – mousemove
touchend – triggered when a touch ends. Mouse equivalent – mouseup

I thought the swap would be pretty simple, if we are touch, swap events, if not, do nothing. The problem is “if we are touch” basically, I wanted to detect hardware from a browser. I mean, these events exist in the browser with or without the functionality, and even if they don’t all exist in all browser (I may find on that doesn’t exist now) it may exist in the future, breaking all my code.

I did find out that the touch events trigger a complete touch rotation before firing a mouse event, so I added some touch events mimicking the mouse events, but at the start of the “touchstart” I turn off the mouse events.

I then loaded the processing.js demo that Even Weaver initially tried into my hacked up processing.js file, ran it first in browsers, mouse works(check) and then loaded it into the ipad touch works(check) mouse not working(check). The next day I tried it on an ipod touch, same results. Perfect. Filed a ticket. You can try the demo here.

Advertisements

2 Responses to “touch events in processing.js”

  1. I was glad when I found your demo, as it does make it work really well across the platforms, even had some success with Android as well.

    I was just wondering whether this will taken up as an approach for Processing.JS 1.1 in the end?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: