lmccart/processing-js — pull request #71 by codeanticode (2013-10-08 06:43:28+00:00)
Title: multisketch support, including relative mouse and touch coordinates

hello, this pull request incorporate the following:

* multiple sketches can be created and placed arbitrarily inside the same page. In order to accomplish arbitrary placement, there is an additional targetID argument in the createGraphics() function, this allows to append the canvas to any element in the document. If it is not specified, then createGraphics() will behave as before.

* separate mouseX, mouseY, etc. properties are added to the new sketches every time they are registered with the sketch() method. The values of these mouse/touch properties are relative to the sketch bounds, i.e.: they are calculated as:

var bounds = c.elt.getBoundingClientRect();
s.mouseX = mouseX - bounds.left;

where c is the canvas associated to sketch s, and mouseX is the "absolute" position relative to the page. The advantage of this implementation is that the absolute mouseX, mouseY, etc. variables are not affected at all, and they can continue to be used as before in single-sketch configurations. They can still be accessed in multisketch configurations if the absolute coords are needed.

The example that shows most of this new functionality (with the exception of the targetID) is https://github.com/codeanticode/processing-js/tree/master/experiments/andres/multi_sketch_events