rob@100: ;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
rob@100: // build script for generating processing.js
rob@100: 
rob@100: var Browser = {
rob@100:   isDomPresent: true,
rob@100:   navigator: navigator,
rob@100:   window: window,
rob@100:   document: document,
rob@100:   ajax: function(url) {
rob@100:     var xhr = new XMLHttpRequest();
rob@100:     xhr.open("GET", url, false);
rob@100:     if (xhr.overrideMimeType) {
rob@100:       xhr.overrideMimeType("text/plain");
rob@100:     }
rob@100:     xhr.setRequestHeader("If-Modified-Since", "Fri, 01 Jan 1960 00:00:00 GMT");
rob@100:     xhr.send(null);
rob@100:     // failed request?
rob@100:     if (xhr.status !== 200 && xhr.status !== 0) { throw ("XMLHttpRequest failed, status code " + xhr.status); }
rob@100:     return xhr.responseText;
rob@100:   }
rob@100: };
rob@100: 
rob@100: window.Processing = require('./src/')(Browser);
rob@100: 
rob@100: },{"./src/":27}],2:[function(require,module,exports){
rob@100: module.exports={
rob@100:   "name": "Processing.js",
rob@100:   "version": "1.4.8",
rob@100:   "dependencies": {
rob@100:     "argv": "~0.0.2",
rob@100:     "browserify": "~2.18.1",
rob@100:     "express": "~3.3.3",
rob@100:     "node-minify": "~0.7.3",
rob@100:     "nunjucks": "~0.1.9",
rob@100:     "open": "0.0.3"
rob@100:   },
rob@100:   "devDependencies": {
rob@100:     "grunt": "~0.4.1",
rob@100:     "grunt-cli": "~0.1.8",
rob@100:     "grunt-contrib-jshint": "~0.4.3"
rob@100:   }
rob@100: }
rob@100: 
rob@100: },{}],3:[function(require,module,exports){
rob@100: /**
rob@100: * A ObjectIterator is an iterator wrapper for objects. If passed object contains
rob@100: * the iterator method, the object instance will be replaced by the result returned by
rob@100: * this method call. If passed object is an array, the ObjectIterator instance iterates
rob@100: * through its items.
rob@100: *
rob@100: * @param {Object} obj The object to be iterated.
rob@100: */
rob@100: module.exports = function ObjectIterator(obj) {
rob@100:   if (obj instanceof Array) {
rob@100:     // iterate through array items
rob@100:     var index = -1;
rob@100:     this.hasNext = function() {
rob@100:       return ++index < obj.length;
rob@100:     };
rob@100:     this.next = function() {
rob@100:       return obj[index];
rob@100:     };
rob@100:   } else if (obj.iterator instanceof Function) {
rob@100:     return obj.iterator();
rob@100:   } else {
rob@100:     throw "Unable to iterate: " + obj;
rob@100:   }
rob@100: };
rob@100: 
rob@100: },{}],4:[function(require,module,exports){
rob@100: /**
rob@100:  * Processing.js environment constants
rob@100:  */
rob@100: module.exports = {
rob@100:     X: 0,
rob@100:     Y: 1,
rob@100:     Z: 2,
rob@100: 
rob@100:     R: 3,
rob@100:     G: 4,
rob@100:     B: 5,
rob@100:     A: 6,
rob@100: 
rob@100:     U: 7,
rob@100:     V: 8,
rob@100: 
rob@100:     NX: 9,
rob@100:     NY: 10,
rob@100:     NZ: 11,
rob@100: 
rob@100:     EDGE: 12,
rob@100: 
rob@100:     // Stroke
rob@100:     SR: 13,
rob@100:     SG: 14,
rob@100:     SB: 15,
rob@100:     SA: 16,
rob@100: 
rob@100:     SW: 17,
rob@100: 
rob@100:     // Transformations (2D and 3D)
rob@100:     TX: 18,
rob@100:     TY: 19,
rob@100:     TZ: 20,
rob@100: 
rob@100:     VX: 21,
rob@100:     VY: 22,
rob@100:     VZ: 23,
rob@100:     VW: 24,
rob@100: 
rob@100:     // Material properties
rob@100:     AR: 25,
rob@100:     AG: 26,
rob@100:     AB: 27,
rob@100: 
rob@100:     DR: 3,
rob@100:     DG: 4,
rob@100:     DB: 5,
rob@100:     DA: 6,
rob@100: 
rob@100:     SPR: 28,
rob@100:     SPG: 29,
rob@100:     SPB: 30,
rob@100: 
rob@100:     SHINE: 31,
rob@100: 
rob@100:     ER: 32,
rob@100:     EG: 33,
rob@100:     EB: 34,
rob@100: 
rob@100:     BEEN_LIT: 35,
rob@100: 
rob@100:     VERTEX_FIELD_COUNT: 36,
rob@100: 
rob@100:     // Renderers
rob@100:     P2D:    1,
rob@100:     JAVA2D: 1,
rob@100:     WEBGL:  2,
rob@100:     P3D:    2,
rob@100:     OPENGL: 2,
rob@100:     PDF:    0,
rob@100:     DXF:    0,
rob@100: 
rob@100:     // Platform IDs
rob@100:     OTHER:   0,
rob@100:     WINDOWS: 1,
rob@100:     MAXOSX:  2,
rob@100:     LINUX:   3,
rob@100: 
rob@100:     EPSILON: 0.0001,
rob@100: 
rob@100:     MAX_FLOAT:  3.4028235e+38,
rob@100:     MIN_FLOAT: -3.4028235e+38,
rob@100:     MAX_INT:    2147483647,
rob@100:     MIN_INT:   -2147483648,
rob@100: 
rob@100:     PI:         Math.PI,
rob@100:     TWO_PI:     2 * Math.PI,
rob@100:     TAU:        2 * Math.PI,
rob@100:     HALF_PI:    Math.PI / 2,
rob@100:     THIRD_PI:   Math.PI / 3,
rob@100:     QUARTER_PI: Math.PI / 4,
rob@100: 
rob@100:     DEG_TO_RAD: Math.PI / 180,
rob@100:     RAD_TO_DEG: 180 / Math.PI,
rob@100: 
rob@100:     WHITESPACE: " \t\n\r\f\u00A0",
rob@100: 
rob@100:     // Color modes
rob@100:     RGB:   1,
rob@100:     ARGB:  2,
rob@100:     HSB:   3,
rob@100:     ALPHA: 4,
rob@100:     CMYK:  5,
rob@100: 
rob@100:     // Image file types
rob@100:     TIFF:  0,
rob@100:     TARGA: 1,
rob@100:     JPEG:  2,
rob@100:     GIF:   3,
rob@100: 
rob@100:     // Filter/convert types
rob@100:     BLUR:      11,
rob@100:     GRAY:      12,
rob@100:     INVERT:    13,
rob@100:     OPAQUE:    14,
rob@100:     POSTERIZE: 15,
rob@100:     THRESHOLD: 16,
rob@100:     ERODE:     17,
rob@100:     DILATE:    18,
rob@100: 
rob@100:     // Blend modes
rob@100:     REPLACE:    0,
rob@100:     BLEND:      1 << 0,
rob@100:     ADD:        1 << 1,
rob@100:     SUBTRACT:   1 << 2,
rob@100:     LIGHTEST:   1 << 3,
rob@100:     DARKEST:    1 << 4,
rob@100:     DIFFERENCE: 1 << 5,
rob@100:     EXCLUSION:  1 << 6,
rob@100:     MULTIPLY:   1 << 7,
rob@100:     SCREEN:     1 << 8,
rob@100:     OVERLAY:    1 << 9,
rob@100:     HARD_LIGHT: 1 << 10,
rob@100:     SOFT_LIGHT: 1 << 11,
rob@100:     DODGE:      1 << 12,
rob@100:     BURN:       1 << 13,
rob@100: 
rob@100:     // Color component bit masks
rob@100:     ALPHA_MASK: 0xff000000,
rob@100:     RED_MASK:   0x00ff0000,
rob@100:     GREEN_MASK: 0x0000ff00,
rob@100:     BLUE_MASK:  0x000000ff,
rob@100: 
rob@100:     // Projection matrices
rob@100:     CUSTOM:       0,
rob@100:     ORTHOGRAPHIC: 2,
rob@100:     PERSPECTIVE:  3,
rob@100: 
rob@100:     // Shapes
rob@100:     POINT:          2,
rob@100:     POINTS:         2,
rob@100:     LINE:           4,
rob@100:     LINES:          4,
rob@100:     TRIANGLE:       8,
rob@100:     TRIANGLES:      9,
rob@100:     TRIANGLE_STRIP: 10,
rob@100:     TRIANGLE_FAN:   11,
rob@100:     QUAD:           16,
rob@100:     QUADS:          16,
rob@100:     QUAD_STRIP:     17,
rob@100:     POLYGON:        20,
rob@100:     PATH:           21,
rob@100:     RECT:           30,
rob@100:     ELLIPSE:        31,
rob@100:     ARC:            32,
rob@100:     SPHERE:         40,
rob@100:     BOX:            41,
rob@100: 
rob@100:     GROUP:          0,
rob@100:     PRIMITIVE:      1,
rob@100:     //PATH:         21, // shared with Shape PATH
rob@100:     GEOMETRY:       3,
rob@100: 
rob@100:     // Shape Vertex
rob@100:     VERTEX:        0,
rob@100:     BEZIER_VERTEX: 1,
rob@100:     CURVE_VERTEX:  2,
rob@100:     BREAK:         3,
rob@100:     CLOSESHAPE:    4,
rob@100: 
rob@100:     // Shape closing modes
rob@100:     OPEN:  1,
rob@100:     CLOSE: 2,
rob@100: 
rob@100:     // Shape drawing modes
rob@100:     CORNER:          0, // Draw mode convention to use (x, y) to (width, height)
rob@100:     CORNERS:         1, // Draw mode convention to use (x1, y1) to (x2, y2) coordinates
rob@100:     RADIUS:          2, // Draw mode from the center, and using the radius
rob@100:     CENTER_RADIUS:   2, // Deprecated! Use RADIUS instead
rob@100:     CENTER:          3, // Draw from the center, using second pair of values as the diameter
rob@100:     DIAMETER:        3, // Synonym for the CENTER constant. Draw from the center
rob@100:     CENTER_DIAMETER: 3, // Deprecated! Use DIAMETER instead
rob@100: 
rob@100:     // Text vertical alignment modes
rob@100:     BASELINE: 0,   // Default vertical alignment for text placement
rob@100:     TOP:      101, // Align text to the top
rob@100:     BOTTOM:   102, // Align text from the bottom, using the baseline
rob@100: 
rob@100:     // UV Texture coordinate modes
rob@100:     NORMAL:     1,
rob@100:     NORMALIZED: 1,
rob@100:     IMAGE:      2,
rob@100: 
rob@100:     // Text placement modes
rob@100:     MODEL: 4,
rob@100:     SHAPE: 5,
rob@100: 
rob@100:     // Stroke modes
rob@100:     SQUARE:  'butt',
rob@100:     ROUND:   'round',
rob@100:     PROJECT: 'square',
rob@100:     MITER:   'miter',
rob@100:     BEVEL:   'bevel',
rob@100: 
rob@100:     // Lighting modes
rob@100:     AMBIENT:     0,
rob@100:     DIRECTIONAL: 1,
rob@100:     //POINT:     2, Shared with Shape constant
rob@100:     SPOT:        3,
rob@100: 
rob@100:     // Key constants
rob@100: 
rob@100:     // Both key and keyCode will be equal to these values
rob@100:     BACKSPACE: 8,
rob@100:     TAB:       9,
rob@100:     ENTER:     10,
rob@100:     RETURN:    13,
rob@100:     ESC:       27,
rob@100:     DELETE:    127,
rob@100:     CODED:     0xffff,
rob@100: 
rob@100:     // p.key will be CODED and p.keyCode will be this value
rob@100:     SHIFT:     16,
rob@100:     CONTROL:   17,
rob@100:     ALT:       18,
rob@100:     CAPSLK:    20,
rob@100:     PGUP:      33,
rob@100:     PGDN:      34,
rob@100:     END:       35,
rob@100:     HOME:      36,
rob@100:     LEFT:      37,
rob@100:     UP:        38,
rob@100:     RIGHT:     39,
rob@100:     DOWN:      40,
rob@100:     F1:        112,
rob@100:     F2:        113,
rob@100:     F3:        114,
rob@100:     F4:        115,
rob@100:     F5:        116,
rob@100:     F6:        117,
rob@100:     F7:        118,
rob@100:     F8:        119,
rob@100:     F9:        120,
rob@100:     F10:       121,
rob@100:     F11:       122,
rob@100:     F12:       123,
rob@100:     NUMLK:     144,
rob@100:     META:      157,
rob@100:     INSERT:    155,
rob@100: 
rob@100:     // Cursor types
rob@100:     ARROW:    'default',
rob@100:     CROSS:    'crosshair',
rob@100:     HAND:     'pointer',
rob@100:     MOVE:     'move',
rob@100:     TEXT:     'text',
rob@100:     WAIT:     'wait',
rob@100:     NOCURSOR: "url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='), auto",
rob@100: 
rob@100:     // Hints
rob@100:     DISABLE_OPENGL_2X_SMOOTH:     1,
rob@100:     ENABLE_OPENGL_2X_SMOOTH:     -1,
rob@100:     ENABLE_OPENGL_4X_SMOOTH:      2,
rob@100:     ENABLE_NATIVE_FONTS:          3,
rob@100:     DISABLE_DEPTH_TEST:           4,
rob@100:     ENABLE_DEPTH_TEST:           -4,
rob@100:     ENABLE_DEPTH_SORT:            5,
rob@100:     DISABLE_DEPTH_SORT:          -5,
rob@100:     DISABLE_OPENGL_ERROR_REPORT:  6,
rob@100:     ENABLE_OPENGL_ERROR_REPORT:  -6,
rob@100:     ENABLE_ACCURATE_TEXTURES:     7,
rob@100:     DISABLE_ACCURATE_TEXTURES:   -7,
rob@100:     HINT_COUNT:                  10,
rob@100: 
rob@100:     // PJS defined constants
rob@100:     SINCOS_LENGTH:      720,       // every half degree
rob@100:     PRECISIONB:         15,        // fixed point precision is limited to 15 bits!!
rob@100:     PRECISIONF:         1 << 15,
rob@100:     PREC_MAXVAL:        (1 << 15) - 1,
rob@100:     PREC_ALPHA_SHIFT:   24 - 15,
rob@100:     PREC_RED_SHIFT:     16 - 15,
rob@100:     NORMAL_MODE_AUTO:   0,
rob@100:     NORMAL_MODE_SHAPE:  1,
rob@100:     NORMAL_MODE_VERTEX: 2,
rob@100:     MAX_LIGHTS:         8
rob@100: };
rob@100: 
rob@100: },{}],5:[function(require,module,exports){
rob@100: /**
rob@100:  * Processing.js default scope
rob@100:  */
rob@100: module.exports = function(options) {
rob@100: 
rob@100:   // Building defaultScope. Changing of the prototype protects
rob@100:   // internal Processing code from the changes in defaultScope
rob@100:   function DefaultScope() {}
rob@100:   DefaultScope.prototype = options.PConstants;
rob@100: 
rob@100:   var defaultScope = new DefaultScope();
rob@100: 
rob@100:   // copy over all known Object types and helper objects
rob@100:   Object.keys(options).forEach(function(prop) {
rob@100:     defaultScope[prop] = options[prop];
rob@100:   });
rob@100: 
rob@100:   ////////////////////////////////////////////////////////////////////////////
rob@100:   // Class inheritance helper methods
rob@100:   ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:   defaultScope.defineProperty = function(obj, name, desc) {
rob@100:     if("defineProperty" in Object) {
rob@100:       Object.defineProperty(obj, name, desc);
rob@100:     } else {
rob@100:       if (desc.hasOwnProperty("get")) {
rob@100:         obj.__defineGetter__(name, desc.get);
rob@100:       }
rob@100:       if (desc.hasOwnProperty("set")) {
rob@100:         obj.__defineSetter__(name, desc.set);
rob@100:       }
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * class overloading, part 1
rob@100:    */
rob@100:   function overloadBaseClassFunction(object, name, basefn) {
rob@100:     if (!object.hasOwnProperty(name) || typeof object[name] !== 'function') {
rob@100:       // object method is not a function or just inherited from Object.prototype
rob@100:       object[name] = basefn;
rob@100:       return;
rob@100:     }
rob@100:     var fn = object[name];
rob@100:     if ("$overloads" in fn) {
rob@100:       // the object method already overloaded (see defaultScope.addMethod)
rob@100:       // let's just change a fallback method
rob@100:       fn.$defaultOverload = basefn;
rob@100:       return;
rob@100:     }
rob@100:     if (!("$overloads" in basefn) && fn.length === basefn.length) {
rob@100:       // special case when we just overriding the method
rob@100:       return;
rob@100:     }
rob@100:     var overloads, defaultOverload;
rob@100:     if ("$overloads" in basefn) {
rob@100:       // let's inherit base class overloads to speed up things
rob@100:       overloads = basefn.$overloads.slice(0);
rob@100:       overloads[fn.length] = fn;
rob@100:       defaultOverload = basefn.$defaultOverload;
rob@100:     } else {
rob@100:       overloads = [];
rob@100:       overloads[basefn.length] = basefn;
rob@100:       overloads[fn.length] = fn;
rob@100:       defaultOverload = fn;
rob@100:     }
rob@100:     var hubfn = function() {
rob@100:       var fn = hubfn.$overloads[arguments.length] ||
rob@100:                ("$methodArgsIndex" in hubfn && arguments.length > hubfn.$methodArgsIndex ?
rob@100:                hubfn.$overloads[hubfn.$methodArgsIndex] : null) ||
rob@100:                hubfn.$defaultOverload;
rob@100:       return fn.apply(this, arguments);
rob@100:     };
rob@100:     hubfn.$overloads = overloads;
rob@100:     if ("$methodArgsIndex" in basefn) {
rob@100:       hubfn.$methodArgsIndex = basefn.$methodArgsIndex;
rob@100:     }
rob@100:     hubfn.$defaultOverload = defaultOverload;
rob@100:     hubfn.name = name;
rob@100:     object[name] = hubfn;
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * class overloading, part 2
rob@100:    */
rob@100: 
rob@100:   function extendClass(subClass, baseClass) {
rob@100:     function extendGetterSetter(propertyName) {
rob@100:       defaultScope.defineProperty(subClass, propertyName, {
rob@100:         get: function() {
rob@100:           return baseClass[propertyName];
rob@100:         },
rob@100:         set: function(v) {
rob@100:           baseClass[propertyName]=v;
rob@100:         },
rob@100:         enumerable: true
rob@100:       });
rob@100:     }
rob@100: 
rob@100:     var properties = [];
rob@100:     for (var propertyName in baseClass) {
rob@100:       if (typeof baseClass[propertyName] === 'function') {
rob@100:         overloadBaseClassFunction(subClass, propertyName, baseClass[propertyName]);
rob@100:       } else if(propertyName.charAt(0) !== "$" && !(propertyName in subClass)) {
rob@100:         // Delaying the properties extension due to the IE9 bug (see #918).
rob@100:         properties.push(propertyName);
rob@100:       }
rob@100:     }
rob@100:     while (properties.length > 0) {
rob@100:       extendGetterSetter(properties.shift());
rob@100:     }
rob@100: 
rob@100:     subClass.$super = baseClass;
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * class overloading, part 3
rob@100:    */
rob@100:   defaultScope.extendClassChain = function(base) {
rob@100:     var path = [base];
rob@100:     for (var self = base.$upcast; self; self = self.$upcast) {
rob@100:       extendClass(self, base);
rob@100:       path.push(self);
rob@100:       base = self;
rob@100:     }
rob@100:     while (path.length > 0) {
rob@100:       path.pop().$self=base;
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   // static
rob@100:   defaultScope.extendStaticMembers = function(derived, base) {
rob@100:     extendClass(derived, base);
rob@100:   };
rob@100: 
rob@100:   // interface
rob@100:   defaultScope.extendInterfaceMembers = function(derived, base) {
rob@100:     extendClass(derived, base);
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Java methods and JavaScript functions differ enough that
rob@100:    * we need a special function to make sure it all links up
rob@100:    * as classical hierarchical class chains.
rob@100:    */
rob@100:   defaultScope.addMethod = function(object, name, fn, hasMethodArgs) {
rob@100:     var existingfn = object[name];
rob@100:     if (existingfn || hasMethodArgs) {
rob@100:       var args = fn.length;
rob@100:       // builds the overload methods table
rob@100:       if ("$overloads" in existingfn) {
rob@100:         existingfn.$overloads[args] = fn;
rob@100:       } else {
rob@100:         var hubfn = function() {
rob@100:           var fn = hubfn.$overloads[arguments.length] ||
rob@100:                    ("$methodArgsIndex" in hubfn && arguments.length > hubfn.$methodArgsIndex ?
rob@100:                    hubfn.$overloads[hubfn.$methodArgsIndex] : null) ||
rob@100:                    hubfn.$defaultOverload;
rob@100:           return fn.apply(this, arguments);
rob@100:         };
rob@100:         var overloads = [];
rob@100:         if (existingfn) {
rob@100:           overloads[existingfn.length] = existingfn;
rob@100:         }
rob@100:         overloads[args] = fn;
rob@100:         hubfn.$overloads = overloads;
rob@100:         hubfn.$defaultOverload = existingfn || fn;
rob@100:         if (hasMethodArgs) {
rob@100:           hubfn.$methodArgsIndex = args;
rob@100:         }
rob@100:         hubfn.name = name;
rob@100:         object[name] = hubfn;
rob@100:       }
rob@100:     } else {
rob@100:       object[name] = fn;
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   // internal helper function
rob@100:   function isNumericalJavaType(type) {
rob@100:     if (typeof type !== "string") {
rob@100:       return false;
rob@100:     }
rob@100:     return ["byte", "int", "char", "color", "float", "long", "double"].indexOf(type) !== -1;
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * Java's arrays are pre-filled when declared with
rob@100:    * an initial size, but no content. JS arrays are not.
rob@100:    */
rob@100:   defaultScope.createJavaArray = function(type, bounds) {
rob@100:     var result = null,
rob@100:         defaultValue = null;
rob@100:     if (typeof type === "string") {
rob@100:       if (type === "boolean") {
rob@100:         defaultValue = false;
rob@100:       } else if (isNumericalJavaType(type)) {
rob@100:         defaultValue = 0;
rob@100:       }
rob@100:     }
rob@100:     if (typeof bounds[0] === 'number') {
rob@100:       var itemsCount = 0 | bounds[0];
rob@100:       if (bounds.length <= 1) {
rob@100:         result = [];
rob@100:         result.length = itemsCount;
rob@100:         for (var i = 0; i < itemsCount; ++i) {
rob@100:           result[i] = defaultValue;
rob@100:         }
rob@100:       } else {
rob@100:         result = [];
rob@100:         var newBounds = bounds.slice(1);
rob@100:         for (var j = 0; j < itemsCount; ++j) {
rob@100:           result.push(defaultScope.createJavaArray(type, newBounds));
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:     return result;
rob@100:   };
rob@100: 
rob@100:   // screenWidth and screenHeight are shared by all instances.
rob@100:   // and return the width/height of the browser's viewport.
rob@100:   defaultScope.defineProperty(defaultScope, 'screenWidth',
rob@100:     { get: function() { return window.innerWidth; } });
rob@100: 
rob@100:   defaultScope.defineProperty(defaultScope, 'screenHeight',
rob@100:     { get: function() { return window.innerHeight; } });
rob@100: 
rob@100:   return defaultScope;
rob@100: };
rob@100: 
rob@100: },{}],6:[function(require,module,exports){
rob@100: /**
rob@100:  * Finalise the Processing.js object.
rob@100:  */
rob@100: module.exports = function finalizeProcessing(Processing, options) {
rob@100: 
rob@100:   // unpack options
rob@100:   var window = options.window,
rob@100:       document = options.document,
rob@100:       XMLHttpRequest = window.XMLHttpRequest,
rob@100:       noop = options.noop,
rob@100:       isDOMPresent = options.isDOMPresent,
rob@100:       version = options.version,
rob@100:       undef;
rob@100: 
rob@100:   // versioning
rob@100:   Processing.version = (version ? version : "@DEV-VERSION@");
rob@100: 
rob@100:   // Share lib space
rob@100:   Processing.lib = {};
rob@100: 
rob@100:   /**
rob@100:    * External libraries can be added to the global Processing
rob@100:    * objects with the `registerLibrary` function.
rob@100:    */
rob@100:   Processing.registerLibrary = function(name, library) {
rob@100:     Processing.lib[name] = library;
rob@100:     if(library.hasOwnProperty("init")) {
rob@100:       library.init(defaultScope);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * This is the object that acts as our version of PApplet.
rob@100:    * This can be called as Processing.Sketch() or as
rob@100:    * Processing.Sketch(function) in which case the function
rob@100:    * must be an already-compiled-to-JS sketch function.
rob@100:    */
rob@100:   Processing.Sketch = function(attachFunction) {
rob@100:     this.attachFunction = attachFunction;
rob@100:     this.options = {
rob@100:       pauseOnBlur: false,
rob@100:       globalKeyEvents: false
rob@100:     };
rob@100: 
rob@100:     /* Optional Sketch event hooks:
rob@100:      *   onLoad       - parsing/preloading is done, before sketch starts
rob@100:      *   onSetup      - setup() has been called, before first draw()
rob@100:      *   onPause      - noLoop() has been called, pausing draw loop
rob@100:      *   onLoop       - loop() has been called, resuming draw loop
rob@100:      *   onFrameStart - draw() loop about to begin
rob@100:      *   onFrameEnd   - draw() loop finished
rob@100:      *   onExit       - exit() done being called
rob@100:      */
rob@100:     this.onLoad = noop;
rob@100:     this.onSetup = noop;
rob@100:     this.onPause = noop;
rob@100:     this.onLoop = noop;
rob@100:     this.onFrameStart = noop;
rob@100:     this.onFrameEnd = noop;
rob@100:     this.onExit = noop;
rob@100: 
rob@100:     this.params = {};
rob@100:     this.imageCache = {
rob@100:       pending: 0,
rob@100:       images: {},
rob@100:       // Opera requires special administration for preloading
rob@100:       operaCache: {},
rob@100:       // Specify an optional img arg if the image is already loaded in the DOM,
rob@100:       // otherwise href will get loaded.
rob@100:       add: function(href, img) {
rob@100:         // Prevent muliple loads for an image, in case it gets
rob@100:         // preloaded more than once, or is added via JS and then preloaded.
rob@100:         if (this.images[href]) {
rob@100:           return;
rob@100:         }
rob@100: 
rob@100:         if (!isDOMPresent) {
rob@100:           this.images[href] = null;
rob@100:         }
rob@100: 
rob@100:         // No image in the DOM, kick-off a background load
rob@100:         if (!img) {
rob@100:           img = new Image();
rob@100:           img.onload = (function(owner) {
rob@100:             return function() {
rob@100:               owner.pending--;
rob@100:             };
rob@100:           }(this));
rob@100:           this.pending++;
rob@100:           img.src = href;
rob@100:         }
rob@100: 
rob@100:         this.images[href] = img;
rob@100: 
rob@100:         // Opera will not load images until they are inserted into the DOM.
rob@100:         if (window.opera) {
rob@100:           var div = document.createElement("div");
rob@100:           div.appendChild(img);
rob@100:           // we can't use "display: none", since that makes it invisible, and thus not load
rob@100:           div.style.position = "absolute";
rob@100:           div.style.opacity = 0;
rob@100:           div.style.width = "1px";
rob@100:           div.style.height= "1px";
rob@100:           if (!this.operaCache[href]) {
rob@100:             document.body.appendChild(div);
rob@100:             this.operaCache[href] = div;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     this.sourceCode = undefined;
rob@100:     this.attach = function(processing) {
rob@100:       // either attachFunction or sourceCode must be present on attach
rob@100:       if(typeof this.attachFunction === "function") {
rob@100:         this.attachFunction(processing);
rob@100:       } else if(this.sourceCode) {
rob@100:         var func = ((new Function("return (" + this.sourceCode + ");"))());
rob@100:         func(processing);
rob@100:         this.attachFunction = func;
rob@100:       } else {
rob@100:         throw "Unable to attach sketch to the processing instance";
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     this.toString = function() {
rob@100:       var i;
rob@100:       var code = "((function(Sketch) {\n";
rob@100:       code += "var sketch = new Sketch(\n" + this.sourceCode + ");\n";
rob@100:       for(i in this.options) {
rob@100:         if(this.options.hasOwnProperty(i)) {
rob@100:           var value = this.options[i];
rob@100:           code += "sketch.options." + i + " = " +
rob@100:             (typeof value === 'string' ? '\"' + value + '\"' : "" + value) + ";\n";
rob@100:         }
rob@100:       }
rob@100:       for(i in this.imageCache) {
rob@100:         if(this.options.hasOwnProperty(i)) {
rob@100:           code += "sketch.imageCache.add(\"" + i + "\");\n";
rob@100:         }
rob@100:       }
rob@100:       // TODO serialize fonts
rob@100:       code += "return sketch;\n})(Processing.Sketch))";
rob@100:       return code;
rob@100:     };
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * aggregate all source code into a single file, then rewrite that
rob@100:    * source and bind to canvas via new Processing(canvas, sourcestring).
rob@100:    * @param {CANVAS} canvas The html canvas element to bind to
rob@100:    * @param {String[]} source The array of files that must be loaded
rob@100:    */
rob@100:   var loadSketchFromSources = Processing.loadSketchFromSources = function(canvas, sources) {
rob@100:     var code = [], errors = [], sourcesCount = sources.length, loaded = 0;
rob@100: 
rob@100:     function ajaxAsync(url, callback) {
rob@100:       var xhr = new XMLHttpRequest();
rob@100:       xhr.onreadystatechange = function() {
rob@100:         if (xhr.readyState === 4) {
rob@100:           var error;
rob@100:           if (xhr.status !== 200 && xhr.status !== 0) {
rob@100:             error = "Invalid XHR status " + xhr.status;
rob@100:           } else if (xhr.responseText === "") {
rob@100:             // Give a hint when loading fails due to same-origin issues on file:/// urls
rob@100:             if ( ("withCredentials" in new XMLHttpRequest()) &&
rob@100:                  (new XMLHttpRequest()).withCredentials === false &&
rob@100:                  window.location.protocol === "file:" ) {
rob@100:               error = "XMLHttpRequest failure, possibly due to a same-origin policy violation. You can try loading this page in another browser, or load it from http://localhost using a local webserver. See the Processing.js README for a more detailed explanation of this problem and solutions.";
rob@100:             } else {
rob@100:               error = "File is empty.";
rob@100:             }
rob@100:           }
rob@100: 
rob@100:           callback(xhr.responseText, error);
rob@100:         }
rob@100:       };
rob@100:       xhr.open("GET", url, true);
rob@100:       if (xhr.overrideMimeType) {
rob@100:         xhr.overrideMimeType("application/json");
rob@100:       }
rob@100:       xhr.setRequestHeader("If-Modified-Since", "Fri, 01 Jan 1960 00:00:00 GMT"); // no cache
rob@100:       xhr.send(null);
rob@100:     }
rob@100: 
rob@100:     function loadBlock(index, filename) {
rob@100:       function callback(block, error) {
rob@100:         code[index] = block;
rob@100:         ++loaded;
rob@100:         if (error) {
rob@100:           errors.push(filename + " ==> " + error);
rob@100:         }
rob@100:         if (loaded === sourcesCount) {
rob@100:           if (errors.length === 0) {
rob@100:             try {
rob@100:               return new Processing(canvas, code.join("\n"));
rob@100:             } catch(e) {
rob@100:               console.log("Processing.js: Unable to execute pjs sketch.");
rob@100:               throw e;
rob@100:             }
rob@100:           } else {
rob@100:             throw "Processing.js: Unable to load pjs sketch files: " + errors.join("\n");
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       if (filename.charAt(0) === '#') {
rob@100:         // trying to get script from the element
rob@100:         var scriptElement = document.getElementById(filename.substring(1));
rob@100:         if (scriptElement) {
rob@100:           callback(scriptElement.text || scriptElement.textContent);
rob@100:         } else {
rob@100:           callback("", "Unable to load pjs sketch: element with id \'" + filename.substring(1) + "\' was not found");
rob@100:         }
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       ajaxAsync(filename, callback);
rob@100:     }
rob@100: 
rob@100:     for (var i = 0; i < sourcesCount; ++i) {
rob@100:       loadBlock(i, sources[i]);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Automatic initialization function.
rob@100:    */
rob@100:   var init = function() {
rob@100:     document.removeEventListener('DOMContentLoaded', init, false);
rob@100: 
rob@100:     // before running through init, clear the instances list, to prevent
rob@100:     // sketch duplication when page content is dynamically swapped without
rob@100:     // swapping out processing.js
rob@100:     processingInstances = [];
rob@100:     Processing.instances = processingInstances;
rob@100: 
rob@100:     var canvas = document.getElementsByTagName('canvas'),
rob@100:       filenames;
rob@100: 
rob@100:     for (var i = 0, l = canvas.length; i < l; i++) {
rob@100:       // datasrc and data-src are deprecated.
rob@100:       var processingSources = canvas[i].getAttribute('data-processing-sources');
rob@100:       if (processingSources === null) {
rob@100:         // Temporary fallback for datasrc and data-src
rob@100:         processingSources = canvas[i].getAttribute('data-src');
rob@100:         if (processingSources === null) {
rob@100:           processingSources = canvas[i].getAttribute('datasrc');
rob@100:         }
rob@100:       }
rob@100:       if (processingSources) {
rob@100:         filenames = processingSources.split(/\s+/g);
rob@100:         for (var j = 0; j < filenames.length;) {
rob@100:           if (filenames[j]) {
rob@100:             j++;
rob@100:           } else {
rob@100:             filenames.splice(j, 1);
rob@100:           }
rob@100:         }
rob@100:         loadSketchFromSources(canvas[i], filenames);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     // also process all <script>-indicated sketches, if there are any
rob@100:     var s, last, source, instance,
rob@100:         nodelist = document.getElementsByTagName('script'),
rob@100:         scripts=[];
rob@100: 
rob@100:     // snapshot the DOM, as the nodelist is only a DOM view, and is
rob@100:     // updated instantly when a script element is added or removed.
rob@100:     for (s = nodelist.length - 1; s >= 0; s--) {
rob@100:       scripts.push(nodelist[s]);
rob@100:     }
rob@100: 
rob@100:     // iterate over all script elements to see if they contain Processing code
rob@100:     for (s = 0, last = scripts.length; s < last; s++) {
rob@100:       var script = scripts[s];
rob@100:       if (!script.getAttribute) {
rob@100:         continue;
rob@100:       }
rob@100: 
rob@100:       var type = script.getAttribute("type");
rob@100:       if (type && (type.toLowerCase() === "text/processing" || type.toLowerCase() === "application/processing")) {
rob@100:         var target = script.getAttribute("data-processing-target");
rob@100:         canvas = undef;
rob@100:         if (target) {
rob@100:           canvas = document.getElementById(target);
rob@100:         } else {
rob@100:           var nextSibling = script.nextSibling;
rob@100:           while (nextSibling && nextSibling.nodeType !== 1) {
rob@100:             nextSibling = nextSibling.nextSibling;
rob@100:           }
rob@100:           if (nextSibling && nextSibling.nodeName.toLowerCase() === "canvas") {
rob@100:             canvas = nextSibling;
rob@100:           }
rob@100:         }
rob@100: 
rob@100:         if (canvas) {
rob@100:           if (script.getAttribute("src")) {
rob@100:             filenames = script.getAttribute("src").split(/\s+/);
rob@100:             loadSketchFromSources(canvas, filenames);
rob@100:             continue;
rob@100:           }
rob@100:           source =  script.textContent || script.text;
rob@100:           instance = new Processing(canvas, source);
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * automatic loading of all sketches on the page
rob@100:    */
rob@100:   document.addEventListener('DOMContentLoaded', init, false);
rob@100: 
rob@100:   /**
rob@100:    * Make Processing run through init after already having
rob@100:    * been set up for a page. This function exists mostly for pages
rob@100:    * that swap content in/out without reloading a page.
rob@100:    */
rob@100:   Processing.reload = function() {
rob@100:     if (processingInstances.length > 0) {
rob@100:       // unload sketches
rob@100:       for (var i = processingInstances.length - 1; i >= 0; i--) {
rob@100:         if (processingInstances[i]) {
rob@100:           processingInstances[i].exit();
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:     // rerun init() to scan the DOM for sketches
rob@100:     init();
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Disable the automatic loading of all sketches on the page.
rob@100:    * This will work as long as it's issued before DOMContentLoaded.
rob@100:    */
rob@100:   Processing.disableInit = function() {
rob@100:     document.removeEventListener('DOMContentLoaded', init, false);
rob@100:   };
rob@100: 
rob@100:   // done.
rob@100:   return Processing;
rob@100: };
rob@100: },{}],7:[function(require,module,exports){
rob@100: /**
rob@100:  * Returns Java equals() result for two objects. If the first object
rob@100:  * has the "equals" function, it preforms the call of this function.
rob@100:  * Otherwise the method uses the JavaScript === operator.
rob@100:  *
rob@100:  * @param {Object} obj          The first object.
rob@100:  * @param {Object} other        The second object.
rob@100:  *
rob@100:  * @returns {boolean}           true if the objects are equal.
rob@100:  */
rob@100: module.exports = function virtEquals(obj, other) {
rob@100:   if (obj === null || other === null) {
rob@100:     return (obj === null) && (other === null);
rob@100:   }
rob@100:   if (typeof (obj) === "string") {
rob@100:     return obj === other;
rob@100:   }
rob@100:   if (typeof(obj) !== "object") {
rob@100:     return obj === other;
rob@100:   }
rob@100:   if (obj.equals instanceof Function) {
rob@100:     return obj.equals(other);
rob@100:   }
rob@100:   return obj === other;
rob@100: };
rob@100: 
rob@100: },{}],8:[function(require,module,exports){
rob@100: /**
rob@100:  * Returns Java hashCode() result for the object. If the object has the "hashCode" function,
rob@100:  * it preforms the call of this function. Otherwise it uses/creates the "$id" property,
rob@100:  * which is used as the hashCode.
rob@100:  *
rob@100:  * @param {Object} obj          The object.
rob@100:  * @returns {int}               The object's hash code.
rob@100:  */
rob@100: module.exports = function virtHashCode(obj, undef) {
rob@100:   if (typeof(obj) === "string") {
rob@100:     var hash = 0;
rob@100:     for (var i = 0; i < obj.length; ++i) {
rob@100:       hash = (hash * 31 + obj.charCodeAt(i)) & 0xFFFFFFFF;
rob@100:     }
rob@100:     return hash;
rob@100:   }
rob@100:   if (typeof(obj) !== "object") {
rob@100:     return obj & 0xFFFFFFFF;
rob@100:   }
rob@100:   if (obj.hashCode instanceof Function) {
rob@100:     return obj.hashCode();
rob@100:   }
rob@100:   if (obj.$id === undef) {
rob@100:       obj.$id = ((Math.floor(Math.random() * 0x10000) - 0x8000) << 16) | Math.floor(Math.random() * 0x10000);
rob@100:   }
rob@100:   return obj.$id;
rob@100: };
rob@100: 
rob@100: },{}],9:[function(require,module,exports){
rob@100: /**
rob@100:  * An ArrayList stores a variable number of objects.
rob@100:  *
rob@100:  * @param {int} initialCapacity optional defines the initial capacity of the list, it's empty by default
rob@100:  *
rob@100:  * @returns {ArrayList} new ArrayList object
rob@100:  */
rob@100: module.exports = function(options) {
rob@100:   var virtHashCode = options.virtHashCode,
rob@100:       virtEquals = options.virtEquals;
rob@100: 
rob@100:   function Iterator(array) {
rob@100:     var index = -1;
rob@100:     this.hasNext = function() {
rob@100:       return (index + 1) < array.length;
rob@100:     };
rob@100: 
rob@100:     this.next = function() {
rob@100:       return array[++index];
rob@100:     };
rob@100: 
rob@100:     this.remove = function() {
rob@100:       array.splice(index--, 1);
rob@100:     };
rob@100:   }
rob@100: 
rob@100:   function ArrayList(a) {
rob@100:     var array = [];
rob@100: 
rob@100:     if (a && a.toArray) {
rob@100:       array = a.toArray();
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.get() Returns the element at the specified position in this list.
rob@100:      *
rob@100:      * @param {int} i index of element to return
rob@100:      *
rob@100:      * @returns {Object} the element at the specified position in this list.
rob@100:      */
rob@100:     this.get = function(i) {
rob@100:       return array[i];
rob@100:     };
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.contains() Returns true if this list contains the specified element.
rob@100:      *
rob@100:      * @param {Object} item element whose presence in this List is to be tested.
rob@100:      *
rob@100:      * @returns {boolean} true if the specified element is present; false otherwise.
rob@100:      */
rob@100:     this.contains = function(item) {
rob@100:       return this.indexOf(item)>-1;
rob@100:     };
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.indexOf() Returns the position this element takes in the list, or -1 if the element is not found.
rob@100:      *
rob@100:      * @param {Object} item element whose position in this List is to be tested.
rob@100:      *
rob@100:      * @returns {int} the list position that the first match for this element holds in the list, or -1 if it is not in the list.
rob@100:      */
rob@100:     this.indexOf = function(item) {
rob@100:       for (var i = 0, len = array.length; i < len; ++i) {
rob@100:         if (virtEquals(item, array[i])) {
rob@100:           return i;
rob@100:         }
rob@100:       }
rob@100:       return -1;
rob@100:     };
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.lastIndexOf() Returns the index of the last occurrence of the specified element in this list,
rob@100:      * or -1 if this list does not contain the element. More formally, returns the highest index i such that
rob@100:      * (o==null ? get(i)==null : o.equals(get(i))), or -1 if there is no such index.
rob@100:      *
rob@100:      * @param {Object} item element to search for.
rob@100:      *
rob@100:      * @returns {int} the index of the last occurrence of the specified element in this list, or -1 if this list does not contain the element.
rob@100:      */
rob@100:     this.lastIndexOf = function(item) {
rob@100:       for (var i = array.length-1; i >= 0; --i) {
rob@100:         if (virtEquals(item, array[i])) {
rob@100:           return i;
rob@100:         }
rob@100:       }
rob@100:       return -1;
rob@100:     };
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.add() Adds the specified element to this list.
rob@100:      *
rob@100:      * @param {int}    index  optional index at which the specified element is to be inserted
rob@100:      * @param {Object} object element to be added to the list
rob@100:      */
rob@100:     this.add = function() {
rob@100:       if (arguments.length === 1) {
rob@100:         array.push(arguments[0]); // for add(Object)
rob@100:       } else if (arguments.length === 2) {
rob@100:         var arg0 = arguments[0];
rob@100:         if (typeof arg0 === 'number') {
rob@100:           if (arg0 >= 0 && arg0 <= array.length) {
rob@100:             array.splice(arg0, 0, arguments[1]); // for add(i, Object)
rob@100:           } else {
rob@100:             throw(arg0 + " is not a valid index");
rob@100:           }
rob@100:         } else {
rob@100:           throw(typeof arg0 + " is not a number");
rob@100:         }
rob@100:       } else {
rob@100:         throw("Please use the proper number of parameters.");
rob@100:       }
rob@100:     };
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.addAll(collection) appends all of the elements in the specified
rob@100:      * Collection to the end of this list, in the order that they are returned by
rob@100:      * the specified Collection's Iterator.
rob@100:      *
rob@100:      * When called as addAll(index, collection) the elements are inserted into
rob@100:      * this list at the position indicated by index.
rob@100:      *
rob@100:      * @param {index} Optional; specifies the position the colletion should be inserted at
rob@100:      * @param {collection} Any iterable object (ArrayList, HashMap.keySet(), etc.)
rob@100:      * @throws out of bounds error for negative index, or index greater than list size.
rob@100:      */
rob@100:     this.addAll = function(arg1, arg2) {
rob@100:       // addAll(int, Collection)
rob@100:       var it;
rob@100:       if (typeof arg1 === "number") {
rob@100:         if (arg1 < 0 || arg1 > array.length) {
rob@100:           throw("Index out of bounds for addAll: " + arg1 + " greater or equal than " + array.length);
rob@100:         }
rob@100:         it = new ObjectIterator(arg2);
rob@100:         while (it.hasNext()) {
rob@100:           array.splice(arg1++, 0, it.next());
rob@100:         }
rob@100:       }
rob@100:       // addAll(Collection)
rob@100:       else {
rob@100:         it = new ObjectIterator(arg1);
rob@100:         while (it.hasNext()) {
rob@100:           array.push(it.next());
rob@100:         }
rob@100:       }
rob@100:     };
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.set() Replaces the element at the specified position in this list with the specified element.
rob@100:      *
rob@100:      * @param {int}    index  index of element to replace
rob@100:      * @param {Object} object element to be stored at the specified position
rob@100:      */
rob@100:     this.set = function() {
rob@100:       if (arguments.length === 2) {
rob@100:         var arg0 = arguments[0];
rob@100:         if (typeof arg0 === 'number') {
rob@100:           if (arg0 >= 0 && arg0 < array.length) {
rob@100:             array.splice(arg0, 1, arguments[1]);
rob@100:           } else {
rob@100:             throw(arg0 + " is not a valid index.");
rob@100:           }
rob@100:         } else {
rob@100:           throw(typeof arg0 + " is not a number");
rob@100:         }
rob@100:       } else {
rob@100:         throw("Please use the proper number of parameters.");
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.size() Returns the number of elements in this list.
rob@100:      *
rob@100:      * @returns {int} the number of elements in this list
rob@100:      */
rob@100:     this.size = function() {
rob@100:       return array.length;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.clear() Removes all of the elements from this list. The list will be empty after this call returns.
rob@100:      */
rob@100:     this.clear = function() {
rob@100:       array.length = 0;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.remove() Removes an element either based on index, if the argument is a number, or
rob@100:      * by equality check, if the argument is an object.
rob@100:      *
rob@100:      * @param {int|Object} item either the index of the element to be removed, or the element itself.
rob@100:      *
rob@100:      * @returns {Object|boolean} If removal is by index, the element that was removed, or null if nothing was removed. If removal is by object, true if removal occurred, otherwise false.
rob@100:      */
rob@100:     this.remove = function(item) {
rob@100:       if (typeof item === 'number') {
rob@100:         return array.splice(item, 1)[0];
rob@100:       }
rob@100:       item = this.indexOf(item);
rob@100:       if (item > -1) {
rob@100:         array.splice(item, 1);
rob@100:         return true;
rob@100:       }
rob@100:       return false;
rob@100:     };
rob@100: 
rob@100:      /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.removeAll Removes from this List all of the elements from
rob@100:      * the current ArrayList which are present in the passed in paramater ArrayList 'c'.
rob@100:      * Shifts any succeeding elements to the left (reduces their index).
rob@100:      *
rob@100:      * @param {ArrayList} the ArrayList to compare to the current ArrayList
rob@100:      *
rob@100:      * @returns {boolean} true if the ArrayList had an element removed; false otherwise
rob@100:      */
rob@100:     this.removeAll = function(c) {
rob@100:       var i, x, item,
rob@100:           newList = new ArrayList();
rob@100:       newList.addAll(this);
rob@100:       this.clear();
rob@100:       // For every item that exists in the original ArrayList and not in the c ArrayList
rob@100:       // copy it into the empty 'this' ArrayList to create the new 'this' Array.
rob@100:       for (i = 0, x = 0; i < newList.size(); i++) {
rob@100:         item = newList.get(i);
rob@100:         if (!c.contains(item)) {
rob@100:           this.add(x++, item);
rob@100:         }
rob@100:       }
rob@100:       if (this.size() < newList.size()) {
rob@100:         return true;
rob@100:       }
rob@100:       return false;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.isEmpty() Tests if this list has no elements.
rob@100:      *
rob@100:      * @returns {boolean} true if this list has no elements; false otherwise
rob@100:      */
rob@100:     this.isEmpty = function() {
rob@100:        return !array.length;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.clone() Returns a shallow copy of this ArrayList instance. (The elements themselves are not copied.)
rob@100:      *
rob@100:      * @returns {ArrayList} a clone of this ArrayList instance
rob@100:      */
rob@100:     this.clone = function() {
rob@100:       return new ArrayList(this);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member ArrayList
rob@100:      * ArrayList.toArray() Returns an array containing all of the elements in this list in the correct order.
rob@100:      *
rob@100:      * @returns {Object[]} Returns an array containing all of the elements in this list in the correct order
rob@100:      */
rob@100:     this.toArray = function() {
rob@100:       return array.slice(0);
rob@100:     };
rob@100: 
rob@100:     this.iterator = function() {
rob@100:       return new Iterator(array);
rob@100:     };
rob@100:   }
rob@100: 
rob@100:   return ArrayList;
rob@100: };
rob@100: 
rob@100: },{}],10:[function(require,module,exports){
rob@100: module.exports = (function(charMap, undef) {
rob@100: 
rob@100:   var Char = function(chr) {
rob@100:     if (typeof chr === 'string' && chr.length === 1) {
rob@100:       this.code = chr.charCodeAt(0);
rob@100:     } else if (typeof chr === 'number') {
rob@100:       this.code = chr;
rob@100:     } else if (chr instanceof Char) {
rob@100:       this.code = chr;
rob@100:     } else {
rob@100:       this.code = NaN;
rob@100:     }
rob@100:     return (charMap[this.code] === undef) ? charMap[this.code] = this : charMap[this.code];
rob@100:   };
rob@100: 
rob@100:   Char.prototype.toString = function() {
rob@100:     return String.fromCharCode(this.code);
rob@100:   };
rob@100: 
rob@100:   Char.prototype.valueOf = function() {
rob@100:     return this.code;
rob@100:   };
rob@100: 
rob@100:   return Char;
rob@100: }({}));
rob@100: 
rob@100: },{}],11:[function(require,module,exports){
rob@100: /**
rob@100: * A HashMap stores a collection of objects, each referenced by a key. This is similar to an Array, only
rob@100: * instead of accessing elements with a numeric index, a String  is used. (If you are familiar with
rob@100: * associative arrays from other languages, this is the same idea.)
rob@100: *
rob@100: * @param {int} initialCapacity          defines the initial capacity of the map, it's 16 by default
rob@100: * @param {float} loadFactor             the load factor for the map, the default is 0.75
rob@100: * @param {Map} m                        gives the new HashMap the same mappings as this Map
rob@100: */
rob@100: module.exports = function(options) {
rob@100:   var virtHashCode = options.virtHashCode,
rob@100:       virtEquals = options.virtEquals;
rob@100: 
rob@100:   /**
rob@100:   * @member HashMap
rob@100:   * A HashMap stores a collection of objects, each referenced by a key. This is similar to an Array, only
rob@100:   * instead of accessing elements with a numeric index, a String  is used. (If you are familiar with
rob@100:   * associative arrays from other languages, this is the same idea.)
rob@100:   *
rob@100:   * @param {int} initialCapacity          defines the initial capacity of the map, it's 16 by default
rob@100:   * @param {float} loadFactor             the load factor for the map, the default is 0.75
rob@100:   * @param {Map} m                        gives the new HashMap the same mappings as this Map
rob@100:   */
rob@100:   function HashMap() {
rob@100:     if (arguments.length === 1 && arguments[0] instanceof HashMap) {
rob@100:       return arguments[0].clone();
rob@100:     }
rob@100: 
rob@100:     var initialCapacity = arguments.length > 0 ? arguments[0] : 16;
rob@100:     var loadFactor = arguments.length > 1 ? arguments[1] : 0.75;
rob@100:     var buckets = [];
rob@100:     buckets.length = initialCapacity;
rob@100:     var count = 0;
rob@100:     var hashMap = this;
rob@100: 
rob@100:     function getBucketIndex(key) {
rob@100:       var index = virtHashCode(key) % buckets.length;
rob@100:       return index < 0 ? buckets.length + index : index;
rob@100:     }
rob@100:     function ensureLoad() {
rob@100:       if (count <= loadFactor * buckets.length) {
rob@100:         return;
rob@100:       }
rob@100:       var allEntries = [];
rob@100:       for (var i = 0; i < buckets.length; ++i) {
rob@100:         if (buckets[i] !== undefined) {
rob@100:           allEntries = allEntries.concat(buckets[i]);
rob@100:         }
rob@100:       }
rob@100:       var newBucketsLength = buckets.length * 2;
rob@100:       buckets = [];
rob@100:       buckets.length = newBucketsLength;
rob@100:       for (var j = 0; j < allEntries.length; ++j) {
rob@100:         var index = getBucketIndex(allEntries[j].key);
rob@100:         var bucket = buckets[index];
rob@100:         if (bucket === undefined) {
rob@100:           buckets[index] = bucket = [];
rob@100:         }
rob@100:         bucket.push(allEntries[j]);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     function Iterator(conversion, removeItem) {
rob@100:       var bucketIndex = 0;
rob@100:       var itemIndex = -1;
rob@100:       var endOfBuckets = false;
rob@100:       var currentItem;
rob@100: 
rob@100:       function findNext() {
rob@100:         while (!endOfBuckets) {
rob@100:           ++itemIndex;
rob@100:           if (bucketIndex >= buckets.length) {
rob@100:             endOfBuckets = true;
rob@100:           } else if (buckets[bucketIndex] === undefined || itemIndex >= buckets[bucketIndex].length) {
rob@100:             itemIndex = -1;
rob@100:             ++bucketIndex;
rob@100:           } else {
rob@100:             return;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       /*
rob@100:       * @member Iterator
rob@100:       * Checks if the Iterator has more items
rob@100:       */
rob@100:       this.hasNext = function() {
rob@100:         return !endOfBuckets;
rob@100:       };
rob@100: 
rob@100:       /*
rob@100:       * @member Iterator
rob@100:       * Return the next Item
rob@100:       */
rob@100:       this.next = function() {
rob@100:         currentItem = conversion(buckets[bucketIndex][itemIndex]);
rob@100:         findNext();
rob@100:         return currentItem;
rob@100:       };
rob@100: 
rob@100:       /*
rob@100:       * @member Iterator
rob@100:       * Remove the current item
rob@100:       */
rob@100:       this.remove = function() {
rob@100:         if (currentItem !== undefined) {
rob@100:           removeItem(currentItem);
rob@100:           --itemIndex;
rob@100:           findNext();
rob@100:         }
rob@100:       };
rob@100: 
rob@100:       findNext();
rob@100:     }
rob@100: 
rob@100:     function Set(conversion, isIn, removeItem) {
rob@100:       this.clear = function() {
rob@100:         hashMap.clear();
rob@100:       };
rob@100: 
rob@100:       this.contains = function(o) {
rob@100:         return isIn(o);
rob@100:       };
rob@100: 
rob@100:       this.containsAll = function(o) {
rob@100:         var it = o.iterator();
rob@100:         while (it.hasNext()) {
rob@100:           if (!this.contains(it.next())) {
rob@100:             return false;
rob@100:           }
rob@100:         }
rob@100:         return true;
rob@100:       };
rob@100: 
rob@100:       this.isEmpty = function() {
rob@100:         return hashMap.isEmpty();
rob@100:       };
rob@100: 
rob@100:       this.iterator = function() {
rob@100:         return new Iterator(conversion, removeItem);
rob@100:       };
rob@100: 
rob@100:       this.remove = function(o) {
rob@100:         if (this.contains(o)) {
rob@100:           removeItem(o);
rob@100:           return true;
rob@100:         }
rob@100:         return false;
rob@100:       };
rob@100: 
rob@100:       this.removeAll = function(c) {
rob@100:         var it = c.iterator();
rob@100:         var changed = false;
rob@100:         while (it.hasNext()) {
rob@100:           var item = it.next();
rob@100:           if (this.contains(item)) {
rob@100:             removeItem(item);
rob@100:             changed = true;
rob@100:           }
rob@100:         }
rob@100:         return true;
rob@100:       };
rob@100: 
rob@100:       this.retainAll = function(c) {
rob@100:         var it = this.iterator();
rob@100:         var toRemove = [];
rob@100:         while (it.hasNext()) {
rob@100:           var entry = it.next();
rob@100:           if (!c.contains(entry)) {
rob@100:             toRemove.push(entry);
rob@100:           }
rob@100:         }
rob@100:         for (var i = 0; i < toRemove.length; ++i) {
rob@100:           removeItem(toRemove[i]);
rob@100:         }
rob@100:         return toRemove.length > 0;
rob@100:       };
rob@100: 
rob@100:       this.size = function() {
rob@100:         return hashMap.size();
rob@100:       };
rob@100: 
rob@100:       this.toArray = function() {
rob@100:         var result = [];
rob@100:         var it = this.iterator();
rob@100:         while (it.hasNext()) {
rob@100:           result.push(it.next());
rob@100:         }
rob@100:         return result;
rob@100:       };
rob@100:     }
rob@100: 
rob@100:     function Entry(pair) {
rob@100:       this._isIn = function(map) {
rob@100:         return map === hashMap && (pair.removed === undefined);
rob@100:       };
rob@100: 
rob@100:       this.equals = function(o) {
rob@100:         return virtEquals(pair.key, o.getKey());
rob@100:       };
rob@100: 
rob@100:       this.getKey = function() {
rob@100:         return pair.key;
rob@100:       };
rob@100: 
rob@100:       this.getValue = function() {
rob@100:         return pair.value;
rob@100:       };
rob@100: 
rob@100:       this.hashCode = function(o) {
rob@100:         return virtHashCode(pair.key);
rob@100:       };
rob@100: 
rob@100:       this.setValue = function(value) {
rob@100:         var old = pair.value;
rob@100:         pair.value = value;
rob@100:         return old;
rob@100:       };
rob@100:     }
rob@100: 
rob@100:     this.clear = function() {
rob@100:       count = 0;
rob@100:       buckets = [];
rob@100:       buckets.length = initialCapacity;
rob@100:     };
rob@100: 
rob@100:     this.clone = function() {
rob@100:       var map = new HashMap();
rob@100:       map.putAll(this);
rob@100:       return map;
rob@100:     };
rob@100: 
rob@100:     this.containsKey = function(key) {
rob@100:       var index = getBucketIndex(key);
rob@100:       var bucket = buckets[index];
rob@100:       if (bucket === undefined) {
rob@100:         return false;
rob@100:       }
rob@100:       for (var i = 0; i < bucket.length; ++i) {
rob@100:         if (virtEquals(bucket[i].key, key)) {
rob@100:           return true;
rob@100:         }
rob@100:       }
rob@100:       return false;
rob@100:     };
rob@100: 
rob@100:     this.containsValue = function(value) {
rob@100:       for (var i = 0; i < buckets.length; ++i) {
rob@100:         var bucket = buckets[i];
rob@100:         if (bucket === undefined) {
rob@100:           continue;
rob@100:         }
rob@100:         for (var j = 0; j < bucket.length; ++j) {
rob@100:           if (virtEquals(bucket[j].value, value)) {
rob@100:             return true;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       return false;
rob@100:     };
rob@100: 
rob@100:     this.entrySet = function() {
rob@100:       return new Set(
rob@100: 
rob@100:       function(pair) {
rob@100:         return new Entry(pair);
rob@100:       },
rob@100: 
rob@100:       function(pair) {
rob@100:         return (pair instanceof Entry) && pair._isIn(hashMap);
rob@100:       },
rob@100: 
rob@100:       function(pair) {
rob@100:         return hashMap.remove(pair.getKey());
rob@100:       });
rob@100:     };
rob@100: 
rob@100:     this.get = function(key) {
rob@100:       var index = getBucketIndex(key);
rob@100:       var bucket = buckets[index];
rob@100:       if (bucket === undefined) {
rob@100:         return null;
rob@100:       }
rob@100:       for (var i = 0; i < bucket.length; ++i) {
rob@100:         if (virtEquals(bucket[i].key, key)) {
rob@100:           return bucket[i].value;
rob@100:         }
rob@100:       }
rob@100:       return null;
rob@100:     };
rob@100: 
rob@100:     this.isEmpty = function() {
rob@100:       return count === 0;
rob@100:     };
rob@100: 
rob@100:     this.keySet = function() {
rob@100:       return new Set(
rob@100:         // get key from pair
rob@100:         function(pair) {
rob@100:           return pair.key;
rob@100:         },
rob@100:         // is-in test
rob@100:         function(key) {
rob@100:           return hashMap.containsKey(key);
rob@100:         },
rob@100:         // remove from hashmap by key
rob@100:         function(key) {
rob@100:           return hashMap.remove(key);
rob@100:         }
rob@100:       );
rob@100:     };
rob@100: 
rob@100:     this.values = function() {
rob@100:       return new Set(
rob@100:         // get value from pair
rob@100:         function(pair) {
rob@100:           return pair.value;
rob@100:         },
rob@100:         // is-in test
rob@100:         function(value) {
rob@100:           return hashMap.containsValue(value);
rob@100:         },
rob@100:         // remove from hashmap by value
rob@100:         function(value) {
rob@100:           return hashMap.removeByValue(value);
rob@100:         }
rob@100:       );
rob@100:     };
rob@100: 
rob@100:     this.put = function(key, value) {
rob@100:       var index = getBucketIndex(key);
rob@100:       var bucket = buckets[index];
rob@100:       if (bucket === undefined) {
rob@100:         ++count;
rob@100:         buckets[index] = [{
rob@100:           key: key,
rob@100:           value: value
rob@100:         }];
rob@100:         ensureLoad();
rob@100:         return null;
rob@100:       }
rob@100:       for (var i = 0; i < bucket.length; ++i) {
rob@100:         if (virtEquals(bucket[i].key, key)) {
rob@100:           var previous = bucket[i].value;
rob@100:           bucket[i].value = value;
rob@100:           return previous;
rob@100:         }
rob@100:       }
rob@100:       ++count;
rob@100:       bucket.push({
rob@100:         key: key,
rob@100:         value: value
rob@100:       });
rob@100:       ensureLoad();
rob@100:       return null;
rob@100:     };
rob@100: 
rob@100:     this.putAll = function(m) {
rob@100:       var it = m.entrySet().iterator();
rob@100:       while (it.hasNext()) {
rob@100:         var entry = it.next();
rob@100:         this.put(entry.getKey(), entry.getValue());
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     this.remove = function(key) {
rob@100:       var index = getBucketIndex(key);
rob@100:       var bucket = buckets[index];
rob@100:       if (bucket === undefined) {
rob@100:         return null;
rob@100:       }
rob@100:       for (var i = 0; i < bucket.length; ++i) {
rob@100:         if (virtEquals(bucket[i].key, key)) {
rob@100:           --count;
rob@100:           var previous = bucket[i].value;
rob@100:           bucket[i].removed = true;
rob@100:           if (bucket.length > 1) {
rob@100:             bucket.splice(i, 1);
rob@100:           } else {
rob@100:             buckets[index] = undefined;
rob@100:           }
rob@100:           return previous;
rob@100:         }
rob@100:       }
rob@100:       return null;
rob@100:     };
rob@100: 
rob@100:     this.removeByValue = function(value) {
rob@100:       var bucket, i, ilen, pair;
rob@100:       for (bucket in buckets) {
rob@100:         if (buckets.hasOwnProperty(bucket)) {
rob@100:           for (i = 0, ilen = buckets[bucket].length; i < ilen; i++) {
rob@100:             pair = buckets[bucket][i];
rob@100:             // removal on values is based on identity, not equality
rob@100:             if (pair.value === value) {
rob@100:               buckets[bucket].splice(i, 1);
rob@100:               return true;
rob@100:             }
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       return false;
rob@100:     };
rob@100: 
rob@100:     this.size = function() {
rob@100:       return count;
rob@100:     };
rob@100:   }
rob@100: 
rob@100:   return HashMap;
rob@100: };
rob@100: 
rob@100: },{}],12:[function(require,module,exports){
rob@100: // module export
rob@100: module.exports = function(options,undef) {
rob@100:   var window = options.Browser.window,
rob@100:       document = options.Browser.document,
rob@100:       noop = options.noop;
rob@100: 
rob@100:   /**
rob@100:    * [internal function] computeFontMetrics() calculates various metrics for text
rob@100:    * placement. Currently this function computes the ascent, descent and leading
rob@100:    * (from "lead", used for vertical space) values for the currently active font.
rob@100:    */
rob@100:   function computeFontMetrics(pfont) {
rob@100:     var emQuad = 250,
rob@100:         correctionFactor = pfont.size / emQuad,
rob@100:         canvas = document.createElement("canvas");
rob@100:     canvas.width = 2*emQuad;
rob@100:     canvas.height = 2*emQuad;
rob@100:     canvas.style.opacity = 0;
rob@100:     var cfmFont = pfont.getCSSDefinition(emQuad+"px", "normal"),
rob@100:         ctx = canvas.getContext("2d");
rob@100:     ctx.font = cfmFont;
rob@100: 
rob@100:     // Size the canvas using a string with common max-ascent and max-descent letters.
rob@100:     // Changing the canvas dimensions resets the context, so we must reset the font.
rob@100:     var protrusions = "dbflkhyjqpg";
rob@100:     canvas.width = ctx.measureText(protrusions).width;
rob@100:     ctx.font = cfmFont;
rob@100: 
rob@100:     // for text lead values, we meaure a multiline text container.
rob@100:     var leadDiv = document.createElement("div");
rob@100:     leadDiv.style.position = "absolute";
rob@100:     leadDiv.style.opacity = 0;
rob@100:     leadDiv.style.fontFamily = '"' + pfont.name + '"';
rob@100:     leadDiv.style.fontSize = emQuad + "px";
rob@100:     leadDiv.innerHTML = protrusions + "<br/>" + protrusions;
rob@100:     document.body.appendChild(leadDiv);
rob@100: 
rob@100:     var w = canvas.width,
rob@100:         h = canvas.height,
rob@100:         baseline = h/2;
rob@100: 
rob@100:     // Set all canvas pixeldata values to 255, with all the content
rob@100:     // data being 0. This lets us scan for data[i] != 255.
rob@100:     ctx.fillStyle = "white";
rob@100:     ctx.fillRect(0, 0, w, h);
rob@100:     ctx.fillStyle = "black";
rob@100:     ctx.fillText(protrusions, 0, baseline);
rob@100:     var pixelData = ctx.getImageData(0, 0, w, h).data;
rob@100: 
rob@100:     // canvas pixel data is w*4 by h*4, because R, G, B and A are separate,
rob@100:     // consecutive values in the array, rather than stored as 32 bit ints.
rob@100:     var i = 0,
rob@100:         w4 = w * 4,
rob@100:         len = pixelData.length;
rob@100: 
rob@100:     // Finding the ascent uses a normal, forward scanline
rob@100:     while (++i < len && pixelData[i] === 255) {
rob@100:       noop();
rob@100:     }
rob@100:     var ascent = Math.round(i / w4);
rob@100: 
rob@100:     // Finding the descent uses a reverse scanline
rob@100:     i = len - 1;
rob@100:     while (--i > 0 && pixelData[i] === 255) {
rob@100:       noop();
rob@100:     }
rob@100:     var descent = Math.round(i / w4);
rob@100: 
rob@100:     // set font metrics
rob@100:     pfont.ascent = correctionFactor * (baseline - ascent);
rob@100:     pfont.descent = correctionFactor * (descent - baseline);
rob@100: 
rob@100:     // Then we try to get the real value from the browser
rob@100:     if (document.defaultView.getComputedStyle) {
rob@100:       var leadDivHeight = document.defaultView.getComputedStyle(leadDiv,null).getPropertyValue("height");
rob@100:       leadDivHeight = correctionFactor * leadDivHeight.replace("px","");
rob@100:       if (leadDivHeight >= pfont.size * 2) {
rob@100:         pfont.leading = Math.round(leadDivHeight/2);
rob@100:       }
rob@100:     }
rob@100:     document.body.removeChild(leadDiv);
rob@100: 
rob@100:     // if we're caching, cache the context used for this pfont
rob@100:     if (pfont.caching) {
rob@100:       return ctx;
rob@100:     }
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * Constructor for a system or from-file (non-SVG) font.
rob@100:    */
rob@100:   function PFont(name, size) {
rob@100:     // according to the P5 API, new PFont() is legal (albeit completely useless)
rob@100:     if (name === undef) {
rob@100:       name = "";
rob@100:     }
rob@100:     this.name = name;
rob@100:     if (size === undef) {
rob@100:       size = 0;
rob@100:     }
rob@100:     this.size = size;
rob@100:     this.glyph = false;
rob@100:     this.ascent = 0;
rob@100:     this.descent = 0;
rob@100:     // For leading, the "safe" value uses the standard TEX ratio
rob@100:     this.leading = 1.2 * size;
rob@100: 
rob@100:     // Note that an italic, bold font must used "... Bold Italic"
rob@100:     // in P5. "... Italic Bold" is treated as normal/normal.
rob@100:     var illegalIndicator = name.indexOf(" Italic Bold");
rob@100:     if (illegalIndicator !== -1) {
rob@100:       name = name.substring(0, illegalIndicator);
rob@100:     }
rob@100: 
rob@100:     // determine font style
rob@100:     this.style = "normal";
rob@100:     var italicsIndicator = name.indexOf(" Italic");
rob@100:     if (italicsIndicator !== -1) {
rob@100:       name = name.substring(0, italicsIndicator);
rob@100:       this.style = "italic";
rob@100:     }
rob@100: 
rob@100:     // determine font weight
rob@100:     this.weight = "normal";
rob@100:     var boldIndicator = name.indexOf(" Bold");
rob@100:     if (boldIndicator !== -1) {
rob@100:       name = name.substring(0, boldIndicator);
rob@100:       this.weight = "bold";
rob@100:     }
rob@100: 
rob@100:     // determine font-family name
rob@100:     this.family = "sans-serif";
rob@100:     if (name !== undef) {
rob@100:       switch(name) {
rob@100:         case "sans-serif":
rob@100:         case "serif":
rob@100:         case "monospace":
rob@100:         case "fantasy":
rob@100:         case "cursive":
rob@100:           this.family = name;
rob@100:           break;
rob@100:         default:
rob@100:           this.family = '"' + name + '", sans-serif';
rob@100:           break;
rob@100:       }
rob@100:     }
rob@100:     // Calculate the ascent/descent/leading value based on
rob@100:     // how the browser renders this font.
rob@100:     this.context2d = computeFontMetrics(this);
rob@100:     this.css = this.getCSSDefinition();
rob@100:     if (this.context2d) {
rob@100:       this.context2d.font = this.css;
rob@100:     }
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * regulates whether or not we're caching the canvas
rob@100:    * 2d context for quick text width computation.
rob@100:    */
rob@100:   PFont.prototype.caching = true;
rob@100: 
rob@100:   /**
rob@100:    * This function generates the CSS "font" string for this PFont
rob@100:    */
rob@100:   PFont.prototype.getCSSDefinition = function(fontSize, lineHeight) {
rob@100:     if(fontSize===undef) {
rob@100:       fontSize = this.size + "px";
rob@100:     }
rob@100:     if(lineHeight===undef) {
rob@100:       lineHeight = this.leading + "px";
rob@100:     }
rob@100:     // CSS "font" definition: font-style font-variant font-weight font-size/line-height font-family
rob@100:     var components = [this.style, "normal", this.weight, fontSize + "/" + lineHeight, this.family];
rob@100:     return components.join(" ");
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Rely on the cached context2d measureText function.
rob@100:    */
rob@100:   PFont.prototype.measureTextWidth = function(string) {
rob@100:     return this.context2d.measureText(string).width;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * FALLBACK FUNCTION -- replaces Pfont.prototype.measureTextWidth
rob@100:    * when the font cache becomes too large. This contructs a new
rob@100:    * canvas 2d context object for calling measureText on.
rob@100:    */
rob@100:   PFont.prototype.measureTextWidthFallback = function(string) {
rob@100:     var canvas = document.createElement("canvas"),
rob@100:         ctx = canvas.getContext("2d");
rob@100:     ctx.font = this.css;
rob@100:     return ctx.measureText(string).width;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Global "loaded fonts" list, internal to PFont
rob@100:    */
rob@100:   PFont.PFontCache = { length: 0 };
rob@100: 
rob@100:   /**
rob@100:    * This function acts as single access point for getting and caching
rob@100:    * fonts across all sketches handled by an instance of Processing.js
rob@100:    */
rob@100:   PFont.get = function(fontName, fontSize) {
rob@100:     // round fontSize to one decimal point
rob@100:     fontSize = ((fontSize*10)+0.5|0)/10;
rob@100:     var cache = PFont.PFontCache,
rob@100:         idx = fontName+"/"+fontSize;
rob@100:     if (!cache[idx]) {
rob@100:       cache[idx] = new PFont(fontName, fontSize);
rob@100:       cache.length++;
rob@100: 
rob@100:       // FALLBACK FUNCTIONALITY 1:
rob@100:       // If the cache has become large, switch over from full caching
rob@100:       // to caching only the static metrics for each new font request.
rob@100:       if (cache.length === 50) {
rob@100:         PFont.prototype.measureTextWidth = PFont.prototype.measureTextWidthFallback;
rob@100:         PFont.prototype.caching = false;
rob@100:         // clear contexts stored for each cached font
rob@100:         var entry;
rob@100:         for (entry in cache) {
rob@100:           if (entry !== "length") {
rob@100:             cache[entry].context2d = null;
rob@100:           }
rob@100:         }
rob@100:         return new PFont(fontName, fontSize);
rob@100:       }
rob@100: 
rob@100:       // FALLBACK FUNCTIONALITY 2:
rob@100:       // If the cache has become too large, switch off font caching entirely.
rob@100:       if (cache.length === 400) {
rob@100:         PFont.PFontCache = {};
rob@100:         PFont.get = PFont.getFallback;
rob@100:         return new PFont(fontName, fontSize);
rob@100:       }
rob@100:     }
rob@100:     return cache[idx];
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * FALLBACK FUNCTION -- replaces PFont.get when the font cache
rob@100:    * becomes too large. This function bypasses font caching entirely.
rob@100:    */
rob@100:   PFont.getFallback = function(fontName, fontSize) {
rob@100:     return new PFont(fontName, fontSize);
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Lists all standard fonts. Due to browser limitations, this list is
rob@100:    * not the system font list, like in P5, but the CSS "genre" list.
rob@100:    */
rob@100:   PFont.list = function() {
rob@100:     return ["sans-serif", "serif", "monospace", "fantasy", "cursive"];
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Loading external fonts through @font-face rules is handled by PFont,
rob@100:    * to ensure fonts loaded in this way are globally available.
rob@100:    */
rob@100:   PFont.preloading = {
rob@100:     // template element used to compare font sizes
rob@100:     template: {},
rob@100:     // indicates whether or not the reference tiny font has been loaded
rob@100:     initialized: false,
rob@100:     // load the reference tiny font via a css @font-face rule
rob@100:     initialize: function() {
rob@100:       var generateTinyFont = function() {
rob@100:         var encoded = "#E3KAI2wAgT1MvMg7Eo3VmNtYX7ABi3CxnbHlm" +
rob@100:                       "7Abw3kaGVhZ7ACs3OGhoZWE7A53CRobXR47AY3" +
rob@100:                       "AGbG9jYQ7G03Bm1heH7ABC3CBuYW1l7Ae3AgcG" +
rob@100:                       "9zd7AI3AE#B3AQ2kgTY18PPPUACwAg3ALSRoo3" +
rob@100:                       "#yld0xg32QAB77#E777773B#E3C#I#Q77773E#" +
rob@100:                       "Q7777777772CMAIw7AB77732B#M#Q3wAB#g3B#" +
rob@100:                       "E#E2BB//82BB////w#B7#gAEg3E77x2B32B#E#" +
rob@100:                       "Q#MTcBAQ32gAe#M#QQJ#E32M#QQJ#I#g32Q77#";
rob@100:         var expand = function(input) {
rob@100:                        return "AAAAAAAA".substr(~~input ? 7-input : 6);
rob@100:                      };
rob@100:         return encoded.replace(/[#237]/g, expand);
rob@100:       };
rob@100:       var fontface = document.createElement("style");
rob@100:       fontface.setAttribute("type","text/css");
rob@100:       fontface.innerHTML =  "@font-face {\n" +
rob@100:                             '  font-family: "PjsEmptyFont";' + "\n" +
rob@100:                             "  src: url('data:application/x-font-ttf;base64,"+generateTinyFont()+"')\n" +
rob@100:                             "       format('truetype');\n" +
rob@100:                             "}";
rob@100:       document.head.appendChild(fontface);
rob@100: 
rob@100:       // set up the template element
rob@100:       var element = document.createElement("span");
rob@100:       element.style.cssText = 'position: absolute; top: 0; left: 0; opacity: 0; font-family: "PjsEmptyFont", fantasy;';
rob@100:       element.innerHTML = "AAAAAAAA";
rob@100:       document.body.appendChild(element);
rob@100:       this.template = element;
rob@100: 
rob@100:       this.initialized = true;
rob@100:     },
rob@100:     // Shorthand function to get the computed width for an element.
rob@100:     getElementWidth: function(element) {
rob@100:       return document.defaultView.getComputedStyle(element,"").getPropertyValue("width");
rob@100:     },
rob@100:     // time taken so far in attempting to load a font
rob@100:     timeAttempted: 0,
rob@100:     // returns false if no fonts are pending load, or true otherwise.
rob@100:     pending: function(intervallength) {
rob@100:       if (!this.initialized) {
rob@100:         this.initialize();
rob@100:       }
rob@100:       var element,
rob@100:           computedWidthFont,
rob@100:           computedWidthRef = this.getElementWidth(this.template);
rob@100:       for (var i = 0; i < this.fontList.length; i++) {
rob@100:         // compares size of text in pixels. if equal, custom font is not yet loaded
rob@100:         element = this.fontList[i];
rob@100:         computedWidthFont = this.getElementWidth(element);
rob@100:         if (this.timeAttempted < 4000 && computedWidthFont === computedWidthRef) {
rob@100:           this.timeAttempted += intervallength;
rob@100:           return true;
rob@100:         } else {
rob@100:           document.body.removeChild(element);
rob@100:           this.fontList.splice(i--, 1);
rob@100:           this.timeAttempted = 0;
rob@100:         }
rob@100:       }
rob@100:       // if there are no more fonts to load, pending is false
rob@100:       if (this.fontList.length === 0) {
rob@100:         return false;
rob@100:       }
rob@100:       // We should have already returned before getting here.
rob@100:       // But, if we do get here, length!=0 so fonts are pending.
rob@100:       return true;
rob@100:     },
rob@100:     // fontList contains elements to compare font sizes against a template
rob@100:     fontList: [],
rob@100:     // addedList contains the fontnames of all the fonts loaded via @font-face
rob@100:     addedList: {},
rob@100:     // adds a font to the font cache
rob@100:     // creates an element using the font, to start loading the font,
rob@100:     // and compare against a default font to see if the custom font is loaded
rob@100:     add: function(fontSrc) {
rob@100:       if (!this.initialized) {
rob@100:        this.initialize();
rob@100:       }
rob@100:       // fontSrc can be a string or a javascript object
rob@100:       // acceptable fonts are .ttf, .otf, and data uri
rob@100:       var fontName = (typeof fontSrc === 'object' ? fontSrc.fontFace : fontSrc),
rob@100:           fontUrl = (typeof fontSrc === 'object' ? fontSrc.url : fontSrc);
rob@100: 
rob@100:       // check whether we already created the @font-face rule for this font
rob@100:       if (this.addedList[fontName]) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       // if we didn't, create the @font-face rule
rob@100:       var style = document.createElement("style");
rob@100:       style.setAttribute("type","text/css");
rob@100:       style.innerHTML = "@font-face{\n  font-family: '" + fontName + "';\n  src:  url('" + fontUrl + "');\n}\n";
rob@100:       document.head.appendChild(style);
rob@100:       this.addedList[fontName] = true;
rob@100: 
rob@100:       // also create the element to load and compare the new font
rob@100:       var element = document.createElement("span");
rob@100:       element.style.cssText = "position: absolute; top: 0; left: 0; opacity: 0;";
rob@100:       element.style.fontFamily = '"' + fontName + '", "PjsEmptyFont", fantasy';
rob@100:       element.innerHTML = "AAAAAAAA";
rob@100:       document.body.appendChild(element);
rob@100:       this.fontList.push(element);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   return PFont;
rob@100: };
rob@100: },{}],13:[function(require,module,exports){
rob@100: module.exports = function(options, undef) {
rob@100: 
rob@100:   // FIXME: hack
rob@100:   var p = options.p;
rob@100: 
rob@100:   /**
rob@100:    * PMatrix2D is a 3x2 affine matrix implementation. The constructor accepts another PMatrix2D or a list of six float elements.
rob@100:    * If no parameters are provided the matrix is set to the identity matrix.
rob@100:    *
rob@100:    * @param {PMatrix2D} matrix  the initial matrix to set to
rob@100:    * @param {float} m00         the first element of the matrix
rob@100:    * @param {float} m01         the second element of the matrix
rob@100:    * @param {float} m02         the third element of the matrix
rob@100:    * @param {float} m10         the fourth element of the matrix
rob@100:    * @param {float} m11         the fifth element of the matrix
rob@100:    * @param {float} m12         the sixth element of the matrix
rob@100:    */
rob@100:   var PMatrix2D = function() {
rob@100:     if (arguments.length === 0) {
rob@100:       this.reset();
rob@100:     } else if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:       this.set(arguments[0].array());
rob@100:     } else if (arguments.length === 6) {
rob@100:       this.set(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * PMatrix2D methods
rob@100:    */
rob@100:   PMatrix2D.prototype = {
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The set() function sets the matrix elements. The function accepts either another PMatrix2D, an array of elements, or a list of six floats.
rob@100:      *
rob@100:      * @param {PMatrix2D} matrix    the matrix to set this matrix to
rob@100:      * @param {float[]} elements    an array of elements to set this matrix to
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the third element of the matrix
rob@100:      * @param {float} m10           the fourth element of the matrix
rob@100:      * @param {float} m11           the fith element of the matrix
rob@100:      * @param {float} m12           the sixth element of the matrix
rob@100:      */
rob@100:     set: function() {
rob@100:       if (arguments.length === 6) {
rob@100:         var a = arguments;
rob@100:         this.set([a[0], a[1], a[2],
rob@100:                   a[3], a[4], a[5]]);
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:         this.elements = arguments[0].array();
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:         this.elements = arguments[0].slice();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The get() function returns a copy of this PMatrix2D.
rob@100:      *
rob@100:      * @return {PMatrix2D} a copy of this PMatrix2D
rob@100:      */
rob@100:     get: function() {
rob@100:       var outgoing = new PMatrix2D();
rob@100:       outgoing.set(this.elements);
rob@100:       return outgoing;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The reset() function sets this PMatrix2D to the identity matrix.
rob@100:      */
rob@100:     reset: function() {
rob@100:       this.set([1, 0, 0, 0, 1, 0]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The array() function returns a copy of the element values.
rob@100:      * @addon
rob@100:      *
rob@100:      * @return {float[]} returns a copy of the element values
rob@100:      */
rob@100:     array: function array() {
rob@100:       return this.elements.slice();
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The translate() function translates this matrix by moving the current coordinates to the location specified by tx and ty.
rob@100:      *
rob@100:      * @param {float} tx  the x-axis coordinate to move to
rob@100:      * @param {float} ty  the y-axis coordinate to move to
rob@100:      */
rob@100:     translate: function(tx, ty) {
rob@100:       this.elements[2] = tx * this.elements[0] + ty * this.elements[1] + this.elements[2];
rob@100:       this.elements[5] = tx * this.elements[3] + ty * this.elements[4] + this.elements[5];
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The invTranslate() function translates this matrix by moving the current coordinates to the negative location specified by tx and ty.
rob@100:      *
rob@100:      * @param {float} tx  the x-axis coordinate to move to
rob@100:      * @param {float} ty  the y-axis coordinate to move to
rob@100:      */
rob@100:     invTranslate: function(tx, ty) {
rob@100:       this.translate(-tx, -ty);
rob@100:     },
rob@100:      /**
rob@100:      * @member PMatrix2D
rob@100:      * The transpose() function is not used in processingjs.
rob@100:      */
rob@100:     transpose: function() {
rob@100:       // Does nothing in Processing.
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The mult() function multiplied this matrix.
rob@100:      * If two array elements are passed in the function will multiply a two element vector against this matrix.
rob@100:      * If target is null or not length four, a new float array will be returned.
rob@100:      * The values for vec and target can be the same (though that's less efficient).
rob@100:      * If two PVectors are passed in the function multiply the x and y coordinates of a PVector against this matrix.
rob@100:      *
rob@100:      * @param {PVector} source, target  the PVectors used to multiply this matrix
rob@100:      * @param {float[]} source, target  the arrays used to multiply this matrix
rob@100:      *
rob@100:      * @return {PVector|float[]} returns a PVector or an array representing the new matrix
rob@100:      */
rob@100:     mult: function(source, target) {
rob@100:       var x, y;
rob@100:       if (source instanceof PVector) {
rob@100:         x = source.x;
rob@100:         y = source.y;
rob@100:         if (!target) {
rob@100:           target = new PVector();
rob@100:         }
rob@100:       } else if (source instanceof Array) {
rob@100:         x = source[0];
rob@100:         y = source[1];
rob@100:         if (!target) {
rob@100:           target = [];
rob@100:         }
rob@100:       }
rob@100:       if (target instanceof Array) {
rob@100:         target[0] = this.elements[0] * x + this.elements[1] * y + this.elements[2];
rob@100:         target[1] = this.elements[3] * x + this.elements[4] * y + this.elements[5];
rob@100:       } else if (target instanceof PVector) {
rob@100:         target.x = this.elements[0] * x + this.elements[1] * y + this.elements[2];
rob@100:         target.y = this.elements[3] * x + this.elements[4] * y + this.elements[5];
rob@100:         target.z = 0;
rob@100:       }
rob@100:       return target;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The multX() function calculates the x component of a vector from a transformation.
rob@100:      *
rob@100:      * @param {float} x the x component of the vector being transformed
rob@100:      * @param {float} y the y component of the vector being transformed
rob@100:      *
rob@100:      * @return {float} returnes the result of the calculation
rob@100:      */
rob@100:     multX: function(x, y) {
rob@100:       return (x * this.elements[0] + y * this.elements[1] + this.elements[2]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The multY() function calculates the y component of a vector from a transformation.
rob@100:      *
rob@100:      * @param {float} x the x component of the vector being transformed
rob@100:      * @param {float} y the y component of the vector being transformed
rob@100:      *
rob@100:      * @return {float} returnes the result of the calculation
rob@100:      */
rob@100:     multY: function(x, y) {
rob@100:       return (x * this.elements[3] + y * this.elements[4] + this.elements[5]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The skewX() function skews the matrix along the x-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of skew specified in radians
rob@100:      */
rob@100:     skewX: function(angle) {
rob@100:       this.apply(1, 0, 1, angle, 0, 0);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The skewY() function skews the matrix along the y-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of skew specified in radians
rob@100:      */
rob@100:     skewY: function(angle) {
rob@100:       this.apply(1, 0, 1,  0, angle, 0);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The shearX() function shears the matrix along the x-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of skew specified in radians
rob@100:      */
rob@100:     shearX: function(angle) {
rob@100:       this.apply(1, 0, 1, Math.tan(angle) , 0, 0);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The shearY() function shears the matrix along the y-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of skew specified in radians
rob@100:      */
rob@100:     shearY: function(angle) {
rob@100:       this.apply(1, 0, 1,  0, Math.tan(angle), 0);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The determinant() function calvculates the determinant of this matrix.
rob@100:      *
rob@100:      * @return {float} the determinant of the matrix
rob@100:      */
rob@100:     determinant: function() {
rob@100:       return (this.elements[0] * this.elements[4] - this.elements[1] * this.elements[3]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The invert() function inverts this matrix
rob@100:      *
rob@100:      * @return {boolean} true if successful
rob@100:      */
rob@100:     invert: function() {
rob@100:       var d = this.determinant();
rob@100:       if (Math.abs( d ) > PConstants.MIN_INT) {
rob@100:         var old00 = this.elements[0];
rob@100:         var old01 = this.elements[1];
rob@100:         var old02 = this.elements[2];
rob@100:         var old10 = this.elements[3];
rob@100:         var old11 = this.elements[4];
rob@100:         var old12 = this.elements[5];
rob@100:         this.elements[0] =  old11 / d;
rob@100:         this.elements[3] = -old10 / d;
rob@100:         this.elements[1] = -old01 / d;
rob@100:         this.elements[4] =  old00 / d;
rob@100:         this.elements[2] = (old01 * old12 - old11 * old02) / d;
rob@100:         this.elements[5] = (old10 * old02 - old00 * old12) / d;
rob@100:         return true;
rob@100:       }
rob@100:       return false;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The scale() function increases or decreases the size of a shape by expanding and contracting vertices. When only one parameter is specified scale will occur in all dimensions.
rob@100:      * This is equivalent to a two parameter call.
rob@100:      *
rob@100:      * @param {float} sx  the amount to scale on the x-axis
rob@100:      * @param {float} sy  the amount to scale on the y-axis
rob@100:      */
rob@100:     scale: function(sx, sy) {
rob@100:       if (sx && !sy) {
rob@100:         sy = sx;
rob@100:       }
rob@100:       if (sx && sy) {
rob@100:         this.elements[0] *= sx;
rob@100:         this.elements[1] *= sy;
rob@100:         this.elements[3] *= sx;
rob@100:         this.elements[4] *= sy;
rob@100:       }
rob@100:     },
rob@100:      /**
rob@100:       * @member PMatrix2D
rob@100:       * The invScale() function decreases or increases the size of a shape by contracting and expanding vertices. When only one parameter is specified scale will occur in all dimensions.
rob@100:       * This is equivalent to a two parameter call.
rob@100:       *
rob@100:       * @param {float} sx  the amount to scale on the x-axis
rob@100:       * @param {float} sy  the amount to scale on the y-axis
rob@100:       */
rob@100:     invScale: function(sx, sy) {
rob@100:       if (sx && !sy) {
rob@100:         sy = sx;
rob@100:       }
rob@100:       this.scale(1 / sx, 1 / sy);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The apply() function multiplies the current matrix by the one specified through the parameters. Note that either a PMatrix2D or a list of floats can be passed in.
rob@100:      *
rob@100:      * @param {PMatrix2D} matrix    the matrix to apply this matrix to
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the third element of the matrix
rob@100:      * @param {float} m10           the fourth element of the matrix
rob@100:      * @param {float} m11           the fith element of the matrix
rob@100:      * @param {float} m12           the sixth element of the matrix
rob@100:      */
rob@100:     apply: function() {
rob@100:       var source;
rob@100:       if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:         source = arguments[0].array();
rob@100:       } else if (arguments.length === 6) {
rob@100:         source = Array.prototype.slice.call(arguments);
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:         source = arguments[0];
rob@100:       }
rob@100: 
rob@100:       var result = [0, 0, this.elements[2],
rob@100:                     0, 0, this.elements[5]];
rob@100:       var e = 0;
rob@100:       for (var row = 0; row < 2; row++) {
rob@100:         for (var col = 0; col < 3; col++, e++) {
rob@100:           result[e] += this.elements[row * 3 + 0] * source[col + 0] +
rob@100:                        this.elements[row * 3 + 1] * source[col + 3];
rob@100:         }
rob@100:       }
rob@100:       this.elements = result.slice();
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The preApply() function applies another matrix to the left of this one. Note that either a PMatrix2D or elements of a matrix can be passed in.
rob@100:      *
rob@100:      * @param {PMatrix2D} matrix    the matrix to apply this matrix to
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the third element of the matrix
rob@100:      * @param {float} m10           the fourth element of the matrix
rob@100:      * @param {float} m11           the fith element of the matrix
rob@100:      * @param {float} m12           the sixth element of the matrix
rob@100:      */
rob@100:     preApply: function() {
rob@100:       var source;
rob@100:       if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:         source = arguments[0].array();
rob@100:       } else if (arguments.length === 6) {
rob@100:         source = Array.prototype.slice.call(arguments);
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:         source = arguments[0];
rob@100:       }
rob@100:       var result = [0, 0, source[2],
rob@100:                     0, 0, source[5]];
rob@100:       result[2] = source[2] + this.elements[2] * source[0] + this.elements[5] * source[1];
rob@100:       result[5] = source[5] + this.elements[2] * source[3] + this.elements[5] * source[4];
rob@100:       result[0] = this.elements[0] * source[0] + this.elements[3] * source[1];
rob@100:       result[3] = this.elements[0] * source[3] + this.elements[3] * source[4];
rob@100:       result[1] = this.elements[1] * source[0] + this.elements[4] * source[1];
rob@100:       result[4] = this.elements[1] * source[3] + this.elements[4] * source[4];
rob@100:       this.elements = result.slice();
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The rotate() function rotates the matrix.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     rotate: function(angle) {
rob@100:       var c = Math.cos(angle);
rob@100:       var s = Math.sin(angle);
rob@100:       var temp1 = this.elements[0];
rob@100:       var temp2 = this.elements[1];
rob@100:       this.elements[0] =  c * temp1 + s * temp2;
rob@100:       this.elements[1] = -s * temp1 + c * temp2;
rob@100:       temp1 = this.elements[3];
rob@100:       temp2 = this.elements[4];
rob@100:       this.elements[3] =  c * temp1 + s * temp2;
rob@100:       this.elements[4] = -s * temp1 + c * temp2;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The rotateZ() function rotates the matrix.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     rotateZ: function(angle) {
rob@100:       this.rotate(angle);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The invRotateZ() function rotates the matrix in opposite direction.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     invRotateZ: function(angle) {
rob@100:       this.rotateZ(angle - Math.PI);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The print() function prints out the elements of this matrix
rob@100:      */
rob@100:     print: function() {
rob@100:       var digits = printMatrixHelper(this.elements);
rob@100:       var output = "" + p.nfs(this.elements[0], digits, 4) + " " +
rob@100:                         p.nfs(this.elements[1], digits, 4) + " " +
rob@100:                         p.nfs(this.elements[2], digits, 4) + "\n" +
rob@100:                         p.nfs(this.elements[3], digits, 4) + " " +
rob@100:                         p.nfs(this.elements[4], digits, 4) + " " +
rob@100:                         p.nfs(this.elements[5], digits, 4) + "\n\n";
rob@100:       p.println(output);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   return PMatrix2D;
rob@100: };
rob@100: 
rob@100: },{}],14:[function(require,module,exports){
rob@100: module.exports = function(options, undef) {
rob@100: 
rob@100:   // FIXME: hack
rob@100:   var p = options.p;
rob@100: 
rob@100:   /**
rob@100:    * PMatrix3D is a 4x4  matrix implementation. The constructor accepts another PMatrix3D or a list of six or sixteen float elements.
rob@100:    * If no parameters are provided the matrix is set to the identity matrix.
rob@100:    */
rob@100:   var PMatrix3D = function() {
rob@100:     // When a matrix is created, it is set to an identity matrix
rob@100:     this.reset();
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * PMatrix3D methods
rob@100:    */
rob@100:   PMatrix3D.prototype = {
rob@100:     /**
rob@100:      * @member PMatrix2D
rob@100:      * The set() function sets the matrix elements. The function accepts either another PMatrix3D, an array of elements, or a list of six or sixteen floats.
rob@100:      *
rob@100:      * @param {PMatrix3D} matrix    the initial matrix to set to
rob@100:      * @param {float[]} elements    an array of elements to set this matrix to
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the second element of the matrix
rob@100:      * @param {float} m02           the third element of the matrix
rob@100:      * @param {float} m03           the fourth element of the matrix
rob@100:      * @param {float} m10           the fifth element of the matrix
rob@100:      * @param {float} m11           the sixth element of the matrix
rob@100:      * @param {float} m12           the seventh element of the matrix
rob@100:      * @param {float} m13           the eight element of the matrix
rob@100:      * @param {float} m20           the nineth element of the matrix
rob@100:      * @param {float} m21           the tenth element of the matrix
rob@100:      * @param {float} m22           the eleventh element of the matrix
rob@100:      * @param {float} m23           the twelveth element of the matrix
rob@100:      * @param {float} m30           the thirteenth element of the matrix
rob@100:      * @param {float} m31           the fourtheenth element of the matrix
rob@100:      * @param {float} m32           the fivetheenth element of the matrix
rob@100:      * @param {float} m33           the sixteenth element of the matrix
rob@100:      */
rob@100:     set: function() {
rob@100:       if (arguments.length === 16) {
rob@100:         this.elements = Array.prototype.slice.call(arguments);
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof PMatrix3D) {
rob@100:         this.elements = arguments[0].array();
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:         this.elements = arguments[0].slice();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The get() function returns a copy of this PMatrix3D.
rob@100:      *
rob@100:      * @return {PMatrix3D} a copy of this PMatrix3D
rob@100:      */
rob@100:     get: function() {
rob@100:       var outgoing = new PMatrix3D();
rob@100:       outgoing.set(this.elements);
rob@100:       return outgoing;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The reset() function sets this PMatrix3D to the identity matrix.
rob@100:      */
rob@100:     reset: function() {
rob@100:       this.elements = [1,0,0,0,
rob@100:                        0,1,0,0,
rob@100:                        0,0,1,0,
rob@100:                        0,0,0,1];
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The array() function returns a copy of the element values.
rob@100:      * @addon
rob@100:      *
rob@100:      * @return {float[]} returns a copy of the element values
rob@100:      */
rob@100:     array: function array() {
rob@100:       return this.elements.slice();
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The translate() function translates this matrix by moving the current coordinates to the location specified by tx, ty, and tz.
rob@100:      *
rob@100:      * @param {float} tx  the x-axis coordinate to move to
rob@100:      * @param {float} ty  the y-axis coordinate to move to
rob@100:      * @param {float} tz  the z-axis coordinate to move to
rob@100:      */
rob@100:     translate: function(tx, ty, tz) {
rob@100:       if (tz === undef) {
rob@100:         tz = 0;
rob@100:       }
rob@100: 
rob@100:       this.elements[3]  += tx * this.elements[0]  + ty * this.elements[1]  + tz * this.elements[2];
rob@100:       this.elements[7]  += tx * this.elements[4]  + ty * this.elements[5]  + tz * this.elements[6];
rob@100:       this.elements[11] += tx * this.elements[8]  + ty * this.elements[9]  + tz * this.elements[10];
rob@100:       this.elements[15] += tx * this.elements[12] + ty * this.elements[13] + tz * this.elements[14];
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The transpose() function transpose this matrix.
rob@100:      */
rob@100:     transpose: function() {
rob@100:       var temp = this.elements[4];
rob@100:       this.elements[4] = this.elements[1];
rob@100:       this.elements[1] = temp;
rob@100: 
rob@100:       temp = this.elements[8];
rob@100:       this.elements[8] = this.elements[2];
rob@100:       this.elements[2] = temp;
rob@100: 
rob@100:       temp = this.elements[6];
rob@100:       this.elements[6] = this.elements[9];
rob@100:       this.elements[9] = temp;
rob@100: 
rob@100:       temp = this.elements[3];
rob@100:       this.elements[3] = this.elements[12];
rob@100:       this.elements[12] = temp;
rob@100: 
rob@100:       temp = this.elements[7];
rob@100:       this.elements[7] = this.elements[13];
rob@100:       this.elements[13] = temp;
rob@100: 
rob@100:       temp = this.elements[11];
rob@100:       this.elements[11] = this.elements[14];
rob@100:       this.elements[14] = temp;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The mult() function multiplied this matrix.
rob@100:      * If two array elements are passed in the function will multiply a two element vector against this matrix.
rob@100:      * If target is null or not length four, a new float array will be returned.
rob@100:      * The values for vec and target can be the same (though that's less efficient).
rob@100:      * If two PVectors are passed in the function multiply the x and y coordinates of a PVector against this matrix.
rob@100:      *
rob@100:      * @param {PVector} source, target  the PVectors used to multiply this matrix
rob@100:      * @param {float[]} source, target  the arrays used to multiply this matrix
rob@100:      *
rob@100:      * @return {PVector|float[]} returns a PVector or an array representing the new matrix
rob@100:      */
rob@100:     mult: function(source, target) {
rob@100:       var x, y, z, w;
rob@100:       if (source instanceof PVector) {
rob@100:         x = source.x;
rob@100:         y = source.y;
rob@100:         z = source.z;
rob@100:         w = 1;
rob@100:         if (!target) {
rob@100:           target = new PVector();
rob@100:         }
rob@100:       } else if (source instanceof Array) {
rob@100:         x = source[0];
rob@100:         y = source[1];
rob@100:         z = source[2];
rob@100:         w = source[3] || 1;
rob@100: 
rob@100:         if ( !target || (target.length !== 3 && target.length !== 4) ) {
rob@100:           target = [0, 0, 0];
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       if (target instanceof Array) {
rob@100:         if (target.length === 3) {
rob@100:           target[0] = this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3];
rob@100:           target[1] = this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7];
rob@100:           target[2] = this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11];
rob@100:         } else if (target.length === 4) {
rob@100:           target[0] = this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3] * w;
rob@100:           target[1] = this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7] * w;
rob@100:           target[2] = this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11] * w;
rob@100:           target[3] = this.elements[12] * x + this.elements[13] * y + this.elements[14] * z + this.elements[15] * w;
rob@100:         }
rob@100:       }
rob@100:       if (target instanceof PVector) {
rob@100:         target.x = this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3];
rob@100:         target.y = this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7];
rob@100:         target.z = this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11];
rob@100:       }
rob@100:       return target;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The preApply() function applies another matrix to the left of this one. Note that either a PMatrix3D or elements of a matrix can be passed in.
rob@100:      *
rob@100:      * @param {PMatrix3D} matrix    the matrix to apply this matrix to
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the second element of the matrix
rob@100:      * @param {float} m02           the third element of the matrix
rob@100:      * @param {float} m03           the fourth element of the matrix
rob@100:      * @param {float} m10           the fifth element of the matrix
rob@100:      * @param {float} m11           the sixth element of the matrix
rob@100:      * @param {float} m12           the seventh element of the matrix
rob@100:      * @param {float} m13           the eight element of the matrix
rob@100:      * @param {float} m20           the nineth element of the matrix
rob@100:      * @param {float} m21           the tenth element of the matrix
rob@100:      * @param {float} m22           the eleventh element of the matrix
rob@100:      * @param {float} m23           the twelveth element of the matrix
rob@100:      * @param {float} m30           the thirteenth element of the matrix
rob@100:      * @param {float} m31           the fourtheenth element of the matrix
rob@100:      * @param {float} m32           the fivetheenth element of the matrix
rob@100:      * @param {float} m33           the sixteenth element of the matrix
rob@100:      */
rob@100:     preApply: function() {
rob@100:       var source;
rob@100:       if (arguments.length === 1 && arguments[0] instanceof PMatrix3D) {
rob@100:         source = arguments[0].array();
rob@100:       } else if (arguments.length === 16) {
rob@100:         source = Array.prototype.slice.call(arguments);
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:         source = arguments[0];
rob@100:       }
rob@100: 
rob@100:       var result = [0, 0, 0, 0,
rob@100:                     0, 0, 0, 0,
rob@100:                     0, 0, 0, 0,
rob@100:                     0, 0, 0, 0];
rob@100:       var e = 0;
rob@100:       for (var row = 0; row < 4; row++) {
rob@100:         for (var col = 0; col < 4; col++, e++) {
rob@100:           result[e] += this.elements[col + 0] * source[row * 4 + 0] + this.elements[col + 4] *
rob@100:                        source[row * 4 + 1] + this.elements[col + 8] * source[row * 4 + 2] +
rob@100:                        this.elements[col + 12] * source[row * 4 + 3];
rob@100:         }
rob@100:       }
rob@100:       this.elements = result.slice();
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The apply() function multiplies the current matrix by the one specified through the parameters. Note that either a PMatrix3D or a list of floats can be passed in.
rob@100:      *
rob@100:      * @param {PMatrix3D} matrix    the matrix to apply this matrix to
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the second element of the matrix
rob@100:      * @param {float} m02           the third element of the matrix
rob@100:      * @param {float} m03           the fourth element of the matrix
rob@100:      * @param {float} m10           the fifth element of the matrix
rob@100:      * @param {float} m11           the sixth element of the matrix
rob@100:      * @param {float} m12           the seventh element of the matrix
rob@100:      * @param {float} m13           the eight element of the matrix
rob@100:      * @param {float} m20           the nineth element of the matrix
rob@100:      * @param {float} m21           the tenth element of the matrix
rob@100:      * @param {float} m22           the eleventh element of the matrix
rob@100:      * @param {float} m23           the twelveth element of the matrix
rob@100:      * @param {float} m30           the thirteenth element of the matrix
rob@100:      * @param {float} m31           the fourtheenth element of the matrix
rob@100:      * @param {float} m32           the fivetheenth element of the matrix
rob@100:      * @param {float} m33           the sixteenth element of the matrix
rob@100:      */
rob@100:     apply: function() {
rob@100:       var source;
rob@100:       if (arguments.length === 1 && arguments[0] instanceof PMatrix3D) {
rob@100:         source = arguments[0].array();
rob@100:       } else if (arguments.length === 16) {
rob@100:         source = Array.prototype.slice.call(arguments);
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:         source = arguments[0];
rob@100:       }
rob@100: 
rob@100:       var result = [0, 0, 0, 0,
rob@100:                     0, 0, 0, 0,
rob@100:                     0, 0, 0, 0,
rob@100:                     0, 0, 0, 0];
rob@100:       var e = 0;
rob@100:       for (var row = 0; row < 4; row++) {
rob@100:         for (var col = 0; col < 4; col++, e++) {
rob@100:           result[e] += this.elements[row * 4 + 0] * source[col + 0] + this.elements[row * 4 + 1] *
rob@100:                        source[col + 4] + this.elements[row * 4 + 2] * source[col + 8] +
rob@100:                        this.elements[row * 4 + 3] * source[col + 12];
rob@100:         }
rob@100:       }
rob@100:       this.elements = result.slice();
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The rotate() function rotates the matrix.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     rotate: function(angle, v0, v1, v2) {
rob@100:       if (!v1) {
rob@100:         this.rotateZ(angle);
rob@100:       } else {
rob@100:         // TODO should make sure this vector is normalized
rob@100:         var c = Math.cos(angle);
rob@100:         var s = Math.sin(angle);
rob@100:         var t = 1.0 - c;
rob@100: 
rob@100:         this.apply((t * v0 * v0) + c,
rob@100:                    (t * v0 * v1) - (s * v2),
rob@100:                    (t * v0 * v2) + (s * v1),
rob@100:                    0,
rob@100:                    (t * v0 * v1) + (s * v2),
rob@100:                    (t * v1 * v1) + c,
rob@100:                    (t * v1 * v2) - (s * v0),
rob@100:                    0,
rob@100:                    (t * v0 * v2) - (s * v1),
rob@100:                    (t * v1 * v2) + (s * v0),
rob@100:                    (t * v2 * v2) + c,
rob@100:                    0,
rob@100:                    0, 0, 0, 1);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The invApply() function applies the inverted matrix to this matrix.
rob@100:      *
rob@100:      * @param {float} m00           the first element of the matrix
rob@100:      * @param {float} m01           the second element of the matrix
rob@100:      * @param {float} m02           the third element of the matrix
rob@100:      * @param {float} m03           the fourth element of the matrix
rob@100:      * @param {float} m10           the fifth element of the matrix
rob@100:      * @param {float} m11           the sixth element of the matrix
rob@100:      * @param {float} m12           the seventh element of the matrix
rob@100:      * @param {float} m13           the eight element of the matrix
rob@100:      * @param {float} m20           the nineth element of the matrix
rob@100:      * @param {float} m21           the tenth element of the matrix
rob@100:      * @param {float} m22           the eleventh element of the matrix
rob@100:      * @param {float} m23           the twelveth element of the matrix
rob@100:      * @param {float} m30           the thirteenth element of the matrix
rob@100:      * @param {float} m31           the fourtheenth element of the matrix
rob@100:      * @param {float} m32           the fivetheenth element of the matrix
rob@100:      * @param {float} m33           the sixteenth element of the matrix
rob@100:      *
rob@100:      * @return {boolean} returns true if the operation was successful.
rob@100:      */
rob@100:     invApply: function() {
rob@100:       if (inverseCopy === undef) {
rob@100:         inverseCopy = new PMatrix3D();
rob@100:       }
rob@100:       var a = arguments;
rob@100:       inverseCopy.set(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8],
rob@100:                       a[9], a[10], a[11], a[12], a[13], a[14], a[15]);
rob@100: 
rob@100:       if (!inverseCopy.invert()) {
rob@100:         return false;
rob@100:       }
rob@100:       this.preApply(inverseCopy);
rob@100:       return true;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The rotateZ() function rotates the matrix.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     rotateX: function(angle) {
rob@100:       var c = Math.cos(angle);
rob@100:       var s = Math.sin(angle);
rob@100:       this.apply([1, 0, 0, 0, 0, c, -s, 0, 0, s, c, 0, 0, 0, 0, 1]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The rotateY() function rotates the matrix.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     rotateY: function(angle) {
rob@100:       var c = Math.cos(angle);
rob@100:       var s = Math.sin(angle);
rob@100:       this.apply([c, 0, s, 0, 0, 1, 0, 0, -s, 0, c, 0, 0, 0, 0, 1]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The rotateZ() function rotates the matrix.
rob@100:      *
rob@100:      * @param {float} angle         the angle of rotation in radiants
rob@100:      */
rob@100:     rotateZ: function(angle) {
rob@100:       var c = Math.cos(angle);
rob@100:       var s = Math.sin(angle);
rob@100:       this.apply([c, -s, 0, 0, s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The scale() function increases or decreases the size of a matrix by expanding and contracting vertices. When only one parameter is specified scale will occur in all dimensions.
rob@100:      * This is equivalent to a three parameter call.
rob@100:      *
rob@100:      * @param {float} sx  the amount to scale on the x-axis
rob@100:      * @param {float} sy  the amount to scale on the y-axis
rob@100:      * @param {float} sz  the amount to scale on the z-axis
rob@100:      */
rob@100:     scale: function(sx, sy, sz) {
rob@100:       if (sx && !sy && !sz) {
rob@100:         sy = sz = sx;
rob@100:       } else if (sx && sy && !sz) {
rob@100:         sz = 1;
rob@100:       }
rob@100: 
rob@100:       if (sx && sy && sz) {
rob@100:         this.elements[0]  *= sx;
rob@100:         this.elements[1]  *= sy;
rob@100:         this.elements[2]  *= sz;
rob@100:         this.elements[4]  *= sx;
rob@100:         this.elements[5]  *= sy;
rob@100:         this.elements[6]  *= sz;
rob@100:         this.elements[8]  *= sx;
rob@100:         this.elements[9]  *= sy;
rob@100:         this.elements[10] *= sz;
rob@100:         this.elements[12] *= sx;
rob@100:         this.elements[13] *= sy;
rob@100:         this.elements[14] *= sz;
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The skewX() function skews the matrix along the x-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of skew specified in radians
rob@100:      */
rob@100:     skewX: function(angle) {
rob@100:       var t = Math.tan(angle);
rob@100:       this.apply(1, t, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The skewY() function skews the matrix along the y-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of skew specified in radians
rob@100:      */
rob@100:     skewY: function(angle) {
rob@100:       var t = Math.tan(angle);
rob@100:       this.apply(1, 0, 0, 0, t, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The shearX() function shears the matrix along the x-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of shear specified in radians
rob@100:      */
rob@100:     shearX: function(angle) {
rob@100:       var t = Math.tan(angle);
rob@100:       this.apply(1, t, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The shearY() function shears the matrix along the y-axis the amount specified by the angle parameter.
rob@100:      * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:      *
rob@100:      * @param {float} angle  angle of shear specified in radians
rob@100:      */
rob@100:     shearY: function(angle) {
rob@100:       var t = Math.tan(angle);
rob@100:       this.apply(1, 0, 0, 0, t, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:     },
rob@100:     multX: function(x, y, z, w) {
rob@100:       if (!z) {
rob@100:         return this.elements[0] * x + this.elements[1] * y + this.elements[3];
rob@100:       }
rob@100:       if (!w) {
rob@100:         return this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3];
rob@100:       }
rob@100:       return this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3] * w;
rob@100:     },
rob@100:     multY: function(x, y, z, w) {
rob@100:       if (!z) {
rob@100:         return this.elements[4] * x + this.elements[5] * y + this.elements[7];
rob@100:       }
rob@100:       if (!w) {
rob@100:         return this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7];
rob@100:       }
rob@100:       return this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7] * w;
rob@100:     },
rob@100:     multZ: function(x, y, z, w) {
rob@100:       if (!w) {
rob@100:         return this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11];
rob@100:       }
rob@100:       return this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11] * w;
rob@100:     },
rob@100:     multW: function(x, y, z, w) {
rob@100:       if (!w) {
rob@100:         return this.elements[12] * x + this.elements[13] * y + this.elements[14] * z + this.elements[15];
rob@100:       }
rob@100:       return this.elements[12] * x + this.elements[13] * y + this.elements[14] * z + this.elements[15] * w;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The invert() function inverts this matrix
rob@100:      *
rob@100:      * @return {boolean} true if successful
rob@100:      */
rob@100:     invert: function() {
rob@100:       var fA0 = this.elements[0] * this.elements[5] - this.elements[1] * this.elements[4];
rob@100:       var fA1 = this.elements[0] * this.elements[6] - this.elements[2] * this.elements[4];
rob@100:       var fA2 = this.elements[0] * this.elements[7] - this.elements[3] * this.elements[4];
rob@100:       var fA3 = this.elements[1] * this.elements[6] - this.elements[2] * this.elements[5];
rob@100:       var fA4 = this.elements[1] * this.elements[7] - this.elements[3] * this.elements[5];
rob@100:       var fA5 = this.elements[2] * this.elements[7] - this.elements[3] * this.elements[6];
rob@100:       var fB0 = this.elements[8] * this.elements[13] - this.elements[9] * this.elements[12];
rob@100:       var fB1 = this.elements[8] * this.elements[14] - this.elements[10] * this.elements[12];
rob@100:       var fB2 = this.elements[8] * this.elements[15] - this.elements[11] * this.elements[12];
rob@100:       var fB3 = this.elements[9] * this.elements[14] - this.elements[10] * this.elements[13];
rob@100:       var fB4 = this.elements[9] * this.elements[15] - this.elements[11] * this.elements[13];
rob@100:       var fB5 = this.elements[10] * this.elements[15] - this.elements[11] * this.elements[14];
rob@100: 
rob@100:       // Determinant
rob@100:       var fDet = fA0 * fB5 - fA1 * fB4 + fA2 * fB3 + fA3 * fB2 - fA4 * fB1 + fA5 * fB0;
rob@100: 
rob@100:       // Account for a very small value
rob@100:       // return false if not successful.
rob@100:       if (Math.abs(fDet) <= 1e-9) {
rob@100:         return false;
rob@100:       }
rob@100: 
rob@100:       var kInv = [];
rob@100:       kInv[0]  = +this.elements[5] * fB5 - this.elements[6] * fB4 + this.elements[7] * fB3;
rob@100:       kInv[4]  = -this.elements[4] * fB5 + this.elements[6] * fB2 - this.elements[7] * fB1;
rob@100:       kInv[8]  = +this.elements[4] * fB4 - this.elements[5] * fB2 + this.elements[7] * fB0;
rob@100:       kInv[12] = -this.elements[4] * fB3 + this.elements[5] * fB1 - this.elements[6] * fB0;
rob@100:       kInv[1]  = -this.elements[1] * fB5 + this.elements[2] * fB4 - this.elements[3] * fB3;
rob@100:       kInv[5]  = +this.elements[0] * fB5 - this.elements[2] * fB2 + this.elements[3] * fB1;
rob@100:       kInv[9]  = -this.elements[0] * fB4 + this.elements[1] * fB2 - this.elements[3] * fB0;
rob@100:       kInv[13] = +this.elements[0] * fB3 - this.elements[1] * fB1 + this.elements[2] * fB0;
rob@100:       kInv[2]  = +this.elements[13] * fA5 - this.elements[14] * fA4 + this.elements[15] * fA3;
rob@100:       kInv[6]  = -this.elements[12] * fA5 + this.elements[14] * fA2 - this.elements[15] * fA1;
rob@100:       kInv[10] = +this.elements[12] * fA4 - this.elements[13] * fA2 + this.elements[15] * fA0;
rob@100:       kInv[14] = -this.elements[12] * fA3 + this.elements[13] * fA1 - this.elements[14] * fA0;
rob@100:       kInv[3]  = -this.elements[9] * fA5 + this.elements[10] * fA4 - this.elements[11] * fA3;
rob@100:       kInv[7]  = +this.elements[8] * fA5 - this.elements[10] * fA2 + this.elements[11] * fA1;
rob@100:       kInv[11] = -this.elements[8] * fA4 + this.elements[9] * fA2 - this.elements[11] * fA0;
rob@100:       kInv[15] = +this.elements[8] * fA3 - this.elements[9] * fA1 + this.elements[10] * fA0;
rob@100: 
rob@100:       // Inverse using Determinant
rob@100:       var fInvDet = 1.0 / fDet;
rob@100:       kInv[0]  *= fInvDet;
rob@100:       kInv[1]  *= fInvDet;
rob@100:       kInv[2]  *= fInvDet;
rob@100:       kInv[3]  *= fInvDet;
rob@100:       kInv[4]  *= fInvDet;
rob@100:       kInv[5]  *= fInvDet;
rob@100:       kInv[6]  *= fInvDet;
rob@100:       kInv[7]  *= fInvDet;
rob@100:       kInv[8]  *= fInvDet;
rob@100:       kInv[9]  *= fInvDet;
rob@100:       kInv[10] *= fInvDet;
rob@100:       kInv[11] *= fInvDet;
rob@100:       kInv[12] *= fInvDet;
rob@100:       kInv[13] *= fInvDet;
rob@100:       kInv[14] *= fInvDet;
rob@100:       kInv[15] *= fInvDet;
rob@100: 
rob@100:       this.elements = kInv.slice();
rob@100:       return true;
rob@100:     },
rob@100:     toString: function() {
rob@100:       var str = "";
rob@100:       for (var i = 0; i < 15; i++) {
rob@100:         str += this.elements[i] + ", ";
rob@100:       }
rob@100:       str += this.elements[15];
rob@100:       return str;
rob@100:     },
rob@100:     /**
rob@100:      * @member PMatrix3D
rob@100:      * The print() function prints out the elements of this matrix
rob@100:      */
rob@100:     print: function() {
rob@100:       var digits = printMatrixHelper(this.elements);
rob@100: 
rob@100:       var output = ""   + p.nfs(this.elements[0], digits, 4)  + " " + p.nfs(this.elements[1], digits, 4)  +
rob@100:                    " "  + p.nfs(this.elements[2], digits, 4)  + " " + p.nfs(this.elements[3], digits, 4)  +
rob@100:                    "\n" + p.nfs(this.elements[4], digits, 4)  + " " + p.nfs(this.elements[5], digits, 4)  +
rob@100:                    " "  + p.nfs(this.elements[6], digits, 4)  + " " + p.nfs(this.elements[7], digits, 4)  +
rob@100:                    "\n" + p.nfs(this.elements[8], digits, 4)  + " " + p.nfs(this.elements[9], digits, 4)  +
rob@100:                    " "  + p.nfs(this.elements[10], digits, 4) + " " + p.nfs(this.elements[11], digits, 4) +
rob@100:                    "\n" + p.nfs(this.elements[12], digits, 4) + " " + p.nfs(this.elements[13], digits, 4) +
rob@100:                    " "  + p.nfs(this.elements[14], digits, 4) + " " + p.nfs(this.elements[15], digits, 4) + "\n\n";
rob@100:       p.println(output);
rob@100:     },
rob@100:     invTranslate: function(tx, ty, tz) {
rob@100:       this.preApply(1, 0, 0, -tx, 0, 1, 0, -ty, 0, 0, 1, -tz, 0, 0, 0, 1);
rob@100:     },
rob@100:     invRotateX: function(angle) {
rob@100:       var c = Math.cos(-angle);
rob@100:       var s = Math.sin(-angle);
rob@100:       this.preApply([1, 0, 0, 0, 0, c, -s, 0, 0, s, c, 0, 0, 0, 0, 1]);
rob@100:     },
rob@100:     invRotateY: function(angle) {
rob@100:       var c = Math.cos(-angle);
rob@100:       var s = Math.sin(-angle);
rob@100:       this.preApply([c, 0, s, 0, 0, 1, 0, 0, -s, 0, c, 0, 0, 0, 0, 1]);
rob@100:     },
rob@100:     invRotateZ: function(angle) {
rob@100:       var c = Math.cos(-angle);
rob@100:       var s = Math.sin(-angle);
rob@100:       this.preApply([c, -s, 0, 0, s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
rob@100:     },
rob@100:     invScale: function(x, y, z) {
rob@100:       this.preApply([1 / x, 0, 0, 0, 0, 1 / y, 0, 0, 0, 0, 1 / z, 0, 0, 0, 0, 1]);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   return PMatrix3D;
rob@100: };
rob@100: },{}],15:[function(require,module,exports){
rob@100: module.exports = function(options) {
rob@100:   var PConstants = options.PConstants,
rob@100:       PMatrix2D = options.PMatrix2D,
rob@100:       PMatrix3D = options.PMatrix3D;
rob@100: 
rob@100:   /**
rob@100:    * Datatype for storing shapes. Processing can currently load and display SVG (Scalable Vector Graphics) shapes.
rob@100:    * Before a shape is used, it must be loaded with the <b>loadShape()</b> function. The <b>shape()</b> function is used to draw the shape to the display window.
rob@100:    * The <b>PShape</b> object contain a group of methods, linked below, that can operate on the shape data.
rob@100:    * <br><br>The <b>loadShape()</b> method supports SVG files created with Inkscape and Adobe Illustrator.
rob@100:    * It is not a full SVG implementation, but offers some straightforward support for handling vector data.
rob@100:    *
rob@100:    * @param {int} family the shape type, one of GROUP, PRIMITIVE, PATH, or GEOMETRY
rob@100:    *
rob@100:    * @see #shape()
rob@100:    * @see #loadShape()
rob@100:    * @see #shapeMode()
rob@100:    */
rob@100:   var PShape = function(family) {
rob@100:     this.family    = family || PConstants.GROUP;
rob@100:     this.visible   = true;
rob@100:     this.style     = true;
rob@100:     this.children  = [];
rob@100:     this.nameTable = [];
rob@100:     this.params    = [];
rob@100:     this.name      = "";
rob@100:     this.image     = null;  //type PImage
rob@100:     this.matrix    = null;
rob@100:     this.kind      = null;
rob@100:     this.close     = null;
rob@100:     this.width     = null;
rob@100:     this.height    = null;
rob@100:     this.parent    = null;
rob@100:   };
rob@100:   /**
rob@100:     * PShape methods
rob@100:     * missing: findChild(), apply(), contains(), findChild(), getPrimitive(), getParams(), getVertex() , getVertexCount(),
rob@100:     * getVertexCode() , getVertexCodes() , getVertexCodeCount(), getVertexX(), getVertexY(), getVertexZ()
rob@100:     */
rob@100:   PShape.prototype = {
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The isVisible() function returns a boolean value "true" if the image is set to be visible, "false" if not. This is modified with the <b>setVisible()</b> parameter.
rob@100:      * <br><br>The visibility of a shape is usually controlled by whatever program created the SVG file.
rob@100:      * For instance, this parameter is controlled by showing or hiding the shape in the layers palette in Adobe Illustrator.
rob@100:      *
rob@100:      * @return {boolean}  returns "true" if the image is set to be visible, "false" if not
rob@100:      */
rob@100:     isVisible: function(){
rob@100:       return this.visible;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The setVisible() function sets the shape to be visible or invisible. This is determined by the value of the <b>visible</b> parameter.
rob@100:      * <br><br>The visibility of a shape is usually controlled by whatever program created the SVG file.
rob@100:      * For instance, this parameter is controlled by showing or hiding the shape in the layers palette in Adobe Illustrator.
rob@100:      *
rob@100:      * @param {boolean} visible "false" makes the shape invisible and "true" makes it visible
rob@100:      */
rob@100:     setVisible: function (visible){
rob@100:       this.visible = visible;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The disableStyle() function disables the shape's style data and uses Processing's current styles. Styles include attributes such as colors, stroke weight, and stroke joints.
rob@100:      * Overrides this shape's style information and uses PGraphics styles and colors. Identical to ignoreStyles(true). Also disables styles for all child shapes.
rob@100:      */
rob@100:     disableStyle: function(){
rob@100:       this.style = false;
rob@100:       for(var i = 0, j=this.children.length; i<j; i++) {
rob@100:         this.children[i].disableStyle();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The enableStyle() function enables the shape's style data and ignores Processing's current styles. Styles include attributes such as colors, stroke weight, and stroke joints.
rob@100:      */
rob@100:     enableStyle: function(){
rob@100:       this.style = true;
rob@100:       for(var i = 0, j=this.children.length; i<j; i++) {
rob@100:         this.children[i].enableStyle();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The getFamily function returns the shape type
rob@100:      *
rob@100:      * @return {int} the shape type, one of GROUP, PRIMITIVE, PATH, or GEOMETRY
rob@100:      */
rob@100:     getFamily: function(){
rob@100:       return this.family;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The getWidth() function gets the width of the drawing area (not necessarily the shape boundary).
rob@100:      */
rob@100:     getWidth: function(){
rob@100:       return this.width;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The getHeight() function gets the height of the drawing area (not necessarily the shape boundary).
rob@100:      */
rob@100:     getHeight: function(){
rob@100:       return this.height;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The setName() function sets the name of the shape
rob@100:      *
rob@100:      * @param {String} name the name of the shape
rob@100:      */
rob@100:     setName: function(name){
rob@100:       this.name = name;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The getName() function returns the name of the shape
rob@100:      *
rob@100:      * @return {String} the name of the shape
rob@100:      */
rob@100:     getName: function(){
rob@100:       return this.name;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * Called by the following (the shape() command adds the g)
rob@100:      * PShape s = loadShapes("blah.svg");
rob@100:      * shape(s);
rob@100:      */
rob@100:     draw: function(renderContext) {
rob@100:       if(!renderContext) {
rob@100:         throw "render context missing for draw() in PShape";
rob@100:       }
rob@100:       if (this.visible) {
rob@100:         this.pre(renderContext);
rob@100:         this.drawImpl(renderContext);
rob@100:         this.post(renderContext);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * the drawImpl() function draws the SVG document.
rob@100:      */
rob@100:     drawImpl: function(renderContext) {
rob@100:       if (this.family === PConstants.GROUP) {
rob@100:         this.drawGroup(renderContext);
rob@100:       } else if (this.family === PConstants.PRIMITIVE) {
rob@100:         this.drawPrimitive(renderContext);
rob@100:       } else if (this.family === PConstants.GEOMETRY) {
rob@100:         this.drawGeometry(renderContext);
rob@100:       } else if (this.family === PConstants.PATH) {
rob@100:         this.drawPath(renderContext);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The drawPath() function draws the <path> part of the SVG document.
rob@100:      */
rob@100:     drawPath: function(renderContext) {
rob@100:       var i, j;
rob@100:       if (this.vertices.length === 0) { return; }
rob@100:       renderContext.beginShape();
rob@100:       if (this.vertexCodes.length === 0) {  // each point is a simple vertex
rob@100:         if (this.vertices[0].length === 2) {  // drawing 2D vertices
rob@100:           for (i = 0, j = this.vertices.length; i < j; i++) {
rob@100:             renderContext.vertex(this.vertices[i][0], this.vertices[i][1]);
rob@100:           }
rob@100:         } else {  // drawing 3D vertices
rob@100:           for (i = 0, j = this.vertices.length; i < j; i++) {
rob@100:             renderContext.vertex(this.vertices[i][0],
rob@100:                                  this.vertices[i][1],
rob@100:                                  this.vertices[i][2]);
rob@100:           }
rob@100:         }
rob@100:       } else {  // coded set of vertices
rob@100:         var index = 0;
rob@100:         if (this.vertices[0].length === 2) {  // drawing a 2D path
rob@100:           for (i = 0, j = this.vertexCodes.length; i < j; i++) {
rob@100:             if (this.vertexCodes[i] === PConstants.VERTEX) {
rob@100:               renderContext.vertex(this.vertices[index][0], this.vertices[index][1], this.vertices[index].moveTo);
rob@100:               renderContext.breakShape = false;
rob@100:               index++;
rob@100:             } else if (this.vertexCodes[i] === PConstants.BEZIER_VERTEX) {
rob@100:               renderContext.bezierVertex(this.vertices[index+0][0],
rob@100:                                          this.vertices[index+0][1],
rob@100:                                          this.vertices[index+1][0],
rob@100:                                          this.vertices[index+1][1],
rob@100:                                          this.vertices[index+2][0],
rob@100:                                          this.vertices[index+2][1]);
rob@100:               index += 3;
rob@100:             } else if (this.vertexCodes[i] === PConstants.CURVE_VERTEX) {
rob@100:               renderContext.curveVertex(this.vertices[index][0],
rob@100:                                         this.vertices[index][1]);
rob@100:               index++;
rob@100:             } else if (this.vertexCodes[i] ===  PConstants.BREAK) {
rob@100:               renderContext.breakShape = true;
rob@100:             }
rob@100:           }
rob@100:         } else {  // drawing a 3D path
rob@100:           for (i = 0, j = this.vertexCodes.length; i < j; i++) {
rob@100:             if (this.vertexCodes[i] === PConstants.VERTEX) {
rob@100:               renderContext.vertex(this.vertices[index][0],
rob@100:                                    this.vertices[index][1],
rob@100:                                    this.vertices[index][2]);
rob@100:               if (this.vertices[index].moveTo === true) {
rob@100:                 vertArray[vertArray.length-1].moveTo = true;
rob@100:               } else if (this.vertices[index].moveTo === false) {
rob@100:                 vertArray[vertArray.length-1].moveTo = false;
rob@100:               }
rob@100:               renderContext.breakShape = false;
rob@100:             } else if (this.vertexCodes[i] ===  PConstants.BEZIER_VERTEX) {
rob@100:               renderContext.bezierVertex(this.vertices[index+0][0],
rob@100:                                          this.vertices[index+0][1],
rob@100:                                          this.vertices[index+0][2],
rob@100:                                          this.vertices[index+1][0],
rob@100:                                          this.vertices[index+1][1],
rob@100:                                          this.vertices[index+1][2],
rob@100:                                          this.vertices[index+2][0],
rob@100:                                          this.vertices[index+2][1],
rob@100:                                          this.vertices[index+2][2]);
rob@100:               index += 3;
rob@100:             } else if (this.vertexCodes[i] === PConstants.CURVE_VERTEX) {
rob@100:               renderContext.curveVertex(this.vertices[index][0],
rob@100:                                         this.vertices[index][1],
rob@100:                                         this.vertices[index][2]);
rob@100:               index++;
rob@100:             } else if (this.vertexCodes[i] === PConstants.BREAK) {
rob@100:               renderContext.breakShape = true;
rob@100:             }
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       renderContext.endShape(this.close ? PConstants.CLOSE : PConstants.OPEN);
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The drawGeometry() function draws the geometry part of the SVG document.
rob@100:      */
rob@100:     drawGeometry: function(renderContext) {
rob@100:       var i, j;
rob@100:       renderContext.beginShape(this.kind);
rob@100:       if (this.style) {
rob@100:         for (i = 0, j = this.vertices.length; i < j; i++) {
rob@100:           renderContext.vertex(this.vertices[i]);
rob@100:         }
rob@100:       } else {
rob@100:         for (i = 0, j = this.vertices.length; i < j; i++) {
rob@100:           var vert = this.vertices[i];
rob@100:           if (vert[2] === 0) {
rob@100:             renderContext.vertex(vert[0], vert[1]);
rob@100:           } else {
rob@100:             renderContext.vertex(vert[0], vert[1], vert[2]);
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       renderContext.endShape();
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The drawGroup() function draws the <g> part of the SVG document.
rob@100:      */
rob@100:     drawGroup: function(renderContext) {
rob@100:       for (var i = 0, j = this.children.length; i < j; i++) {
rob@100:         this.children[i].draw(renderContext);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The drawPrimitive() function draws SVG document shape elements. These can be point, line, triangle, quad, rect, ellipse, arc, box, or sphere.
rob@100:      */
rob@100:     drawPrimitive: function(renderContext) {
rob@100:       if (this.kind === PConstants.POINT) {
rob@100:         renderContext.point(this.params[0], this.params[1]);
rob@100:       } else if (this.kind === PConstants.LINE) {
rob@100:         if (this.params.length === 4) {  // 2D
rob@100:           renderContext.line(this.params[0], this.params[1],
rob@100:                             this.params[2], this.params[3]);
rob@100:         } else {  // 3D
rob@100:           renderContext.line(this.params[0], this.params[1], this.params[2],
rob@100:                              this.params[3], this.params[4], this.params[5]);
rob@100:         }
rob@100:       } else if (this.kind === PConstants.TRIANGLE) {
rob@100:         renderContext.triangle(this.params[0], this.params[1],
rob@100:                                this.params[2], this.params[3],
rob@100:                                this.params[4], this.params[5]);
rob@100:       } else if (this.kind === PConstants.QUAD) {
rob@100:         renderContext.quad(this.params[0], this.params[1],
rob@100:                            this.params[2], this.params[3],
rob@100:                            this.params[4], this.params[5],
rob@100:                            this.params[6], this.params[7]);
rob@100:       } else if (this.kind === PConstants.RECT) {
rob@100:         if (this.image !== null) {
rob@100:           var imMode = imageModeConvert;
rob@100:           renderContext.imageMode(PConstants.CORNER);
rob@100:           renderContext.image(this.image,
rob@100:                               this.params[0],
rob@100:                               this.params[1],
rob@100:                               this.params[2],
rob@100:                               this.params[3]);
rob@100:           imageModeConvert = imMode;
rob@100:         } else {
rob@100:           var rcMode = renderContext.curRectMode;
rob@100:           renderContext.rectMode(PConstants.CORNER);
rob@100:           renderContext.rect(this.params[0],
rob@100:                              this.params[1],
rob@100:                              this.params[2],
rob@100:                              this.params[3]);
rob@100:           renderContext.curRectMode = rcMode;
rob@100:         }
rob@100:       } else if (this.kind === PConstants.ELLIPSE) {
rob@100:         var elMode = renderContext.curEllipseMode;
rob@100:         renderContext.ellipseMode(PConstants.CORNER);
rob@100:         renderContext.ellipse(this.params[0],
rob@100:                               this.params[1],
rob@100:                               this.params[2],
rob@100:                               this.params[3]);
rob@100:         renderContext.curEllipseMode = elMode;
rob@100:       } else if (this.kind === PConstants.ARC) {
rob@100:         var eMode = curEllipseMode;
rob@100:         renderContext.ellipseMode(PConstants.CORNER);
rob@100:         renderContext.arc(this.params[0],
rob@100:                           this.params[1],
rob@100:                           this.params[2],
rob@100:                           this.params[3],
rob@100:                           this.params[4],
rob@100:                           this.params[5]);
rob@100:         curEllipseMode = eMode;
rob@100:       } else if (this.kind === PConstants.BOX) {
rob@100:         if (this.params.length === 1) {
rob@100:           renderContext.box(this.params[0]);
rob@100:         } else {
rob@100:           renderContext.box(this.params[0], this.params[1], this.params[2]);
rob@100:         }
rob@100:       } else if (this.kind === PConstants.SPHERE) {
rob@100:         renderContext.sphere(this.params[0]);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The pre() function performs the preparations before the SVG is drawn. This includes doing transformations and storing previous styles.
rob@100:      */
rob@100:     pre: function(renderContext) {
rob@100:       if (this.matrix) {
rob@100:         renderContext.pushMatrix();
rob@100:         renderContext.transform(this.matrix);
rob@100:       }
rob@100:       if (this.style) {
rob@100:         renderContext.pushStyle();
rob@100:         this.styles(renderContext);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The post() function performs the necessary actions after the SVG is drawn. This includes removing transformations and removing added styles.
rob@100:      */
rob@100:     post: function(renderContext) {
rob@100:       if (this.matrix) {
rob@100:         renderContext.popMatrix();
rob@100:       }
rob@100:       if (this.style) {
rob@100:         renderContext.popStyle();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The styles() function changes the Processing's current styles
rob@100:      */
rob@100:     styles: function(renderContext) {
rob@100:       if (this.stroke) {
rob@100:         renderContext.stroke(this.strokeColor);
rob@100:         renderContext.strokeWeight(this.strokeWeight);
rob@100:         renderContext.strokeCap(this.strokeCap);
rob@100:         renderContext.strokeJoin(this.strokeJoin);
rob@100:       } else {
rob@100:         renderContext.noStroke();
rob@100:       }
rob@100: 
rob@100:       if (this.fill) {
rob@100:         renderContext.fill(this.fillColor);
rob@100: 
rob@100:       } else {
rob@100:         renderContext.noFill();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The getChild() function extracts a child shape from a parent shape. Specify the name of the shape with the <b>target</b> parameter or the
rob@100:      * layer position of the shape to get with the <b>index</b> parameter.
rob@100:      * The shape is returned as a <b>PShape</b> object, or <b>null</b> is returned if there is an error.
rob@100:      *
rob@100:      * @param {String} target   the name of the shape to get
rob@100:      * @param {int} index   the layer position of the shape to get
rob@100:      *
rob@100:      * @return {PShape} returns a child element of a shape as a PShape object or null if there is an error
rob@100:      */
rob@100:     getChild: function(child) {
rob@100:       var i, j;
rob@100:       if (typeof child === 'number') {
rob@100:         return this.children[child];
rob@100:       }
rob@100:       var found;
rob@100:       if(child === "" || this.name === child){
rob@100:         return this;
rob@100:       }
rob@100:       if(this.nameTable.length > 0) {
rob@100:         for(i = 0, j = this.nameTable.length; i < j || found; i++) {
rob@100:           if(this.nameTable[i].getName === child) {
rob@100:             found = this.nameTable[i];
rob@100:             break;
rob@100:           }
rob@100:         }
rob@100:         if (found) { return found; }
rob@100:       }
rob@100:       for(i = 0, j = this.children.length; i < j; i++) {
rob@100:         found = this.children[i].getChild(child);
rob@100:         if(found) { return found; }
rob@100:       }
rob@100:       return null;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The getChildCount() returns the number of children
rob@100:      *
rob@100:      * @return {int} returns a count of children
rob@100:      */
rob@100:     getChildCount: function () {
rob@100:       return this.children.length;
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The addChild() adds a child to the PShape.
rob@100:      *
rob@100:      * @param {PShape} child the child to add
rob@100:      */
rob@100:     addChild: function( child ) {
rob@100:       this.children.push(child);
rob@100:       child.parent = this;
rob@100:       if (child.getName() !== null) {
rob@100:         this.addName(child.getName(), child);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The addName() functions adds a shape to the name lookup table.
rob@100:      *
rob@100:      * @param {String} name   the name to be added
rob@100:      * @param {PShape} shape  the shape
rob@100:      */
rob@100:     addName: function(name,  shape) {
rob@100:       if (this.parent !== null) {
rob@100:         this.parent.addName( name, shape );
rob@100:       } else {
rob@100:         this.nameTable.push( [name, shape] );
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The translate() function specifies an amount to displace the shape. The <b>x</b> parameter specifies left/right translation, the <b>y</b> parameter specifies up/down translation, and the <b>z</b> parameter specifies translations toward/away from the screen.
rob@100:      * Subsequent calls to the method accumulates the effect. For example, calling <b>translate(50, 0)</b> and then <b>translate(20, 0)</b> is the same as <b>translate(70, 0)</b>.
rob@100:      * This transformation is applied directly to the shape, it's not refreshed each time <b>draw()</b> is run.
rob@100:      * <br><br>Using this method with the <b>z</b> parameter requires using the P3D or OPENGL parameter in combination with size.
rob@100:      *
rob@100:      * @param {int|float} x left/right translation
rob@100:      * @param {int|float} y up/down translation
rob@100:      * @param {int|float} z forward/back translation
rob@100:      *
rob@100:      * @see PMatrix2D#translate
rob@100:      * @see PMatrix3D#translate
rob@100:      */
rob@100:     translate: function() {
rob@100:       if(arguments.length === 2)
rob@100:       {
rob@100:         this.checkMatrix(2);
rob@100:         this.matrix.translate(arguments[0], arguments[1]);
rob@100:       } else {
rob@100:         this.checkMatrix(3);
rob@100:         this.matrix.translate(arguments[0], arguments[1], 0);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The checkMatrix() function makes sure that the shape's matrix is 1) not null, and 2) has a matrix
rob@100:      * that can handle <em>at least</em> the specified number of dimensions.
rob@100:      *
rob@100:      * @param {int} dimensions the specified number of dimensions
rob@100:      */
rob@100:     checkMatrix: function(dimensions) {
rob@100:       if(this.matrix === null) {
rob@100:         if(dimensions === 2) {
rob@100:           this.matrix = new PMatrix2D();
rob@100:         } else {
rob@100:           this.matrix = new PMatrix3D();
rob@100:         }
rob@100:       }else if(dimensions === 3 && this.matrix instanceof PMatrix2D) {
rob@100:         this.matrix = new PMatrix3D();
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The rotateX() function rotates a shape around the x-axis the amount specified by the <b>angle</b> parameter. Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the <b>radians()</b> method.
rob@100:      * <br><br>Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction.
rob@100:      * Subsequent calls to the method accumulates the effect. For example, calling <b>rotateX(HALF_PI)</b> and then <b>rotateX(HALF_PI)</b> is the same as <b>rotateX(PI)</b>.
rob@100:      * This transformation is applied directly to the shape, it's not refreshed each time <b>draw()</b> is run.
rob@100:      * <br><br>This method requires a 3D renderer. You need to pass P3D or OPENGL as a third parameter into the <b>size()</b> method as shown in the example above.
rob@100:      *
rob@100:      * @param {float}angle angle of rotation specified in radians
rob@100:      *
rob@100:      * @see PMatrix3D#rotateX
rob@100:      */
rob@100:     rotateX: function(angle) {
rob@100:       this.rotate(angle, 1, 0, 0);
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The rotateY() function rotates a shape around the y-axis the amount specified by the <b>angle</b> parameter. Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the <b>radians()</b> method.
rob@100:      * <br><br>Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction.
rob@100:      * Subsequent calls to the method accumulates the effect. For example, calling <b>rotateY(HALF_PI)</b> and then <b>rotateY(HALF_PI)</b> is the same as <b>rotateY(PI)</b>.
rob@100:      * This transformation is applied directly to the shape, it's not refreshed each time <b>draw()</b> is run.
rob@100:      * <br><br>This method requires a 3D renderer. You need to pass P3D or OPENGL as a third parameter into the <b>size()</b> method as shown in the example above.
rob@100:      *
rob@100:      * @param {float}angle angle of rotation specified in radians
rob@100:      *
rob@100:      * @see PMatrix3D#rotateY
rob@100:      */
rob@100:     rotateY: function(angle) {
rob@100:       this.rotate(angle, 0, 1, 0);
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The rotateZ() function rotates a shape around the z-axis the amount specified by the <b>angle</b> parameter. Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the <b>radians()</b> method.
rob@100:      * <br><br>Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction.
rob@100:      * Subsequent calls to the method accumulates the effect. For example, calling <b>rotateZ(HALF_PI)</b> and then <b>rotateZ(HALF_PI)</b> is the same as <b>rotateZ(PI)</b>.
rob@100:      * This transformation is applied directly to the shape, it's not refreshed each time <b>draw()</b> is run.
rob@100:      * <br><br>This method requires a 3D renderer. You need to pass P3D or OPENGL as a third parameter into the <b>size()</b> method as shown in the example above.
rob@100:      *
rob@100:      * @param {float}angle angle of rotation specified in radians
rob@100:      *
rob@100:      * @see PMatrix3D#rotateZ
rob@100:      */
rob@100:     rotateZ: function(angle) {
rob@100:       this.rotate(angle, 0, 0, 1);
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The rotate() function rotates a shape the amount specified by the <b>angle</b> parameter. Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the <b>radians()</b> method.
rob@100:      * <br><br>Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction.
rob@100:      * Transformations apply to everything that happens after and subsequent calls to the method accumulates the effect.
rob@100:      * For example, calling <b>rotate(HALF_PI)</b> and then <b>rotate(HALF_PI)</b> is the same as <b>rotate(PI)</b>.
rob@100:      * This transformation is applied directly to the shape, it's not refreshed each time <b>draw()</b> is run.
rob@100:      * If optional parameters x,y,z are supplied, the rotate is about the point (x, y, z).
rob@100:      *
rob@100:      * @param {float}angle  angle of rotation specified in radians
rob@100:      * @param {float}x      x-coordinate of the point
rob@100:      * @param {float}y      y-coordinate of the point
rob@100:      * @param {float}z      z-coordinate of the point
rob@100:      * @see PMatrix2D#rotate
rob@100:      * @see PMatrix3D#rotate
rob@100:      */
rob@100:     rotate: function() {
rob@100:       if(arguments.length === 1){
rob@100:         this.checkMatrix(2);
rob@100:         this.matrix.rotate(arguments[0]);
rob@100:       } else {
rob@100:         this.checkMatrix(3);
rob@100:         this.matrix.rotate(arguments[0],
rob@100:                            arguments[1],
rob@100:                            arguments[2],
rob@100:                            arguments[3]);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The scale() function increases or decreases the size of a shape by expanding and contracting vertices. Shapes always scale from the relative origin of their bounding box.
rob@100:      * Scale values are specified as decimal percentages. For example, the method call <b>scale(2.0)</b> increases the dimension of a shape by 200%.
rob@100:      * Subsequent calls to the method multiply the effect. For example, calling <b>scale(2.0)</b> and then <b>scale(1.5)</b> is the same as <b>scale(3.0)</b>.
rob@100:      * This transformation is applied directly to the shape, it's not refreshed each time <b>draw()</b> is run.
rob@100:      * <br><br>Using this fuction with the <b>z</b> parameter requires passing P3D or OPENGL into the size() parameter.
rob@100:      *
rob@100:      * @param {float}s      percentage to scale the object
rob@100:      * @param {float}x      percentage to scale the object in the x-axis
rob@100:      * @param {float}y      percentage to scale the object in the y-axis
rob@100:      * @param {float}z      percentage to scale the object in the z-axis
rob@100:      *
rob@100:      * @see PMatrix2D#scale
rob@100:      * @see PMatrix3D#scale
rob@100:      */
rob@100:     scale: function() {
rob@100:       if(arguments.length === 2) {
rob@100:         this.checkMatrix(2);
rob@100:         this.matrix.scale(arguments[0], arguments[1]);
rob@100:       } else if (arguments.length === 3) {
rob@100:         this.checkMatrix(2);
rob@100:         this.matrix.scale(arguments[0], arguments[1], arguments[2]);
rob@100:       } else {
rob@100:         this.checkMatrix(2);
rob@100:         this.matrix.scale(arguments[0]);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The resetMatrix() function resets the matrix
rob@100:      *
rob@100:      * @see PMatrix2D#reset
rob@100:      * @see PMatrix3D#reset
rob@100:      */
rob@100:     resetMatrix: function() {
rob@100:       this.checkMatrix(2);
rob@100:       this.matrix.reset();
rob@100:     },
rob@100:     /**
rob@100:      * @member PShape
rob@100:      * The applyMatrix() function multiplies this matrix by another matrix of type PMatrix3D or PMatrix2D.
rob@100:      * Individual elements can also be provided
rob@100:      *
rob@100:      * @param {PMatrix3D|PMatrix2D} matrix   the matrix to multiply by
rob@100:      *
rob@100:      * @see PMatrix2D#apply
rob@100:      * @see PMatrix3D#apply
rob@100:      */
rob@100:     applyMatrix: function(matrix) {
rob@100:       if (arguments.length === 1) {
rob@100:         this.applyMatrix(matrix.elements[0],
rob@100:                          matrix.elements[1], 0,
rob@100:                          matrix.elements[2],
rob@100:                          matrix.elements[3],
rob@100:                          matrix.elements[4], 0,
rob@100:                          matrix.elements[5],
rob@100:                          0, 0, 1, 0,
rob@100:                          0, 0, 0, 1);
rob@100:       } else if (arguments.length === 6) {
rob@100:         this.checkMatrix(2);
rob@100:         this.matrix.apply(arguments[0], arguments[1], arguments[2], 0,
rob@100:                           arguments[3], arguments[4], arguments[5], 0,
rob@100:                           0,   0,   1,   0,
rob@100:                           0,   0,   0,   1);
rob@100: 
rob@100:       } else if (arguments.length === 16) {
rob@100:         this.checkMatrix(3);
rob@100:         this.matrix.apply(arguments[0],
rob@100:                           arguments[1],
rob@100:                           arguments[2],
rob@100:                           arguments[3],
rob@100:                           arguments[4],
rob@100:                           arguments[5],
rob@100:                           arguments[6],
rob@100:                           arguments[7],
rob@100:                           arguments[8],
rob@100:                           arguments[9],
rob@100:                           arguments[10],
rob@100:                           arguments[11],
rob@100:                           arguments[12],
rob@100:                           arguments[13],
rob@100:                           arguments[14],
rob@100:                           arguments[15]);
rob@100:       }
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   return PShape;
rob@100: };
rob@100: },{}],16:[function(require,module,exports){
rob@100: /**
rob@100:  * SVG stands for Scalable Vector Graphics, a portable graphics format. It is
rob@100:  * a vector format so it allows for infinite resolution and relatively small
rob@100:  * file sizes. Most modern media software can view SVG files, including Adobe
rob@100:  * products, Firefox, etc. Illustrator and Inkscape can edit SVG files.
rob@100:  *
rob@100:  * @param {PApplet} parent     typically use "this"
rob@100:  * @param {String} filename    name of the SVG file to load
rob@100:  * @param {XMLElement} xml     an XMLElement element
rob@100:  * @param {PShapeSVG} parent   the parent PShapeSVG
rob@100:  *
rob@100:  * @see PShape
rob@100:  */
rob@100: module.exports = function(options) {
rob@100:   var CommonFunctions = options.CommonFunctions,
rob@100:       PConstants = options.PConstants,
rob@100:       PShape = options.PShape,
rob@100:       XMLElement = options.XMLElement,
rob@100:       colors = options.colors;
rob@100: 
rob@100:   var PShapeSVG = function() {
rob@100:     PShape.call(this);                // PShape is the base class.
rob@100:     if (arguments.length === 1) {     // xml element coming in
rob@100:       this.element  = arguments[0];
rob@100: 
rob@100:       // set values to their defaults according to the SVG spec
rob@100:       this.vertexCodes         = [];
rob@100:       this.vertices            = [];
rob@100:       this.opacity             = 1;
rob@100: 
rob@100:       this.stroke              = false;
rob@100:       this.strokeColor         = PConstants.ALPHA_MASK;
rob@100:       this.strokeWeight        = 1;
rob@100:       this.strokeCap           = PConstants.SQUARE;  // BUTT in svg spec
rob@100:       this.strokeJoin          = PConstants.MITER;
rob@100:       this.strokeGradient      = null;
rob@100:       this.strokeGradientPaint = null;
rob@100:       this.strokeName          = null;
rob@100:       this.strokeOpacity       = 1;
rob@100: 
rob@100:       this.fill                = true;
rob@100:       this.fillColor           = PConstants.ALPHA_MASK;
rob@100:       this.fillGradient        = null;
rob@100:       this.fillGradientPaint   = null;
rob@100:       this.fillName            = null;
rob@100:       this.fillOpacity         = 1;
rob@100: 
rob@100:       if (this.element.getName() !== "svg") {
rob@100:         throw("root is not <svg>, it's <" + this.element.getName() + ">");
rob@100:       }
rob@100:     }
rob@100:     else if (arguments.length === 2) {
rob@100:       if (typeof arguments[1] === 'string') {
rob@100:         if (arguments[1].indexOf(".svg") > -1) { //its a filename
rob@100:           this.element = new XMLElement(true, arguments[1]);
rob@100:           // set values to their defaults according to the SVG spec
rob@100:           this.vertexCodes         = [];
rob@100:           this.vertices            = [];
rob@100:           this.opacity             = 1;
rob@100: 
rob@100:           this.stroke              = false;
rob@100:           this.strokeColor         = PConstants.ALPHA_MASK;
rob@100:           this.strokeWeight        = 1;
rob@100:           this.strokeCap           = PConstants.SQUARE;  // BUTT in svg spec
rob@100:           this.strokeJoin          = PConstants.MITER;
rob@100:           this.strokeGradient      = "";
rob@100:           this.strokeGradientPaint = "";
rob@100:           this.strokeName          = "";
rob@100:           this.strokeOpacity       = 1;
rob@100: 
rob@100:           this.fill                = true;
rob@100:           this.fillColor           = PConstants.ALPHA_MASK;
rob@100:           this.fillGradient        = null;
rob@100:           this.fillGradientPaint   = null;
rob@100:           this.fillOpacity         = 1;
rob@100: 
rob@100:         }
rob@100:       } else { // XMLElement
rob@100:         if (arguments[0]) { // PShapeSVG
rob@100:           this.element             = arguments[1];
rob@100:           this.vertexCodes         = arguments[0].vertexCodes.slice();
rob@100:           this.vertices            = arguments[0].vertices.slice();
rob@100: 
rob@100:           this.stroke              = arguments[0].stroke;
rob@100:           this.strokeColor         = arguments[0].strokeColor;
rob@100:           this.strokeWeight        = arguments[0].strokeWeight;
rob@100:           this.strokeCap           = arguments[0].strokeCap;
rob@100:           this.strokeJoin          = arguments[0].strokeJoin;
rob@100:           this.strokeGradient      = arguments[0].strokeGradient;
rob@100:           this.strokeGradientPaint = arguments[0].strokeGradientPaint;
rob@100:           this.strokeName          = arguments[0].strokeName;
rob@100: 
rob@100:           this.fill                = arguments[0].fill;
rob@100:           this.fillColor           = arguments[0].fillColor;
rob@100:           this.fillGradient        = arguments[0].fillGradient;
rob@100:           this.fillGradientPaint   = arguments[0].fillGradientPaint;
rob@100:           this.fillName            = arguments[0].fillName;
rob@100:           this.strokeOpacity       = arguments[0].strokeOpacity;
rob@100:           this.fillOpacity         = arguments[0].fillOpacity;
rob@100:           this.opacity             = arguments[0].opacity;
rob@100:         }
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     this.name      = this.element.getStringAttribute("id");
rob@100:     var displayStr = this.element.getStringAttribute("display", "inline");
rob@100:     this.visible   = displayStr !== "none";
rob@100:     var str = this.element.getAttribute("transform");
rob@100:     if (str) {
rob@100:       this.matrix = this.parseMatrix(str);
rob@100:     }
rob@100:     // not proper parsing of the viewBox, but will cover us for cases where
rob@100:     // the width and height of the object is not specified
rob@100:     var viewBoxStr = this.element.getStringAttribute("viewBox");
rob@100:     if ( viewBoxStr !== null ) {
rob@100:       var viewBox = viewBoxStr.split(" ");
rob@100:       this.width  = viewBox[2];
rob@100:       this.height = viewBox[3];
rob@100:     }
rob@100: 
rob@100:     // TODO if viewbox is not same as width/height, then use it to scale
rob@100:     // the original objects. for now, viewbox only used when width/height
rob@100:     // are empty values (which by the spec means w/h of "100%"
rob@100:     var unitWidth  = this.element.getStringAttribute("width");
rob@100:     var unitHeight = this.element.getStringAttribute("height");
rob@100:     if (unitWidth !== null) {
rob@100:       this.width  = this.parseUnitSize(unitWidth);
rob@100:       this.height = this.parseUnitSize(unitHeight);
rob@100:     } else {
rob@100:       if ((this.width === 0) || (this.height === 0)) {
rob@100:         // For the spec, the default is 100% and 100%. For purposes
rob@100:         // here, insert a dummy value because this is prolly just a
rob@100:         // font or something for which the w/h doesn't matter.
rob@100:         this.width  = 1;
rob@100:         this.height = 1;
rob@100: 
rob@100:         //show warning
rob@100:         throw("The width and/or height is not " +
rob@100:               "readable in the <svg> tag of this file.");
rob@100:       }
rob@100:     }
rob@100:     this.parseColors(this.element);
rob@100:     this.parseChildren(this.element);
rob@100: 
rob@100:   };
rob@100:   /**
rob@100:    * PShapeSVG methods
rob@100:    * missing: getChild(), print(), parseStyleAttributes(), styles() - deals with strokeGradient and fillGradient
rob@100:    */
rob@100:   PShapeSVG.prototype = new PShape();
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseMatrix() function parses the specified SVG matrix into a PMatrix2D. Note that PMatrix2D
rob@100:    * is rotated relative to the SVG definition, so parameters are rearranged
rob@100:    * here. More about the transformation matrices in
rob@100:    * <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">this section</a>
rob@100:    * of the SVG documentation.
rob@100:    *
rob@100:    * @param {String} str text of the matrix param.
rob@100:    *
rob@100:    * @return {PMatrix2D} a PMatrix2D
rob@100:    */
rob@100:   PShapeSVG.prototype.parseMatrix = (function() {
rob@100:     function getCoords(s) {
rob@100:       var m = [];
rob@100:       s.replace(/\((.*?)\)/, (function() {
rob@100:         return function(all, params) {
rob@100:           // get the coordinates that can be separated by spaces or a comma
rob@100:           m = params.replace(/,+/g, " ").split(/\s+/);
rob@100:         };
rob@100:       }()));
rob@100:       return m;
rob@100:     }
rob@100: 
rob@100:     return function(str) {
rob@100:       this.checkMatrix(2);
rob@100:       var pieces = [];
rob@100:       str.replace(/\s*(\w+)\((.*?)\)/g, function(all) {
rob@100:         // get a list of transform definitions
rob@100:         pieces.push(CommonFunctions.trim(all));
rob@100:       });
rob@100:       if (pieces.length === 0) {
rob@100:         return null;
rob@100:       }
rob@100: 
rob@100:       for (var i = 0, j = pieces.length; i < j; i++) {
rob@100:         var m = getCoords(pieces[i]);
rob@100: 
rob@100:         if (pieces[i].indexOf("matrix") !== -1) {
rob@100:           this.matrix.set(m[0], m[2], m[4], m[1], m[3], m[5]);
rob@100:         } else if (pieces[i].indexOf("translate") !== -1) {
rob@100:           var tx = m[0];
rob@100:           var ty = (m.length === 2) ? m[1] : 0;
rob@100:           this.matrix.translate(tx,ty);
rob@100:         } else if (pieces[i].indexOf("scale") !== -1) {
rob@100:           var sx = m[0];
rob@100:           var sy = (m.length === 2) ? m[1] : m[0];
rob@100:           this.matrix.scale(sx,sy);
rob@100:         } else if (pieces[i].indexOf("rotate") !== -1) {
rob@100:           var angle = m[0];
rob@100:           if (m.length === 1) {
rob@100:             this.matrix.rotate(CommonFunctions.radians(angle));
rob@100:           } else if (m.length === 3) {
rob@100:             this.matrix.translate(m[1], m[2]);
rob@100:             this.matrix.rotate(CommonFunctions.radians(m[0]));
rob@100:             this.matrix.translate(-m[1], -m[2]);
rob@100:           }
rob@100:         } else if (pieces[i].indexOf("skewX") !== -1) {
rob@100:           this.matrix.skewX(parseFloat(m[0]));
rob@100:         } else if (pieces[i].indexOf("skewY") !== -1) {
rob@100:           this.matrix.skewY(m[0]);
rob@100:         } else if (pieces[i].indexOf("shearX") !== -1) {
rob@100:           this.matrix.shearX(m[0]);
rob@100:         } else if (pieces[i].indexOf("shearY") !== -1) {
rob@100:           this.matrix.shearY(m[0]);
rob@100:         }
rob@100:       }
rob@100:       return this.matrix;
rob@100:     };
rob@100:   }());
rob@100: 
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseChildren() function parses the specified XMLElement
rob@100:    *
rob@100:    * @param {XMLElement}element the XMLElement to parse
rob@100:    */
rob@100:   PShapeSVG.prototype.parseChildren = function(element) {
rob@100:     var newelement = element.getChildren();
rob@100:     var base = new PShape();
rob@100:     var i, j;
rob@100:     for (i = 0, j = newelement.length; i < j; i++) {
rob@100:       var kid = this.parseChild(newelement[i]);
rob@100:       if (kid) {
rob@100:         base.addChild(kid);
rob@100:       }
rob@100:     }
rob@100:     for (i = 0, j = base.children.length; i < j; i++) {
rob@100:       this.children.push(base.children[i]);
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The getName() function returns the name
rob@100:    *
rob@100:    * @return {String} the name
rob@100:    */
rob@100:   PShapeSVG.prototype.getName = function() {
rob@100:     return this.name;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseChild() function parses a child XML element.
rob@100:    *
rob@100:    * @param {XMLElement} elem the element to parse
rob@100:    *
rob@100:    * @return {PShape} the newly created PShape
rob@100:    */
rob@100:   PShapeSVG.prototype.parseChild = function( elem ) {
rob@100:     var name = elem.getName();
rob@100:     var shape;
rob@100:     if (name === "g") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:     } else if (name === "defs") {
rob@100:       // generally this will contain gradient info, so may
rob@100:       // as well just throw it into a group element for parsing
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:     } else if (name === "line") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parseLine();
rob@100:     } else if (name === "circle") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parseEllipse(true);
rob@100:     } else if (name === "ellipse") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parseEllipse(false);
rob@100:     } else if (name === "rect") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parseRect();
rob@100:     } else if (name === "polygon") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parsePoly(true);
rob@100:     } else if (name === "polyline") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parsePoly(false);
rob@100:     } else if (name === "path") {
rob@100:       shape = new PShapeSVG(this, elem);
rob@100:       shape.parsePath();
rob@100:     } else if (name === "radialGradient") {
rob@100:       //return new RadialGradient(this, elem);
rob@100:       unimplemented('PShapeSVG.prototype.parseChild, name = radialGradient');
rob@100:     } else if (name === "linearGradient") {
rob@100:       //return new LinearGradient(this, elem);
rob@100:       unimplemented('PShapeSVG.prototype.parseChild, name = linearGradient');
rob@100:     } else if (name === "text") {
rob@100:       unimplemented('PShapeSVG.prototype.parseChild, name = text');
rob@100:     } else if (name === "filter") {
rob@100:       unimplemented('PShapeSVG.prototype.parseChild, name = filter');
rob@100:     } else if (name === "mask") {
rob@100:       unimplemented('PShapeSVG.prototype.parseChild, name = mask');
rob@100:     } else {
rob@100:       // ignoring
rob@100:     }
rob@100:     return shape;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parsePath() function parses the <path> element of the svg file
rob@100:    * A path is defined by including a path element which contains a d="(path data)" attribute, where the d attribute contains
rob@100:    * the moveto, line, curve (both cubic and quadratic Beziers), arc and closepath instructions.
rob@100:    **/
rob@100:   PShapeSVG.prototype.parsePath = function() {
rob@100:     this.family = PConstants.PATH;
rob@100:     this.kind = 0;
rob@100:     var pathDataChars = [];
rob@100:     var c;
rob@100:     //change multiple spaces and commas to single space
rob@100:     var pathData = CommonFunctions.trim(this.element.getStringAttribute("d").replace(/[\s,]+/g,' '));
rob@100:     if (pathData === null) {
rob@100:       return;
rob@100:     }
rob@100:     pathData = pathData.split('');
rob@100:     var cx     = 0,
rob@100:         cy     = 0,
rob@100:         ctrlX  = 0,
rob@100:         ctrlY  = 0,
rob@100:         ctrlX1 = 0,
rob@100:         ctrlX2 = 0,
rob@100:         ctrlY1 = 0,
rob@100:         ctrlY2 = 0,
rob@100:         endX   = 0,
rob@100:         endY   = 0,
rob@100:         ppx    = 0,
rob@100:         ppy    = 0,
rob@100:         px     = 0,
rob@100:         py     = 0,
rob@100:         i      = 0,
rob@100:         valOf  = 0;
rob@100:     var str = "";
rob@100:     var tmpArray = [];
rob@100:     var flag = false;
rob@100:     var lastInstruction;
rob@100:     var command;
rob@100:     var j, k;
rob@100:     while (i< pathData.length) {
rob@100:       valOf = pathData[i].charCodeAt(0);
rob@100:       if ((valOf >= 65 && valOf <= 90) || (valOf >= 97 && valOf <= 122)) {
rob@100:         // if it's a letter
rob@100:         // populate the tmpArray with coordinates
rob@100:         j = i;
rob@100:         i++;
rob@100:         if (i < pathData.length) { // don't go over boundary of array
rob@100:           tmpArray = [];
rob@100:           valOf = pathData[i].charCodeAt(0);
rob@100:           while (!((valOf >= 65 && valOf <= 90) ||
rob@100:                    (valOf >= 97 && valOf <= 100) ||
rob@100:                    (valOf >= 102 && valOf <= 122)) && flag === false) { // if its NOT a letter
rob@100:             if (valOf === 32) { //if its a space and the str isn't empty
rob@100:               // sometimes you get a space after the letter
rob@100:               if (str !== "") {
rob@100:                 tmpArray.push(parseFloat(str));
rob@100:                 str = "";
rob@100:               }
rob@100:               i++;
rob@100:             } else if (valOf === 45) { //if it's a -
rob@100:               // allow for 'e' notation in numbers, e.g. 2.10e-9
rob@100:               if (pathData[i-1].charCodeAt(0) === 101) {
rob@100:                 str += pathData[i].toString();
rob@100:                 i++;
rob@100:               } else {
rob@100:                 // sometimes no space separator after (ex: 104.535-16.322)
rob@100:                 if (str !== "") {
rob@100:                   tmpArray.push(parseFloat(str));
rob@100:                 }
rob@100:                 str = pathData[i].toString();
rob@100:                 i++;
rob@100:               }
rob@100:             } else {
rob@100:               str += pathData[i].toString();
rob@100:               i++;
rob@100:             }
rob@100:             if (i === pathData.length) { // don't go over boundary of array
rob@100:               flag = true;
rob@100:             } else {
rob@100:               valOf = pathData[i].charCodeAt(0);
rob@100:             }
rob@100:           }
rob@100:         }
rob@100:         if (str !== "") {
rob@100:           tmpArray.push(parseFloat(str));
rob@100:           str = "";
rob@100:         }
rob@100:         command = pathData[j];
rob@100:         valOf = command.charCodeAt(0);
rob@100:         if (valOf === 77) {  // M - move to (absolute)
rob@100:           if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) {
rob@100:             // need one+ pairs of co-ordinates
rob@100:             cx = tmpArray[0];
rob@100:             cy = tmpArray[1];
rob@100:             this.parsePathMoveto(cx, cy);
rob@100:             if (tmpArray.length > 2) {
rob@100:               for (j = 2, k = tmpArray.length; j < k; j+=2) {
rob@100:                 // absolute line to
rob@100:                 cx = tmpArray[j];
rob@100:                 cy = tmpArray[j+1];
rob@100:                 this.parsePathLineto(cx,cy);
rob@100:               }
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 109) {  // m - move to (relative)
rob@100:           if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) {
rob@100:             // need one+ pairs of co-ordinates
rob@100:             cx += tmpArray[0];
rob@100:             cy += tmpArray[1];
rob@100:             this.parsePathMoveto(cx,cy);
rob@100:             if (tmpArray.length > 2) {
rob@100:               for (j = 2, k = tmpArray.length; j < k; j+=2) {
rob@100:                 // relative line to
rob@100:                 cx += tmpArray[j];
rob@100:                 cy += tmpArray[j + 1];
rob@100:                 this.parsePathLineto(cx,cy);
rob@100:               }
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 76) { // L - lineto (absolute)
rob@100:           if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) {
rob@100:             // need one+ pairs of co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=2) {
rob@100:               cx = tmpArray[j];
rob@100:               cy = tmpArray[j + 1];
rob@100:               this.parsePathLineto(cx,cy);
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 108) { // l - lineto (relative)
rob@100:           if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) {
rob@100:             // need one+ pairs of co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=2) {
rob@100:               cx += tmpArray[j];
rob@100:               cy += tmpArray[j+1];
rob@100:               this.parsePathLineto(cx,cy);
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 72) { // H - horizontal lineto (absolute)
rob@100:           for (j = 0, k = tmpArray.length; j < k; j++) {
rob@100:             // multiple x co-ordinates can be provided
rob@100:             cx = tmpArray[j];
rob@100:             this.parsePathLineto(cx, cy);
rob@100:           }
rob@100:         } else if (valOf === 104) { // h - horizontal lineto (relative)
rob@100:           for (j = 0, k = tmpArray.length; j < k; j++) {
rob@100:             // multiple x co-ordinates can be provided
rob@100:             cx += tmpArray[j];
rob@100:             this.parsePathLineto(cx, cy);
rob@100:           }
rob@100:         } else if (valOf === 86) { // V - vertical lineto (absolute)
rob@100:           for (j = 0, k = tmpArray.length; j < k; j++) {
rob@100:             // multiple y co-ordinates can be provided
rob@100:             cy = tmpArray[j];
rob@100:             this.parsePathLineto(cx, cy);
rob@100:           }
rob@100:         } else if (valOf === 118) { // v - vertical lineto (relative)
rob@100:           for (j = 0, k = tmpArray.length; j < k; j++) {
rob@100:             // multiple y co-ordinates can be provided
rob@100:             cy += tmpArray[j];
rob@100:             this.parsePathLineto(cx, cy);
rob@100:           }
rob@100:         } else if (valOf === 67) { // C - curve to (absolute)
rob@100:           if (tmpArray.length >= 6 && tmpArray.length % 6 === 0) {
rob@100:             // need one+ multiples of 6 co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=6) {
rob@100:               ctrlX1 = tmpArray[j];
rob@100:               ctrlY1 = tmpArray[j + 1];
rob@100:               ctrlX2 = tmpArray[j + 2];
rob@100:               ctrlY2 = tmpArray[j + 3];
rob@100:               endX   = tmpArray[j + 4];
rob@100:               endY   = tmpArray[j + 5];
rob@100:               this.parsePathCurveto(ctrlX1,
rob@100:                                     ctrlY1,
rob@100:                                     ctrlX2,
rob@100:                                     ctrlY2,
rob@100:                                     endX,
rob@100:                                     endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 99) { // c - curve to (relative)
rob@100:           if (tmpArray.length >= 6 && tmpArray.length % 6 === 0) {
rob@100:             // need one+ multiples of 6 co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=6) {
rob@100:               ctrlX1 = cx + tmpArray[j];
rob@100:               ctrlY1 = cy + tmpArray[j + 1];
rob@100:               ctrlX2 = cx + tmpArray[j + 2];
rob@100:               ctrlY2 = cy + tmpArray[j + 3];
rob@100:               endX   = cx + tmpArray[j + 4];
rob@100:               endY   = cy + tmpArray[j + 5];
rob@100:               this.parsePathCurveto(ctrlX1,
rob@100:                                     ctrlY1,
rob@100:                                     ctrlX2,
rob@100:                                     ctrlY2,
rob@100:                                     endX,
rob@100:                                     endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 83) { // S - curve to shorthand (absolute)
rob@100:           if (tmpArray.length >= 4 && tmpArray.length % 4 === 0) {
rob@100:             // need one+ multiples of 4 co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=4) {
rob@100:               if (lastInstruction.toLowerCase() ===  "c" ||
rob@100:                   lastInstruction.toLowerCase() ===  "s") {
rob@100:                 ppx    = this.vertices[ this.vertices.length-2 ][0];
rob@100:                 ppy    = this.vertices[ this.vertices.length-2 ][1];
rob@100:                 px     = this.vertices[ this.vertices.length-1 ][0];
rob@100:                 py     = this.vertices[ this.vertices.length-1 ][1];
rob@100:                 ctrlX1 = px + (px - ppx);
rob@100:                 ctrlY1 = py + (py - ppy);
rob@100:               } else {
rob@100:                 //If there is no previous curve,
rob@100:                 //the current point will be used as the first control point.
rob@100:                 ctrlX1 = this.vertices[this.vertices.length-1][0];
rob@100:                 ctrlY1 = this.vertices[this.vertices.length-1][1];
rob@100:               }
rob@100:               ctrlX2 = tmpArray[j];
rob@100:               ctrlY2 = tmpArray[j + 1];
rob@100:               endX   = tmpArray[j + 2];
rob@100:               endY   = tmpArray[j + 3];
rob@100:               this.parsePathCurveto(ctrlX1,
rob@100:                                     ctrlY1,
rob@100:                                     ctrlX2,
rob@100:                                     ctrlY2,
rob@100:                                     endX,
rob@100:                                     endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 115) { // s - curve to shorthand (relative)
rob@100:           if (tmpArray.length >= 4 && tmpArray.length % 4 === 0) {
rob@100:             // need one+ multiples of 4 co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=4) {
rob@100:               if (lastInstruction.toLowerCase() ===  "c" ||
rob@100:                   lastInstruction.toLowerCase() ===  "s") {
rob@100:                 ppx    = this.vertices[this.vertices.length-2][0];
rob@100:                 ppy    = this.vertices[this.vertices.length-2][1];
rob@100:                 px     = this.vertices[this.vertices.length-1][0];
rob@100:                 py     = this.vertices[this.vertices.length-1][1];
rob@100:                 ctrlX1 = px + (px - ppx);
rob@100:                 ctrlY1 = py + (py - ppy);
rob@100:               } else {
rob@100:                 //If there is no previous curve,
rob@100:                 //the current point will be used as the first control point.
rob@100:                 ctrlX1 = this.vertices[this.vertices.length-1][0];
rob@100:                 ctrlY1 = this.vertices[this.vertices.length-1][1];
rob@100:               }
rob@100:               ctrlX2 = cx + tmpArray[j];
rob@100:               ctrlY2 = cy + tmpArray[j + 1];
rob@100:               endX   = cx + tmpArray[j + 2];
rob@100:               endY   = cy + tmpArray[j + 3];
rob@100:               this.parsePathCurveto(ctrlX1,
rob@100:                                     ctrlY1,
rob@100:                                     ctrlX2,
rob@100:                                     ctrlY2,
rob@100:                                     endX,
rob@100:                                     endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 81) { // Q - quadratic curve to (absolute)
rob@100:           if (tmpArray.length >= 4 && tmpArray.length % 4 === 0) {
rob@100:             // need one+ multiples of 4 co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=4) {
rob@100:               ctrlX = tmpArray[j];
rob@100:               ctrlY = tmpArray[j + 1];
rob@100:               endX  = tmpArray[j + 2];
rob@100:               endY  = tmpArray[j + 3];
rob@100:               this.parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 113) { // q - quadratic curve to (relative)
rob@100:           if (tmpArray.length >= 4 && tmpArray.length % 4 === 0) {
rob@100:             // need one+ multiples of 4 co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=4) {
rob@100:               ctrlX = cx + tmpArray[j];
rob@100:               ctrlY = cy + tmpArray[j + 1];
rob@100:               endX  = cx + tmpArray[j + 2];
rob@100:               endY  = cy + tmpArray[j + 3];
rob@100:               this.parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 84) {
rob@100:           // T - quadratic curve to shorthand (absolute)
rob@100:           if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) {
rob@100:             // need one+ pairs of co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=2) {
rob@100:               if (lastInstruction.toLowerCase() ===  "q" ||
rob@100:                   lastInstruction.toLowerCase() ===  "t") {
rob@100:                 ppx   = this.vertices[this.vertices.length-2][0];
rob@100:                 ppy   = this.vertices[this.vertices.length-2][1];
rob@100:                 px    = this.vertices[this.vertices.length-1][0];
rob@100:                 py    = this.vertices[this.vertices.length-1][1];
rob@100:                 ctrlX = px + (px - ppx);
rob@100:                 ctrlY = py + (py - ppy);
rob@100:               } else {
rob@100:                 // If there is no previous command or if the previous command
rob@100:                 // was not a Q, q, T or t, assume the control point is
rob@100:                 // coincident with the current point.
rob@100:                 ctrlX = cx;
rob@100:                 ctrlY = cy;
rob@100:               }
rob@100:               endX  = tmpArray[j];
rob@100:               endY  = tmpArray[j + 1];
rob@100:               this.parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 116) {
rob@100:           // t - quadratic curve to shorthand (relative)
rob@100:           if (tmpArray.length >= 2 && tmpArray.length % 2 === 0) {
rob@100:             // need one+ pairs of co-ordinates
rob@100:             for (j = 0, k = tmpArray.length; j < k; j+=2) {
rob@100:               if (lastInstruction.toLowerCase() ===  "q" ||
rob@100:                   lastInstruction.toLowerCase() ===  "t") {
rob@100:                 ppx   = this.vertices[this.vertices.length-2][0];
rob@100:                 ppy   = this.vertices[this.vertices.length-2][1];
rob@100:                 px    = this.vertices[this.vertices.length-1][0];
rob@100:                 py    = this.vertices[this.vertices.length-1][1];
rob@100:                 ctrlX = px + (px - ppx);
rob@100:                 ctrlY = py + (py - ppy);
rob@100:               } else {
rob@100:                 // If there is no previous command or if the previous command
rob@100:                 // was not a Q, q, T or t, assume the control point is
rob@100:                 // coincident with the current point.
rob@100:                 ctrlX = cx;
rob@100:                 ctrlY = cy;
rob@100:               }
rob@100:               endX  = cx + tmpArray[j];
rob@100:               endY  = cy + tmpArray[j + 1];
rob@100:               this.parsePathQuadto(cx, cy, ctrlX, ctrlY, endX, endY);
rob@100:               cx = endX;
rob@100:               cy = endY;
rob@100:             }
rob@100:           }
rob@100:         } else if (valOf === 90 || valOf === 122) { // Z or z (these do the same thing)
rob@100:           this.close = true;
rob@100:         }
rob@100:         lastInstruction = command.toString();
rob@100:       } else { i++;}
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parsePath() helper function
rob@100:    *
rob@100:    * @see PShapeSVG#parsePath
rob@100:    */
rob@100:   PShapeSVG.prototype.parsePathQuadto = function(x1, y1, cx, cy, x2, y2) {
rob@100:     if (this.vertices.length > 0) {
rob@100:       this.parsePathCode(PConstants.BEZIER_VERTEX);
rob@100:       // x1/y1 already covered by last moveto, lineto, or curveto
rob@100:       this.parsePathVertex(x1 + ((cx-x1)*2/3), y1 + ((cy-y1)*2/3));
rob@100:       this.parsePathVertex(x2 + ((cx-x2)*2/3), y2 + ((cy-y2)*2/3));
rob@100:       this.parsePathVertex(x2, y2);
rob@100:     } else {
rob@100:       throw ("Path must start with M/m");
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parsePath() helper function
rob@100:    *
rob@100:    * @see PShapeSVG#parsePath
rob@100:    */
rob@100:   PShapeSVG.prototype.parsePathCurveto = function(x1,  y1, x2, y2, x3, y3) {
rob@100:     if (this.vertices.length > 0) {
rob@100:       this.parsePathCode(PConstants.BEZIER_VERTEX );
rob@100:       this.parsePathVertex(x1, y1);
rob@100:       this.parsePathVertex(x2, y2);
rob@100:       this.parsePathVertex(x3, y3);
rob@100:     } else {
rob@100:       throw ("Path must start with M/m");
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parsePath() helper function
rob@100:    *
rob@100:    * @see PShapeSVG#parsePath
rob@100:    */
rob@100:   PShapeSVG.prototype.parsePathLineto = function(px, py) {
rob@100:     if (this.vertices.length > 0) {
rob@100:       this.parsePathCode(PConstants.VERTEX);
rob@100:       this.parsePathVertex(px, py);
rob@100:       // add property to distinguish between curContext.moveTo
rob@100:       // or curContext.lineTo
rob@100:       this.vertices[this.vertices.length-1].moveTo = false;
rob@100:     } else {
rob@100:       throw ("Path must start with M/m");
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   PShapeSVG.prototype.parsePathMoveto = function(px, py) {
rob@100:     if (this.vertices.length > 0) {
rob@100:       this.parsePathCode(PConstants.BREAK);
rob@100:     }
rob@100:     this.parsePathCode(PConstants.VERTEX);
rob@100:     this.parsePathVertex(px, py);
rob@100:     // add property to distinguish between curContext.moveTo
rob@100:     // or curContext.lineTo
rob@100:     this.vertices[this.vertices.length-1].moveTo = true;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parsePath() helper function
rob@100:    *
rob@100:    * @see PShapeSVG#parsePath
rob@100:    */
rob@100:   PShapeSVG.prototype.parsePathVertex = function(x,  y) {
rob@100:     var verts = [];
rob@100:     verts[0]  = x;
rob@100:     verts[1]  = y;
rob@100:     this.vertices.push(verts);
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parsePath() helper function
rob@100:    *
rob@100:    * @see PShapeSVG#parsePath
rob@100:    */
rob@100:   PShapeSVG.prototype.parsePathCode = function(what) {
rob@100:     this.vertexCodes.push(what);
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parsePoly() function parses a polyline or polygon from an SVG file.
rob@100:    *
rob@100:    * @param {boolean}val true if shape is closed (polygon), false if not (polyline)
rob@100:    */
rob@100:   PShapeSVG.prototype.parsePoly = function(val) {
rob@100:     this.family    = PConstants.PATH;
rob@100:     this.close     = val;
rob@100:     var pointsAttr = CommonFunctions.trim(this.element.getStringAttribute("points").replace(/[,\s]+/g,' '));
rob@100:     if (pointsAttr !== null) {
rob@100:       //split into array
rob@100:       var pointsBuffer = pointsAttr.split(" ");
rob@100:       if (pointsBuffer.length % 2 === 0) {
rob@100:         for (var i = 0, j = pointsBuffer.length; i < j; i++) {
rob@100:           var verts = [];
rob@100:           verts[0]  = pointsBuffer[i];
rob@100:           verts[1]  = pointsBuffer[++i];
rob@100:           this.vertices.push(verts);
rob@100:         }
rob@100:       } else {
rob@100:         throw("Error parsing polygon points: odd number of coordinates provided");
rob@100:       }
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseRect() function parses a rect from an SVG file.
rob@100:    */
rob@100:   PShapeSVG.prototype.parseRect = function() {
rob@100:     this.kind      = PConstants.RECT;
rob@100:     this.family    = PConstants.PRIMITIVE;
rob@100:     this.params    = [];
rob@100:     this.params[0] = this.element.getFloatAttribute("x");
rob@100:     this.params[1] = this.element.getFloatAttribute("y");
rob@100:     this.params[2] = this.element.getFloatAttribute("width");
rob@100:     this.params[3] = this.element.getFloatAttribute("height");
rob@100:     if (this.params[2] < 0 || this.params[3] < 0) {
rob@100:       throw("svg error: negative width or height found while parsing <rect>");
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseEllipse() function handles parsing ellipse and circle tags.
rob@100:    *
rob@100:    * @param {boolean}val true if this is a circle and not an ellipse
rob@100:    */
rob@100:   PShapeSVG.prototype.parseEllipse = function(val) {
rob@100:     this.kind   = PConstants.ELLIPSE;
rob@100:     this.family = PConstants.PRIMITIVE;
rob@100:     this.params = [];
rob@100: 
rob@100:     this.params[0] = this.element.getFloatAttribute("cx") | 0 ;
rob@100:     this.params[1] = this.element.getFloatAttribute("cy") | 0;
rob@100: 
rob@100:     var rx, ry;
rob@100:     if (val) {
rob@100:       rx = ry = this.element.getFloatAttribute("r");
rob@100:       if (rx < 0) {
rob@100:         throw("svg error: negative radius found while parsing <circle>");
rob@100:       }
rob@100:     } else {
rob@100:       rx = this.element.getFloatAttribute("rx");
rob@100:       ry = this.element.getFloatAttribute("ry");
rob@100:       if (rx < 0 || ry < 0) {
rob@100:         throw("svg error: negative x-axis radius or y-axis radius found while parsing <ellipse>");
rob@100:       }
rob@100:     }
rob@100:     this.params[0] -= rx;
rob@100:     this.params[1] -= ry;
rob@100: 
rob@100:     this.params[2] = rx*2;
rob@100:     this.params[3] = ry*2;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseLine() function handles parsing line tags.
rob@100:    *
rob@100:    * @param {boolean}val true if this is a circle and not an ellipse
rob@100:    */
rob@100:   PShapeSVG.prototype.parseLine = function() {
rob@100:     this.kind = PConstants.LINE;
rob@100:     this.family = PConstants.PRIMITIVE;
rob@100:     this.params = [];
rob@100:     this.params[0] = this.element.getFloatAttribute("x1");
rob@100:     this.params[1] = this.element.getFloatAttribute("y1");
rob@100:     this.params[2] = this.element.getFloatAttribute("x2");
rob@100:     this.params[3] = this.element.getFloatAttribute("y2");
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseColors() function handles parsing the opacity, strijem stroke-width, stroke-linejoin,stroke-linecap, fill, and style attributes
rob@100:    *
rob@100:    * @param {XMLElement}element the element of which attributes to parse
rob@100:    */
rob@100:   PShapeSVG.prototype.parseColors = function(element) {
rob@100:     if (element.hasAttribute("opacity")) {
rob@100:       this.setOpacity(element.getAttribute("opacity"));
rob@100:     }
rob@100:     if (element.hasAttribute("stroke")) {
rob@100:       this.setStroke(element.getAttribute("stroke"));
rob@100:     }
rob@100:     if (element.hasAttribute("stroke-width")) {
rob@100:       // if NaN (i.e. if it's 'inherit') then default
rob@100:       // back to the inherit setting
rob@100:       this.setStrokeWeight(element.getAttribute("stroke-width"));
rob@100:     }
rob@100:     if (element.hasAttribute("stroke-linejoin") ) {
rob@100:       this.setStrokeJoin(element.getAttribute("stroke-linejoin"));
rob@100:     }
rob@100:     if (element.hasAttribute("stroke-linecap")) {
rob@100:       this.setStrokeCap(element.getStringAttribute("stroke-linecap"));
rob@100:     }
rob@100:     // fill defaults to black (though stroke defaults to "none")
rob@100:     // http://www.w3.org/TR/SVG/painting.html#FillProperties
rob@100:     if (element.hasAttribute("fill")) {
rob@100:       this.setFill(element.getStringAttribute("fill"));
rob@100:     }
rob@100:     if (element.hasAttribute("style")) {
rob@100:       var styleText   = element.getStringAttribute("style");
rob@100:       var styleTokens = styleText.toString().split( ";" );
rob@100: 
rob@100:       for (var i = 0, j = styleTokens.length; i < j; i++) {
rob@100:         var tokens = CommonFunctions.trim(styleTokens[i].split( ":" ));
rob@100:         if (tokens[0] === "fill") {
rob@100:             this.setFill(tokens[1]);
rob@100:         } else if (tokens[0] === "fill-opacity") {
rob@100:             this.setFillOpacity(tokens[1]);
rob@100:         } else if (tokens[0] === "stroke") {
rob@100:             this.setStroke(tokens[1]);
rob@100:         } else if (tokens[0] === "stroke-width") {
rob@100:             this.setStrokeWeight(tokens[1]);
rob@100:         } else if (tokens[0] === "stroke-linecap") {
rob@100:             this.setStrokeCap(tokens[1]);
rob@100:         } else if (tokens[0] === "stroke-linejoin") {
rob@100:             this.setStrokeJoin(tokens[1]);
rob@100:         } else if (tokens[0] === "stroke-opacity") {
rob@100:             this.setStrokeOpacity(tokens[1]);
rob@100:         } else if (tokens[0] === "opacity") {
rob@100:             this.setOpacity(tokens[1]);
rob@100:         } // Other attributes are not yet implemented
rob@100:       }
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} opacityText the value of fillOpacity
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setFillOpacity = function(opacityText) {
rob@100:     this.fillOpacity = parseFloat(opacityText);
rob@100:     this.fillColor   = this.fillOpacity * 255  << 24 |
rob@100:                        this.fillColor & 0xFFFFFF;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} fillText the value of fill
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setFill = function (fillText) {
rob@100:     var opacityMask = this.fillColor & 0xFF000000;
rob@100:     if (fillText === "none") {
rob@100:       this.fill = false;
rob@100:     } else if (fillText.indexOf("#") === 0) {
rob@100:       this.fill      = true;
rob@100:       if (fillText.length === 4) {
rob@100:         // convert #00F to #0000FF
rob@100:         fillText = fillText.replace(/#(.)(.)(.)/,"#$1$1$2$2$3$3");
rob@100:       }
rob@100:       this.fillColor = opacityMask |
rob@100:                        (parseInt(fillText.substring(1), 16 )) &
rob@100:                        0xFFFFFF;
rob@100:     } else if (fillText.indexOf("rgb") === 0) {
rob@100:       this.fill      = true;
rob@100:       this.fillColor = opacityMask | this.parseRGB(fillText);
rob@100:     } else if (fillText.indexOf("url(#") === 0) {
rob@100:       this.fillName = fillText.substring(5, fillText.length - 1 );
rob@100:     } else if (colors[fillText]) {
rob@100:       this.fill      = true;
rob@100:       this.fillColor = opacityMask |
rob@100:                        (parseInt(colors[fillText].substring(1), 16)) &
rob@100:                        0xFFFFFF;
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} opacity the value of opacity
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setOpacity = function(opacity) {
rob@100:     this.strokeColor = parseFloat(opacity) * 255 << 24 |
rob@100:                        this.strokeColor & 0xFFFFFF;
rob@100:     this.fillColor   = parseFloat(opacity) * 255 << 24 |
rob@100:                        this.fillColor & 0xFFFFFF;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} strokeText the value to set stroke to
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setStroke = function(strokeText) {
rob@100:     var opacityMask = this.strokeColor & 0xFF000000;
rob@100:     if (strokeText === "none") {
rob@100:       this.stroke = false;
rob@100:     } else if (strokeText.charAt( 0 ) === "#") {
rob@100:       this.stroke      = true;
rob@100:       if (strokeText.length === 4) {
rob@100:         // convert #00F to #0000FF
rob@100:         strokeText = strokeText.replace(/#(.)(.)(.)/,"#$1$1$2$2$3$3");
rob@100:       }
rob@100:       this.strokeColor = opacityMask |
rob@100:                          (parseInt( strokeText.substring( 1 ), 16 )) &
rob@100:                          0xFFFFFF;
rob@100:     } else if (strokeText.indexOf( "rgb" ) === 0 ) {
rob@100:       this.stroke = true;
rob@100:       this.strokeColor = opacityMask | this.parseRGB(strokeText);
rob@100:     } else if (strokeText.indexOf( "url(#" ) === 0) {
rob@100:       this.strokeName = strokeText.substring(5, strokeText.length - 1);
rob@100:     } else if (colors[strokeText]) {
rob@100:       this.stroke      = true;
rob@100:       this.strokeColor = opacityMask |
rob@100:                          (parseInt(colors[strokeText].substring(1), 16)) &
rob@100:                          0xFFFFFF;
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} weight the value to set strokeWeight to
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setStrokeWeight = function(weight) {
rob@100:     this.strokeWeight = this.parseUnitSize(weight);
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} linejoin the value to set strokeJoin to
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setStrokeJoin = function(linejoin) {
rob@100:     if (linejoin === "miter") {
rob@100:       this.strokeJoin = PConstants.MITER;
rob@100: 
rob@100:     } else if (linejoin === "round") {
rob@100:       this.strokeJoin = PConstants.ROUND;
rob@100: 
rob@100:     } else if (linejoin === "bevel") {
rob@100:       this.strokeJoin = PConstants.BEVEL;
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} linecap the value to set strokeCap to
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setStrokeCap = function (linecap) {
rob@100:     if (linecap === "butt") {
rob@100:       this.strokeCap = PConstants.SQUARE;
rob@100: 
rob@100:     } else if (linecap === "round") {
rob@100:       this.strokeCap = PConstants.ROUND;
rob@100: 
rob@100:     } else if (linecap === "square") {
rob@100:       this.strokeCap = PConstants.PROJECT;
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * PShapeSVG.parseColors() helper function
rob@100:    *
rob@100:    * @param {String} opacityText the value to set stroke opacity to
rob@100:    *
rob@100:    * @see PShapeSVG#parseColors
rob@100:    */
rob@100:   PShapeSVG.prototype.setStrokeOpacity =  function (opacityText) {
rob@100:     this.strokeOpacity = parseFloat(opacityText);
rob@100:     this.strokeColor   = this.strokeOpacity * 255 << 24 |
rob@100:                          this.strokeColor &
rob@100:                          0xFFFFFF;
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseRGB() function parses an rbg() color string and returns a color int
rob@100:    *
rob@100:    * @param {String} color the color to parse in rbg() format
rob@100:    *
rob@100:    * @return {int} the equivalent color int
rob@100:    */
rob@100:   PShapeSVG.prototype.parseRGB = function(color) {
rob@100:     var sub    = color.substring(color.indexOf('(') + 1, color.indexOf(')'));
rob@100:     var values = sub.split(", ");
rob@100:     return (values[0] << 16) | (values[1] << 8) | (values[2]);
rob@100:   };
rob@100:   /**
rob@100:    * @member PShapeSVG
rob@100:    * The parseUnitSize() function parse a size that may have a suffix for its units.
rob@100:    * Ignoring cases where this could also be a percentage.
rob@100:    * The <A HREF="http://www.w3.org/TR/SVG/coords.html#Units">units</A> spec:
rob@100:    * <UL>
rob@100:    * <LI>"1pt" equals "1.25px" (and therefore 1.25 user units)
rob@100:    * <LI>"1pc" equals "15px" (and therefore 15 user units)
rob@100:    * <LI>"1mm" would be "3.543307px" (3.543307 user units)
rob@100:    * <LI>"1cm" equals "35.43307px" (and therefore 35.43307 user units)
rob@100:    * <LI>"1in" equals "90px" (and therefore 90 user units)
rob@100:    * </UL>
rob@100:    */
rob@100:   PShapeSVG.prototype.parseUnitSize = function (text) {
rob@100:     var len = text.length - 2;
rob@100:     if (len < 0) { return text; }
rob@100:     if (text.indexOf("pt") === len) {
rob@100:       return parseFloat(text.substring(0, len)) * 1.25;
rob@100:     }
rob@100:     if (text.indexOf("pc") === len) {
rob@100:       return parseFloat( text.substring( 0, len)) * 15;
rob@100:     }
rob@100:     if (text.indexOf("mm") === len) {
rob@100:       return parseFloat( text.substring(0, len)) * 3.543307;
rob@100:     }
rob@100:     if (text.indexOf("cm") === len) {
rob@100:       return parseFloat(text.substring(0, len)) * 35.43307;
rob@100:     }
rob@100:     if (text.indexOf("in") === len) {
rob@100:       return parseFloat(text.substring(0, len)) * 90;
rob@100:     }
rob@100:     if (text.indexOf("px") === len) {
rob@100:       return parseFloat(text.substring(0, len));
rob@100:     }
rob@100:     return parseFloat(text);
rob@100:   };
rob@100: 
rob@100:   return PShapeSVG;
rob@100: };
rob@100: 
rob@100: },{}],17:[function(require,module,exports){
rob@100: module.exports = function(options, undef) {
rob@100:   var PConstants = options.PConstants;
rob@100: 
rob@100:   function PVector(x, y, z) {
rob@100:     this.x = x || 0;
rob@100:     this.y = y || 0;
rob@100:     this.z = z || 0;
rob@100:   }
rob@100: 
rob@100:   PVector.fromAngle = function(angle, v) {
rob@100:     if (v === undef || v === null) {
rob@100:       v = new PVector();
rob@100:     }
rob@100:     v.x = Math.cos(angle);
rob@100:     v.y = Math.sin(angle);
rob@100:     return v;
rob@100:   };
rob@100: 
rob@100:   PVector.random2D = function(v) {
rob@100:     return PVector.fromAngle(Math.random() * PConstants.TWO_PI, v);
rob@100:   };
rob@100: 
rob@100:   PVector.random3D = function(v) {
rob@100:     var angle = Math.random() * PConstants.TWO_PI;
rob@100:     var vz = Math.random() * 2 - 1;
rob@100:     var mult = Math.sqrt(1 - vz * vz);
rob@100:     var vx = mult * Math.cos(angle);
rob@100:     var vy = mult * Math.sin(angle);
rob@100:     if (v === undef || v === null) {
rob@100:       v = new PVector(vx, vy, vz);
rob@100:     } else {
rob@100:       v.set(vx, vy, vz);
rob@100:     }
rob@100:     return v;
rob@100:   };
rob@100: 
rob@100:   PVector.dist = function(v1, v2) {
rob@100:     return v1.dist(v2);
rob@100:   };
rob@100: 
rob@100:   PVector.dot = function(v1, v2) {
rob@100:     return v1.dot(v2);
rob@100:   };
rob@100: 
rob@100:   PVector.cross = function(v1, v2) {
rob@100:     return v1.cross(v2);
rob@100:   };
rob@100: 
rob@100:   PVector.sub = function(v1, v2) {
rob@100:     return new PVector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
rob@100:   };
rob@100: 
rob@100:   PVector.angleBetween = function(v1, v2) {
rob@100:     return Math.acos(v1.dot(v2) / (v1.mag() * v2.mag()));
rob@100:   };
rob@100: 
rob@100:   PVector.lerp = function(v1, v2, amt) {
rob@100:     // non-static lerp mutates object, but this version returns a new vector
rob@100:     var retval = new PVector(v1.x, v1.y, v1.z);
rob@100:     retval.lerp(v2, amt);
rob@100:     return retval;
rob@100:   };
rob@100: 
rob@100:   // Common vector operations for PVector
rob@100:   PVector.prototype = {
rob@100:     set: function(v, y, z) {
rob@100:       if (arguments.length === 1) {
rob@100:         this.set(v.x || v[0] || 0,
rob@100:                  v.y || v[1] || 0,
rob@100:                  v.z || v[2] || 0);
rob@100:       } else {
rob@100:         this.x = v;
rob@100:         this.y = y;
rob@100:         this.z = z;
rob@100:       }
rob@100:     },
rob@100:     get: function() {
rob@100:       return new PVector(this.x, this.y, this.z);
rob@100:     },
rob@100:     mag: function() {
rob@100:       var x = this.x,
rob@100:           y = this.y,
rob@100:           z = this.z;
rob@100:       return Math.sqrt(x * x + y * y + z * z);
rob@100:     },
rob@100:     magSq: function() {
rob@100:       var x = this.x,
rob@100:           y = this.y,
rob@100:           z = this.z;
rob@100:       return (x * x + y * y + z * z);
rob@100:     },
rob@100:     setMag: function(v_or_len, len) {
rob@100:       if (len === undef) {
rob@100:         len = v_or_len;
rob@100:         this.normalize();
rob@100:         this.mult(len);
rob@100:       } else {
rob@100:         var v = v_or_len;
rob@100:         v.normalize();
rob@100:         v.mult(len);
rob@100:         return v;
rob@100:       }
rob@100:     },
rob@100:     add: function(v, y, z) {
rob@100:       if (arguments.length === 1) {
rob@100:         this.x += v.x;
rob@100:         this.y += v.y;
rob@100:         this.z += v.z;
rob@100:       } else {
rob@100:         this.x += v;
rob@100:         this.y += y;
rob@100:         this.z += z;
rob@100:       }
rob@100:     },
rob@100:     sub: function(v, y, z) {
rob@100:       if (arguments.length === 1) {
rob@100:         this.x -= v.x;
rob@100:         this.y -= v.y;
rob@100:         this.z -= v.z;
rob@100:       } else {
rob@100:         this.x -= v;
rob@100:         this.y -= y;
rob@100:         this.z -= z;
rob@100:       }
rob@100:     },
rob@100:     mult: function(v) {
rob@100:       if (typeof v === 'number') {
rob@100:         this.x *= v;
rob@100:         this.y *= v;
rob@100:         this.z *= v;
rob@100:       } else {
rob@100:         this.x *= v.x;
rob@100:         this.y *= v.y;
rob@100:         this.z *= v.z;
rob@100:       }
rob@100:     },
rob@100:     div: function(v) {
rob@100:       if (typeof v === 'number') {
rob@100:         this.x /= v;
rob@100:         this.y /= v;
rob@100:         this.z /= v;
rob@100:       } else {
rob@100:         this.x /= v.x;
rob@100:         this.y /= v.y;
rob@100:         this.z /= v.z;
rob@100:       }
rob@100:     },
rob@100:     rotate: function(angle) {
rob@100:       var prev_x = this.x;
rob@100:       var c = Math.cos(angle);
rob@100:       var s = Math.sin(angle);
rob@100:       this.x = c * this.x - s * this.y;
rob@100:       this.y = s * prev_x + c * this.y;
rob@100:     },
rob@100:     dist: function(v) {
rob@100:       var dx = this.x - v.x,
rob@100:           dy = this.y - v.y,
rob@100:           dz = this.z - v.z;
rob@100:       return Math.sqrt(dx * dx + dy * dy + dz * dz);
rob@100:     },
rob@100:     dot: function(v, y, z) {
rob@100:       if (arguments.length === 1) {
rob@100:         return (this.x * v.x + this.y * v.y + this.z * v.z);
rob@100:       }
rob@100:       return (this.x * v + this.y * y + this.z * z);
rob@100:     },
rob@100:     cross: function(v) {
rob@100:       var x = this.x,
rob@100:           y = this.y,
rob@100:           z = this.z;
rob@100:       return new PVector(y * v.z - v.y * z,
rob@100:                          z * v.x - v.z * x,
rob@100:                          x * v.y - v.x * y);
rob@100:     },
rob@100:     lerp: function(v_or_x, amt_or_y, z, amt) {
rob@100:       var lerp_val = function(start, stop, amt) {
rob@100:         return start + (stop - start) * amt;
rob@100:       };
rob@100:       var x, y;
rob@100:       if (arguments.length === 2) {
rob@100:         // given vector and amt
rob@100:         amt = amt_or_y;
rob@100:         x = v_or_x.x;
rob@100:         y = v_or_x.y;
rob@100:         z = v_or_x.z;
rob@100:       } else {
rob@100:         // given x, y, z and amt
rob@100:         x = v_or_x;
rob@100:         y = amt_or_y;
rob@100:       }
rob@100:       this.x = lerp_val(this.x, x, amt);
rob@100:       this.y = lerp_val(this.y, y, amt);
rob@100:       this.z = lerp_val(this.z, z, amt);
rob@100:     },
rob@100:     normalize: function() {
rob@100:       var m = this.mag();
rob@100:       if (m > 0) {
rob@100:         this.div(m);
rob@100:       }
rob@100:     },
rob@100:     limit: function(high) {
rob@100:       if (this.mag() > high) {
rob@100:         this.normalize();
rob@100:         this.mult(high);
rob@100:       }
rob@100:     },
rob@100:     heading: function() {
rob@100:       return (-Math.atan2(-this.y, this.x));
rob@100:     },
rob@100:     heading2D: function() {
rob@100:       return this.heading();
rob@100:     },
rob@100:     toString: function() {
rob@100:       return "[" + this.x + ", " + this.y + ", " + this.z + "]";
rob@100:     },
rob@100:     array: function() {
rob@100:       return [this.x, this.y, this.z];
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   function createPVectorMethod(method) {
rob@100:     return function(v1, v2) {
rob@100:       var v = v1.get();
rob@100:       v[method](v2);
rob@100:       return v;
rob@100:     };
rob@100:   }
rob@100: 
rob@100:   for (var method in PVector.prototype) {
rob@100:     if (PVector.prototype.hasOwnProperty(method) && !PVector.hasOwnProperty(method)) {
rob@100:       PVector[method] = createPVectorMethod(method);
rob@100:     }
rob@100:   }
rob@100: 
rob@100:   return PVector;
rob@100: };
rob@100: 
rob@100: 
rob@100: },{}],18:[function(require,module,exports){
rob@100: /**
rob@100:  * XMLAttribute is an attribute of a XML element.
rob@100:  *
rob@100:  * @param {String} fname     the full name of the attribute
rob@100:  * @param {String} n         the short name of the attribute
rob@100:  * @param {String} namespace the namespace URI of the attribute
rob@100:  * @param {String} v         the value of the attribute
rob@100:  * @param {String }t         the type of the attribute
rob@100:  *
rob@100:  * @see XMLElement
rob@100:  */
rob@100: module.exports = function() {
rob@100: 
rob@100:   var XMLAttribute = function (fname, n, nameSpace, v, t){
rob@100:     this.fullName = fname || "";
rob@100:     this.name = n || "";
rob@100:     this.namespace = nameSpace || "";
rob@100:     this.value = v;
rob@100:     this.type = t;
rob@100:   };
rob@100: 
rob@100:   XMLAttribute.prototype = {
rob@100:     /**
rob@100:      * @member XMLAttribute
rob@100:      * The getName() function returns the short name of the attribute
rob@100:      *
rob@100:      * @return {String} the short name of the attribute
rob@100:      */
rob@100:     getName: function() {
rob@100:       return this.name;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLAttribute
rob@100:      * The getFullName() function returns the full name of the attribute
rob@100:      *
rob@100:      * @return {String} the full name of the attribute
rob@100:      */
rob@100:     getFullName: function() {
rob@100:       return this.fullName;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLAttribute
rob@100:      * The getNamespace() function returns the namespace of the attribute
rob@100:      *
rob@100:      * @return {String} the namespace of the attribute
rob@100:      */
rob@100:     getNamespace: function() {
rob@100:       return this.namespace;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLAttribute
rob@100:      * The getValue() function returns the value of the attribute
rob@100:      *
rob@100:      * @return {String} the value of the attribute
rob@100:      */
rob@100:     getValue: function() {
rob@100:       return this.value;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLAttribute
rob@100:      * The getValue() function returns the type of the attribute
rob@100:      *
rob@100:      * @return {String} the type of the attribute
rob@100:      */
rob@100:     getType: function() {
rob@100:       return this.type;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLAttribute
rob@100:      * The setValue() function sets the value of the attribute
rob@100:      *
rob@100:      * @param {String} newval the new value
rob@100:      */
rob@100:     setValue: function(newval) {
rob@100:       this.value = newval;
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   return XMLAttribute;
rob@100: };
rob@100: 
rob@100: },{}],19:[function(require,module,exports){
rob@100: /**
rob@100:  * XMLElement is a representation of an XML object. The object is able to parse XML code
rob@100:  *
rob@100:  * @param {PApplet} parent   typically use "this"
rob@100:  * @param {String} filename  name of the XML/SVG file to load
rob@100:  * @param {String} xml       the xml/svg string
rob@100:  * @param {String} fullname  the full name of the element
rob@100:  * @param {String} namespace the namespace  of the URI
rob@100:  * @param {String} systemID  the system ID of the XML data where the element starts
rob@100:  * @param {Integer }lineNr   the line in the XML data where the element starts
rob@100:  */
rob@100: module.exports = function(options, undef) {
rob@100: 
rob@100:   var Browser = options.Browser,
rob@100:       ajax = Browser.ajax,
rob@100:       window = Browser.window,
rob@100:       XMLHttpRequest = window.XMLHttpRequest,
rob@100:       DOMParser = window.DOMParser,
rob@100:       XMLAttribute = options. XMLAttribute;
rob@100: 
rob@100:   var XMLElement = function(selector, uri, sysid, line) {
rob@100:     this.attributes = [];
rob@100:     this.children   = [];
rob@100:     this.fullName   = null;
rob@100:     this.name       = null;
rob@100:     this.namespace  = "";
rob@100:     this.content = null;
rob@100:     this.parent    = null;
rob@100:     this.lineNr     = "";
rob@100:     this.systemID   = "";
rob@100:     this.type = "ELEMENT";
rob@100: 
rob@100:     if (selector) {
rob@100:       if (typeof selector === "string") {
rob@100:         if (uri === undef && selector.indexOf("<") > -1) {
rob@100:           // load XML from text string
rob@100:           this.parse(selector);
rob@100:         } else {
rob@100:           // XMLElement(fullname, namespace, sysid, line) format
rob@100:           this.fullName = selector;
rob@100:           this.namespace = uri;
rob@100:           this.systemId = sysid;
rob@100:           this.lineNr = line;
rob@100:         }
rob@100:       } else {
rob@100:         // XMLElement(this,file) format
rob@100:         this.parse(uri);
rob@100:       }
rob@100:     }
rob@100:   };
rob@100:   /**
rob@100:    * XMLElement methods
rob@100:    * missing: enumerateAttributeNames(), enumerateChildren(),
rob@100:    * NOTE: parse does not work when a url is passed in
rob@100:    */
rob@100:   XMLElement.prototype = {
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The parse() function retrieves the file via ajax() and uses DOMParser()
rob@100:      * parseFromString method to make an XML document
rob@100:      * @addon
rob@100:      *
rob@100:      * @param {String} filename name of the XML/SVG file to load
rob@100:      *
rob@100:      * @throws ExceptionType Error loading document
rob@100:      *
rob@100:      * @see XMLElement#parseChildrenRecursive
rob@100:      */
rob@100:     parse: function(textstring) {
rob@100:       var xmlDoc;
rob@100:       try {
rob@100:         var extension = textstring.substring(textstring.length-4);
rob@100:         if (extension === ".xml" || extension === ".svg") {
rob@100:           textstring = ajax(textstring);
rob@100:         }
rob@100:         xmlDoc = new DOMParser().parseFromString(textstring, "text/xml");
rob@100:         var elements = xmlDoc.documentElement;
rob@100:         if (elements) {
rob@100:           this.parseChildrenRecursive(null, elements);
rob@100:         } else {
rob@100:           throw ("Error loading document");
rob@100:         }
rob@100:         return this;
rob@100:       } catch(e) {
rob@100:         throw(e);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * Internal helper function for parse().
rob@100:      * Loops through the
rob@100:      * @addon
rob@100:      *
rob@100:      * @param {XMLElement} parent                      the parent node
rob@100:      * @param {XML document childNodes} elementpath    the remaining nodes that need parsing
rob@100:      *
rob@100:      * @return {XMLElement} the new element and its children elements
rob@100:      */
rob@100:     parseChildrenRecursive: function (parent, elementpath){
rob@100:       var xmlelement,
rob@100:         xmlattribute,
rob@100:         tmpattrib,
rob@100:         l, m,
rob@100:         child;
rob@100:       if (!parent) { // this element is the root element
rob@100:         this.fullName = elementpath.localName;
rob@100:         this.name     = elementpath.nodeName;
rob@100:         xmlelement    = this;
rob@100:       } else { // this element has a parent
rob@100:         xmlelement         = new XMLElement(elementpath.nodeName);
rob@100:         xmlelement.parent  = parent;
rob@100:       }
rob@100: 
rob@100:       // if this is a text node, return a PCData element (parsed character data)
rob@100:       if (elementpath.nodeType === 3 && elementpath.textContent !== "") {
rob@100:         return this.createPCDataElement(elementpath.textContent);
rob@100:       }
rob@100: 
rob@100:       // if this is a CDATA node, return a CData element (unparsed character data)
rob@100:       if (elementpath.nodeType === 4) {
rob@100:        return this.createCDataElement(elementpath.textContent);
rob@100:       }
rob@100: 
rob@100:       // bind all attributes, if there are any
rob@100:       if (elementpath.attributes) {
rob@100:         for (l = 0, m = elementpath.attributes.length; l < m; l++) {
rob@100:           tmpattrib    = elementpath.attributes[l];
rob@100:           xmlattribute = new XMLAttribute(tmpattrib.getname,
rob@100:                                           tmpattrib.nodeName,
rob@100:                                           tmpattrib.namespaceURI,
rob@100:                                           tmpattrib.nodeValue,
rob@100:                                           tmpattrib.nodeType);
rob@100:           xmlelement.attributes.push(xmlattribute);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // bind all children, if there are any
rob@100:       if (elementpath.childNodes) {
rob@100:         for (l = 0, m = elementpath.childNodes.length; l < m; l++) {
rob@100:           var node = elementpath.childNodes[l];
rob@100:           child = xmlelement.parseChildrenRecursive(xmlelement, node);
rob@100:           if (child !== null) {
rob@100:             xmlelement.children.push(child);
rob@100:           }
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       return xmlelement;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The createElement() function Creates an empty element
rob@100:      *
rob@100:      * @param {String} fullName   the full name of the element
rob@100:      * @param {String} namespace  the namespace URI
rob@100:      * @param {String} systemID   the system ID of the XML data where the element starts
rob@100:      * @param {int} lineNr    the line in the XML data where the element starts
rob@100:      */
rob@100:     createElement: function (fullname, namespaceuri, sysid, line) {
rob@100:       if (sysid === undef) {
rob@100:         return new XMLElement(fullname, namespaceuri);
rob@100:       }
rob@100:       return new XMLElement(fullname, namespaceuri, sysid, line);
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The createPCDataElement() function creates an element to be used for #PCDATA content.
rob@100:      * Because Processing discards whitespace TEXT nodes, this method will not build an element
rob@100:      * if the passed content is empty after trimming for whitespace.
rob@100:      *
rob@100:      * @return {XMLElement} new "pcdata" XMLElement, or null if content consists only of whitespace
rob@100:      */
rob@100:     createPCDataElement: function (content, isCDATA) {
rob@100:       if (content.replace(/^\s+$/g,"") === "") {
rob@100:         return null;
rob@100:       }
rob@100:       var pcdata = new XMLElement();
rob@100:       pcdata.type = "TEXT";
rob@100:       pcdata.content = content;
rob@100:       return pcdata;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The createCDataElement() function creates an element to be used for CDATA content.
rob@100:      *
rob@100:      * @return {XMLElement} new "cdata" XMLElement, or null if content consists only of whitespace
rob@100:      */
rob@100:     createCDataElement: function (content) {
rob@100:       var cdata = this.createPCDataElement(content);
rob@100:       if (cdata === null) {
rob@100:         return null;
rob@100:       }
rob@100: 
rob@100:       cdata.type = "CDATA";
rob@100:       var htmlentities = {"<": "&lt;", ">": "&gt;", "'": "&apos;", '"': "&quot;"},
rob@100:           entity;
rob@100:       for (entity in htmlentities) {
rob@100:         if (!Object.hasOwnProperty(htmlentities,entity)) {
rob@100:           content = content.replace(new RegExp(entity, "g"), htmlentities[entity]);
rob@100:         }
rob@100:       }
rob@100:       cdata.cdata = content;
rob@100:       return cdata;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The hasAttribute() function returns whether an attribute exists
rob@100:      *
rob@100:      * @param {String} name      name of the attribute
rob@100:      * @param {String} namespace the namespace URI of the attribute
rob@100:      *
rob@100:      * @return {boolean} true if the attribute exists
rob@100:      */
rob@100:     hasAttribute: function () {
rob@100:       if (arguments.length === 1) {
rob@100:         return this.getAttribute(arguments[0]) !== null;
rob@100:       }
rob@100:       if (arguments.length === 2) {
rob@100:         return this.getAttribute(arguments[0],arguments[1]) !== null;
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The equals() function checks to see if the XMLElement being passed in equals another XMLElement
rob@100:      *
rob@100:      * @param {XMLElement} rawElement the element to compare to
rob@100:      *
rob@100:      * @return {boolean} true if the element equals another element
rob@100:      */
rob@100:     equals: function(other) {
rob@100:       if (!(other instanceof XMLElement)) {
rob@100:         return false;
rob@100:       }
rob@100:       var i, j;
rob@100:       if (this.fullName !== other.fullName) { return false; }
rob@100:       if (this.attributes.length !== other.getAttributeCount()) { return false; }
rob@100:       // attributes may be ordered differently
rob@100:       if (this.attributes.length !== other.attributes.length) { return false; }
rob@100:       var attr_name, attr_ns, attr_value, attr_type, attr_other;
rob@100:       for (i = 0, j = this.attributes.length; i < j; i++) {
rob@100:         attr_name = this.attributes[i].getName();
rob@100:         attr_ns = this.attributes[i].getNamespace();
rob@100:         attr_other = other.findAttribute(attr_name, attr_ns);
rob@100:         if (attr_other === null) { return false; }
rob@100:         if (this.attributes[i].getValue() !== attr_other.getValue()) { return false; }
rob@100:         if (this.attributes[i].getType() !== attr_other.getType()) { return false; }
rob@100:       }
rob@100:       // children must be ordered identically
rob@100:       if (this.children.length !== other.getChildCount()) { return false; }
rob@100:       if (this.children.length>0) {
rob@100:         var child1, child2;
rob@100:         for (i = 0, j = this.children.length; i < j; i++) {
rob@100:           child1 = this.getChild(i);
rob@100:           child2 = other.getChild(i);
rob@100:           if (!child1.equals(child2)) { return false; }
rob@100:         }
rob@100:         return true;
rob@100:       }
rob@100:       return (this.content === other.content);
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getContent() function returns the content of an element. If there is no such content, null is returned
rob@100:      *
rob@100:      * @return {String} the (possibly null) content
rob@100:      */
rob@100:     getContent: function(){
rob@100:       if (this.type === "TEXT" || this.type === "CDATA") {
rob@100:         return this.content;
rob@100:       }
rob@100:       var children = this.children;
rob@100:       if (children.length === 1 && (children[0].type === "TEXT" || children[0].type === "CDATA")) {
rob@100:         return children[0].content;
rob@100:       }
rob@100:       return null;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getAttribute() function returns the value of an attribute
rob@100:      *
rob@100:      * @param {String} name         the non-null full name of the attribute
rob@100:      * @param {String} namespace    the namespace URI, which may be null
rob@100:      * @param {String} defaultValue the default value of the attribute
rob@100:      *
rob@100:      * @return {String} the value, or defaultValue if the attribute does not exist
rob@100:      */
rob@100:     getAttribute: function (){
rob@100:       var attribute;
rob@100:       if (arguments.length === 2) {
rob@100:         attribute = this.findAttribute(arguments[0]);
rob@100:         if (attribute) {
rob@100:           return attribute.getValue();
rob@100:         }
rob@100:         return arguments[1];
rob@100:       } else if (arguments.length === 1) {
rob@100:         attribute = this.findAttribute(arguments[0]);
rob@100:         if (attribute) {
rob@100:           return attribute.getValue();
rob@100:         }
rob@100:         return null;
rob@100:       } else if (arguments.length === 3) {
rob@100:         attribute = this.findAttribute(arguments[0],arguments[1]);
rob@100:         if (attribute) {
rob@100:           return attribute.getValue();
rob@100:         }
rob@100:         return arguments[2];
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getStringAttribute() function returns the string attribute of the element
rob@100:      * If the <b>defaultValue</b> parameter is used and the attribute doesn't exist, the <b>defaultValue</b> value is returned.
rob@100:      * When calling the function without the <b>defaultValue</b> parameter, if the attribute doesn't exist, the value 0 is returned.
rob@100:      *
rob@100:      * @param name         the name of the attribute
rob@100:      * @param defaultValue value returned if the attribute is not found
rob@100:      *
rob@100:      * @return {String} the value, or defaultValue if the attribute does not exist
rob@100:      */
rob@100:     getStringAttribute: function() {
rob@100:       if (arguments.length === 1) {
rob@100:         return this.getAttribute(arguments[0]);
rob@100:       }
rob@100:       if (arguments.length === 2) {
rob@100:         return this.getAttribute(arguments[0], arguments[1]);
rob@100:       }
rob@100:       return this.getAttribute(arguments[0], arguments[1],arguments[2]);
rob@100:     },
rob@100:     /**
rob@100:      * Processing 1.5 XML API wrapper for the generic String
rob@100:      * attribute getter. This may only take one argument.
rob@100:      */
rob@100:     getString: function(attributeName) {
rob@100:       return this.getStringAttribute(attributeName);
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getFloatAttribute() function returns the float attribute of the element.
rob@100:      * If the <b>defaultValue</b> parameter is used and the attribute doesn't exist, the <b>defaultValue</b> value is returned.
rob@100:      * When calling the function without the <b>defaultValue</b> parameter, if the attribute doesn't exist, the value 0 is returned.
rob@100:      *
rob@100:      * @param name         the name of the attribute
rob@100:      * @param defaultValue value returned if the attribute is not found
rob@100:      *
rob@100:      * @return {float} the value, or defaultValue if the attribute does not exist
rob@100:      */
rob@100:     getFloatAttribute: function() {
rob@100:       if (arguments.length === 1 ) {
rob@100:         return parseFloat(this.getAttribute(arguments[0], 0));
rob@100:       }
rob@100:       if (arguments.length === 2 ) {
rob@100:         return this.getAttribute(arguments[0], arguments[1]);
rob@100:       }
rob@100:       return this.getAttribute(arguments[0], arguments[1],arguments[2]);
rob@100:     },
rob@100:     /**
rob@100:      * Processing 1.5 XML API wrapper for the generic float
rob@100:      * attribute getter. This may only take one argument.
rob@100:      */
rob@100:     getFloat: function(attributeName) {
rob@100:       return this.getFloatAttribute(attributeName);
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getIntAttribute() function returns the integer attribute of the element.
rob@100:      * If the <b>defaultValue</b> parameter is used and the attribute doesn't exist, the <b>defaultValue</b> value is returned.
rob@100:      * When calling the function without the <b>defaultValue</b> parameter, if the attribute doesn't exist, the value 0 is returned.
rob@100:      *
rob@100:      * @param name         the name of the attribute
rob@100:      * @param defaultValue value returned if the attribute is not found
rob@100:      *
rob@100:      * @return {int} the value, or defaultValue if the attribute does not exist
rob@100:      */
rob@100:     getIntAttribute: function () {
rob@100:       if (arguments.length === 1) {
rob@100:         return this.getAttribute( arguments[0], 0 );
rob@100:       }
rob@100:       if (arguments.length === 2) {
rob@100:         return this.getAttribute(arguments[0], arguments[1]);
rob@100:       }
rob@100:       return this.getAttribute(arguments[0], arguments[1],arguments[2]);
rob@100:     },
rob@100:     /**
rob@100:      * Processing 1.5 XML API wrapper for the generic int
rob@100:      * attribute getter. This may only take one argument.
rob@100:      */
rob@100:     getInt: function(attributeName) {
rob@100:       return this.getIntAttribute(attributeName);
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The hasChildren() function returns whether the element has children.
rob@100:      *
rob@100:      * @return {boolean} true if the element has children.
rob@100:      */
rob@100:     hasChildren: function () {
rob@100:       return this.children.length > 0 ;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The addChild() function adds a child element
rob@100:      *
rob@100:      * @param {XMLElement} child the non-null child to add.
rob@100:      */
rob@100:     addChild: function (child) {
rob@100:       if (child !== null) {
rob@100:         child.parent = this;
rob@100:         this.children.push(child);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The insertChild() function inserts a child element at the index provided
rob@100:      *
rob@100:      * @param {XMLElement} child  the non-null child to add.
rob@100:      * @param {int} index     where to put the child.
rob@100:      */
rob@100:     insertChild: function (child, index) {
rob@100:       if (child) {
rob@100:         if ((child.getLocalName() === null) && (! this.hasChildren())) {
rob@100:           var lastChild = this.children[this.children.length -1];
rob@100:           if (lastChild.getLocalName() === null) {
rob@100:               lastChild.setContent(lastChild.getContent() + child.getContent());
rob@100:               return;
rob@100:           }
rob@100:         }
rob@100:         child.parent = this;
rob@100:         this.children.splice(index,0,child);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getChild() returns the child XMLElement as specified by the <b>index</b> parameter.
rob@100:      * The value of the <b>index</b> parameter must be less than the total number of children to avoid going out of the array storing the child elements.
rob@100:      * When the <b>path</b> parameter is specified, then it will return all children that match that path. The path is a series of elements and sub-elements, separated by slashes.
rob@100:      *
rob@100:      * @param {int} index     where to put the child.
rob@100:      * @param {String} path       path to a particular element
rob@100:      *
rob@100:      * @return {XMLElement} the element
rob@100:      */
rob@100:     getChild: function (selector) {
rob@100:       if (typeof selector === "number") {
rob@100:         return this.children[selector];
rob@100:       }
rob@100:       if (selector.indexOf('/') !== -1) {
rob@100:         // path traversal is required
rob@100:         return this.getChildRecursive(selector.split("/"), 0);
rob@100:       }
rob@100:       var kid, kidName;
rob@100:       for (var i = 0, j = this.getChildCount(); i < j; i++) {
rob@100:         kid = this.getChild(i);
rob@100:         kidName = kid.getName();
rob@100:         if (kidName !== null && kidName === selector) {
rob@100:             return kid;
rob@100:         }
rob@100:       }
rob@100:       return null;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getChildren() returns all of the children as an XMLElement array.
rob@100:      * When the <b>path</b> parameter is specified, then it will return all children that match that path.
rob@100:      * The path is a series of elements and sub-elements, separated by slashes.
rob@100:      *
rob@100:      * @param {String} path       element name or path/to/element
rob@100:      *
rob@100:      * @return {XMLElement} array of child elements that match
rob@100:      *
rob@100:      * @see XMLElement#getChildCount()
rob@100:      * @see XMLElement#getChild()
rob@100:      */
rob@100:     getChildren: function(){
rob@100:       if (arguments.length === 1) {
rob@100:         if (typeof arguments[0] === "number") {
rob@100:           return this.getChild( arguments[0]);
rob@100:         }
rob@100:         if (arguments[0].indexOf('/') !== -1) { // path was given
rob@100:           return this.getChildrenRecursive( arguments[0].split("/"), 0);
rob@100:         }
rob@100:         var matches = [];
rob@100:         var kid, kidName;
rob@100:         for (var i = 0, j = this.getChildCount(); i < j; i++) {
rob@100:           kid = this.getChild(i);
rob@100:           kidName = kid.getName();
rob@100:           if (kidName !== null && kidName === arguments[0]) {
rob@100:             matches.push(kid);
rob@100:           }
rob@100:         }
rob@100:         return matches;
rob@100:       }
rob@100:       return this.children;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getChildCount() returns the number of children for the element.
rob@100:      *
rob@100:      * @return {int} the count
rob@100:      *
rob@100:      * @see XMLElement#getChild()
rob@100:      * @see XMLElement#getChildren()
rob@100:      */
rob@100:     getChildCount: function() {
rob@100:       return this.children.length;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * Internal helper function for getChild().
rob@100:      *
rob@100:      * @param {String[]} items   result of splitting the query on slashes
rob@100:      * @param {int} offset   where in the items[] array we're currently looking
rob@100:      *
rob@100:      * @return {XMLElement} matching element or null if no match
rob@100:      */
rob@100:     getChildRecursive: function (items, offset) {
rob@100:       // terminating clause: we are the requested candidate
rob@100:       if (offset === items.length) {
rob@100:         return this;
rob@100:       }
rob@100:       // continuation clause
rob@100:       var kid, kidName, matchName = items[offset];
rob@100:       for(var i = 0, j = this.getChildCount(); i < j; i++) {
rob@100:           kid = this.getChild(i);
rob@100:           kidName = kid.getName();
rob@100:           if (kidName !== null && kidName === matchName) {
rob@100:             return kid.getChildRecursive(items, offset+1);
rob@100:           }
rob@100:       }
rob@100:       return null;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * Internal helper function for getChildren().
rob@100:      *
rob@100:      * @param {String[]} items   result of splitting the query on slashes
rob@100:      * @param {int} offset   where in the items[] array we're currently looking
rob@100:      *
rob@100:      * @return {XMLElement[]} matching elements or empty array if no match
rob@100:      */
rob@100:     getChildrenRecursive: function (items, offset) {
rob@100:       if (offset === items.length-1) {
rob@100:         return this.getChildren(items[offset]);
rob@100:       }
rob@100:       var matches = this.getChildren(items[offset]);
rob@100:       var kidMatches = [];
rob@100:       for (var i = 0; i < matches.length; i++) {
rob@100:         kidMatches = kidMatches.concat(matches[i].getChildrenRecursive(items, offset+1));
rob@100:       }
rob@100:       return kidMatches;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The isLeaf() function returns whether the element is a leaf element.
rob@100:      *
rob@100:      * @return {boolean} true if the element has no children.
rob@100:      */
rob@100:     isLeaf: function() {
rob@100:       return !this.hasChildren();
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The listChildren() function put the names of all children into an array. Same as looping through
rob@100:      * each child and calling getName() on each XMLElement.
rob@100:      *
rob@100:      * @return {String[]} a list of element names.
rob@100:      */
rob@100:     listChildren: function() {
rob@100:       var arr = [];
rob@100:       for (var i = 0, j = this.children.length; i < j; i++) {
rob@100:         arr.push( this.getChild(i).getName());
rob@100:       }
rob@100:       return arr;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The removeAttribute() function removes an attribute
rob@100:      *
rob@100:      * @param {String} name        the non-null name of the attribute.
rob@100:      * @param {String} namespace   the namespace URI of the attribute, which may be null.
rob@100:      */
rob@100:     removeAttribute: function (name , namespace) {
rob@100:       this.namespace = namespace || "";
rob@100:       for (var i = 0, j = this.attributes.length; i < j; i++) {
rob@100:         if (this.attributes[i].getName() === name && this.attributes[i].getNamespace() === this.namespace) {
rob@100:           this.attributes.splice(i, 1);
rob@100:           break;
rob@100:         }
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The removeChild() removes a child element.
rob@100:      *
rob@100:      * @param {XMLElement} child      the the non-null child to be renoved
rob@100:      */
rob@100:     removeChild: function(child) {
rob@100:       if (child) {
rob@100:         for (var i = 0, j = this.children.length; i < j; i++) {
rob@100:           if (this.children[i].equals(child)) {
rob@100:             this.children.splice(i, 1);
rob@100:             break;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The removeChildAtIndex() removes the child located at a certain index
rob@100:      *
rob@100:      * @param {int} index      the index of the child, where the first child has index 0
rob@100:      */
rob@100:     removeChildAtIndex: function(index) {
rob@100:       if (this.children.length > index) { //make sure its not outofbounds
rob@100:         this.children.splice(index, 1);
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The findAttribute() function searches an attribute
rob@100:      *
rob@100:      * @param {String} name        fullName the non-null full name of the attribute
rob@100:      * @param {String} namespace   the name space, which may be null
rob@100:      *
rob@100:      * @return {XMLAttribute} the attribute, or null if the attribute does not exist.
rob@100:      */
rob@100:     findAttribute: function (name, namespace) {
rob@100:       this.namespace = namespace || "";
rob@100:       for (var i = 0, j = this.attributes.length; i < j; i++) {
rob@100:         if (this.attributes[i].getName() === name && this.attributes[i].getNamespace() === this.namespace) {
rob@100:            return this.attributes[i];
rob@100:         }
rob@100:       }
rob@100:       return null;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The setAttribute() function sets an attribute.
rob@100:      *
rob@100:      * @param {String} name        the non-null full name of the attribute
rob@100:      * @param {String} namespace   the non-null value of the attribute
rob@100:      */
rob@100:     setAttribute: function() {
rob@100:       var attr;
rob@100:       if (arguments.length === 3) {
rob@100:         var index = arguments[0].indexOf(':');
rob@100:         var name  = arguments[0].substring(index + 1);
rob@100:         attr      = this.findAttribute(name, arguments[1]);
rob@100:         if (attr) {
rob@100:           attr.setValue(arguments[2]);
rob@100:         } else {
rob@100:           attr = new XMLAttribute(arguments[0], name, arguments[1], arguments[2], "CDATA");
rob@100:           this.attributes.push(attr);
rob@100:         }
rob@100:       } else {
rob@100:         attr = this.findAttribute(arguments[0]);
rob@100:         if (attr) {
rob@100:           attr.setValue(arguments[1]);
rob@100:         } else {
rob@100:           attr = new XMLAttribute(arguments[0], arguments[0], null, arguments[1], "CDATA");
rob@100:           this.attributes.push(attr);
rob@100:         }
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * Processing 1.5 XML API wrapper for the generic String
rob@100:      * attribute setter. This must take two arguments.
rob@100:      */
rob@100:     setString: function(attribute, value) {
rob@100:       this.setAttribute(attribute, value);
rob@100:     },
rob@100:     /**
rob@100:      * Processing 1.5 XML API wrapper for the generic int
rob@100:      * attribute setter. This must take two arguments.
rob@100:      */
rob@100:     setInt: function(attribute, value) {
rob@100:       this.setAttribute(attribute, value);
rob@100:     },
rob@100:     /**
rob@100:      * Processing 1.5 XML API wrapper for the generic float
rob@100:      * attribute setter. This must take two arguments.
rob@100:      */
rob@100:     setFloat: function(attribute, value) {
rob@100:       this.setAttribute(attribute, value);
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The setContent() function sets the #PCDATA content. It is an error to call this method with a
rob@100:      * non-null value if there are child objects.
rob@100:      *
rob@100:      * @param {String} content     the (possibly null) content
rob@100:      */
rob@100:     setContent: function(content) {
rob@100:       if (this.children.length > 0) {
rob@100:         Processing.debug("Tried to set content for XMLElement with children"); }
rob@100:       this.content = content;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The setName() function sets the full name. This method also sets the short name and clears the
rob@100:      * namespace URI.
rob@100:      *
rob@100:      * @param {String} name        the non-null name
rob@100:      * @param {String} namespace   the namespace URI, which may be null.
rob@100:      */
rob@100:     setName: function() {
rob@100:       if (arguments.length === 1) {
rob@100:         this.name      = arguments[0];
rob@100:         this.fullName  = arguments[0];
rob@100:         this.namespace = null;
rob@100:       } else {
rob@100:         var index = arguments[0].indexOf(':');
rob@100:         if ((arguments[1] === null) || (index < 0)) {
rob@100:             this.name = arguments[0];
rob@100:         } else {
rob@100:             this.name = arguments[0].substring(index + 1);
rob@100:         }
rob@100:         this.fullName  = arguments[0];
rob@100:         this.namespace = arguments[1];
rob@100:       }
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getName() function returns the full name (i.e. the name including an eventual namespace
rob@100:      * prefix) of the element.
rob@100:      *
rob@100:      * @return {String} the name, or null if the element only contains #PCDATA.
rob@100:      */
rob@100:     getName: function() {
rob@100:       return this.fullName;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getLocalName() function returns the local name (i.e. the name excluding an eventual namespace
rob@100:      * prefix) of the element.
rob@100:      *
rob@100:      * @return {String} the name, or null if the element only contains #PCDATA.
rob@100:      */
rob@100:     getLocalName: function() {
rob@100:       return this.name;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The getAttributeCount() function returns the number of attributes for the node
rob@100:      * that this XMLElement represents.
rob@100:      *
rob@100:      * @return {int} the number of attributes in this XMLElement
rob@100:      */
rob@100:     getAttributeCount: function() {
rob@100:       return this.attributes.length;
rob@100:     },
rob@100:     /**
rob@100:      * @member XMLElement
rob@100:      * The toString() function returns the XML definition of an XMLElement.
rob@100:      *
rob@100:      * @return {String} the XML definition of this XMLElement
rob@100:      */
rob@100:     toString: function() {
rob@100:       // shortcut for text and cdata nodes
rob@100:       if (this.type === "TEXT") {
rob@100:         return this.content;
rob@100:       }
rob@100: 
rob@100:       if (this.type === "CDATA") {
rob@100:         return this.cdata;
rob@100:       }
rob@100: 
rob@100:       // real XMLElements
rob@100:       var tagstring = this.fullName;
rob@100:       var xmlstring =  "<" + tagstring;
rob@100:       var a,c;
rob@100: 
rob@100:       // serialize the attributes to XML string
rob@100:       for (a = 0; a<this.attributes.length; a++) {
rob@100:         var attr = this.attributes[a];
rob@100:         xmlstring += " "  + attr.getName() + "=" + '"' + attr.getValue() + '"';
rob@100:       }
rob@100: 
rob@100:       // serialize all children to XML string
rob@100:       if (this.children.length === 0) {
rob@100:         if (this.content==="") {
rob@100:           xmlstring += "/>";
rob@100:         } else {
rob@100:           xmlstring += ">" + this.content + "</"+tagstring+">";
rob@100:         }
rob@100:       } else {
rob@100:         xmlstring += ">";
rob@100:         for (c = 0; c<this.children.length; c++) {
rob@100:           xmlstring += this.children[c].toString();
rob@100:         }
rob@100:         xmlstring += "</" + tagstring + ">";
rob@100:       }
rob@100:       return xmlstring;
rob@100:      }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * static Processing 1.5 XML API wrapper for the
rob@100:    * parse method. This may only take one argument.
rob@100:    */
rob@100:   XMLElement.parse = function(xmlstring) {
rob@100:     var element = new XMLElement();
rob@100:     element.parse(xmlstring);
rob@100:     return element;
rob@100:   };
rob@100: 
rob@100:   return XMLElement;
rob@100: };
rob@100: 
rob@100: },{}],20:[function(require,module,exports){
rob@100: /**
rob@100:  * web colors, by name
rob@100:  */
rob@100: module.exports = {
rob@100:     aliceblue:            "#f0f8ff",
rob@100:     antiquewhite:         "#faebd7",
rob@100:     aqua:                 "#00ffff",
rob@100:     aquamarine:           "#7fffd4",
rob@100:     azure:                "#f0ffff",
rob@100:     beige:                "#f5f5dc",
rob@100:     bisque:               "#ffe4c4",
rob@100:     black:                "#000000",
rob@100:     blanchedalmond:       "#ffebcd",
rob@100:     blue:                 "#0000ff",
rob@100:     blueviolet:           "#8a2be2",
rob@100:     brown:                "#a52a2a",
rob@100:     burlywood:            "#deb887",
rob@100:     cadetblue:            "#5f9ea0",
rob@100:     chartreuse:           "#7fff00",
rob@100:     chocolate:            "#d2691e",
rob@100:     coral:                "#ff7f50",
rob@100:     cornflowerblue:       "#6495ed",
rob@100:     cornsilk:             "#fff8dc",
rob@100:     crimson:              "#dc143c",
rob@100:     cyan:                 "#00ffff",
rob@100:     darkblue:             "#00008b",
rob@100:     darkcyan:             "#008b8b",
rob@100:     darkgoldenrod:        "#b8860b",
rob@100:     darkgray:             "#a9a9a9",
rob@100:     darkgreen:            "#006400",
rob@100:     darkkhaki:            "#bdb76b",
rob@100:     darkmagenta:          "#8b008b",
rob@100:     darkolivegreen:       "#556b2f",
rob@100:     darkorange:           "#ff8c00",
rob@100:     darkorchid:           "#9932cc",
rob@100:     darkred:              "#8b0000",
rob@100:     darksalmon:           "#e9967a",
rob@100:     darkseagreen:         "#8fbc8f",
rob@100:     darkslateblue:        "#483d8b",
rob@100:     darkslategray:        "#2f4f4f",
rob@100:     darkturquoise:        "#00ced1",
rob@100:     darkviolet:           "#9400d3",
rob@100:     deeppink:             "#ff1493",
rob@100:     deepskyblue:          "#00bfff",
rob@100:     dimgray:              "#696969",
rob@100:     dodgerblue:           "#1e90ff",
rob@100:     firebrick:            "#b22222",
rob@100:     floralwhite:          "#fffaf0",
rob@100:     forestgreen:          "#228b22",
rob@100:     fuchsia:              "#ff00ff",
rob@100:     gainsboro:            "#dcdcdc",
rob@100:     ghostwhite:           "#f8f8ff",
rob@100:     gold:                 "#ffd700",
rob@100:     goldenrod:            "#daa520",
rob@100:     gray:                 "#808080",
rob@100:     green:                "#008000",
rob@100:     greenyellow:          "#adff2f",
rob@100:     honeydew:             "#f0fff0",
rob@100:     hotpink:              "#ff69b4",
rob@100:     indianred:            "#cd5c5c",
rob@100:     indigo:               "#4b0082",
rob@100:     ivory:                "#fffff0",
rob@100:     khaki:                "#f0e68c",
rob@100:     lavender:             "#e6e6fa",
rob@100:     lavenderblush:        "#fff0f5",
rob@100:     lawngreen:            "#7cfc00",
rob@100:     lemonchiffon:         "#fffacd",
rob@100:     lightblue:            "#add8e6",
rob@100:     lightcoral:           "#f08080",
rob@100:     lightcyan:            "#e0ffff",
rob@100:     lightgoldenrodyellow: "#fafad2",
rob@100:     lightgrey:            "#d3d3d3",
rob@100:     lightgreen:           "#90ee90",
rob@100:     lightpink:            "#ffb6c1",
rob@100:     lightsalmon:          "#ffa07a",
rob@100:     lightseagreen:        "#20b2aa",
rob@100:     lightskyblue:         "#87cefa",
rob@100:     lightslategray:       "#778899",
rob@100:     lightsteelblue:       "#b0c4de",
rob@100:     lightyellow:          "#ffffe0",
rob@100:     lime:                 "#00ff00",
rob@100:     limegreen:            "#32cd32",
rob@100:     linen:                "#faf0e6",
rob@100:     magenta:              "#ff00ff",
rob@100:     maroon:               "#800000",
rob@100:     mediumaquamarine:     "#66cdaa",
rob@100:     mediumblue:           "#0000cd",
rob@100:     mediumorchid:         "#ba55d3",
rob@100:     mediumpurple:         "#9370d8",
rob@100:     mediumseagreen:       "#3cb371",
rob@100:     mediumslateblue:      "#7b68ee",
rob@100:     mediumspringgreen:    "#00fa9a",
rob@100:     mediumturquoise:      "#48d1cc",
rob@100:     mediumvioletred:      "#c71585",
rob@100:     midnightblue:         "#191970",
rob@100:     mintcream:            "#f5fffa",
rob@100:     mistyrose:            "#ffe4e1",
rob@100:     moccasin:             "#ffe4b5",
rob@100:     navajowhite:          "#ffdead",
rob@100:     navy:                 "#000080",
rob@100:     oldlace:              "#fdf5e6",
rob@100:     olive:                "#808000",
rob@100:     olivedrab:            "#6b8e23",
rob@100:     orange:               "#ffa500",
rob@100:     orangered:            "#ff4500",
rob@100:     orchid:               "#da70d6",
rob@100:     palegoldenrod:        "#eee8aa",
rob@100:     palegreen:            "#98fb98",
rob@100:     paleturquoise:        "#afeeee",
rob@100:     palevioletred:        "#d87093",
rob@100:     papayawhip:           "#ffefd5",
rob@100:     peachpuff:            "#ffdab9",
rob@100:     peru:                 "#cd853f",
rob@100:     pink:                 "#ffc0cb",
rob@100:     plum:                 "#dda0dd",
rob@100:     powderblue:           "#b0e0e6",
rob@100:     purple:               "#800080",
rob@100:     red:                  "#ff0000",
rob@100:     rosybrown:            "#bc8f8f",
rob@100:     royalblue:            "#4169e1",
rob@100:     saddlebrown:          "#8b4513",
rob@100:     salmon:               "#fa8072",
rob@100:     sandybrown:           "#f4a460",
rob@100:     seagreen:             "#2e8b57",
rob@100:     seashell:             "#fff5ee",
rob@100:     sienna:               "#a0522d",
rob@100:     silver:               "#c0c0c0",
rob@100:     skyblue:              "#87ceeb",
rob@100:     slateblue:            "#6a5acd",
rob@100:     slategray:            "#708090",
rob@100:     snow:                 "#fffafa",
rob@100:     springgreen:          "#00ff7f",
rob@100:     steelblue:            "#4682b4",
rob@100:     tan:                  "#d2b48c",
rob@100:     teal:                 "#008080",
rob@100:     thistle:              "#d8bfd8",
rob@100:     tomato:               "#ff6347",
rob@100:     turquoise:            "#40e0d0",
rob@100:     violet:               "#ee82ee",
rob@100:     wheat:                "#f5deb3",
rob@100:     white:                "#ffffff",
rob@100:     whitesmoke:           "#f5f5f5",
rob@100:     yellow:               "#ffff00",
rob@100:     yellowgreen:          "#9acd32"
rob@100:   };
rob@100: 
rob@100: },{}],21:[function(require,module,exports){
rob@100: module.exports = function(virtHashCode, virtEquals, undef) {
rob@100: 
rob@100:   return function withProxyFunctions(p, removeFirstArgument) {
rob@100:     /**
rob@100:      * The contains(string) function returns true if the string passed in the parameter
rob@100:      * is a substring of this string. It returns false if the string passed
rob@100:      * in the parameter is not a substring of this string.
rob@100:      *
rob@100:      * @param {String} The string to look for in the current string
rob@100:      *
rob@100:      * @return {boolean} returns true if this string contains
rob@100:      * the string passed as parameter. returns false, otherwise.
rob@100:      *
rob@100:      */
rob@100:     p.__contains = function (subject, subStr) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.contains.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100:       //Parameter is not null AND
rob@100:       //The type of the parameter is the same as this object (string)
rob@100:       //The javascript function that finds a substring returns 0 or higher
rob@100:       return (
rob@100:         (subject !== null) &&
rob@100:         (subStr !== null) &&
rob@100:         (typeof subStr === "string") &&
rob@100:         (subject.indexOf(subStr) > -1)
rob@100:       );
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __replaceAll() function searches all matches between a substring (or regular expression) and a string,
rob@100:      * and replaces the matched substring with a new substring
rob@100:      *
rob@100:      * @param {String} subject    a substring
rob@100:      * @param {String} regex      a substring or a regular expression
rob@100:      * @param {String} replace    the string to replace the found value
rob@100:      *
rob@100:      * @return {String} returns result
rob@100:      *
rob@100:      * @see #match
rob@100:      */
rob@100:     p.__replaceAll = function(subject, regex, replacement) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.replaceAll.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       return subject.replace(new RegExp(regex, "g"), replacement);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __replaceFirst() function searches first matche between a substring (or regular expression) and a string,
rob@100:      * and replaces the matched substring with a new substring
rob@100:      *
rob@100:      * @param {String} subject    a substring
rob@100:      * @param {String} regex      a substring or a regular expression
rob@100:      * @param {String} replace    the string to replace the found value
rob@100:      *
rob@100:      * @return {String} returns result
rob@100:      *
rob@100:      * @see #match
rob@100:      */
rob@100:     p.__replaceFirst = function(subject, regex, replacement) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.replaceFirst.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       return subject.replace(new RegExp(regex, ""), replacement);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __replace() function searches all matches between a substring and a string,
rob@100:      * and replaces the matched substring with a new substring
rob@100:      *
rob@100:      * @param {String} subject         a substring
rob@100:      * @param {String} what         a substring to find
rob@100:      * @param {String} replacement    the string to replace the found value
rob@100:      *
rob@100:      * @return {String} returns result
rob@100:      */
rob@100:     p.__replace = function(subject, what, replacement) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.replace.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100:       if (what instanceof RegExp) {
rob@100:         return subject.replace(what, replacement);
rob@100:       }
rob@100: 
rob@100:       if (typeof what !== "string") {
rob@100:         what = what.toString();
rob@100:       }
rob@100:       if (what === "") {
rob@100:         return subject;
rob@100:       }
rob@100: 
rob@100:       var i = subject.indexOf(what);
rob@100:       if (i < 0) {
rob@100:         return subject;
rob@100:       }
rob@100: 
rob@100:       var j = 0, result = "";
rob@100:       do {
rob@100:         result += subject.substring(j, i) + replacement;
rob@100:         j = i + what.length;
rob@100:       } while ( (i = subject.indexOf(what, j)) >= 0);
rob@100:       return result + subject.substring(j);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __equals() function compares two strings (or objects) to see if they are the same.
rob@100:      * This method is necessary because it's not possible to compare strings using the equality operator (==).
rob@100:      * Returns true if the strings are the same and false if they are not.
rob@100:      *
rob@100:      * @param {String} subject  a string used for comparison
rob@100:      * @param {String} other  a string used for comparison with
rob@100:      *
rob@100:      * @return {boolean} true is the strings are the same false otherwise
rob@100:      */
rob@100:     p.__equals = function(subject, other) {
rob@100:       if (subject.equals instanceof Function) {
rob@100:         return subject.equals.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       return virtEquals(subject, other);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __equalsIgnoreCase() function compares two strings to see if they are the same.
rob@100:      * Returns true if the strings are the same, either when forced to all lower case or
rob@100:      * all upper case.
rob@100:      *
rob@100:      * @param {String} subject  a string used for comparison
rob@100:      * @param {String} other  a string used for comparison with
rob@100:      *
rob@100:      * @return {boolean} true is the strings are the same, ignoring case. false otherwise
rob@100:      */
rob@100:     p.__equalsIgnoreCase = function(subject, other) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.equalsIgnoreCase.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       return subject.toLowerCase() === other.toLowerCase();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __toCharArray() function splits the string into a char array.
rob@100:      *
rob@100:      * @param {String} subject The string
rob@100:      *
rob@100:      * @return {Char[]} a char array
rob@100:      */
rob@100:     p.__toCharArray = function(subject) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.toCharArray.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       var chars = [];
rob@100:       for (var i = 0, len = subject.length; i < len; ++i) {
rob@100:         chars[i] = new Char(subject.charAt(i));
rob@100:       }
rob@100:       return chars;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __split() function splits a string using the regex delimiter
rob@100:      * specified. If limit is specified, the resultant array will have number
rob@100:      * of elements equal to or less than the limit.
rob@100:      *
rob@100:      * @param {String} subject string to be split
rob@100:      * @param {String} regexp  regex string used to split the subject
rob@100:      * @param {int}    limit   max number of tokens to be returned
rob@100:      *
rob@100:      * @return {String[]} an array of tokens from the split string
rob@100:      */
rob@100:     p.__split = function(subject, regex, limit) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.split.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       var pattern = new RegExp(regex);
rob@100: 
rob@100:       // If limit is not specified, use JavaScript's built-in String.split.
rob@100:       if ((limit === undef) || (limit < 1)) {
rob@100:         return subject.split(pattern);
rob@100:       }
rob@100: 
rob@100:       // If limit is specified, JavaScript's built-in String.split has a
rob@100:       // different behaviour than Java's. A Java-compatible implementation is
rob@100:       // provided here.
rob@100:       var result = [], currSubject = subject, pos;
rob@100:       while (((pos = currSubject.search(pattern)) !== -1) && (result.length < (limit - 1))) {
rob@100:         var match = pattern.exec(currSubject).toString();
rob@100:         result.push(currSubject.substring(0, pos));
rob@100:         currSubject = currSubject.substring(pos + match.length);
rob@100:       }
rob@100:       if ((pos !== -1) || (currSubject !== "")) {
rob@100:         result.push(currSubject);
rob@100:       }
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The codePointAt() function returns the unicode value of the character at a given index of a string.
rob@100:      *
rob@100:      * @param  {int} idx         the index of the character
rob@100:      *
rob@100:      * @return {String} code     the String containing the unicode value of the character
rob@100:      */
rob@100:     p.__codePointAt = function(subject, idx) {
rob@100:       var code = subject.charCodeAt(idx),
rob@100:           hi,
rob@100:           low;
rob@100:       if (0xD800 <= code && code <= 0xDBFF) {
rob@100:         hi = code;
rob@100:         low = subject.charCodeAt(idx + 1);
rob@100:         return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
rob@100:       }
rob@100:       return code;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The matches() function checks whether or not a string matches a given regular expression.
rob@100:      *
rob@100:      * @param {String} str      the String on which the match is tested
rob@100:      * @param {String} regexp   the regexp for which a match is tested
rob@100:      *
rob@100:      * @return {boolean} true if the string fits the regexp, false otherwise
rob@100:      */
rob@100:     p.__matches = function(str, regexp) {
rob@100:       return (new RegExp(regexp)).test(str);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The startsWith() function tests if a string starts with the specified prefix.  If the prefix
rob@100:      * is the empty String or equal to the subject String, startsWith() will also return true.
rob@100:      *
rob@100:      * @param {String} prefix   the String used to compare against the start of the subject String.
rob@100:      * @param {int}    toffset  (optional) an offset into the subject String where searching should begin.
rob@100:      *
rob@100:      * @return {boolean} true if the subject String starts with the prefix.
rob@100:      */
rob@100:     p.__startsWith = function(subject, prefix, toffset) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.startsWith.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       toffset = toffset || 0;
rob@100:       if (toffset < 0 || toffset > subject.length) {
rob@100:         return false;
rob@100:       }
rob@100:       return (prefix === '' || prefix === subject) ? true : (subject.indexOf(prefix) === toffset);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The endsWith() function tests if a string ends with the specified suffix.  If the suffix
rob@100:      * is the empty String, endsWith() will also return true.
rob@100:      *
rob@100:      * @param {String} suffix   the String used to compare against the end of the subject String.
rob@100:      *
rob@100:      * @return {boolean} true if the subject String starts with the prefix.
rob@100:      */
rob@100:     p.__endsWith = function(subject, suffix) {
rob@100:       if (typeof subject !== "string") {
rob@100:         return subject.endsWith.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100: 
rob@100:       var suffixLen = suffix ? suffix.length : 0;
rob@100:       return (suffix === '' || suffix === subject) ? true :
rob@100:         (subject.indexOf(suffix) === subject.length - suffixLen);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The returns hash code of the.
rob@100:      *
rob@100:      * @param {Object} subject The string
rob@100:      *
rob@100:      * @return {int} a hash code
rob@100:      */
rob@100:     p.__hashCode = function(subject) {
rob@100:       if (subject.hashCode instanceof Function) {
rob@100:         return subject.hashCode.apply(subject, removeFirstArgument(arguments));
rob@100:       }
rob@100:       return virtHashCode(subject);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The __printStackTrace() prints stack trace to the console.
rob@100:      *
rob@100:      * @param {Exception} subject The error
rob@100:      */
rob@100:     p.__printStackTrace = function(subject) {
rob@100:       p.println("Exception: " + subject.toString() );
rob@100:     };
rob@100:   };
rob@100: 
rob@100: };
rob@100: 
rob@100: },{}],22:[function(require,module,exports){
rob@100: /**
rob@100:  * For many "math" functions, we can delegate
rob@100:  * to the Math object. For others, we can't.
rob@100:  */
rob@100: module.exports = function withMath(p, undef) {
rob@100:   var internalRandomGenerator = function() { return Math.random(); };
rob@100: 
rob@100:   /**
rob@100:   * Calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive.
rob@100:   *
rob@100:   * @param {int|float} value   int or float
rob@100:   *
rob@100:   * @returns {int|float}
rob@100:   */
rob@100:   p.abs = Math.abs;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the closest int value that is greater than or equal to the value of the parameter.
rob@100:   * For example, ceil(9.03) returns the value 10.
rob@100:   *
rob@100:   * @param {float} value   float
rob@100:   *
rob@100:   * @returns {int}
rob@100:   *
rob@100:   * @see floor
rob@100:   * @see round
rob@100:   */
rob@100:   p.ceil = Math.ceil;
rob@100: 
rob@100:   /**
rob@100:   * Returns Euler's number e (2.71828...) raised to the power of the value parameter.
rob@100:   *
rob@100:   * @param {int|float} value   int or float: the exponent to raise e to
rob@100:   *
rob@100:   * @returns {float}
rob@100:   */
rob@100:   p.exp = Math.exp;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the closest int value that is less than or equal to the value of the parameter.
rob@100:   *
rob@100:   * @param {int|float} value        the value to floor
rob@100:   *
rob@100:   * @returns {int|float}
rob@100:   *
rob@100:   * @see ceil
rob@100:   * @see round
rob@100:   */
rob@100:   p.floor = Math.floor;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the natural logarithm (the base-e logarithm) of a number. This function
rob@100:   * expects the values greater than 0.0.
rob@100:   *
rob@100:   * @param {int|float} value        int or float: number must be greater then 0.0
rob@100:   *
rob@100:   * @returns {float}
rob@100:   */
rob@100:   p.log = Math.log;
rob@100: 
rob@100:   /**
rob@100:   * Facilitates exponential expressions. The pow() function is an efficient way of
rob@100:   * multiplying numbers by themselves (or their reciprocal) in large quantities.
rob@100:   * For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5)
rob@100:   * is equivalent to 1 / 3*3*3*3*3.
rob@100:   *
rob@100:   * @param {int|float} num        base of the exponential expression
rob@100:   * @param {int|float} exponent   power of which to raise the base
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see sqrt
rob@100:   */
rob@100:   p.pow = Math.pow;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the integer closest to the value parameter. For example, round(9.2) returns the value 9.
rob@100:   *
rob@100:   * @param {float} value        number to round
rob@100:   *
rob@100:   * @returns {int}
rob@100:   *
rob@100:   * @see floor
rob@100:   * @see ceil
rob@100:   */
rob@100:   p.round = Math.round;
rob@100:   /**
rob@100:   * Calculates the square root of a number. The square root of a number is always positive,
rob@100:   * even though there may be a valid negative root. The square root s of number a is such
rob@100:   * that s*s = a. It is the opposite of squaring.
rob@100:   *
rob@100:   * @param {float} value        int or float, non negative
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see pow
rob@100:   * @see sq
rob@100:   */
rob@100: 
rob@100:   p.sqrt = Math.sqrt;
rob@100: 
rob@100:   // Trigonometry
rob@100:   /**
rob@100:   * The inverse of cos(), returns the arc cosine of a value. This function expects the
rob@100:   * values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927).
rob@100:   *
rob@100:   * @param {float} value        the value whose arc cosine is to be returned
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see cos
rob@100:   * @see asin
rob@100:   * @see atan
rob@100:   */
rob@100:   p.acos = Math.acos;
rob@100: 
rob@100:   /**
rob@100:   * The inverse of sin(), returns the arc sine of a value. This function expects the values
rob@100:   * in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2.
rob@100:   *
rob@100:   * @param {float} value        the value whose arc sine is to be returned
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see sin
rob@100:   * @see acos
rob@100:   * @see atan
rob@100:   */
rob@100:   p.asin = Math.asin;
rob@100: 
rob@100:   /**
rob@100:   * The inverse of tan(), returns the arc tangent of a value. This function expects the values
rob@100:   * in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2 .
rob@100:   *
rob@100:   * @param {float} value        -Infinity to Infinity (exclusive)
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see tan
rob@100:   * @see asin
rob@100:   * @see acos
rob@100:   */
rob@100:   p.atan = Math.atan;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the angle (in radians) from a specified point to the coordinate origin as measured from
rob@100:   * the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function
rob@100:   * is most often used for orienting geometry to the position of the cursor. Note: The y-coordinate of the
rob@100:   * point is the first parameter and the x-coordinate is the second due the the structure of calculating the tangent.
rob@100:   *
rob@100:   * @param {float} y        y-coordinate of the point
rob@100:   * @param {float} x        x-coordinate of the point
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see tan
rob@100:   */
rob@100:   p.atan2 = Math.atan2;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the cosine of an angle. This function expects the values of the angle parameter to be provided
rob@100:   * in radians (values from 0 to PI*2). Values are returned in the range -1 to 1.
rob@100:   *
rob@100:   * @param {float} value        an angle in radians
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see tan
rob@100:   * @see sin
rob@100:   */
rob@100:   p.cos = Math.cos;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the sine of an angle. This function expects the values of the angle parameter to be provided in
rob@100:   * radians (values from 0 to 6.28). Values are returned in the range -1 to 1.
rob@100:   *
rob@100:   * @param {float} value        an angle in radians
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see cos
rob@100:   * @see radians
rob@100:   */
rob@100:   p.sin = Math.sin;
rob@100: 
rob@100:   /**
rob@100:   * Calculates the ratio of the sine and cosine of an angle. This function expects the values of the angle
rob@100:   * parameter to be provided in radians (values from 0 to PI*2). Values are returned in the range infinity to -infinity.
rob@100:   *
rob@100:   * @param {float} value        an angle in radians
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see cos
rob@100:   * @see sin
rob@100:   * @see radians
rob@100:   */
rob@100:   p.tan = Math.tan;
rob@100: 
rob@100:   /**
rob@100:   * Constrains a value to not exceed a maximum and minimum value.
rob@100:   *
rob@100:   * @param {int|float} value   the value to constrain
rob@100:   * @param {int|float} value   minimum limit
rob@100:   * @param {int|float} value   maximum limit
rob@100:   *
rob@100:   * @returns {int|float}
rob@100:   *
rob@100:   * @see max
rob@100:   * @see min
rob@100:   */
rob@100:   p.constrain = function(aNumber, aMin, aMax) {
rob@100:     return aNumber > aMax ? aMax : aNumber < aMin ? aMin : aNumber;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Calculates the distance between two points.
rob@100:   *
rob@100:   * @param {int|float} x1     int or float: x-coordinate of the first point
rob@100:   * @param {int|float} y1     int or float: y-coordinate of the first point
rob@100:   * @param {int|float} z1     int or float: z-coordinate of the first point
rob@100:   * @param {int|float} x2     int or float: x-coordinate of the second point
rob@100:   * @param {int|float} y2     int or float: y-coordinate of the second point
rob@100:   * @param {int|float} z2     int or float: z-coordinate of the second point
rob@100:   *
rob@100:   * @returns {float}
rob@100:   */
rob@100:   p.dist = function() {
rob@100:     var dx, dy, dz;
rob@100:     if (arguments.length === 4) {
rob@100:       dx = arguments[0] - arguments[2];
rob@100:       dy = arguments[1] - arguments[3];
rob@100:       return Math.sqrt(dx * dx + dy * dy);
rob@100:     }
rob@100:     if (arguments.length === 6) {
rob@100:       dx = arguments[0] - arguments[3];
rob@100:       dy = arguments[1] - arguments[4];
rob@100:       dz = arguments[2] - arguments[5];
rob@100:       return Math.sqrt(dx * dx + dy * dy + dz * dz);
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Calculates a number between two numbers at a specific increment. The amt  parameter is the
rob@100:   * amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very
rob@100:   * near the first point, 0.5 is half-way in between, etc. The lerp function is convenient for
rob@100:   * creating motion along a straight path and for drawing dotted lines.
rob@100:   *
rob@100:   * @param {int|float} value1       float or int: first value
rob@100:   * @param {int|float} value2       float or int: second value
rob@100:   * @param {int|float} amt          float: between 0.0 and 1.0
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see curvePoint
rob@100:   * @see bezierPoint
rob@100:   */
rob@100:   p.lerp = function(value1, value2, amt) {
rob@100:     return ((value2 - value1) * amt) + value1;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly
rob@100:   * used in computer graphics and linear algebra. Because it has no "start" position, the magnitude
rob@100:   * of a vector can be thought of as the distance from coordinate (0,0) to its (x,y) value.
rob@100:   * Therefore, mag() is a shortcut for writing "dist(0, 0, x, y)".
rob@100:   *
rob@100:   * @param {int|float} a       float or int: first value
rob@100:   * @param {int|float} b       float or int: second value
rob@100:   * @param {int|float} c       float or int: third value
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see dist
rob@100:   */
rob@100:   p.mag = function(a, b, c) {
rob@100:     if (c) {
rob@100:       return Math.sqrt(a * a + b * b + c * c);
rob@100:     }
rob@100: 
rob@100:     return Math.sqrt(a * a + b * b);
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Re-maps a number from one range to another. In the example above, the number '25' is converted from
rob@100:   * a value in the range 0..100 into a value that ranges from the left edge (0) to the right edge (width) of the screen.
rob@100:   * Numbers outside the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful.
rob@100:   *
rob@100:   * @param {float} value        The incoming value to be converted
rob@100:   * @param {float} istart       Lower bound of the value's current range
rob@100:   * @param {float} istop        Upper bound of the value's current range
rob@100:   * @param {float} ostart       Lower bound of the value's target range
rob@100:   * @param {float} ostop        Upper bound of the value's target range
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see norm
rob@100:   * @see lerp
rob@100:   */
rob@100:   p.map = function(value, istart, istop, ostart, ostop) {
rob@100:     return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Determines the largest value in a sequence of numbers.
rob@100:   *
rob@100:   * @param {int|float} value1         int or float
rob@100:   * @param {int|float} value2         int or float
rob@100:   * @param {int|float} value3         int or float
rob@100:   * @param {int|float} array          int or float array
rob@100:   *
rob@100:   * @returns {int|float}
rob@100:   *
rob@100:   * @see min
rob@100:   */
rob@100:   p.max = function() {
rob@100:     if (arguments.length === 2) {
rob@100:       return arguments[0] < arguments[1] ? arguments[1] : arguments[0];
rob@100:     }
rob@100:     var numbers = arguments.length === 1 ? arguments[0] : arguments; // if single argument, array is used
rob@100:     if (! ("length" in numbers && numbers.length > 0)) {
rob@100:       throw "Non-empty array is expected";
rob@100:     }
rob@100:     var max = numbers[0],
rob@100:       count = numbers.length;
rob@100:     for (var i = 1; i < count; ++i) {
rob@100:       if (max < numbers[i]) {
rob@100:         max = numbers[i];
rob@100:       }
rob@100:     }
rob@100:     return max;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Determines the smallest value in a sequence of numbers.
rob@100:   *
rob@100:   * @param {int|float} value1         int or float
rob@100:   * @param {int|float} value2         int or float
rob@100:   * @param {int|float} value3         int or float
rob@100:   * @param {int|float} array          int or float array
rob@100:   *
rob@100:   * @returns {int|float}
rob@100:   *
rob@100:   * @see max
rob@100:   */
rob@100:   p.min = function() {
rob@100:     if (arguments.length === 2) {
rob@100:       return arguments[0] < arguments[1] ? arguments[0] : arguments[1];
rob@100:     }
rob@100:     var numbers = arguments.length === 1 ? arguments[0] : arguments; // if single argument, array is used
rob@100:     if (! ("length" in numbers && numbers.length > 0)) {
rob@100:       throw "Non-empty array is expected";
rob@100:     }
rob@100:     var min = numbers[0],
rob@100:       count = numbers.length;
rob@100:     for (var i = 1; i < count; ++i) {
rob@100:       if (min > numbers[i]) {
rob@100:         min = numbers[i];
rob@100:       }
rob@100:     }
rob@100:     return min;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Normalizes a number from another range into a value between 0 and 1.
rob@100:   * Identical to map(value, low, high, 0, 1);
rob@100:   * Numbers outside the range are not clamped to 0 and 1, because out-of-range
rob@100:   * values are often intentional and useful.
rob@100:   *
rob@100:   * @param {float} aNumber    The incoming value to be converted
rob@100:   * @param {float} low        Lower bound of the value's current range
rob@100:   * @param {float} high       Upper bound of the value's current range
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see map
rob@100:   * @see lerp
rob@100:   */
rob@100:   p.norm = function(aNumber, low, high) {
rob@100:     return (aNumber - low) / (high - low);
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Squares a number (multiplies a number by itself). The result is always a positive number,
rob@100:   * as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1.
rob@100:   *
rob@100:   * @param {float} value        int or float
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see sqrt
rob@100:   */
rob@100:   p.sq = function(aNumber) {
rob@100:     return aNumber * aNumber;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of
rob@100:   * measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example,
rob@100:   * 90 degrees = PI/2 = 1.5707964. All trigonometric methods in Processing require their parameters to be specified in radians.
rob@100:   *
rob@100:   * @param {int|float} value        an angle in radians
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see radians
rob@100:   */
rob@100:   p.degrees = function(aAngle) {
rob@100:     return (aAngle * 180) / Math.PI;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Generates random numbers. Each time the random() function is called, it returns an unexpected value within
rob@100:   * the specified range. If one parameter is passed to the function it will return a float between zero and the
rob@100:   * value of the high parameter. The function call random(5) returns values between 0 and 5 (starting at zero,
rob@100:   * up to but not including 5). If two parameters are passed, it will return a float with a value between the
rob@100:   * parameters. The function call random(-5, 10.2) returns values starting at -5 up to (but not including) 10.2.
rob@100:   * To convert a floating-point random number to an integer, use the int() function.
rob@100:   *
rob@100:   * @param {int|float} value1         if one parameter is used, the top end to random from, if two params the low end
rob@100:   * @param {int|float} value2         the top end of the random range
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see randomSeed
rob@100:   * @see noise
rob@100:   */
rob@100:   p.random = function() {
rob@100:     if(arguments.length === 0) {
rob@100:       return internalRandomGenerator();
rob@100:     }
rob@100:     if(arguments.length === 1) {
rob@100:       return internalRandomGenerator() * arguments[0];
rob@100:     }
rob@100:     var aMin = arguments[0], aMax = arguments[1];
rob@100:     return internalRandomGenerator() * (aMax - aMin) + aMin;
rob@100:   };
rob@100: 
rob@100:   // Pseudo-random generator
rob@100:   function Marsaglia(i1, i2) {
rob@100:     // from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
rob@100:     var z=i1 || 362436069, w= i2 || 521288629;
rob@100:     var intGenerator = function() {
rob@100:       z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
rob@100:       w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
rob@100:       return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
rob@100:     };
rob@100: 
rob@100:     this.doubleGenerator = function() {
rob@100:       var i = intGenerator() / 4294967296;
rob@100:       return i < 0 ? 1 + i : i;
rob@100:     };
rob@100:     this.intGenerator = intGenerator;
rob@100:   }
rob@100: 
rob@100:   Marsaglia.createRandomized = function() {
rob@100:     var now = new Date();
rob@100:     return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Sets the seed value for random(). By default, random() produces different results each time the
rob@100:   * program is run. Set the value parameter to a constant to return the same pseudo-random numbers
rob@100:   * each time the software is run.
rob@100:   *
rob@100:   * @param {int|float} seed         int
rob@100:   *
rob@100:   * @see random
rob@100:   * @see noise
rob@100:   * @see noiseSeed
rob@100:   */
rob@100:   p.randomSeed = function(seed) {
rob@100:     internalRandomGenerator = (new Marsaglia(seed)).doubleGenerator;
rob@100:     this.haveNextNextGaussian = false;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Returns a float from a random series of numbers having a mean of 0 and standard deviation of 1. Each time
rob@100:   * the randomGaussian() function is called, it returns a number fitting a Gaussian, or normal, distribution.
rob@100:   * There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a
rob@100:   * very low probability that values far from the mean will be returned; and a higher probability that numbers
rob@100:   * near the mean will be returned.
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see random
rob@100:   * @see noise
rob@100:   */
rob@100:   p.randomGaussian = function() {
rob@100:     if (this.haveNextNextGaussian) {
rob@100:       this.haveNextNextGaussian = false;
rob@100:       return this.nextNextGaussian;
rob@100:     }
rob@100:     var v1, v2, s;
rob@100:     do {
rob@100:       v1 = 2 * internalRandomGenerator() - 1; // between -1.0 and 1.0
rob@100:       v2 = 2 * internalRandomGenerator() - 1; // between -1.0 and 1.0
rob@100:       s = v1 * v1 + v2 * v2;
rob@100:     }
rob@100:     while (s >= 1 || s === 0);
rob@100: 
rob@100:     var multiplier = Math.sqrt(-2 * Math.log(s) / s);
rob@100:     this.nextNextGaussian = v2 * multiplier;
rob@100:     this.haveNextNextGaussian = true;
rob@100: 
rob@100:     return v1 * multiplier;
rob@100:   };
rob@100: 
rob@100:   // Noise functions and helpers
rob@100:   function PerlinNoise(seed) {
rob@100:     var rnd = seed !== undef ? new Marsaglia(seed) : Marsaglia.createRandomized();
rob@100:     var i, j;
rob@100:     // http://www.noisemachine.com/talk1/17b.html
rob@100:     // http://mrl.nyu.edu/~perlin/noise/
rob@100:     // generate permutation
rob@100:     var perm = new Uint8Array(512);
rob@100:     for(i=0;i<256;++i) { perm[i] = i; }
rob@100:     for(i=0;i<256;++i) { var t = perm[j = rnd.intGenerator() & 0xFF]; perm[j] = perm[i]; perm[i] = t; }
rob@100:     // copy to avoid taking mod in perm[0];
rob@100:     for(i=0;i<256;++i) { perm[i + 256] = perm[i]; }
rob@100: 
rob@100:     function grad3d(i,x,y,z) {
rob@100:       var h = i & 15; // convert into 12 gradient directions
rob@100:       var u = h<8 ? x : y,
rob@100:           v = h<4 ? y : h===12||h===14 ? x : z;
rob@100:       return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
rob@100:     }
rob@100: 
rob@100:     function grad2d(i,x,y) {
rob@100:       var v = (i & 1) === 0 ? x : y;
rob@100:       return (i&2) === 0 ? -v : v;
rob@100:     }
rob@100: 
rob@100:     function grad1d(i,x) {
rob@100:       return (i&1) === 0 ? -x : x;
rob@100:     }
rob@100: 
rob@100:     function lerp(t,a,b) { return a + t * (b - a); }
rob@100: 
rob@100:     this.noise3d = function(x, y, z) {
rob@100:       var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
rob@100:       x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
rob@100:       var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
rob@100:       var p0 = perm[X]+Y, p00 = perm[p0] + Z, p01 = perm[p0 + 1] + Z,
rob@100:           p1 = perm[X + 1] + Y, p10 = perm[p1] + Z, p11 = perm[p1 + 1] + Z;
rob@100:       return lerp(fz,
rob@100:         lerp(fy, lerp(fx, grad3d(perm[p00], x, y, z), grad3d(perm[p10], x-1, y, z)),
rob@100:                  lerp(fx, grad3d(perm[p01], x, y-1, z), grad3d(perm[p11], x-1, y-1,z))),
rob@100:         lerp(fy, lerp(fx, grad3d(perm[p00 + 1], x, y, z-1), grad3d(perm[p10 + 1], x-1, y, z-1)),
rob@100:                  lerp(fx, grad3d(perm[p01 + 1], x, y-1, z-1), grad3d(perm[p11 + 1], x-1, y-1,z-1))));
rob@100:     };
rob@100: 
rob@100:     this.noise2d = function(x, y) {
rob@100:       var X = Math.floor(x)&255, Y = Math.floor(y)&255;
rob@100:       x -= Math.floor(x); y -= Math.floor(y);
rob@100:       var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
rob@100:       var p0 = perm[X]+Y, p1 = perm[X + 1] + Y;
rob@100:       return lerp(fy,
rob@100:         lerp(fx, grad2d(perm[p0], x, y), grad2d(perm[p1], x-1, y)),
rob@100:         lerp(fx, grad2d(perm[p0 + 1], x, y-1), grad2d(perm[p1 + 1], x-1, y-1)));
rob@100:     };
rob@100: 
rob@100:     this.noise1d = function(x) {
rob@100:       var X = Math.floor(x)&255;
rob@100:       x -= Math.floor(x);
rob@100:       var fx = (3-2*x)*x*x;
rob@100:       return lerp(fx, grad1d(perm[X], x), grad1d(perm[X+1], x-1));
rob@100:     };
rob@100:   }
rob@100: 
rob@100:   // processing defaults
rob@100:   var noiseProfile = { generator: undef, octaves: 4, fallout: 0.5, seed: undef};
rob@100: 
rob@100:   /**
rob@100:   * Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence
rob@100:   * generator producing a more natural ordered, harmonic succession of numbers compared to the
rob@100:   * standard random() function. It was invented by Ken Perlin in the 1980s and been used since
rob@100:   * in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.
rob@100:   * The main difference to the random() function is that Perlin noise is defined in an infinite
rob@100:   * n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value
rob@100:   * (fixed only for the lifespan of the program). The resulting value will always be between 0.0
rob@100:   * and 1.0. Processing can compute 1D, 2D and 3D noise, depending on the number of coordinates
rob@100:   * given. The noise value can be animated by moving through the noise space as demonstrated in
rob@100:   * the example above. The 2nd and 3rd dimension can also be interpreted as time.
rob@100:   * The actual noise is structured similar to an audio signal, in respect to the function's use
rob@100:   * of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over
rob@100:   * several octaves which are added together for the final result.
rob@100:   * Another way to adjust the character of the resulting sequence is the scale of the input
rob@100:   * coordinates. As the function works within an infinite space the value of the coordinates
rob@100:   * doesn't matter as such, only the distance between successive coordinates does (eg. when using
rob@100:   * noise() within a loop). As a general rule the smaller the difference between coordinates, the
rob@100:   * smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications,
rob@100:   * but this will differ depending on use.
rob@100:   *
rob@100:   * @param {float} x          x coordinate in noise space
rob@100:   * @param {float} y          y coordinate in noise space
rob@100:   * @param {float} z          z coordinate in noise space
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see random
rob@100:   * @see noiseDetail
rob@100:   */
rob@100:   p.noise = function(x, y, z) {
rob@100:     if(noiseProfile.generator === undef) {
rob@100:       // caching
rob@100:       noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
rob@100:     }
rob@100:     var generator = noiseProfile.generator;
rob@100:     var effect = 1, k = 1, sum = 0;
rob@100:     for(var i=0; i<noiseProfile.octaves; ++i) {
rob@100:       effect *= noiseProfile.fallout;
rob@100:       switch (arguments.length) {
rob@100:       case 1:
rob@100:         sum += effect * (1 + generator.noise1d(k*x))/2; break;
rob@100:       case 2:
rob@100:         sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
rob@100:       case 3:
rob@100:         sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
rob@100:       }
rob@100:       k *= 2;
rob@100:     }
rob@100:     return sum;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Adjusts the character and level of detail produced by the Perlin noise function.
rob@100:   * Similar to harmonics in physics, noise is computed over several octaves. Lower octaves
rob@100:   * contribute more to the output signal and as such define the overal intensity of the noise,
rob@100:   * whereas higher octaves create finer grained details in the noise sequence. By default,
rob@100:   * noise is computed over 4 octaves with each octave contributing exactly half than its
rob@100:   * predecessor, starting at 50% strength for the 1st octave. This falloff amount can be
rob@100:   * changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means
rob@100:   * each octave will now have 75% impact (25% less) of the previous lower octave. Any value
rob@100:   * between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in
rob@100:   * greater than 1.0 values returned by noise(). By changing these parameters, the signal
rob@100:   * created by the noise() function can be adapted to fit very specific needs and characteristics.
rob@100:   *
rob@100:   * @param {int} octaves          number of octaves to be used by the noise() function
rob@100:   * @param {float} falloff        falloff factor for each octave
rob@100:   *
rob@100:   * @see noise
rob@100:   */
rob@100:   p.noiseDetail = function(octaves, fallout) {
rob@100:     noiseProfile.octaves = octaves;
rob@100:     if(fallout !== undef) {
rob@100:       noiseProfile.fallout = fallout;
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:   * Sets the seed value for noise(). By default, noise() produces different results each
rob@100:   * time the program is run. Set the value parameter to a constant to return the same
rob@100:   * pseudo-random numbers each time the software is run.
rob@100:   *
rob@100:   * @param {int} seed         int
rob@100:   *
rob@100:   * @returns {float}
rob@100:   *
rob@100:   * @see random
rob@100:   * @see radomSeed
rob@100:   * @see noise
rob@100:   * @see noiseDetail
rob@100:   */
rob@100:   p.noiseSeed = function(seed) {
rob@100:     noiseProfile.seed = seed;
rob@100:     noiseProfile.generator = undef;
rob@100:   };
rob@100: };
rob@100: 
rob@100: },{}],23:[function(require,module,exports){
rob@100: /**
rob@100:  * Common functions traditionally on "p" that should be class functions
rob@100:  * that get bound to "p" when an instance is actually built, instead.
rob@100:  */
rob@100: module.exports = (function commonFunctions(undef) {
rob@100: 
rob@100:   var CommonFunctions = {
rob@100:     /**
rob@100:      * Remove whitespace characters from the beginning and ending
rob@100:      * of a String or a String array. Works like String.trim() but includes the
rob@100:      * unicode nbsp character as well. If an array is passed in the function will return a new array not effecting the array passed in.
rob@100:      *
rob@100:      * @param {String} str    the string to trim
rob@100:      * @param {String[]} str  the string array to trim
rob@100:      *
rob@100:      * @return {String|String[]} retrurns a string or an array will removed whitespaces
rob@100:      */
rob@100:     trim: function(str) {
rob@100:       if (str instanceof Array) {
rob@100:         var arr = [];
rob@100:         for (var i = 0; i < str.length; i++) {
rob@100:           arr.push(str[i].replace(/^\s*/, '').replace(/\s*$/, '').replace(/\r*$/, ''));
rob@100:         }
rob@100:         return arr;
rob@100:       }
rob@100:       return str.replace(/^\s*/, '').replace(/\s*$/, '').replace(/\r*$/, '');
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:      * Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of
rob@100:      * measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example,
rob@100:      * 90 degrees = PI/2 = 1.5707964. All trigonometric methods in Processing require their parameters to be specified in radians.
rob@100:      *
rob@100:      * @param {int|float} value        an angle in radians
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see degrees
rob@100:      */
rob@100:     radians: function(aAngle) {
rob@100:       return (aAngle / 180) * Math.PI;
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:      * Number-to-String formatting function. Prepends "plus" or "minus" depending
rob@100:      * on whether the value is positive or negative, respectively, after padding
rob@100:      * the value with zeroes on the left and right, the number of zeroes used dictated
rob@100:      * by the values 'leftDigits' and 'rightDigits'. 'value' cannot be an array.
rob@100:      *
rob@100:      * @param {int|float} value                 the number to format
rob@100:      * @param {String} plus                     the prefix for positive numbers
rob@100:      * @param {String} minus                    the prefix for negative numbers
rob@100:      * @param {int} left                        number of digits to the left of the decimal point
rob@100:      * @param {int} right                       number of digits to the right of the decimal point
rob@100:      * @param {String} group                    string delimited for groups, such as the comma in "1,000"
rob@100:      *
rob@100:      * @returns {String or String[]}
rob@100:      *
rob@100:      * @see nfCore
rob@100:      */
rob@100:     nfCoreScalar: function (value, plus, minus, leftDigits, rightDigits, group) {
rob@100:       var sign = (value < 0) ? minus : plus;
rob@100:       var autoDetectDecimals = rightDigits === 0;
rob@100:       var rightDigitsOfDefault = (rightDigits === undef || rightDigits < 0) ? 0 : rightDigits;
rob@100: 
rob@100:       var absValue = Math.abs(value);
rob@100:       if (autoDetectDecimals) {
rob@100:         rightDigitsOfDefault = 1;
rob@100:         absValue *= 10;
rob@100:         while (Math.abs(Math.round(absValue) - absValue) > 1e-6 && rightDigitsOfDefault < 7) {
rob@100:           ++rightDigitsOfDefault;
rob@100:           absValue *= 10;
rob@100:         }
rob@100:       } else if (rightDigitsOfDefault !== 0) {
rob@100:         absValue *= Math.pow(10, rightDigitsOfDefault);
rob@100:       }
rob@100: 
rob@100:       // Using Java's default rounding policy HALF_EVEN. This policy is based
rob@100:       // on the idea that 0.5 values round to the nearest even number, and
rob@100:       // everything else is rounded normally.
rob@100:       var number, doubled = absValue * 2;
rob@100:       if (Math.floor(absValue) === absValue) {
rob@100:         number = absValue;
rob@100:       } else if (Math.floor(doubled) === doubled) {
rob@100:         var floored = Math.floor(absValue);
rob@100:         number = floored + (floored % 2);
rob@100:       } else {
rob@100:         number = Math.round(absValue);
rob@100:       }
rob@100: 
rob@100:       var buffer = "";
rob@100:       var totalDigits = leftDigits + rightDigitsOfDefault;
rob@100:       while (totalDigits > 0 || number > 0) {
rob@100:         totalDigits--;
rob@100:         buffer = "" + (number % 10) + buffer;
rob@100:         number = Math.floor(number / 10);
rob@100:       }
rob@100:       if (group !== undef) {
rob@100:         var i = buffer.length - 3 - rightDigitsOfDefault;
rob@100:         while(i > 0) {
rob@100:           buffer = buffer.substring(0,i) + group + buffer.substring(i);
rob@100:           i-=3;
rob@100:         }
rob@100:       }
rob@100:       if (rightDigitsOfDefault > 0) {
rob@100:         return sign + buffer.substring(0, buffer.length - rightDigitsOfDefault) +
rob@100:                "." + buffer.substring(buffer.length - rightDigitsOfDefault, buffer.length);
rob@100:       }
rob@100:       return sign + buffer;
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:     * Number-to-String formatting function. Prepends "plus" or "minus" depending
rob@100:     * on whether the value is positive or negative, respectively, after padding
rob@100:     * the value with zeroes on the left and right, the number of zeroes used dictated
rob@100:     * by the values 'leftDigits' and 'rightDigits'. 'value' can be an array;
rob@100:     * if the input is an array, each value in it is formatted separately, and
rob@100:     * an array with formatted values is returned.
rob@100:     *
rob@100:     * @param {int|int[]|float|float[]} value   the number(s) to format
rob@100:     * @param {String} plus                     the prefix for positive numbers
rob@100:     * @param {String} minus                    the prefix for negative numbers
rob@100:     * @param {int} left                        number of digits to the left of the decimal point
rob@100:     * @param {int} right                       number of digits to the right of the decimal point
rob@100:     * @param {String} group                    string delimited for groups, such as the comma in "1,000"
rob@100:     *
rob@100:     * @returns {String or String[]}
rob@100:     *
rob@100:     * @see nfCoreScalar
rob@100:     */
rob@100:     nfCore: function(value, plus, minus, leftDigits, rightDigits, group) {
rob@100:       if (value instanceof Array) {
rob@100:         var arr = [];
rob@100:         for (var i = 0, len = value.length; i < len; i++) {
rob@100:           arr.push(CommonFunctions.nfCoreScalar(value[i], plus, minus, leftDigits, rightDigits, group));
rob@100:         }
rob@100:         return arr;
rob@100:       }
rob@100:       return CommonFunctions.nfCoreScalar(value, plus, minus, leftDigits, rightDigits, group);
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:     * Utility function for formatting numbers into strings. There are two versions, one for
rob@100:     * formatting floats and one for formatting ints. The values for the digits, left, and
rob@100:     * right parameters should always be positive integers.
rob@100:     * As shown in the above example, nf() is used to add zeros to the left and/or right
rob@100:     * of a number. This is typically for aligning a list of numbers. To remove digits from
rob@100:     * a floating-point number, use the int(), ceil(), floor(), or round() functions.
rob@100:     *
rob@100:     * @param {int|int[]|float|float[]} value   the number(s) to format
rob@100:     * @param {int} left                        number of digits to the left of the decimal point
rob@100:     * @param {int} right                       number of digits to the right of the decimal point
rob@100:     *
rob@100:     * @returns {String or String[]}
rob@100:     *
rob@100:     * @see nfs
rob@100:     * @see nfp
rob@100:     * @see nfc
rob@100:     */
rob@100:     nf: function(value, leftDigits, rightDigits) {
rob@100:       return CommonFunctions.nfCore(value, "", "-", leftDigits, rightDigits);
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:     * Utility function for formatting numbers into strings. Similar to nf()  but leaves a blank space in front
rob@100:     * of positive numbers so they align with negative numbers in spite of the minus symbol. There are two
rob@100:     * versions, one for formatting floats and one for formatting ints. The values for the digits, left,
rob@100:     * and right parameters should always be positive integers.
rob@100:     *
rob@100:     * @param {int|int[]|float|float[]} value   the number(s) to format
rob@100:     * @param {int} left                        number of digits to the left of the decimal point
rob@100:     * @param {int} right                       number of digits to the right of the decimal point
rob@100:     *
rob@100:     * @returns {String or String[]}
rob@100:     *
rob@100:     * @see nf
rob@100:     * @see nfp
rob@100:     * @see nfc
rob@100:     */
rob@100:     nfs: function(value, leftDigits, rightDigits) {
rob@100:       return CommonFunctions.nfCore(value, " ", "-", leftDigits, rightDigits);
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:     * Utility function for formatting numbers into strings. Similar to nf()  but puts a "+" in front of
rob@100:     * positive numbers and a "-" in front of negative numbers. There are two versions, one for formatting
rob@100:     * floats and one for formatting ints. The values for the digits, left, and right parameters should
rob@100:     * always be positive integers.
rob@100:     *
rob@100:     * @param {int|int[]|float|float[]} value   the number(s) to format
rob@100:     * @param {int} left                        number of digits to the left of the decimal point
rob@100:     * @param {int} right                       number of digits to the right of the decimal point
rob@100:     *
rob@100:     * @returns {String or String[]}
rob@100:     *
rob@100:     * @see nfs
rob@100:     * @see nf
rob@100:     * @see nfc
rob@100:     */
rob@100:     nfp: function(value, leftDigits, rightDigits) {
rob@100:       return CommonFunctions.nfCore(value, "+", "-", leftDigits, rightDigits);
rob@100:     },
rob@100: 
rob@100:     /**
rob@100:     * Utility function for formatting numbers into strings and placing appropriate commas to mark
rob@100:     * units of 1000. There are two versions, one for formatting ints and one for formatting an array
rob@100:     * of ints. The value for the digits parameter should always be a positive integer.
rob@100:     *
rob@100:     * @param {int|int[]|float|float[]} value   the number(s) to format
rob@100:     * @param {int} left                        number of digits to the left of the decimal point
rob@100:     * @param {int} right                       number of digits to the right of the decimal point
rob@100:     *
rob@100:     * @returns {String or String[]}
rob@100:     *
rob@100:     * @see nf
rob@100:     * @see nfs
rob@100:     * @see nfp
rob@100:     */
rob@100:     nfc: function(value, rightDigits) {
rob@100:       return CommonFunctions.nfCore(value, "", "-", 0, rightDigits, ",");
rob@100:     },
rob@100: 
rob@100:     // used to bind all common functions to "p"
rob@100:     withCommonFunctions: function withCommonFunctions(p) {
rob@100:       ["trim", "radians", "nf", "nfs", "nfp", "nfc"].forEach(function(f){
rob@100:         p[f] = CommonFunctions[f];
rob@100:       });
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   return CommonFunctions;
rob@100: }());
rob@100: 
rob@100: },{}],24:[function(require,module,exports){
rob@100: /**
rob@100:  * Touch and Mouse event handling
rob@100:  */
rob@100: module.exports = function withTouch(p, curElement, attachEventHandler, document, PConstants, undef) {
rob@100: 
rob@100:   /**
rob@100:    * Determine the location of the (mouse) pointer.
rob@100:    */
rob@100:   function calculateOffset(curElement, event) {
rob@100:     var element = curElement,
rob@100:       offsetX = 0,
rob@100:       offsetY = 0;
rob@100: 
rob@100:     p.pmouseX = p.mouseX;
rob@100:     p.pmouseY = p.mouseY;
rob@100: 
rob@100:     // Find element offset
rob@100:     if (element.offsetParent) {
rob@100:       do {
rob@100:         offsetX += element.offsetLeft;
rob@100:         offsetY += element.offsetTop;
rob@100:       } while (!!(element = element.offsetParent));
rob@100:     }
rob@100: 
rob@100:     // Find Scroll offset
rob@100:     element = curElement;
rob@100:     do {
rob@100:       offsetX -= element.scrollLeft || 0;
rob@100:       offsetY -= element.scrollTop || 0;
rob@100:     } while (!!(element = element.parentNode));
rob@100: 
rob@100:     // Get padding and border style widths for mouse offsets
rob@100:     var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;
rob@100:     if (document.defaultView && document.defaultView.getComputedStyle) {
rob@100:       stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(curElement, null).paddingLeft, 10)      || 0;
rob@100:       stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(curElement, null).paddingTop, 10)       || 0;
rob@100:       styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(curElement, null).borderLeftWidth, 10)  || 0;
rob@100:       styleBorderTop   = parseInt(document.defaultView.getComputedStyle(curElement, null).borderTopWidth, 10)   || 0;
rob@100:     }
rob@100: 
rob@100:     // Add padding and border style widths to offset
rob@100:     offsetX += stylePaddingLeft;
rob@100:     offsetY += stylePaddingTop;
rob@100: 
rob@100:     offsetX += styleBorderLeft;
rob@100:     offsetY += styleBorderTop;
rob@100: 
rob@100:     // Take into account any scrolling done
rob@100:     offsetX += window.pageXOffset;
rob@100:     offsetY += window.pageYOffset;
rob@100: 
rob@100:     return {'X':offsetX,'Y':offsetY};
rob@100:   }
rob@100: 
rob@100:   // simple relative position
rob@100:   function updateMousePosition(curElement, event) {
rob@100:     var offset = calculateOffset(curElement, event);
rob@100:     // Dropping support for IE clientX and clientY, switching to pageX and pageY
rob@100:     // so we don't have to calculate scroll offset.
rob@100:     // Removed in ticket #184. See rev: 2f106d1c7017fed92d045ba918db47d28e5c16f4
rob@100:     p.mouseX = event.pageX - offset.X;
rob@100:     p.mouseY = event.pageY - offset.Y;
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * Return a TouchEvent with canvas-specific x/y co-ordinates
rob@100:    */
rob@100:   function addTouchEventOffset(t) {
rob@100:     var offset = calculateOffset(t.changedTouches[0].target, t.changedTouches[0]),
rob@100:         i;
rob@100: 
rob@100:     for (i = 0; i < t.touches.length; i++) {
rob@100:       var touch = t.touches[i];
rob@100:       touch.offsetX = touch.pageX - offset.X;
rob@100:       touch.offsetY = touch.pageY - offset.Y;
rob@100:     }
rob@100:     for (i = 0; i < t.targetTouches.length; i++) {
rob@100:       var targetTouch = t.targetTouches[i];
rob@100:       targetTouch.offsetX = targetTouch.pageX - offset.X;
rob@100:       targetTouch.offsetY = targetTouch.pageY - offset.Y;
rob@100:     }
rob@100:     for (i = 0; i < t.changedTouches.length; i++) {
rob@100:       var changedTouch = t.changedTouches[i];
rob@100:       changedTouch.offsetX = changedTouch.pageX - offset.X;
rob@100:       changedTouch.offsetY = changedTouch.pageY - offset.Y;
rob@100:     }
rob@100: 
rob@100:     return t;
rob@100:   }
rob@100: 
rob@100:   /**
rob@100:    * Touch event support.
rob@100:    */
rob@100:   attachEventHandler(curElement, "touchstart", function (t) {
rob@100:     // Removes unwanted behaviour of the canvas when touching canvas
rob@100:     curElement.setAttribute("style","-webkit-user-select: none");
rob@100:     curElement.setAttribute("onclick","void(0)");
rob@100:     curElement.setAttribute("style","-webkit-tap-highlight-color:rgba(0,0,0,0)");
rob@100:     // Loop though eventHandlers and remove mouse listeners
rob@100:     for (var i=0, ehl=eventHandlers.length; i<ehl; i++) {
rob@100:       var type = eventHandlers[i].type;
rob@100:       // Have this function remove itself from the eventHandlers list too
rob@100:       if (type === "mouseout" ||  type === "mousemove" ||
rob@100:           type === "mousedown" || type === "mouseup" ||
rob@100:           type === "DOMMouseScroll" || type === "mousewheel" || type === "touchstart") {
rob@100:         detachEventHandler(eventHandlers[i]);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     // If there are any native touch events defined in the sketch, connect all of them
rob@100:     // Otherwise, connect all of the emulated mouse events
rob@100:     if (p.touchStart !== undef || p.touchMove !== undef ||
rob@100:         p.touchEnd !== undef || p.touchCancel !== undef) {
rob@100:       attachEventHandler(curElement, "touchstart", function(t) {
rob@100:         if (p.touchStart !== undef) {
rob@100:           t = addTouchEventOffset(t);
rob@100:           p.touchStart(t);
rob@100:         }
rob@100:       });
rob@100: 
rob@100:       attachEventHandler(curElement, "touchmove", function(t) {
rob@100:         if (p.touchMove !== undef) {
rob@100:           t.preventDefault(); // Stop the viewport from scrolling
rob@100:           t = addTouchEventOffset(t);
rob@100:           p.touchMove(t);
rob@100:         }
rob@100:       });
rob@100: 
rob@100:       attachEventHandler(curElement, "touchend", function(t) {
rob@100:         if (p.touchEnd !== undef) {
rob@100:           t = addTouchEventOffset(t);
rob@100:           p.touchEnd(t);
rob@100:         }
rob@100:       });
rob@100: 
rob@100:       attachEventHandler(curElement, "touchcancel", function(t) {
rob@100:         if (p.touchCancel !== undef) {
rob@100:           t = addTouchEventOffset(t);
rob@100:           p.touchCancel(t);
rob@100:         }
rob@100:       });
rob@100: 
rob@100:     } else {
rob@100:       // Emulated touch start/mouse down event
rob@100:       attachEventHandler(curElement, "touchstart", function(e) {
rob@100:         updateMousePosition(curElement, e.touches[0]);
rob@100: 
rob@100:         p.__mousePressed = true;
rob@100:         p.mouseDragging = false;
rob@100:         p.mouseButton = PConstants.LEFT;
rob@100: 
rob@100:         if (typeof p.mousePressed === "function") {
rob@100:           p.mousePressed();
rob@100:         }
rob@100:       });
rob@100: 
rob@100:       // Emulated touch move/mouse move event
rob@100:       attachEventHandler(curElement, "touchmove", function(e) {
rob@100:         e.preventDefault();
rob@100:         updateMousePosition(curElement, e.touches[0]);
rob@100: 
rob@100:         if (typeof p.mouseMoved === "function" && !p.__mousePressed) {
rob@100:           p.mouseMoved();
rob@100:         }
rob@100:         if (typeof p.mouseDragged === "function" && p.__mousePressed) {
rob@100:           p.mouseDragged();
rob@100:           p.mouseDragging = true;
rob@100:         }
rob@100:       });
rob@100: 
rob@100:       // Emulated touch up/mouse up event
rob@100:       attachEventHandler(curElement, "touchend", function(e) {
rob@100:         p.__mousePressed = false;
rob@100: 
rob@100:         if (typeof p.mouseClicked === "function" && !p.mouseDragging) {
rob@100:           p.mouseClicked();
rob@100:         }
rob@100: 
rob@100:         if (typeof p.mouseReleased === "function") {
rob@100:           p.mouseReleased();
rob@100:         }
rob@100:       });
rob@100:     }
rob@100: 
rob@100:     // Refire the touch start event we consumed in this function
rob@100:     curElement.dispatchEvent(t);
rob@100:   });
rob@100: 
rob@100:   /**
rob@100:    * Context menu toggles. Most often you will not want the
rob@100:    * browser's context menu to show on a right click, but
rob@100:    * sometimes, you do, so we add two unofficial functions
rob@100:    * that can be used to trigger context menu behaviour.
rob@100:    */
rob@100:   (function() {
rob@100:     var enabled = true,
rob@100:         contextMenu = function(e) {
rob@100:           e.preventDefault();
rob@100:           e.stopPropagation();
rob@100:         };
rob@100: 
rob@100:     p.disableContextMenu = function() {
rob@100:       if (!enabled) {
rob@100:         return;
rob@100:       }
rob@100:       attachEventHandler(curElement, 'contextmenu', contextMenu);
rob@100:       enabled = false;
rob@100:     };
rob@100: 
rob@100:     p.enableContextMenu = function() {
rob@100:       if (enabled) {
rob@100:         return;
rob@100:       }
rob@100:       detachEventHandler({elem: curElement, type: 'contextmenu', fn: contextMenu});
rob@100:       enabled = true;
rob@100:     };
rob@100:   }());
rob@100: 
rob@100:   /**
rob@100:    * Mouse moved or dragged
rob@100:    */
rob@100:   attachEventHandler(curElement, "mousemove", function(e) {
rob@100:     updateMousePosition(curElement, e);
rob@100:     if (typeof p.mouseMoved === "function" && !p.__mousePressed) {
rob@100:       p.mouseMoved();
rob@100:     }
rob@100:     if (typeof p.mouseDragged === "function" && p.__mousePressed) {
rob@100:       p.mouseDragged();
rob@100:       p.mouseDragging = true;
rob@100:     }
rob@100:   });
rob@100: 
rob@100:   /**
rob@100:    * Unofficial mouse-out handling
rob@100:    */
rob@100:   attachEventHandler(curElement, "mouseout", function(e) {
rob@100:     if (typeof p.mouseOut === "function") {
rob@100:       p.mouseOut();
rob@100:     }
rob@100:   });
rob@100: 
rob@100:   /**
rob@100:    * Mouse over
rob@100:    */
rob@100:   attachEventHandler(curElement, "mouseover", function(e) {
rob@100:     updateMousePosition(curElement, e);
rob@100:     if (typeof p.mouseOver === "function") {
rob@100:       p.mouseOver();
rob@100:     }
rob@100:   });
rob@100: 
rob@100:   /**
rob@100:    * Disable browser's default handling for click-drag of a canvas.
rob@100:    */
rob@100:   curElement.onmousedown = function () {
rob@100:     // make sure focus happens, but nothing else
rob@100:     curElement.focus();
rob@100:     return false;
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * Mouse pressed or drag
rob@100:    */
rob@100:   attachEventHandler(curElement, "mousedown", function(e) {
rob@100:     p.__mousePressed = true;
rob@100:     p.mouseDragging = false;
rob@100:     switch (e.which) {
rob@100:     case 1:
rob@100:       p.mouseButton = PConstants.LEFT;
rob@100:       break;
rob@100:     case 2:
rob@100:       p.mouseButton = PConstants.CENTER;
rob@100:       break;
rob@100:     case 3:
rob@100:       p.mouseButton = PConstants.RIGHT;
rob@100:       break;
rob@100:     }
rob@100: 
rob@100:     if (typeof p.mousePressed === "function") {
rob@100:       p.mousePressed();
rob@100:     }
rob@100:   });
rob@100: 
rob@100:   /**
rob@100:    * Mouse clicked or released
rob@100:    */
rob@100:   attachEventHandler(curElement, "mouseup", function(e) {
rob@100:     p.__mousePressed = false;
rob@100: 
rob@100:     if (typeof p.mouseClicked === "function" && !p.mouseDragging) {
rob@100:       p.mouseClicked();
rob@100:     }
rob@100: 
rob@100:     if (typeof p.mouseReleased === "function") {
rob@100:       p.mouseReleased();
rob@100:     }
rob@100:   });
rob@100: 
rob@100:   /**
rob@100:    * Unofficial scroll wheel handling.
rob@100:    */
rob@100:   var mouseWheelHandler = function(e) {
rob@100:     var delta = 0;
rob@100: 
rob@100:     if (e.wheelDelta) {
rob@100:       delta = e.wheelDelta / 120;
rob@100:       if (window.opera) {
rob@100:         delta = -delta;
rob@100:       }
rob@100:     } else if (e.detail) {
rob@100:       delta = -e.detail / 3;
rob@100:     }
rob@100: 
rob@100:     p.mouseScroll = delta;
rob@100: 
rob@100:     if (delta && typeof p.mouseScrolled === 'function') {
rob@100:       p.mouseScrolled();
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   // Support Gecko and non-Gecko scroll events
rob@100:   attachEventHandler(document, 'DOMMouseScroll', mouseWheelHandler);
rob@100:   attachEventHandler(document, 'mousewheel', mouseWheelHandler);
rob@100: 
rob@100: };
rob@100: 
rob@100: },{}],25:[function(require,module,exports){
rob@100: /**
rob@100:  * The parser for turning Processing syntax into Pjs JavaScript.
rob@100:  * This code is not trivial; unless you know what you're doing,
rob@100:  * you shouldn't be changing things in here =)
rob@100:  */
rob@100: module.exports = function setupParser(Processing, options) {
rob@100: 
rob@100:   var defaultScope = options.defaultScope,
rob@100:       PConstants = defaultScope.PConstants,
rob@100:       aFunctions = options.aFunctions,
rob@100:       Browser = options.Browser,
rob@100:       document = Browser.document,
rob@100:       undef;
rob@100: 
rob@100:   // Processing global methods and constants for the parser
rob@100:   function getGlobalMembers() {
rob@100:     // The names array contains the names of everything that is inside "p."
rob@100:     // When something new is added to "p." it must also be added to this list.
rob@100:     var names = [ /* this code is generated by jsglobals.js */
rob@100:       "abs", "acos", "alpha", "ambient", "ambientLight", "append", "applyMatrix",
rob@100:       "arc", "arrayCopy", "asin", "atan", "atan2", "background", "beginCamera",
rob@100:       "beginDraw", "beginShape", "bezier", "bezierDetail", "bezierPoint",
rob@100:       "bezierTangent", "bezierVertex", "binary", "blend", "blendColor",
rob@100:       "blit_resize", "blue", "box", "breakShape", "brightness",
rob@100:       "camera", "ceil", "Character", "color", "colorMode",
rob@100:       "concat", "constrain", "copy", "cos", "createFont",
rob@100:       "createGraphics", "createImage", "cursor", "curve", "curveDetail",
rob@100:       "curvePoint", "curveTangent", "curveTightness", "curveVertex", "day",
rob@100:       "degrees", "directionalLight", "disableContextMenu",
rob@100:       "dist", "draw", "ellipse", "ellipseMode", "emissive", "enableContextMenu",
rob@100:       "endCamera", "endDraw", "endShape", "exit", "exp", "expand", "externals",
rob@100:       "fill", "filter", "floor", "focused", "frameCount", "frameRate", "frustum",
rob@100:       "get", "glyphLook", "glyphTable", "green", "height", "hex", "hint", "hour",
rob@100:       "hue", "image", "imageMode", "intersect", "join", "key",
rob@100:       "keyCode", "keyPressed", "keyReleased", "keyTyped", "lerp", "lerpColor",
rob@100:       "lightFalloff", "lights", "lightSpecular", "line", "link", "loadBytes",
rob@100:       "loadFont", "loadGlyphs", "loadImage", "loadPixels", "loadShape", "loadXML",
rob@100:       "loadStrings", "log", "loop", "mag", "map", "match", "matchAll", "max",
rob@100:       "millis", "min", "minute", "mix", "modelX", "modelY", "modelZ", "modes",
rob@100:       "month", "mouseButton", "mouseClicked", "mouseDragged", "mouseMoved",
rob@100:       "mouseOut", "mouseOver", "mousePressed", "mouseReleased", "mouseScroll",
rob@100:       "mouseScrolled", "mouseX", "mouseY", "name", "nf", "nfc", "nfp", "nfs",
rob@100:       "noCursor", "noFill", "noise", "noiseDetail", "noiseSeed", "noLights",
rob@100:       "noLoop", "norm", "normal", "noSmooth", "noStroke", "noTint", "ortho",
rob@100:       "param", "parseBoolean", "parseByte", "parseChar", "parseFloat",
rob@100:       "parseInt", "peg", "perspective", "PImage", "pixels", "PMatrix2D",
rob@100:       "PMatrix3D", "PMatrixStack", "pmouseX", "pmouseY", "point",
rob@100:       "pointLight", "popMatrix", "popStyle", "pow", "print", "printCamera",
rob@100:       "println", "printMatrix", "printProjection", "PShape", "PShapeSVG",
rob@100:       "pushMatrix", "pushStyle", "quad", "radians", "random", "randomGaussian",
rob@100:       "randomSeed", "rect", "rectMode", "red", "redraw", "requestImage",
rob@100:       "resetMatrix", "reverse", "rotate", "rotateX", "rotateY", "rotateZ",
rob@100:       "round", "saturation", "save", "saveFrame", "saveStrings", "scale",
rob@100:       "screenX", "screenY", "screenZ", "second", "set", "setup", "shape",
rob@100:       "shapeMode", "shared", "shearX", "shearY", "shininess", "shorten", "sin", "size", "smooth",
rob@100:       "sort", "specular", "sphere", "sphereDetail", "splice", "split",
rob@100:       "splitTokens", "spotLight", "sq", "sqrt", "status", "str", "stroke",
rob@100:       "strokeCap", "strokeJoin", "strokeWeight", "subset", "tan", "text",
rob@100:       "textAlign", "textAscent", "textDescent", "textFont", "textLeading",
rob@100:       "textMode", "textSize", "texture", "textureMode", "textWidth", "tint", "toImageData",
rob@100:       "touchCancel", "touchEnd", "touchMove", "touchStart", "translate", "transform",
rob@100:       "triangle", "trim", "unbinary", "unhex", "updatePixels", "use3DContext",
rob@100:       "vertex", "width", "XMLElement", "XML", "year", "__contains", "__equals",
rob@100:       "__equalsIgnoreCase", "__frameRate", "__hashCode", "__int_cast",
rob@100:       "__instanceof", "__keyPressed", "__mousePressed", "__printStackTrace",
rob@100:       "__replace", "__replaceAll", "__replaceFirst", "__toCharArray", "__split",
rob@100:       "__codePointAt", "__startsWith", "__endsWith", "__matches"];
rob@100: 
rob@100:     // custom functions and properties are added here
rob@100:     if(aFunctions) {
rob@100:       Object.keys(aFunctions).forEach(function(name) {
rob@100:         names.push(name);
rob@100:       });
rob@100:     }
rob@100: 
rob@100:     // custom libraries that were attached to Processing
rob@100:     var members = {};
rob@100:     var i, l;
rob@100:     for (i = 0, l = names.length; i < l ; ++i) {
rob@100:       members[names[i]] = null;
rob@100:     }
rob@100:     for (var lib in Processing.lib) {
rob@100:       if (Processing.lib.hasOwnProperty(lib)) {
rob@100:         if (Processing.lib[lib].exports) {
rob@100:           var exportedNames = Processing.lib[lib].exports;
rob@100:           for (i = 0, l = exportedNames.length; i < l; ++i) {
rob@100:            members[exportedNames[i]] = null;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:     return members;
rob@100:   }
rob@100: 
rob@100:   /*
rob@100: 
rob@100:     Parser converts Java-like syntax into JavaScript.
rob@100:     Creates an Abstract Syntax Tree -- "Light AST" from the Java-like code.
rob@100: 
rob@100:     It is an object tree. The root object is created from the AstRoot class, which contains statements.
rob@100: 
rob@100:     A statement object can be of type: AstForStatement, AstCatchStatement, AstPrefixStatement, AstMethod, AstClass,
rob@100:     AstInterface, AstFunction, AstStatementBlock and AstLabel.
rob@100: 
rob@100:     AstPrefixStatement can be a statement of type: if, switch, while, with, do, else, finally, return, throw, try, break, and continue.
rob@100: 
rob@100:     These object's toString function returns the JavaScript code for the statement.
rob@100: 
rob@100:     Any processing calls need "processing." prepended to them.
rob@100: 
rob@100:     Similarly, calls from inside classes need "$this_1.", prepended to them,
rob@100:     with 1 being the depth level for inner classes.
rob@100:     This includes members passed down from inheritance.
rob@100: 
rob@100:     The resulting code is then eval'd and run.
rob@100: 
rob@100:   */
rob@100: 
rob@100:   function parseProcessing(code) {
rob@100:     var globalMembers = getGlobalMembers();
rob@100: 
rob@100:     // masks parentheses, brackets and braces with '"A5"'
rob@100:     // where A is the bracket type, and 5 is the index in an array containing all brackets split into atoms
rob@100:     // 'while(true){}' -> 'while"B1""A2"'
rob@100:     // parentheses() = B, brackets[] = C and braces{} = A
rob@100:     function splitToAtoms(code) {
rob@100:       var atoms = [];
rob@100:       var items = code.split(/([\{\[\(\)\]\}])/);
rob@100:       var result = items[0];
rob@100: 
rob@100:       var stack = [];
rob@100:       for(var i=1; i < items.length; i += 2) {
rob@100:         var item = items[i];
rob@100:         if(item === '[' || item === '{' || item === '(') {
rob@100:           stack.push(result); result = item;
rob@100:         } else if(item === ']' || item === '}' || item === ')') {
rob@100:           var kind = item === '}' ? 'A' : item === ')' ? 'B' : 'C';
rob@100:           var index = atoms.length; atoms.push(result + item);
rob@100:           result = stack.pop() + '"' + kind + (index + 1) + '"';
rob@100:         }
rob@100:         result += items[i + 1];
rob@100:       }
rob@100:       atoms.unshift(result);
rob@100:       return atoms;
rob@100:     }
rob@100: 
rob@100:     // replaces strings and regexs keyed by index with an array of strings
rob@100:     function injectStrings(code, strings) {
rob@100:       return code.replace(/'(\d+)'/g, function(all, index) {
rob@100:         var val = strings[index];
rob@100:         if(val.charAt(0) === "/") {
rob@100:           return val;
rob@100:         }
rob@100:         return (/^'((?:[^'\\\n])|(?:\\.[0-9A-Fa-f]*))'$/).test(val) ? "(new $p.Character(" + val + "))" : val;
rob@100:       });
rob@100:     }
rob@100: 
rob@100:     // trims off leading and trailing spaces
rob@100:     // returns an object. object.left, object.middle, object.right, object.untrim
rob@100:     function trimSpaces(string) {
rob@100:       var m1 = /^\s*/.exec(string), result;
rob@100:       if(m1[0].length === string.length) {
rob@100:         result = {left: m1[0], middle: "", right: ""};
rob@100:       } else {
rob@100:         var m2 = /\s*$/.exec(string);
rob@100:         result = {left: m1[0], middle: string.substring(m1[0].length, m2.index), right: m2[0]};
rob@100:       }
rob@100:       result.untrim = function(t) { return this.left + t + this.right; };
rob@100:       return result;
rob@100:     }
rob@100: 
rob@100:     // simple trim of leading and trailing spaces
rob@100:     function trim(string) {
rob@100:       return string.replace(/^\s+/,'').replace(/\s+$/,'');
rob@100:     }
rob@100: 
rob@100:     function appendToLookupTable(table, array) {
rob@100:       for(var i=0,l=array.length;i<l;++i) {
rob@100:         table[array[i]] = null;
rob@100:       }
rob@100:       return table;
rob@100:     }
rob@100: 
rob@100:     function isLookupTableEmpty(table) {
rob@100:       for(var i in table) {
rob@100:         if(table.hasOwnProperty(i)) {
rob@100:           return false;
rob@100:         }
rob@100:       }
rob@100:       return true;
rob@100:     }
rob@100: 
rob@100:     function getAtomIndex(templ) { return templ.substring(2, templ.length - 1); }
rob@100: 
rob@100:     // remove carriage returns "\r"
rob@100:     var codeWoExtraCr = code.replace(/\r\n?|\n\r/g, "\n");
rob@100: 
rob@100:     // masks strings and regexs with "'5'", where 5 is the index in an array containing all strings and regexs
rob@100:     // also removes all comments
rob@100:     var strings = [];
rob@100:     var codeWoStrings = codeWoExtraCr.replace(/("(?:[^"\\\n]|\\.)*")|('(?:[^'\\\n]|\\.)*')|(([\[\(=|&!\^:?]\s*)(\/(?![*\/])(?:[^\/\\\n]|\\.)*\/[gim]*)\b)|(\/\/[^\n]*\n)|(\/\*(?:(?!\*\/)(?:.|\n))*\*\/)/g,
rob@100:     function(all, quoted, aposed, regexCtx, prefix, regex, singleComment, comment) {
rob@100:       var index;
rob@100:       if(quoted || aposed) { // replace strings
rob@100:         index = strings.length; strings.push(all);
rob@100:         return "'" + index + "'";
rob@100:       }
rob@100:       if(regexCtx) { // replace RegExps
rob@100:         index = strings.length; strings.push(regex);
rob@100:         return prefix + "'" + index + "'";
rob@100:       }
rob@100:       // kill comments
rob@100:       return comment !== "" ? " " : "\n";
rob@100:     });
rob@100: 
rob@100:     // protect character codes from namespace collision
rob@100:     codeWoStrings = codeWoStrings.replace(/__x([0-9A-F]{4})/g, function(all, hexCode) {
rob@100:       // $ = __x0024
rob@100:       // _ = __x005F
rob@100:       // this protects existing character codes from conversion
rob@100:       // __x0024 = __x005F_x0024
rob@100:       return "__x005F_x" + hexCode;
rob@100:     });
rob@100: 
rob@100:     // convert dollar sign to character code
rob@100:     codeWoStrings = codeWoStrings.replace(/\$/g, "__x0024");
rob@100: 
rob@100:     // Remove newlines after return statements
rob@100:     codeWoStrings = codeWoStrings.replace(/return\s*[\n\r]+/g, "return ");
rob@100: 
rob@100:     // removes generics
rob@100:     var genericsWereRemoved;
rob@100:     var codeWoGenerics = codeWoStrings;
rob@100:     var replaceFunc = function(all, before, types, after) {
rob@100:       if(!!before || !!after) {
rob@100:         return all;
rob@100:       }
rob@100:       genericsWereRemoved = true;
rob@100:       return "";
rob@100:     };
rob@100: 
rob@100:     do {
rob@100:       genericsWereRemoved = false;
rob@100:       codeWoGenerics = codeWoGenerics.replace(/([<]?)<\s*((?:\?|[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)(?:\[\])*(?:\s+(?:extends|super)\s+[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)?(?:\s*,\s*(?:\?|[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)(?:\[\])*(?:\s+(?:extends|super)\s+[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)?)*)\s*>([=]?)/g, replaceFunc);
rob@100:     } while (genericsWereRemoved);
rob@100: 
rob@100:     var atoms = splitToAtoms(codeWoGenerics);
rob@100:     var replaceContext;
rob@100:     var declaredClasses = {}, currentClassId, classIdSeed = 0;
rob@100: 
rob@100:     function addAtom(text, type) {
rob@100:       var lastIndex = atoms.length;
rob@100:       atoms.push(text);
rob@100:       return '"' + type + lastIndex + '"';
rob@100:     }
rob@100: 
rob@100:     function generateClassId() {
rob@100:       return "class" + (++classIdSeed);
rob@100:     }
rob@100: 
rob@100:     function appendClass(class_, classId, scopeId) {
rob@100:       class_.classId = classId;
rob@100:       class_.scopeId = scopeId;
rob@100:       declaredClasses[classId] = class_;
rob@100:     }
rob@100: 
rob@100:     // functions defined below
rob@100:     var transformClassBody, transformInterfaceBody, transformStatementsBlock, transformStatements, transformMain, transformExpression;
rob@100: 
rob@100:     var classesRegex = /\b((?:(?:public|private|final|protected|static|abstract)\s+)*)(class|interface)\s+([A-Za-z_$][\w$]*\b)(\s+extends\s+[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*,\s*[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*\b)*)?(\s+implements\s+[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*,\s*[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*\b)*)?\s*("A\d+")/g;
rob@100:     var methodsRegex = /\b((?:(?:public|private|final|protected|static|abstract|synchronized)\s+)*)((?!(?:else|new|return|throw|function|public|private|protected)\b)[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*"C\d+")*)\s*([A-Za-z_$][\w$]*\b)\s*("B\d+")(\s*throws\s+[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*,\s*[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)*)?\s*("A\d+"|;)/g;
rob@100:     var fieldTest = /^((?:(?:public|private|final|protected|static)\s+)*)((?!(?:else|new|return|throw)\b)[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*"C\d+")*)\s*([A-Za-z_$][\w$]*\b)\s*(?:"C\d+"\s*)*([=,]|$)/;
rob@100:     var cstrsRegex = /\b((?:(?:public|private|final|protected|static|abstract)\s+)*)((?!(?:new|return|throw)\b)[A-Za-z_$][\w$]*\b)\s*("B\d+")(\s*throws\s+[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*,\s*[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)*)?\s*("A\d+")/g;
rob@100:     var attrAndTypeRegex = /^((?:(?:public|private|final|protected|static)\s+)*)((?!(?:new|return|throw)\b)[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*(?:\s*"C\d+")*)\s*/;
rob@100:     var functionsRegex = /\bfunction(?:\s+([A-Za-z_$][\w$]*))?\s*("B\d+")\s*("A\d+")/g;
rob@100: 
rob@100:     // This converts classes, methods and functions into atoms, and adds them to the atoms array.
rob@100:     // classes = E, methods = D and functions = H
rob@100:     function extractClassesAndMethods(code) {
rob@100:       var s = code;
rob@100:       s = s.replace(classesRegex, function(all) {
rob@100:         return addAtom(all, 'E');
rob@100:       });
rob@100:       s = s.replace(methodsRegex, function(all) {
rob@100:         return addAtom(all, 'D');
rob@100:       });
rob@100:       s = s.replace(functionsRegex, function(all) {
rob@100:         return addAtom(all, 'H');
rob@100:       });
rob@100:       return s;
rob@100:     }
rob@100: 
rob@100:     // This converts constructors into atoms, and adds them to the atoms array.
rob@100:     // constructors = G
rob@100:     function extractConstructors(code, className) {
rob@100:       var result = code.replace(cstrsRegex, function(all, attr, name, params, throws_, body) {
rob@100:         if(name !== className) {
rob@100:           return all;
rob@100:         }
rob@100:         return addAtom(all, 'G');
rob@100:       });
rob@100:       return result;
rob@100:     }
rob@100: 
rob@100:     // AstParam contains the name of a parameter inside a function declaration
rob@100:     function AstParam(name) {
rob@100:       this.name = name;
rob@100:     }
rob@100:     AstParam.prototype.toString = function() {
rob@100:       return this.name;
rob@100:     };
rob@100:     // AstParams contains an array of AstParam objects
rob@100:     function AstParams(params, methodArgsParam) {
rob@100:       this.params = params;
rob@100:       this.methodArgsParam = methodArgsParam;
rob@100:     }
rob@100:     AstParams.prototype.getNames = function() {
rob@100:       var names = [];
rob@100:       for(var i=0,l=this.params.length;i<l;++i) {
rob@100:         names.push(this.params[i].name);
rob@100:       }
rob@100:       return names;
rob@100:     };
rob@100:     AstParams.prototype.prependMethodArgs = function(body) {
rob@100:       if (!this.methodArgsParam) {
rob@100:         return body;
rob@100:       }
rob@100:       return "{\nvar " + this.methodArgsParam.name +
rob@100:         " = Array.prototype.slice.call(arguments, " +
rob@100:         this.params.length + ");\n" + body.substring(1);
rob@100:     };
rob@100:     AstParams.prototype.toString = function() {
rob@100:       if(this.params.length === 0) {
rob@100:         return "()";
rob@100:       }
rob@100:       var result = "(";
rob@100:       for(var i=0,l=this.params.length;i<l;++i) {
rob@100:         result += this.params[i] + ", ";
rob@100:       }
rob@100:       return result.substring(0, result.length - 2) + ")";
rob@100:     };
rob@100: 
rob@100:     function transformParams(params) {
rob@100:       var paramsWoPars = trim(params.substring(1, params.length - 1));
rob@100:       var result = [], methodArgsParam = null;
rob@100:       if(paramsWoPars !== "") {
rob@100:         var paramList = paramsWoPars.split(",");
rob@100:         for(var i=0; i < paramList.length; ++i) {
rob@100:           var param = /\b([A-Za-z_$][\w$]*\b)(\s*"[ABC][\d]*")*\s*$/.exec(paramList[i]);
rob@100:           if (i === paramList.length - 1 && paramList[i].indexOf('...') >= 0) {
rob@100:             methodArgsParam = new AstParam(param[1]);
rob@100:             break;
rob@100:           }
rob@100:           result.push(new AstParam(param[1]));
rob@100:         }
rob@100:       }
rob@100:       return new AstParams(result, methodArgsParam);
rob@100:     }
rob@100: 
rob@100:     function preExpressionTransform(expr) {
rob@100:       var s = expr;
rob@100:       // new type[] {...} --> {...}
rob@100:       s = s.replace(/\bnew\s+([A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)(?:\s*"C\d+")+\s*("A\d+")/g, function(all, type, init) {
rob@100:         return init;
rob@100:       });
rob@100:       // new Runnable() {...} --> "F???"
rob@100:       s = s.replace(/\bnew\s+([A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)(?:\s*"B\d+")\s*("A\d+")/g, function(all, type, init) {
rob@100:         return addAtom(all, 'F');
rob@100:       });
rob@100:       // function(...) { } --> "H???"
rob@100:       s = s.replace(functionsRegex, function(all) {
rob@100:         return addAtom(all, 'H');
rob@100:       });
rob@100:       // new type[?] --> createJavaArray('type', [?])
rob@100:       s = s.replace(/\bnew\s+([A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)\s*("C\d+"(?:\s*"C\d+")*)/g, function(all, type, index) {
rob@100:         var args = index.replace(/"C(\d+)"/g, function(all, j) { return atoms[j]; })
rob@100:           .replace(/\[\s*\]/g, "[null]").replace(/\s*\]\s*\[\s*/g, ", ");
rob@100:         var arrayInitializer = "{" + args.substring(1, args.length - 1) + "}";
rob@100:         var createArrayArgs = "('" + type + "', " + addAtom(arrayInitializer, 'A') + ")";
rob@100:         return '$p.createJavaArray' + addAtom(createArrayArgs, 'B');
rob@100:       });
rob@100:       // .length() --> .length
rob@100:       s = s.replace(/(\.\s*length)\s*"B\d+"/g, "$1");
rob@100:       // #000000 --> 0x000000
rob@100:       s = s.replace(/#([0-9A-Fa-f]{6})\b/g, function(all, digits) {
rob@100:         return "0xFF" + digits;
rob@100:       });
rob@100:       // delete (type)???, except (int)???
rob@100:       s = s.replace(/"B(\d+)"(\s*(?:[\w$']|"B))/g, function(all, index, next) {
rob@100:         var atom = atoms[index];
rob@100:         if(!/^\(\s*[A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*\s*(?:"C\d+"\s*)*\)$/.test(atom)) {
rob@100:           return all;
rob@100:         }
rob@100:         if(/^\(\s*int\s*\)$/.test(atom)) {
rob@100:           return "(int)" + next;
rob@100:         }
rob@100:         var indexParts = atom.split(/"C(\d+)"/g);
rob@100:         if(indexParts.length > 1) {
rob@100:           // even items contains atom numbers, can check only first
rob@100:           if(! /^\[\s*\]$/.test(atoms[indexParts[1]])) {
rob@100:             return all; // fallback - not a cast
rob@100:           }
rob@100:         }
rob@100:         return "" + next;
rob@100:       });
rob@100:       // (int)??? -> __int_cast(???)
rob@100:       s = s.replace(/\(int\)([^,\]\)\}\?\:\*\+\-\/\^\|\%\&\~<\>\=]+)/g, function(all, arg) {
rob@100:         var trimmed = trimSpaces(arg);
rob@100:         return trimmed.untrim("__int_cast(" + trimmed.middle + ")");
rob@100:       });
rob@100:       // super() -> $superCstr(), super. -> $super.;
rob@100:       s = s.replace(/\bsuper(\s*"B\d+")/g, "$$superCstr$1").replace(/\bsuper(\s*\.)/g, "$$super$1");
rob@100:       // 000.43->0.43 and 0010f->10, but not 0010
rob@100:       s = s.replace(/\b0+((\d*)(?:\.[\d*])?(?:[eE][\-\+]?\d+)?[fF]?)\b/, function(all, numberWo0, intPart) {
rob@100:         if( numberWo0 === intPart) {
rob@100:           return all;
rob@100:         }
rob@100:         return intPart === "" ? "0" + numberWo0 : numberWo0;
rob@100:       });
rob@100:       // 3.0f -> 3.0
rob@100:       s = s.replace(/\b(\.?\d+\.?)[fF]\b/g, "$1");
rob@100:       // Weird (?) parsing errors with %
rob@100:       s = s.replace(/([^\s])%([^=\s])/g, "$1 % $2");
rob@100:       // Since frameRate() and frameRate are different things,
rob@100:       // we need to differentiate them somehow. So when we parse
rob@100:       // the Processing.js source, replace frameRate so it isn't
rob@100:       // confused with frameRate(), as well as keyPressed and mousePressed
rob@100:       s = s.replace(/\b(frameRate|keyPressed|mousePressed)\b(?!\s*"B)/g, "__$1");
rob@100:       // "boolean", "byte", "int", etc. => "parseBoolean", "parseByte", "parseInt", etc.
rob@100:       s = s.replace(/\b(boolean|byte|char|float|int)\s*"B/g, function(all, name) {
rob@100:         return "parse" + name.substring(0, 1).toUpperCase() + name.substring(1) + "\"B";
rob@100:       });
rob@100:       // "pixels" replacements:
rob@100:       //   pixels[i] = c => pixels.setPixel(i,c) | pixels[i] => pixels.getPixel(i)
rob@100:       //   pixels.length => pixels.getLength()
rob@100:       //   pixels = ar => pixels.set(ar) | pixels => pixels.toArray()
rob@100:       s = s.replace(/\bpixels\b\s*(("C(\d+)")|\.length)?(\s*=(?!=)([^,\]\)\}]+))?/g,
rob@100:         function(all, indexOrLength, index, atomIndex, equalsPart, rightSide) {
rob@100:           if(index) {
rob@100:             var atom = atoms[atomIndex];
rob@100:             if(equalsPart) {
rob@100:               return "pixels.setPixel" + addAtom("(" +atom.substring(1, atom.length - 1) +
rob@100:                 "," + rightSide + ")", 'B');
rob@100:             }
rob@100:             return "pixels.getPixel" + addAtom("(" + atom.substring(1, atom.length - 1) +
rob@100:               ")", 'B');
rob@100:           }
rob@100:           if(indexOrLength) {
rob@100:             // length
rob@100:             return "pixels.getLength" + addAtom("()", 'B');
rob@100:           }
rob@100:           if(equalsPart) {
rob@100:             return "pixels.set" + addAtom("(" + rightSide + ")", 'B');
rob@100:           }
rob@100:           return "pixels.toArray" + addAtom("()", 'B');
rob@100:         });
rob@100:       // Java method replacements for: replace, replaceAll, replaceFirst, equals, hashCode, etc.
rob@100:       //   xxx.replace(yyy) -> __replace(xxx, yyy)
rob@100:       //   "xx".replace(yyy) -> __replace("xx", yyy)
rob@100:       var repeatJavaReplacement;
rob@100:       function replacePrototypeMethods(all, subject, method, atomIndex) {
rob@100:         var atom = atoms[atomIndex];
rob@100:         repeatJavaReplacement = true;
rob@100:         var trimmed = trimSpaces(atom.substring(1, atom.length - 1));
rob@100:         return "__" + method  + ( trimmed.middle === "" ? addAtom("(" + subject.replace(/\.\s*$/, "") + ")", 'B') :
rob@100:           addAtom("(" + subject.replace(/\.\s*$/, "") + "," + trimmed.middle + ")", 'B') );
rob@100:       }
rob@100:       do {
rob@100:         repeatJavaReplacement = false;
rob@100:         s = s.replace(/((?:'\d+'|\b[A-Za-z_$][\w$]*\s*(?:"[BC]\d+")*)\s*\.\s*(?:[A-Za-z_$][\w$]*\s*(?:"[BC]\d+"\s*)*\.\s*)*)(replace|replaceAll|replaceFirst|contains|equals|equalsIgnoreCase|hashCode|toCharArray|printStackTrace|split|startsWith|endsWith|codePointAt|matches)\s*"B(\d+)"/g,
rob@100:           replacePrototypeMethods);
rob@100:       } while (repeatJavaReplacement);
rob@100:       // xxx instanceof yyy -> __instanceof(xxx, yyy)
rob@100:       function replaceInstanceof(all, subject, type) {
rob@100:         repeatJavaReplacement = true;
rob@100:         return "__instanceof" + addAtom("(" + subject + ", " + type + ")", 'B');
rob@100:       }
rob@100:       do {
rob@100:         repeatJavaReplacement = false;
rob@100:         s = s.replace(/((?:'\d+'|\b[A-Za-z_$][\w$]*\s*(?:"[BC]\d+")*)\s*(?:\.\s*[A-Za-z_$][\w$]*\s*(?:"[BC]\d+"\s*)*)*)instanceof\s+([A-Za-z_$][\w$]*\s*(?:\.\s*[A-Za-z_$][\w$]*)*)/g,
rob@100:           replaceInstanceof);
rob@100:       } while (repeatJavaReplacement);
rob@100:       // this() -> $constr()
rob@100:       s = s.replace(/\bthis(\s*"B\d+")/g, "$$constr$1");
rob@100: 
rob@100:       return s;
rob@100:     }
rob@100: 
rob@100:     function AstInlineClass(baseInterfaceName, body) {
rob@100:       this.baseInterfaceName = baseInterfaceName;
rob@100:       this.body = body;
rob@100:       body.owner = this;
rob@100:     }
rob@100:     AstInlineClass.prototype.toString = function() {
rob@100:       return "new (" + this.body + ")";
rob@100:     };
rob@100: 
rob@100:     function transformInlineClass(class_) {
rob@100:       var m = new RegExp(/\bnew\s*([A-Za-z_$][\w$]*\s*(?:\.\s*[A-Za-z_$][\w$]*)*)\s*"B\d+"\s*"A(\d+)"/).exec(class_);
rob@100:       var oldClassId = currentClassId, newClassId = generateClassId();
rob@100:       currentClassId = newClassId;
rob@100:       var uniqueClassName = m[1] + "$" + newClassId;
rob@100:       var inlineClass = new AstInlineClass(uniqueClassName,
rob@100:         transformClassBody(atoms[m[2]], uniqueClassName, "", "implements " + m[1]));
rob@100:       appendClass(inlineClass, newClassId, oldClassId);
rob@100:       currentClassId = oldClassId;
rob@100:       return inlineClass;
rob@100:     }
rob@100: 
rob@100:     function AstFunction(name, params, body) {
rob@100:       this.name = name;
rob@100:       this.params = params;
rob@100:       this.body = body;
rob@100:     }
rob@100:     AstFunction.prototype.toString = function() {
rob@100:       var oldContext = replaceContext;
rob@100:       // saving "this." and parameters
rob@100:       var names = appendToLookupTable({"this":null}, this.params.getNames());
rob@100:       replaceContext = function (subject) {
rob@100:         return names.hasOwnProperty(subject.name) ? subject.name : oldContext(subject);
rob@100:       };
rob@100:       var result = "function";
rob@100:       if(this.name) {
rob@100:         result += " " + this.name;
rob@100:       }
rob@100:       var body = this.params.prependMethodArgs(this.body.toString());
rob@100:       result += this.params + " " + body;
rob@100:       replaceContext = oldContext;
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     function transformFunction(class_) {
rob@100:       var m = new RegExp(/\b([A-Za-z_$][\w$]*)\s*"B(\d+)"\s*"A(\d+)"/).exec(class_);
rob@100:       return new AstFunction( m[1] !== "function" ? m[1] : null,
rob@100:         transformParams(atoms[m[2]]), transformStatementsBlock(atoms[m[3]]));
rob@100:     }
rob@100: 
rob@100:     function AstInlineObject(members) {
rob@100:       this.members = members;
rob@100:     }
rob@100:     AstInlineObject.prototype.toString = function() {
rob@100:       var oldContext = replaceContext;
rob@100:       replaceContext = function (subject) {
rob@100:           return subject.name === "this" ? "this" : oldContext(subject); // saving "this."
rob@100:       };
rob@100:       var result = "";
rob@100:       for(var i=0,l=this.members.length;i<l;++i) {
rob@100:         if(this.members[i].label) {
rob@100:           result += this.members[i].label + ": ";
rob@100:         }
rob@100:         result += this.members[i].value.toString() + ", ";
rob@100:       }
rob@100:       replaceContext = oldContext;
rob@100:       return result.substring(0, result.length - 2);
rob@100:     };
rob@100: 
rob@100:     function transformInlineObject(obj) {
rob@100:       var members = obj.split(',');
rob@100:       for(var i=0; i < members.length; ++i) {
rob@100:         var label = members[i].indexOf(':');
rob@100:         if(label < 0) {
rob@100:           members[i] = { value: transformExpression(members[i]) };
rob@100:         } else {
rob@100:           members[i] = { label: trim(members[i].substring(0, label)),
rob@100:             value: transformExpression( trim(members[i].substring(label + 1)) ) };
rob@100:         }
rob@100:       }
rob@100:       return new AstInlineObject(members);
rob@100:     }
rob@100: 
rob@100:     function expandExpression(expr) {
rob@100:       if(expr.charAt(0) === '(' || expr.charAt(0) === '[') {
rob@100:         return expr.charAt(0) + expandExpression(expr.substring(1, expr.length - 1)) + expr.charAt(expr.length - 1);
rob@100:       }
rob@100:       if(expr.charAt(0) === '{') {
rob@100:         if(/^\{\s*(?:[A-Za-z_$][\w$]*|'\d+')\s*:/.test(expr)) {
rob@100:           return "{" + addAtom(expr.substring(1, expr.length - 1), 'I') + "}";
rob@100:         }
rob@100:         return "[" + expandExpression(expr.substring(1, expr.length - 1)) + "]";
rob@100:       }
rob@100:       var trimmed = trimSpaces(expr);
rob@100:       var result = preExpressionTransform(trimmed.middle);
rob@100:       result = result.replace(/"[ABC](\d+)"/g, function(all, index) {
rob@100:         return expandExpression(atoms[index]);
rob@100:       });
rob@100:       return trimmed.untrim(result);
rob@100:     }
rob@100: 
rob@100:     function replaceContextInVars(expr) {
rob@100:       return expr.replace(/(\.\s*)?((?:\b[A-Za-z_]|\$)[\w$]*)(\s*\.\s*([A-Za-z_$][\w$]*)(\s*\()?)?/g,
rob@100:         function(all, memberAccessSign, identifier, suffix, subMember, callSign) {
rob@100:           if(memberAccessSign) {
rob@100:             return all;
rob@100:           }
rob@100:           var subject = { name: identifier, member: subMember, callSign: !!callSign };
rob@100:           return replaceContext(subject) + (suffix === undef ? "" : suffix);
rob@100:         });
rob@100:     }
rob@100: 
rob@100:     function AstExpression(expr, transforms) {
rob@100:       this.expr = expr;
rob@100:       this.transforms = transforms;
rob@100:     }
rob@100:     AstExpression.prototype.toString = function() {
rob@100:       var transforms = this.transforms;
rob@100:       var expr = replaceContextInVars(this.expr);
rob@100:       return expr.replace(/"!(\d+)"/g, function(all, index) {
rob@100:         return transforms[index].toString();
rob@100:       });
rob@100:     };
rob@100: 
rob@100:     transformExpression = function(expr) {
rob@100:       var transforms = [];
rob@100:       var s = expandExpression(expr);
rob@100:       s = s.replace(/"H(\d+)"/g, function(all, index) {
rob@100:         transforms.push(transformFunction(atoms[index]));
rob@100:         return '"!' + (transforms.length - 1) + '"';
rob@100:       });
rob@100:       s = s.replace(/"F(\d+)"/g, function(all, index) {
rob@100:         transforms.push(transformInlineClass(atoms[index]));
rob@100:         return '"!' + (transforms.length - 1) + '"';
rob@100:       });
rob@100:       s = s.replace(/"I(\d+)"/g, function(all, index) {
rob@100:         transforms.push(transformInlineObject(atoms[index]));
rob@100:         return '"!' + (transforms.length - 1) + '"';
rob@100:       });
rob@100: 
rob@100:       return new AstExpression(s, transforms);
rob@100:     };
rob@100: 
rob@100:     function AstVarDefinition(name, value, isDefault) {
rob@100:       this.name = name;
rob@100:       this.value = value;
rob@100:       this.isDefault = isDefault;
rob@100:     }
rob@100:     AstVarDefinition.prototype.toString = function() {
rob@100:       return this.name + ' = ' + this.value;
rob@100:     };
rob@100: 
rob@100:     function transformVarDefinition(def, defaultTypeValue) {
rob@100:       var eqIndex = def.indexOf("=");
rob@100:       var name, value, isDefault;
rob@100:       if(eqIndex < 0) {
rob@100:         name = def;
rob@100:         value = defaultTypeValue;
rob@100:         isDefault = true;
rob@100:       } else {
rob@100:         name = def.substring(0, eqIndex);
rob@100:         value = transformExpression(def.substring(eqIndex + 1));
rob@100:         isDefault = false;
rob@100:       }
rob@100:       return new AstVarDefinition( trim(name.replace(/(\s*"C\d+")+/g, "")),
rob@100:         value, isDefault);
rob@100:     }
rob@100: 
rob@100:     function getDefaultValueForType(type) {
rob@100:         if(type === "int" || type === "float") {
rob@100:           return "0";
rob@100:         }
rob@100:         if(type === "boolean") {
rob@100:           return "false";
rob@100:         }
rob@100:         if(type === "color") {
rob@100:           return "0x00000000";
rob@100:         }
rob@100:         return "null";
rob@100:     }
rob@100: 
rob@100:     function AstVar(definitions, varType) {
rob@100:       this.definitions = definitions;
rob@100:       this.varType = varType;
rob@100:     }
rob@100:     AstVar.prototype.getNames = function() {
rob@100:       var names = [];
rob@100:       for(var i=0,l=this.definitions.length;i<l;++i) {
rob@100:         names.push(this.definitions[i].name);
rob@100:       }
rob@100:       return names;
rob@100:     };
rob@100:     AstVar.prototype.toString = function() {
rob@100:       return "var " + this.definitions.join(",");
rob@100:     };
rob@100:     function AstStatement(expression) {
rob@100:       this.expression = expression;
rob@100:     }
rob@100:     AstStatement.prototype.toString = function() {
rob@100:       return this.expression.toString();
rob@100:     };
rob@100: 
rob@100:     function transformStatement(statement) {
rob@100:       if(fieldTest.test(statement)) {
rob@100:         var attrAndType = attrAndTypeRegex.exec(statement);
rob@100:         var definitions = statement.substring(attrAndType[0].length).split(",");
rob@100:         var defaultTypeValue = getDefaultValueForType(attrAndType[2]);
rob@100:         for(var i=0; i < definitions.length; ++i) {
rob@100:           definitions[i] = transformVarDefinition(definitions[i], defaultTypeValue);
rob@100:         }
rob@100:         return new AstVar(definitions, attrAndType[2]);
rob@100:       }
rob@100:       return new AstStatement(transformExpression(statement));
rob@100:     }
rob@100: 
rob@100:     function AstForExpression(initStatement, condition, step) {
rob@100:       this.initStatement = initStatement;
rob@100:       this.condition = condition;
rob@100:       this.step = step;
rob@100:     }
rob@100:     AstForExpression.prototype.toString = function() {
rob@100:       return "(" + this.initStatement + "; " + this.condition + "; " + this.step + ")";
rob@100:     };
rob@100: 
rob@100:     function AstForInExpression(initStatement, container) {
rob@100:       this.initStatement = initStatement;
rob@100:       this.container = container;
rob@100:     }
rob@100:     AstForInExpression.prototype.toString = function() {
rob@100:       var init = this.initStatement.toString();
rob@100:       if(init.indexOf("=") >= 0) { // can be without var declaration
rob@100:         init = init.substring(0, init.indexOf("="));
rob@100:       }
rob@100:       return "(" + init + " in " + this.container + ")";
rob@100:     };
rob@100: 
rob@100:     function AstForEachExpression(initStatement, container) {
rob@100:       this.initStatement = initStatement;
rob@100:       this.container = container;
rob@100:     }
rob@100:     AstForEachExpression.iteratorId = 0;
rob@100:     AstForEachExpression.prototype.toString = function() {
rob@100:       var init = this.initStatement.toString();
rob@100:       var iterator = "$it" + (AstForEachExpression.iteratorId++);
rob@100:       var variableName = init.replace(/^\s*var\s*/, "").split("=")[0];
rob@100:       var initIteratorAndVariable = "var " + iterator + " = new $p.ObjectIterator(" + this.container + "), " +
rob@100:          variableName + " = void(0)";
rob@100:       var nextIterationCondition = iterator + ".hasNext() && ((" +
rob@100:          variableName + " = " + iterator + ".next()) || true)";
rob@100:       return "(" + initIteratorAndVariable + "; " + nextIterationCondition + ";)";
rob@100:     };
rob@100: 
rob@100:     function transformForExpression(expr) {
rob@100:       var content;
rob@100:       if (/\bin\b/.test(expr)) {
rob@100:         content = expr.substring(1, expr.length - 1).split(/\bin\b/g);
rob@100:         return new AstForInExpression( transformStatement(trim(content[0])),
rob@100:           transformExpression(content[1]));
rob@100:       }
rob@100:       if (expr.indexOf(":") >= 0 && expr.indexOf(";") < 0) {
rob@100:         content = expr.substring(1, expr.length - 1).split(":");
rob@100:         return new AstForEachExpression( transformStatement(trim(content[0])),
rob@100:           transformExpression(content[1]));
rob@100:       }
rob@100:       content = expr.substring(1, expr.length - 1).split(";");
rob@100:       return new AstForExpression( transformStatement(trim(content[0])),
rob@100:         transformExpression(content[1]), transformExpression(content[2]));
rob@100:     }
rob@100: 
rob@100:     function sortByWeight(array) {
rob@100:       array.sort(function (a,b) {
rob@100:         return b.weight - a.weight;
rob@100:       });
rob@100:     }
rob@100: 
rob@100:     function AstInnerInterface(name, body, isStatic) {
rob@100:       this.name = name;
rob@100:       this.body = body;
rob@100:       this.isStatic = isStatic;
rob@100:       body.owner = this;
rob@100:     }
rob@100:     AstInnerInterface.prototype.toString = function() {
rob@100:       return "" + this.body;
rob@100:     };
rob@100:     function AstInnerClass(name, body, isStatic) {
rob@100:       this.name = name;
rob@100:       this.body = body;
rob@100:       this.isStatic = isStatic;
rob@100:       body.owner = this;
rob@100:     }
rob@100:     AstInnerClass.prototype.toString = function() {
rob@100:       return "" + this.body;
rob@100:     };
rob@100: 
rob@100:     function transformInnerClass(class_) {
rob@100:       var m = classesRegex.exec(class_); // 1 - attr, 2 - class|int, 3 - name, 4 - extends, 5 - implements, 6 - body
rob@100:       classesRegex.lastIndex = 0;
rob@100:       var isStatic = m[1].indexOf("static") >= 0;
rob@100:       var body = atoms[getAtomIndex(m[6])], innerClass;
rob@100:       var oldClassId = currentClassId, newClassId = generateClassId();
rob@100:       currentClassId = newClassId;
rob@100:       if(m[2] === "interface") {
rob@100:         innerClass = new AstInnerInterface(m[3], transformInterfaceBody(body, m[3], m[4]), isStatic);
rob@100:       } else {
rob@100:         innerClass = new AstInnerClass(m[3], transformClassBody(body, m[3], m[4], m[5]), isStatic);
rob@100:       }
rob@100:       appendClass(innerClass, newClassId, oldClassId);
rob@100:       currentClassId = oldClassId;
rob@100:       return innerClass;
rob@100:     }
rob@100: 
rob@100:     function AstClassMethod(name, params, body, isStatic) {
rob@100:       this.name = name;
rob@100:       this.params = params;
rob@100:       this.body = body;
rob@100:       this.isStatic = isStatic;
rob@100:     }
rob@100:     AstClassMethod.prototype.toString = function(){
rob@100:       var paramNames = appendToLookupTable({}, this.params.getNames());
rob@100:       var oldContext = replaceContext;
rob@100:       replaceContext = function (subject) {
rob@100:         return paramNames.hasOwnProperty(subject.name) ? subject.name : oldContext(subject);
rob@100:       };
rob@100:       var body = this.params.prependMethodArgs(this.body.toString());
rob@100:       var result = "function " + this.methodId + this.params + " " + body +"\n";
rob@100:       replaceContext = oldContext;
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     function transformClassMethod(method) {
rob@100:       var m = methodsRegex.exec(method);
rob@100:       methodsRegex.lastIndex = 0;
rob@100:       var isStatic = m[1].indexOf("static") >= 0;
rob@100:       var body = m[6] !== ';' ? atoms[getAtomIndex(m[6])] : "{}";
rob@100:       return new AstClassMethod(m[3], transformParams(atoms[getAtomIndex(m[4])]),
rob@100:         transformStatementsBlock(body), isStatic );
rob@100:     }
rob@100: 
rob@100:     function AstClassField(definitions, fieldType, isStatic) {
rob@100:       this.definitions = definitions;
rob@100:       this.fieldType = fieldType;
rob@100:       this.isStatic = isStatic;
rob@100:     }
rob@100:     AstClassField.prototype.getNames = function() {
rob@100:       var names = [];
rob@100:       for(var i=0,l=this.definitions.length;i<l;++i) {
rob@100:         names.push(this.definitions[i].name);
rob@100:       }
rob@100:       return names;
rob@100:     };
rob@100:     AstClassField.prototype.toString = function() {
rob@100:       var thisPrefix = replaceContext({ name: "[this]" });
rob@100:       if(this.isStatic) {
rob@100:         var className = this.owner.name;
rob@100:         var staticDeclarations = [];
rob@100:         for(var i=0,l=this.definitions.length;i<l;++i) {
rob@100:           var definition = this.definitions[i];
rob@100:           var name = definition.name, staticName = className + "." + name;
rob@100:           var declaration = "if(" + staticName + " === void(0)) {\n" +
rob@100:             " " + staticName + " = " + definition.value + "; }\n" +
rob@100:             "$p.defineProperty(" + thisPrefix + ", " +
rob@100:             "'" + name + "', { get: function(){return " + staticName + ";}, " +
rob@100:             "set: function(val){" + staticName + " = val;} });\n";
rob@100:           staticDeclarations.push(declaration);
rob@100:         }
rob@100:         return staticDeclarations.join("");
rob@100:       }
rob@100:       return thisPrefix + "." + this.definitions.join("; " + thisPrefix + ".");
rob@100:     };
rob@100: 
rob@100:     function transformClassField(statement) {
rob@100:       var attrAndType = attrAndTypeRegex.exec(statement);
rob@100:       var isStatic = attrAndType[1].indexOf("static") >= 0;
rob@100:       var definitions = statement.substring(attrAndType[0].length).split(/,\s*/g);
rob@100:       var defaultTypeValue = getDefaultValueForType(attrAndType[2]);
rob@100:       for(var i=0; i < definitions.length; ++i) {
rob@100:         definitions[i] = transformVarDefinition(definitions[i], defaultTypeValue);
rob@100:       }
rob@100:       return new AstClassField(definitions, attrAndType[2], isStatic);
rob@100:     }
rob@100: 
rob@100:     function AstConstructor(params, body) {
rob@100:       this.params = params;
rob@100:       this.body = body;
rob@100:     }
rob@100:     AstConstructor.prototype.toString = function() {
rob@100:       var paramNames = appendToLookupTable({}, this.params.getNames());
rob@100:       var oldContext = replaceContext;
rob@100:       replaceContext = function (subject) {
rob@100:         return paramNames.hasOwnProperty(subject.name) ? subject.name : oldContext(subject);
rob@100:       };
rob@100:       var prefix = "function $constr_" + this.params.params.length + this.params.toString();
rob@100:       var body = this.params.prependMethodArgs(this.body.toString());
rob@100:       if(!/\$(superCstr|constr)\b/.test(body)) {
rob@100:         body = "{\n$superCstr();\n" + body.substring(1);
rob@100:       }
rob@100:       replaceContext = oldContext;
rob@100:       return prefix + body + "\n";
rob@100:     };
rob@100: 
rob@100:     function transformConstructor(cstr) {
rob@100:       var m = new RegExp(/"B(\d+)"\s*"A(\d+)"/).exec(cstr);
rob@100:       var params = transformParams(atoms[m[1]]);
rob@100: 
rob@100:       return new AstConstructor(params, transformStatementsBlock(atoms[m[2]]));
rob@100:     }
rob@100: 
rob@100:     function AstInterfaceBody(name, interfacesNames, methodsNames, fields, innerClasses, misc) {
rob@100:       var i,l;
rob@100:       this.name = name;
rob@100:       this.interfacesNames = interfacesNames;
rob@100:       this.methodsNames = methodsNames;
rob@100:       this.fields = fields;
rob@100:       this.innerClasses = innerClasses;
rob@100:       this.misc = misc;
rob@100:       for(i=0,l=fields.length; i<l; ++i) {
rob@100:         fields[i].owner = this;
rob@100:       }
rob@100:     }
rob@100:     AstInterfaceBody.prototype.getMembers = function(classFields, classMethods, classInners) {
rob@100:       if(this.owner.base) {
rob@100:         this.owner.base.body.getMembers(classFields, classMethods, classInners);
rob@100:       }
rob@100:       var i, j, l, m;
rob@100:       for(i=0,l=this.fields.length;i<l;++i) {
rob@100:         var fieldNames = this.fields[i].getNames();
rob@100:         for(j=0,m=fieldNames.length;j<m;++j) {
rob@100:           classFields[fieldNames[j]] = this.fields[i];
rob@100:         }
rob@100:       }
rob@100:       for(i=0,l=this.methodsNames.length;i<l;++i) {
rob@100:         var methodName = this.methodsNames[i];
rob@100:         classMethods[methodName] = true;
rob@100:       }
rob@100:       for(i=0,l=this.innerClasses.length;i<l;++i) {
rob@100:         var innerClass = this.innerClasses[i];
rob@100:         classInners[innerClass.name] = innerClass;
rob@100:       }
rob@100:     };
rob@100:     AstInterfaceBody.prototype.toString = function() {
rob@100:       function getScopeLevel(p) {
rob@100:         var i = 0;
rob@100:         while(p) {
rob@100:           ++i;
rob@100:           p=p.scope;
rob@100:         }
rob@100:         return i;
rob@100:       }
rob@100: 
rob@100:       var scopeLevel = getScopeLevel(this.owner);
rob@100: 
rob@100:       var className = this.name;
rob@100:       var staticDefinitions = "";
rob@100:       var metadata = "";
rob@100: 
rob@100:       var thisClassFields = {}, thisClassMethods = {}, thisClassInners = {};
rob@100:       this.getMembers(thisClassFields, thisClassMethods, thisClassInners);
rob@100: 
rob@100:       var i, l, j, m;
rob@100: 
rob@100:       if (this.owner.interfaces) {
rob@100:         // interface name can be present, but interface is not
rob@100:         var resolvedInterfaces = [], resolvedInterface;
rob@100:         for (i = 0, l = this.interfacesNames.length; i < l; ++i) {
rob@100:           if (!this.owner.interfaces[i]) {
rob@100:             continue;
rob@100:           }
rob@100:           resolvedInterface = replaceContext({name: this.interfacesNames[i]});
rob@100:           resolvedInterfaces.push(resolvedInterface);
rob@100:           staticDefinitions += "$p.extendInterfaceMembers(" + className + ", " + resolvedInterface + ");\n";
rob@100:         }
rob@100:         metadata += className + ".$interfaces = [" + resolvedInterfaces.join(", ") + "];\n";
rob@100:       }
rob@100:       metadata += className + ".$isInterface = true;\n";
rob@100:       metadata += className + ".$methods = [\'" + this.methodsNames.join("\', \'") + "\'];\n";
rob@100: 
rob@100:       sortByWeight(this.innerClasses);
rob@100:       for (i = 0, l = this.innerClasses.length; i < l; ++i) {
rob@100:         var innerClass = this.innerClasses[i];
rob@100:         if (innerClass.isStatic) {
rob@100:           staticDefinitions += className + "." + innerClass.name + " = " + innerClass + ";\n";
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       for (i = 0, l = this.fields.length; i < l; ++i) {
rob@100:         var field = this.fields[i];
rob@100:         if (field.isStatic) {
rob@100:           staticDefinitions += className + "." + field.definitions.join(";\n" + className + ".") + ";\n";
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       return "(function() {\n" +
rob@100:         "function " + className + "() { throw \'Unable to create the interface\'; }\n" +
rob@100:         staticDefinitions +
rob@100:         metadata +
rob@100:         "return " + className + ";\n" +
rob@100:         "})()";
rob@100:     };
rob@100: 
rob@100:     transformInterfaceBody = function(body, name, baseInterfaces) {
rob@100:       var declarations = body.substring(1, body.length - 1);
rob@100:       declarations = extractClassesAndMethods(declarations);
rob@100:       declarations = extractConstructors(declarations, name);
rob@100:       var methodsNames = [], classes = [];
rob@100:       declarations = declarations.replace(/"([DE])(\d+)"/g, function(all, type, index) {
rob@100:         if(type === 'D') { methodsNames.push(index); }
rob@100:         else if(type === 'E') { classes.push(index); }
rob@100:         return "";
rob@100:       });
rob@100:       var fields = declarations.split(/;(?:\s*;)*/g);
rob@100:       var baseInterfaceNames;
rob@100:       var i, l;
rob@100: 
rob@100:       if(baseInterfaces !== undef) {
rob@100:         baseInterfaceNames = baseInterfaces.replace(/^\s*extends\s+(.+?)\s*$/g, "$1").split(/\s*,\s*/g);
rob@100:       }
rob@100: 
rob@100:       for(i = 0, l = methodsNames.length; i < l; ++i) {
rob@100:         var method = transformClassMethod(atoms[methodsNames[i]]);
rob@100:         methodsNames[i] = method.name;
rob@100:       }
rob@100:       for(i = 0, l = fields.length - 1; i < l; ++i) {
rob@100:         var field = trimSpaces(fields[i]);
rob@100:         fields[i] = transformClassField(field.middle);
rob@100:       }
rob@100:       var tail = fields.pop();
rob@100:       for(i = 0, l = classes.length; i < l; ++i) {
rob@100:         classes[i] = transformInnerClass(atoms[classes[i]]);
rob@100:       }
rob@100: 
rob@100:       return new AstInterfaceBody(name, baseInterfaceNames, methodsNames, fields, classes, { tail: tail });
rob@100:     };
rob@100: 
rob@100:     function AstClassBody(name, baseClassName, interfacesNames, functions, methods, fields, cstrs, innerClasses, misc) {
rob@100:       var i,l;
rob@100:       this.name = name;
rob@100:       this.baseClassName = baseClassName;
rob@100:       this.interfacesNames = interfacesNames;
rob@100:       this.functions = functions;
rob@100:       this.methods = methods;
rob@100:       this.fields = fields;
rob@100:       this.cstrs = cstrs;
rob@100:       this.innerClasses = innerClasses;
rob@100:       this.misc = misc;
rob@100:       for(i=0,l=fields.length; i<l; ++i) {
rob@100:         fields[i].owner = this;
rob@100:       }
rob@100:     }
rob@100:     AstClassBody.prototype.getMembers = function(classFields, classMethods, classInners) {
rob@100:       if(this.owner.base) {
rob@100:         this.owner.base.body.getMembers(classFields, classMethods, classInners);
rob@100:       }
rob@100:       var i, j, l, m;
rob@100:       for(i=0,l=this.fields.length;i<l;++i) {
rob@100:         var fieldNames = this.fields[i].getNames();
rob@100:         for(j=0,m=fieldNames.length;j<m;++j) {
rob@100:           classFields[fieldNames[j]] = this.fields[i];
rob@100:         }
rob@100:       }
rob@100:       for(i=0,l=this.methods.length;i<l;++i) {
rob@100:         var method = this.methods[i];
rob@100:         classMethods[method.name] = method;
rob@100:       }
rob@100:       for(i=0,l=this.innerClasses.length;i<l;++i) {
rob@100:         var innerClass = this.innerClasses[i];
rob@100:         classInners[innerClass.name] = innerClass;
rob@100:       }
rob@100:     };
rob@100:     AstClassBody.prototype.toString = function() {
rob@100:       function getScopeLevel(p) {
rob@100:         var i = 0;
rob@100:         while(p) {
rob@100:           ++i;
rob@100:           p=p.scope;
rob@100:         }
rob@100:         return i;
rob@100:       }
rob@100: 
rob@100:       var scopeLevel = getScopeLevel(this.owner);
rob@100: 
rob@100:       var selfId = "$this_" + scopeLevel;
rob@100:       var className = this.name;
rob@100:       var result = "var " + selfId + " = this;\n";
rob@100:       var staticDefinitions = "";
rob@100:       var metadata = "";
rob@100: 
rob@100:       var thisClassFields = {}, thisClassMethods = {}, thisClassInners = {};
rob@100:       this.getMembers(thisClassFields, thisClassMethods, thisClassInners);
rob@100: 
rob@100:       var oldContext = replaceContext;
rob@100:       replaceContext = function (subject) {
rob@100:         var name = subject.name;
rob@100:         if(name === "this") {
rob@100:           // returns "$this_N.$self" pointer instead of "this" in cases:
rob@100:           // "this()", "this.XXX()", "this", but not for "this.XXX"
rob@100:           return subject.callSign || !subject.member ? selfId + ".$self" : selfId;
rob@100:         }
rob@100:         if(thisClassFields.hasOwnProperty(name)) {
rob@100:           return thisClassFields[name].isStatic ? className + "." + name : selfId + "." + name;
rob@100:         }
rob@100:         if(thisClassInners.hasOwnProperty(name)) {
rob@100:           return selfId + "." + name;
rob@100:         }
rob@100:         if(thisClassMethods.hasOwnProperty(name)) {
rob@100:           return thisClassMethods[name].isStatic ? className + "." + name : selfId + ".$self." + name;
rob@100:         }
rob@100:         return oldContext(subject);
rob@100:       };
rob@100: 
rob@100:       var resolvedBaseClassName;
rob@100:       if (this.baseClassName) {
rob@100:         resolvedBaseClassName = oldContext({name: this.baseClassName});
rob@100:         result += "var $super = { $upcast: " + selfId + " };\n";
rob@100:         result += "function $superCstr(){" + resolvedBaseClassName +
rob@100:           ".apply($super,arguments);if(!('$self' in $super)) $p.extendClassChain($super)}\n";
rob@100:         metadata += className + ".$base = " + resolvedBaseClassName + ";\n";
rob@100:       } else {
rob@100:         result += "function $superCstr(){$p.extendClassChain("+ selfId +")}\n";
rob@100:       }
rob@100: 
rob@100:       if (this.owner.base) {
rob@100:         // base class name can be present, but class is not
rob@100:         staticDefinitions += "$p.extendStaticMembers(" + className + ", " + resolvedBaseClassName + ");\n";
rob@100:       }
rob@100: 
rob@100:       var i, l, j, m;
rob@100: 
rob@100:       if (this.owner.interfaces) {
rob@100:         // interface name can be present, but interface is not
rob@100:         var resolvedInterfaces = [], resolvedInterface;
rob@100:         for (i = 0, l = this.interfacesNames.length; i < l; ++i) {
rob@100:           if (!this.owner.interfaces[i]) {
rob@100:             continue;
rob@100:           }
rob@100:           resolvedInterface = oldContext({name: this.interfacesNames[i]});
rob@100:           resolvedInterfaces.push(resolvedInterface);
rob@100:           staticDefinitions += "$p.extendInterfaceMembers(" + className + ", " + resolvedInterface + ");\n";
rob@100:         }
rob@100:         metadata += className + ".$interfaces = [" + resolvedInterfaces.join(", ") + "];\n";
rob@100:       }
rob@100: 
rob@100:       if (this.functions.length > 0) {
rob@100:         result += this.functions.join('\n') + '\n';
rob@100:       }
rob@100: 
rob@100:       sortByWeight(this.innerClasses);
rob@100:       for (i = 0, l = this.innerClasses.length; i < l; ++i) {
rob@100:         var innerClass = this.innerClasses[i];
rob@100:         if (innerClass.isStatic) {
rob@100:           staticDefinitions += className + "." + innerClass.name + " = " + innerClass + ";\n";
rob@100:           result += selfId + "." + innerClass.name + " = " + className + "." + innerClass.name + ";\n";
rob@100:         } else {
rob@100:           result += selfId + "." + innerClass.name + " = " + innerClass + ";\n";
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       for (i = 0, l = this.fields.length; i < l; ++i) {
rob@100:         var field = this.fields[i];
rob@100:         if (field.isStatic) {
rob@100:           staticDefinitions += className + "." + field.definitions.join(";\n" + className + ".") + ";\n";
rob@100:           for (j = 0, m = field.definitions.length; j < m; ++j) {
rob@100:             var fieldName = field.definitions[j].name, staticName = className + "." + fieldName;
rob@100:             result += "$p.defineProperty(" + selfId + ", '" + fieldName + "', {" +
rob@100:               "get: function(){return " + staticName + "}, " +
rob@100:               "set: function(val){" + staticName + " = val}});\n";
rob@100:           }
rob@100:         } else {
rob@100:           result += selfId + "." + field.definitions.join(";\n" + selfId + ".") + ";\n";
rob@100:         }
rob@100:       }
rob@100:       var methodOverloads = {};
rob@100:       for (i = 0, l = this.methods.length; i < l; ++i) {
rob@100:         var method = this.methods[i];
rob@100:         var overload = methodOverloads[method.name];
rob@100:         var methodId = method.name + "$" + method.params.params.length;
rob@100:         var hasMethodArgs = !!method.params.methodArgsParam;
rob@100:         if (overload) {
rob@100:           ++overload;
rob@100:           methodId += "_" + overload;
rob@100:         } else {
rob@100:           overload = 1;
rob@100:         }
rob@100:         method.methodId = methodId;
rob@100:         methodOverloads[method.name] = overload;
rob@100:         if (method.isStatic) {
rob@100:           staticDefinitions += method;
rob@100:           staticDefinitions += "$p.addMethod(" + className + ", '" + method.name + "', " + methodId + ", " + hasMethodArgs + ");\n";
rob@100:           result += "$p.addMethod(" + selfId + ", '" + method.name + "', " + methodId + ", " + hasMethodArgs + ");\n";
rob@100:         } else {
rob@100:           result += method;
rob@100:           result += "$p.addMethod(" + selfId + ", '" + method.name + "', " + methodId + ", " + hasMethodArgs + ");\n";
rob@100:         }
rob@100:       }
rob@100:       result += trim(this.misc.tail);
rob@100: 
rob@100:       if (this.cstrs.length > 0) {
rob@100:         result += this.cstrs.join('\n') + '\n';
rob@100:       }
rob@100: 
rob@100:       result += "function $constr() {\n";
rob@100:       var cstrsIfs = [];
rob@100:       for (i = 0, l = this.cstrs.length; i < l; ++i) {
rob@100:         var paramsLength = this.cstrs[i].params.params.length;
rob@100:         var methodArgsPresent = !!this.cstrs[i].params.methodArgsParam;
rob@100:         cstrsIfs.push("if(arguments.length " + (methodArgsPresent ? ">=" : "===") +
rob@100:           " " + paramsLength + ") { " +
rob@100:           "$constr_" + paramsLength + ".apply(" + selfId + ", arguments); }");
rob@100:       }
rob@100:       if(cstrsIfs.length > 0) {
rob@100:         result += cstrsIfs.join(" else ") + " else ";
rob@100:       }
rob@100:       // ??? add check if length is 0, otherwise fail
rob@100:       result += "$superCstr();\n}\n";
rob@100:       result += "$constr.apply(null, arguments);\n";
rob@100: 
rob@100:       replaceContext = oldContext;
rob@100:       return "(function() {\n" +
rob@100:         "function " + className + "() {\n" + result + "}\n" +
rob@100:         staticDefinitions +
rob@100:         metadata +
rob@100:         "return " + className + ";\n" +
rob@100:         "})()";
rob@100:     };
rob@100: 
rob@100:     transformClassBody = function(body, name, baseName, interfaces) {
rob@100:       var declarations = body.substring(1, body.length - 1);
rob@100:       declarations = extractClassesAndMethods(declarations);
rob@100:       declarations = extractConstructors(declarations, name);
rob@100:       var methods = [], classes = [], cstrs = [], functions = [];
rob@100:       declarations = declarations.replace(/"([DEGH])(\d+)"/g, function(all, type, index) {
rob@100:         if(type === 'D') { methods.push(index); }
rob@100:         else if(type === 'E') { classes.push(index); }
rob@100:         else if(type === 'H') { functions.push(index); }
rob@100:         else { cstrs.push(index); }
rob@100:         return "";
rob@100:       });
rob@100:       var fields = declarations.replace(/^(?:\s*;)+/, "").split(/;(?:\s*;)*/g);
rob@100:       var baseClassName, interfacesNames;
rob@100:       var i;
rob@100: 
rob@100:       if(baseName !== undef) {
rob@100:         baseClassName = baseName.replace(/^\s*extends\s+([A-Za-z_$][\w$]*\b(?:\s*\.\s*[A-Za-z_$][\w$]*\b)*)\s*$/g, "$1");
rob@100:       }
rob@100: 
rob@100:       if(interfaces !== undef) {
rob@100:         interfacesNames = interfaces.replace(/^\s*implements\s+(.+?)\s*$/g, "$1").split(/\s*,\s*/g);
rob@100:       }
rob@100: 
rob@100:       for(i = 0; i < functions.length; ++i) {
rob@100:         functions[i] = transformFunction(atoms[functions[i]]);
rob@100:       }
rob@100:       for(i = 0; i < methods.length; ++i) {
rob@100:         methods[i] = transformClassMethod(atoms[methods[i]]);
rob@100:       }
rob@100:       for(i = 0; i < fields.length - 1; ++i) {
rob@100:         var field = trimSpaces(fields[i]);
rob@100:         fields[i] = transformClassField(field.middle);
rob@100:       }
rob@100:       var tail = fields.pop();
rob@100:       for(i = 0; i < cstrs.length; ++i) {
rob@100:         cstrs[i] = transformConstructor(atoms[cstrs[i]]);
rob@100:       }
rob@100:       for(i = 0; i < classes.length; ++i) {
rob@100:         classes[i] = transformInnerClass(atoms[classes[i]]);
rob@100:       }
rob@100: 
rob@100:       return new AstClassBody(name, baseClassName, interfacesNames, functions, methods, fields, cstrs,
rob@100:         classes, { tail: tail });
rob@100:     };
rob@100: 
rob@100:     function AstInterface(name, body) {
rob@100:       this.name = name;
rob@100:       this.body = body;
rob@100:       body.owner = this;
rob@100:     }
rob@100:     AstInterface.prototype.toString = function() {
rob@100:       return "var " + this.name + " = " + this.body + ";\n" +
rob@100:         "$p." + this.name + " = " + this.name + ";\n";
rob@100:     };
rob@100:     function AstClass(name, body) {
rob@100:       this.name = name;
rob@100:       this.body = body;
rob@100:       body.owner = this;
rob@100:     }
rob@100:     AstClass.prototype.toString = function() {
rob@100:       return "var " + this.name + " = " + this.body + ";\n" +
rob@100:         "$p." + this.name + " = " + this.name + ";\n";
rob@100:     };
rob@100: 
rob@100:     function transformGlobalClass(class_) {
rob@100:       var m = classesRegex.exec(class_); // 1 - attr, 2 - class|int, 3 - name, 4 - extends, 5 - implements, 6 - body
rob@100:       classesRegex.lastIndex = 0;
rob@100:       var body = atoms[getAtomIndex(m[6])];
rob@100:       var oldClassId = currentClassId, newClassId = generateClassId();
rob@100:       currentClassId = newClassId;
rob@100:       var globalClass;
rob@100:       if(m[2] === "interface") {
rob@100:         globalClass = new AstInterface(m[3], transformInterfaceBody(body, m[3], m[4]) );
rob@100:       } else {
rob@100:         globalClass = new AstClass(m[3], transformClassBody(body, m[3], m[4], m[5]) );
rob@100:       }
rob@100:       appendClass(globalClass, newClassId, oldClassId);
rob@100:       currentClassId = oldClassId;
rob@100:       return globalClass;
rob@100:     }
rob@100: 
rob@100:     function AstMethod(name, params, body) {
rob@100:       this.name = name;
rob@100:       this.params = params;
rob@100:       this.body = body;
rob@100:     }
rob@100:     AstMethod.prototype.toString = function(){
rob@100:       var paramNames = appendToLookupTable({}, this.params.getNames());
rob@100:       var oldContext = replaceContext;
rob@100:       replaceContext = function (subject) {
rob@100:         return paramNames.hasOwnProperty(subject.name) ? subject.name : oldContext(subject);
rob@100:       };
rob@100:       var body = this.params.prependMethodArgs(this.body.toString());
rob@100:       var result = "function " + this.name + this.params + " " + body + "\n" +
rob@100:                    "$p." + this.name + " = " + this.name + ";\n" +
rob@100:                    this.name + " = " + this.name + ".bind($p);";
rob@100: //        "$p." + this.name + " = " + this.name + ";";
rob@100:       replaceContext = oldContext;
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     function transformGlobalMethod(method) {
rob@100:       var m = methodsRegex.exec(method);
rob@100:       var result =
rob@100:       methodsRegex.lastIndex = 0;
rob@100:       return new AstMethod(m[3], transformParams(atoms[getAtomIndex(m[4])]),
rob@100:         transformStatementsBlock(atoms[getAtomIndex(m[6])]));
rob@100:     }
rob@100: 
rob@100:     function preStatementsTransform(statements) {
rob@100:       var s = statements;
rob@100:       // turns multiple catch blocks into one, because we have no way to properly get into them anyway.
rob@100:       s = s.replace(/\b(catch\s*"B\d+"\s*"A\d+")(\s*catch\s*"B\d+"\s*"A\d+")+/g, "$1");
rob@100:       return s;
rob@100:     }
rob@100: 
rob@100:     function AstForStatement(argument, misc) {
rob@100:       this.argument = argument;
rob@100:       this.misc = misc;
rob@100:     }
rob@100:     AstForStatement.prototype.toString = function() {
rob@100:       return this.misc.prefix + this.argument.toString();
rob@100:     };
rob@100:     function AstCatchStatement(argument, misc) {
rob@100:       this.argument = argument;
rob@100:       this.misc = misc;
rob@100:     }
rob@100:     AstCatchStatement.prototype.toString = function() {
rob@100:       return this.misc.prefix + this.argument.toString();
rob@100:     };
rob@100:     function AstPrefixStatement(name, argument, misc) {
rob@100:       this.name = name;
rob@100:       this.argument = argument;
rob@100:       this.misc = misc;
rob@100:     }
rob@100:     AstPrefixStatement.prototype.toString = function() {
rob@100:       var result = this.misc.prefix;
rob@100:       if(this.argument !== undef) {
rob@100:         result += this.argument.toString();
rob@100:       }
rob@100:       return result;
rob@100:     };
rob@100:     function AstSwitchCase(expr) {
rob@100:       this.expr = expr;
rob@100:     }
rob@100:     AstSwitchCase.prototype.toString = function() {
rob@100:       return "case " + this.expr + ":";
rob@100:     };
rob@100:     function AstLabel(label) {
rob@100:       this.label = label;
rob@100:     }
rob@100:     AstLabel.prototype.toString = function() {
rob@100:       return this.label;
rob@100:     };
rob@100: 
rob@100:     transformStatements = function(statements, transformMethod, transformClass) {
rob@100:       var nextStatement = new RegExp(/\b(catch|for|if|switch|while|with)\s*"B(\d+)"|\b(do|else|finally|return|throw|try|break|continue)\b|("[ADEH](\d+)")|\b(case)\s+([^:]+):|\b([A-Za-z_$][\w$]*\s*:)|(;)/g);
rob@100:       var res = [];
rob@100:       statements = preStatementsTransform(statements);
rob@100:       var lastIndex = 0, m, space;
rob@100:       // m contains the matches from the nextStatement regexp, null if there are no matches.
rob@100:       // nextStatement.exec starts searching at nextStatement.lastIndex.
rob@100:       while((m = nextStatement.exec(statements)) !== null) {
rob@100:         if(m[1] !== undef) { // catch, for ...
rob@100:           var i = statements.lastIndexOf('"B', nextStatement.lastIndex);
rob@100:           var statementsPrefix = statements.substring(lastIndex, i);
rob@100:           if(m[1] === "for") {
rob@100:             res.push(new AstForStatement(transformForExpression(atoms[m[2]]),
rob@100:               { prefix: statementsPrefix }) );
rob@100:           } else if(m[1] === "catch") {
rob@100:             res.push(new AstCatchStatement(transformParams(atoms[m[2]]),
rob@100:               { prefix: statementsPrefix }) );
rob@100:           } else {
rob@100:             res.push(new AstPrefixStatement(m[1], transformExpression(atoms[m[2]]),
rob@100:               { prefix: statementsPrefix }) );
rob@100:           }
rob@100:         } else if(m[3] !== undef) { // do, else, ...
rob@100:             res.push(new AstPrefixStatement(m[3], undef,
rob@100:               { prefix: statements.substring(lastIndex, nextStatement.lastIndex) }) );
rob@100:         } else if(m[4] !== undef) { // block, class and methods
rob@100:           space = statements.substring(lastIndex, nextStatement.lastIndex - m[4].length);
rob@100:           if(trim(space).length !== 0) { continue; } // avoiding new type[] {} construct
rob@100:           res.push(space);
rob@100:           var kind = m[4].charAt(1), atomIndex = m[5];
rob@100:           if(kind === 'D') {
rob@100:             res.push(transformMethod(atoms[atomIndex]));
rob@100:           } else if(kind === 'E') {
rob@100:             res.push(transformClass(atoms[atomIndex]));
rob@100:           } else if(kind === 'H') {
rob@100:             res.push(transformFunction(atoms[atomIndex]));
rob@100:           } else {
rob@100:             res.push(transformStatementsBlock(atoms[atomIndex]));
rob@100:           }
rob@100:         } else if(m[6] !== undef) { // switch case
rob@100:           res.push(new AstSwitchCase(transformExpression(trim(m[7]))));
rob@100:         } else if(m[8] !== undef) { // label
rob@100:           space = statements.substring(lastIndex, nextStatement.lastIndex - m[8].length);
rob@100:           if(trim(space).length !== 0) { continue; } // avoiding ?: construct
rob@100:           res.push(new AstLabel(statements.substring(lastIndex, nextStatement.lastIndex)) );
rob@100:         } else { // semicolon
rob@100:           var statement = trimSpaces(statements.substring(lastIndex, nextStatement.lastIndex - 1));
rob@100:           res.push(statement.left);
rob@100:           res.push(transformStatement(statement.middle));
rob@100:           res.push(statement.right + ";");
rob@100:         }
rob@100:         lastIndex = nextStatement.lastIndex;
rob@100:       }
rob@100:       var statementsTail = trimSpaces(statements.substring(lastIndex));
rob@100:       res.push(statementsTail.left);
rob@100:       if(statementsTail.middle !== "") {
rob@100:         res.push(transformStatement(statementsTail.middle));
rob@100:         res.push(";" + statementsTail.right);
rob@100:       }
rob@100:       return res;
rob@100:     };
rob@100: 
rob@100:     function getLocalNames(statements) {
rob@100:       var localNames = [];
rob@100:       for(var i=0,l=statements.length;i<l;++i) {
rob@100:         var statement = statements[i];
rob@100:         if(statement instanceof AstVar) {
rob@100:           localNames = localNames.concat(statement.getNames());
rob@100:         } else if(statement instanceof AstForStatement &&
rob@100:           statement.argument.initStatement instanceof AstVar) {
rob@100:           localNames = localNames.concat(statement.argument.initStatement.getNames());
rob@100:         } else if(statement instanceof AstInnerInterface || statement instanceof AstInnerClass ||
rob@100:           statement instanceof AstInterface || statement instanceof AstClass ||
rob@100:           statement instanceof AstMethod || statement instanceof AstFunction) {
rob@100:           localNames.push(statement.name);
rob@100:         }
rob@100:       }
rob@100:       return appendToLookupTable({}, localNames);
rob@100:     }
rob@100: 
rob@100:     function AstStatementsBlock(statements) {
rob@100:       this.statements = statements;
rob@100:     }
rob@100:     AstStatementsBlock.prototype.toString = function() {
rob@100:       var localNames = getLocalNames(this.statements);
rob@100:       var oldContext = replaceContext;
rob@100: 
rob@100:       // replacing context only when necessary
rob@100:       if(!isLookupTableEmpty(localNames)) {
rob@100:         replaceContext = function (subject) {
rob@100:           return localNames.hasOwnProperty(subject.name) ? subject.name : oldContext(subject);
rob@100:         };
rob@100:       }
rob@100: 
rob@100:       var result = "{\n" + this.statements.join('') + "\n}";
rob@100:       replaceContext = oldContext;
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     transformStatementsBlock = function(block) {
rob@100:       var content = trimSpaces(block.substring(1, block.length - 1));
rob@100:       return new AstStatementsBlock(transformStatements(content.middle));
rob@100:     };
rob@100: 
rob@100:     function AstRoot(statements) {
rob@100:       this.statements = statements;
rob@100:     }
rob@100:     AstRoot.prototype.toString = function() {
rob@100:       var classes = [], otherStatements = [], statement;
rob@100:       for (var i = 0, len = this.statements.length; i < len; ++i) {
rob@100:         statement = this.statements[i];
rob@100:         if (statement instanceof AstClass || statement instanceof AstInterface) {
rob@100:           classes.push(statement);
rob@100:         } else {
rob@100:           otherStatements.push(statement);
rob@100:         }
rob@100:       }
rob@100:       sortByWeight(classes);
rob@100: 
rob@100:       var localNames = getLocalNames(this.statements);
rob@100:       replaceContext = function (subject) {
rob@100:         var name = subject.name;
rob@100:         if(localNames.hasOwnProperty(name)) {
rob@100:           return name;
rob@100:         }
rob@100:         if(globalMembers.hasOwnProperty(name) ||
rob@100:            PConstants.hasOwnProperty(name) ||
rob@100:            defaultScope.hasOwnProperty(name)) {
rob@100:           return "$p." + name;
rob@100:         }
rob@100:         return name;
rob@100:       };
rob@100:       var result = "// this code was autogenerated from PJS\n" +
rob@100:         "(function($p) {\n" +
rob@100:         classes.join('') + "\n" +
rob@100:         otherStatements.join('') + "\n})";
rob@100:       replaceContext = null;
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     transformMain = function() {
rob@100:       var statements = extractClassesAndMethods(atoms[0]);
rob@100:       statements = statements.replace(/\bimport\s+[^;]+;/g, "");
rob@100:       return new AstRoot( transformStatements(statements,
rob@100:         transformGlobalMethod, transformGlobalClass) );
rob@100:     };
rob@100: 
rob@100:     function generateMetadata(ast) {
rob@100:       var globalScope = {};
rob@100:       var id, class_;
rob@100:       for(id in declaredClasses) {
rob@100:         if(declaredClasses.hasOwnProperty(id)) {
rob@100:           class_ = declaredClasses[id];
rob@100:           var scopeId = class_.scopeId, name = class_.name;
rob@100:           if(scopeId) {
rob@100:             var scope = declaredClasses[scopeId];
rob@100:             class_.scope = scope;
rob@100:             if(scope.inScope === undef) {
rob@100:               scope.inScope = {};
rob@100:             }
rob@100:             scope.inScope[name] = class_;
rob@100:           } else {
rob@100:             globalScope[name] = class_;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       function findInScopes(class_, name) {
rob@100:         var parts = name.split('.');
rob@100:         var currentScope = class_.scope, found;
rob@100:         while(currentScope) {
rob@100:           if(currentScope.hasOwnProperty(parts[0])) {
rob@100:             found = currentScope[parts[0]]; break;
rob@100:           }
rob@100:           currentScope = currentScope.scope;
rob@100:         }
rob@100:         if(found === undef) {
rob@100:           found = globalScope[parts[0]];
rob@100:         }
rob@100:         for(var i=1,l=parts.length;i<l && found;++i) {
rob@100:           found = found.inScope[parts[i]];
rob@100:         }
rob@100:         return found;
rob@100:       }
rob@100: 
rob@100:       for(id in declaredClasses) {
rob@100:         if(declaredClasses.hasOwnProperty(id)) {
rob@100:           class_ = declaredClasses[id];
rob@100:           var baseClassName = class_.body.baseClassName;
rob@100:           if(baseClassName) {
rob@100:             var parent = findInScopes(class_, baseClassName);
rob@100:             if (parent) {
rob@100:               class_.base = parent;
rob@100:               if (!parent.derived) {
rob@100:                 parent.derived = [];
rob@100:               }
rob@100:               parent.derived.push(class_);
rob@100:             }
rob@100:           }
rob@100:           var interfacesNames = class_.body.interfacesNames,
rob@100:             interfaces = [], i, l;
rob@100:           if (interfacesNames && interfacesNames.length > 0) {
rob@100:             for (i = 0, l = interfacesNames.length; i < l; ++i) {
rob@100:               var interface_ = findInScopes(class_, interfacesNames[i]);
rob@100:               interfaces.push(interface_);
rob@100:               if (!interface_) {
rob@100:                 continue;
rob@100:               }
rob@100:               if (!interface_.derived) {
rob@100:                 interface_.derived = [];
rob@100:               }
rob@100:               interface_.derived.push(class_);
rob@100:             }
rob@100:             if (interfaces.length > 0) {
rob@100:               class_.interfaces = interfaces;
rob@100:             }
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     function setWeight(ast) {
rob@100:       var queue = [], tocheck = {};
rob@100:       var id, scopeId, class_;
rob@100:       // queue most inner and non-inherited
rob@100:       for (id in declaredClasses) {
rob@100:         if (declaredClasses.hasOwnProperty(id)) {
rob@100:           class_ = declaredClasses[id];
rob@100:           if (!class_.inScope && !class_.derived) {
rob@100:             queue.push(id);
rob@100:             class_.weight = 0;
rob@100:           } else {
rob@100:             var dependsOn = [];
rob@100:             if (class_.inScope) {
rob@100:               for (scopeId in class_.inScope) {
rob@100:                 if (class_.inScope.hasOwnProperty(scopeId)) {
rob@100:                   dependsOn.push(class_.inScope[scopeId]);
rob@100:                 }
rob@100:               }
rob@100:             }
rob@100:             if (class_.derived) {
rob@100:               dependsOn = dependsOn.concat(class_.derived);
rob@100:             }
rob@100:             tocheck[id] = dependsOn;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       function removeDependentAndCheck(targetId, from) {
rob@100:         var dependsOn = tocheck[targetId];
rob@100:         if (!dependsOn) {
rob@100:           return false; // no need to process
rob@100:         }
rob@100:         var i = dependsOn.indexOf(from);
rob@100:         if (i < 0) {
rob@100:           return false;
rob@100:         }
rob@100:         dependsOn.splice(i, 1);
rob@100:         if (dependsOn.length > 0) {
rob@100:           return false;
rob@100:         }
rob@100:         delete tocheck[targetId];
rob@100:         return true;
rob@100:       }
rob@100:       while (queue.length > 0) {
rob@100:         id = queue.shift();
rob@100:         class_ = declaredClasses[id];
rob@100:         if (class_.scopeId && removeDependentAndCheck(class_.scopeId, class_)) {
rob@100:           queue.push(class_.scopeId);
rob@100:           declaredClasses[class_.scopeId].weight = class_.weight + 1;
rob@100:         }
rob@100:         if (class_.base && removeDependentAndCheck(class_.base.classId, class_)) {
rob@100:           queue.push(class_.base.classId);
rob@100:           class_.base.weight = class_.weight + 1;
rob@100:         }
rob@100:         if (class_.interfaces) {
rob@100:           var i, l;
rob@100:           for (i = 0, l = class_.interfaces.length; i < l; ++i) {
rob@100:             if (!class_.interfaces[i] ||
rob@100:                 !removeDependentAndCheck(class_.interfaces[i].classId, class_)) {
rob@100:               continue;
rob@100:             }
rob@100:             queue.push(class_.interfaces[i].classId);
rob@100:             class_.interfaces[i].weight = class_.weight + 1;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     var transformed = transformMain();
rob@100:     generateMetadata(transformed);
rob@100:     setWeight(transformed);
rob@100: 
rob@100:     var redendered = transformed.toString();
rob@100: 
rob@100:     // remove empty extra lines with space
rob@100:     redendered = redendered.replace(/\s*\n(?:[\t ]*\n)+/g, "\n\n");
rob@100: 
rob@100:     // convert character codes to characters
rob@100:     redendered = redendered.replace(/__x([0-9A-F]{4})/g, function(all, hexCode) {
rob@100:       return String.fromCharCode(parseInt(hexCode,16));
rob@100:     });
rob@100: 
rob@100:     return injectStrings(redendered, strings);
rob@100:   }// Parser ends
rob@100: 
rob@100:   function preprocessCode(aCode, sketch) {
rob@100:     // Parse out @pjs directive, if any.
rob@100:     var dm = new RegExp(/\/\*\s*@pjs\s+((?:[^\*]|\*+[^\*\/])*)\*\//g).exec(aCode);
rob@100:     if (dm && dm.length === 2) {
rob@100:       // masks contents of a JSON to be replaced later
rob@100:       // to protect the contents from further parsing
rob@100:       var jsonItems = [],
rob@100:           directives = dm.splice(1, 2)[0].replace(/\{([\s\S]*?)\}/g, (function() {
rob@100:             return function(all, item) {
rob@100:               jsonItems.push(item);
rob@100:               return "{" + (jsonItems.length-1) + "}";
rob@100:             };
rob@100:           }())).replace('\n', '').replace('\r', '').split(";");
rob@100: 
rob@100:       // We'll L/RTrim, and also remove any surrounding double quotes (e.g., just take string contents)
rob@100:       var clean = function(s) {
rob@100:         return s.replace(/^\s*["']?/, '').replace(/["']?\s*$/, '');
rob@100:       };
rob@100: 
rob@100:       for (var i = 0, dl = directives.length; i < dl; i++) {
rob@100:         var pair = directives[i].split('=');
rob@100:         if (pair && pair.length === 2) {
rob@100:           var key = clean(pair[0]),
rob@100:               value = clean(pair[1]),
rob@100:               list = [];
rob@100:           // A few directives require work beyond storying key/value pairings
rob@100:           if (key === "preload") {
rob@100:             list = value.split(',');
rob@100:             // All pre-loaded images will get put in imageCache, keyed on filename
rob@100:             for (var j = 0, jl = list.length; j < jl; j++) {
rob@100:               var imageName = clean(list[j]);
rob@100:               sketch.imageCache.add(imageName);
rob@100:             }
rob@100:           // fonts can be declared as a string containing a url,
rob@100:           // or a JSON object, containing a font name, and a url
rob@100:           } else if (key === "font") {
rob@100:             list = value.split(",");
rob@100:             for (var x = 0, xl = list.length; x < xl; x++) {
rob@100:               var fontName = clean(list[x]),
rob@100:                   index = /^\{(\d*?)\}$/.exec(fontName);
rob@100:               // if index is not null, send JSON, otherwise, send string
rob@100:               PFont.preloading.add(index ? JSON.parse("{" + jsonItems[index[1]] + "}") : fontName);
rob@100:             }
rob@100:           } else if (key === "pauseOnBlur") {
rob@100:             sketch.options.pauseOnBlur = value === "true";
rob@100:           } else if (key === "globalKeyEvents") {
rob@100:             sketch.options.globalKeyEvents = value === "true";
rob@100:           } else if (key.substring(0, 6) === "param-") {
rob@100:             sketch.params[key.substring(6)] = value;
rob@100:           } else {
rob@100:             sketch.options[key] = value;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:     return aCode;
rob@100:   }
rob@100: 
rob@100:   // Parse/compiles Processing (Java-like) syntax to JavaScript syntax
rob@100:   Processing.compile = function(pdeCode) {
rob@100:     var sketch = new Processing.Sketch();
rob@100:     var code = preprocessCode(pdeCode, sketch);
rob@100:     var compiledPde = parseProcessing(code);
rob@100:     sketch.sourceCode = compiledPde;
rob@100:     return sketch;
rob@100:   };
rob@100: 
rob@100:   // the logger for println()
rob@100:   var PjsConsole = function (document) {
rob@100:     var e = {}, added = false;
rob@100:     e.BufferMax = 200;
rob@100:     e.wrapper = document.createElement("div");
rob@100:     e.wrapper.setAttribute("style", "opacity:.75;display:block;position:fixed;bottom:0px;left:0px;right:0px;height:50px;background-color:#aaa");
rob@100:     e.dragger = document.createElement("div");
rob@100:     e.dragger.setAttribute("style", "display:block;border:3px black raised;cursor:n-resize;position:absolute;top:0px;left:0px;right:0px;height:5px;background-color:#333");
rob@100:     e.closer = document.createElement("div");
rob@100:     e.closer.onmouseover = function () {
rob@100:       e.closer.style.setProperty("background-color", "#ccc");
rob@100:     };
rob@100:     e.closer.onmouseout = function () {
rob@100:       e.closer.style.setProperty("background-color", "#ddd");
rob@100:     };
rob@100:     e.closer.innerHTML = "&#10006;";
rob@100:     e.closer.setAttribute("style", "opacity:.5;display:block;border:3px black raised;position:absolute;top:10px;right:30px;height:20px;width:20px;background-color:#ddd;color:#000;line-height:20px;text-align:center;cursor:pointer;");
rob@100:     e.javaconsole = document.createElement("div");
rob@100:     e.javaconsole.setAttribute("style", "overflow-x: auto;display:block;position:absolute;left:10px;right:0px;bottom:5px;top:10px;overflow-y:scroll;height:40px;");
rob@100:     e.wrapper.appendChild(e.dragger);
rob@100:     e.wrapper.appendChild(e.javaconsole);
rob@100:     e.wrapper.appendChild(e.closer);
rob@100:     e.dragger.onmousedown = function (t) {
rob@100:       e.divheight = e.wrapper.style.height;
rob@100:       if (document.selection) document.selection.empty();
rob@100:       else window.getSelection().removeAllRanges();
rob@100:       var n = t.screenY;
rob@100:       window.onmousemove = function (t) {
rob@100:         e.wrapper.style.height = parseFloat(e.divheight) + (n - t.screenY) + "px";
rob@100:         e.javaconsole.style.height = parseFloat(e.divheight) + (n - t.screenY) - 10 + "px";
rob@100:       };
rob@100:       window.onmouseup = function (t) {
rob@100:         if (document.selection) document.selection.empty();
rob@100:         else window.getSelection().removeAllRanges();
rob@100:         e.wrapper.style.height = parseFloat(e.divheight) + (n - t.screenY) + "px";
rob@100:         e.javaconsole.style.height = parseFloat(e.divheight) + (n - t.screenY) - 10 + "px";
rob@100:         window.onmousemove = null;
rob@100:         window.onmouseup = null;
rob@100:       };
rob@100:     };
rob@100:     e.BufferArray = [];
rob@100:     e.print = e.log = function (t) {
rob@100:       // var oldheight = e.javaconsole.scrollHeight-e.javaconsole.scrollTop;
rob@100:       if (e.BufferArray[e.BufferArray.length - 1]) e.BufferArray[e.BufferArray.length - 1] += (t) + "";
rob@100:       else e.BufferArray.push(t);
rob@100:       e.javaconsole.innerHTML = e.BufferArray.join('');
rob@100:       if (e.wrapper.style.visibility === "hidden") {
rob@100:         e.wrapper.style.visibility = "visible";
rob@100:       }
rob@100:       //if (e.BufferArray.length > e.BufferMax) e.BufferArray.splice(0, 1);
rob@100:       //else e.javaconsole.scrollTop = oldheight;
rob@100:       if (e.wrapper.style.visibility === "hidden") {
rob@100:         e.wrapper.style.visibility = "visible";
rob@100:       }
rob@100:     };
rob@100:     e.println = function (t) {
rob@100:       if(!added) { document.body.appendChild(e.wrapper); }
rob@100:       e.print(t);
rob@100:       e.BufferArray.push('<br/>');
rob@100:       e.javaconsole.innerHTML = e.BufferArray.join('');
rob@100:       if (e.wrapper.style.visibility === "hidden") {
rob@100:         e.wrapper.style.visibility = "visible";
rob@100:       }
rob@100:       if (e.BufferArray.length > e.BufferMax) e.BufferArray.splice(0, 1);
rob@100:       else e.javaconsole.scrollTop = e.javaconsole.scrollHeight;
rob@100:       if (e.wrapper.style.visibility === "hidden") {
rob@100:         e.wrapper.style.visibility = "visible";
rob@100:       }
rob@100:     };
rob@100:     e.showconsole = function () {
rob@100:       e.wrapper.style.visibility = "visible";
rob@100:     };
rob@100:     e.hideconsole = function () {
rob@100:       e.wrapper.style.visibility = "hidden";
rob@100:     };
rob@100:     e.closer.onclick = function () {
rob@100:       e.hideconsole();
rob@100:     };
rob@100:     e.hideconsole();
rob@100:     return e;
rob@100:   };
rob@100: 
rob@100:   Processing.logger = new PjsConsole(document);
rob@100: 
rob@100:   // done
rob@100:   return Processing;
rob@100: };
rob@100: 
rob@100: },{}],26:[function(require,module,exports){
rob@100: /**
rob@100:  * Processing.js object
rob@100:  */
rob@100:  module.exports = function(options, undef) {
rob@100:   var defaultScope = options.defaultScope,
rob@100:       extend = options.extend,
rob@100:       Browser = options.Browser,
rob@100:       ajax = Browser.ajax,
rob@100:       navigator = Browser.navigator,
rob@100:       window = Browser.window,
rob@100:       XMLHttpRequest = window.XMLHttpRequest,
rob@100:       document = Browser.document,
rob@100:       noop = options.noop,
rob@100: 
rob@100:       PConstants = defaultScope.PConstants;
rob@100:       PFont = defaultScope.PFont,
rob@100:       PShapeSVG = defaultScope.PShapeSVG,
rob@100:       PVector = defaultScope.PVector,
rob@100:       Char = Character = defaultScope.Char,
rob@100:       ObjectIterator = defaultScope.ObjectIterator,
rob@100:       XMLElement = defaultScope.XMLElement,
rob@100:       XML = defaultScope.XML;
rob@100: 
rob@100:   // fascinating "read only" jshint error if we don't start a new var block here.
rob@100:   var HTMLCanvasElement = window.HTMLCanvasElement,
rob@100:       HTMLImageElement = window.HTMLImageElement,
rob@100:       localStorage = window.localStorage;
rob@100: 
rob@100:   var isDOMPresent = ("document" in this) && !("fake" in this.document);
rob@100: 
rob@100:   // document.head polyfill for the benefit of Firefox 3.6
rob@100:   if (!document.head) {
rob@100:     document.head = document.getElementsByTagName('head')[0];
rob@100:   }
rob@100: 
rob@100:   var Float32Array = setupTypedArray("Float32Array", "WebGLFloatArray"),
rob@100:       Int32Array   = setupTypedArray("Int32Array",   "WebGLIntArray"),
rob@100:       Uint16Array  = setupTypedArray("Uint16Array",  "WebGLUnsignedShortArray"),
rob@100:       Uint8Array   = setupTypedArray("Uint8Array",   "WebGLUnsignedByteArray");
rob@100: 
rob@100:   // Typed Arrays: fallback to WebGL arrays or Native JS arrays if unavailable
rob@100:   function setupTypedArray(name, fallback) {
rob@100:     // Check if TypedArray exists, and use if so.
rob@100:     if (name in window) {
rob@100:       return window[name];
rob@100:     }
rob@100: 
rob@100:     // Check if WebGLArray exists
rob@100:     if (typeof window[fallback] === "function") {
rob@100:       return window[fallback];
rob@100:     }
rob@100: 
rob@100:     // Use Native JS array
rob@100:     return function(obj) {
rob@100:       if (obj instanceof Array) {
rob@100:         return obj;
rob@100:       }
rob@100:       if (typeof obj === "number") {
rob@100:         var arr = [];
rob@100:         arr.length = obj;
rob@100:         return arr;
rob@100:       }
rob@100:     };
rob@100:   }
rob@100: 
rob@100:   /* IE9+ quirks mode check - ticket #1606 */
rob@100:   if (document.documentMode >= 9 && !document.doctype) {
rob@100:     throw("The doctype directive is missing. The recommended doctype in Internet Explorer is the HTML5 doctype: <!DOCTYPE html>");
rob@100:   }
rob@100: 
rob@100:   // Manage multiple Processing instances
rob@100:   var processingInstances = [];
rob@100:   var processingInstanceIds = {};
rob@100: 
rob@100:   /**
rob@100:    * instance tracking - adding new instances
rob@100:    */
rob@100:   var addInstance = function(processing) {
rob@100:     if (processing.externals.canvas.id === undef || !processing.externals.canvas.id.length) {
rob@100:       processing.externals.canvas.id = "__processing" + processingInstances.length;
rob@100:     }
rob@100:     processingInstanceIds[processing.externals.canvas.id] = processingInstances.length;
rob@100:     processingInstances.push(processing);
rob@100:   };
rob@100: 
rob@100:   /**
rob@100:    * instance tracking - removal
rob@100:    */
rob@100:   var removeInstance = function(id) {
rob@100:     processingInstances.splice(processingInstanceIds[id], 1);
rob@100:     delete processingInstanceIds[id];
rob@100:   };
rob@100: 
rob@100: 
rob@100:   /**
rob@100:    * The Processing object
rob@100:    */
rob@100:   var Processing = this.Processing = function(aCanvas, aCode, aFunctions) {
rob@100: 
rob@100:     if (!(this instanceof Processing)) {
rob@100:       throw("called Processing constructor as if it were a function: missing 'new'.");
rob@100:     }
rob@100: 
rob@100:     var curElement = {},
rob@100:       pgraphicsMode = (aCanvas === undef && aCode === undef);
rob@100: 
rob@100:     if (pgraphicsMode) {
rob@100:       curElement = document.createElement("canvas");
rob@100:     } else {
rob@100:       // We'll take a canvas element or a string for a canvas element's id
rob@100:       curElement = typeof aCanvas === "string" ? document.getElementById(aCanvas) : aCanvas;
rob@100:     }
rob@100: 
rob@100:     if (!('getContext' in curElement)) {
rob@100:       throw("called Processing constructor without passing canvas element reference or id.");
rob@100:     }
rob@100: 
rob@100:     function unimplemented(s) {
rob@100:       Processing.debug('Unimplemented - ' + s);
rob@100:     }
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // JavaScript event binding and releasing
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     var eventHandlers = [];
rob@100: 
rob@100:     function attachEventHandler(elem, type, fn) {
rob@100:       if (elem.addEventListener) {
rob@100:         elem.addEventListener(type, fn, false);
rob@100:       } else {
rob@100:         elem.attachEvent("on" + type, fn);
rob@100:       }
rob@100:       eventHandlers.push({elem: elem, type: type, fn: fn});
rob@100:     }
rob@100: 
rob@100:     function detachEventHandler(eventHandler) {
rob@100:       var elem = eventHandler.elem,
rob@100:           type = eventHandler.type,
rob@100:           fn   = eventHandler.fn;
rob@100:       if (elem.removeEventListener) {
rob@100:         elem.removeEventListener(type, fn, false);
rob@100:       } else if (elem.detachEvent) {
rob@100:         elem.detachEvent("on" + type, fn);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     function removeFirstArgument(args) {
rob@100:       return Array.prototype.slice.call(args, 1);
rob@100:     }
rob@100: 
rob@100:     // When something new is added to "p." it must also be added to the "names" array.
rob@100:     // The names array contains the names of everything that is inside "p."
rob@100:     var p = this;
rob@100: 
rob@100:     p.Char = p.Character = Char;
rob@100: 
rob@100:     // add in the Processing API functions
rob@100:     extend.withCommonFunctions(p);
rob@100:     extend.withMath(p);
rob@100:     extend.withProxyFunctions(p, removeFirstArgument);
rob@100:     extend.withTouch(p, curElement, attachEventHandler, document, PConstants);
rob@100: 
rob@100:     // custom functions and properties are added here
rob@100:     if(aFunctions) {
rob@100:       Object.keys(aFunctions).forEach(function(name) {
rob@100:         p[name] = aFunctions[name];
rob@100:       });
rob@100:     }
rob@100: 
rob@100:     // PJS specific (non-p5) methods and properties to externalize
rob@100:     p.externals = {
rob@100:       canvas:  curElement,
rob@100:       context: undef,
rob@100:       sketch:  undef,
rob@100:       window: window
rob@100:     };
rob@100: 
rob@100:     p.name            = 'Processing.js Instance'; // Set Processing defaults / environment variables
rob@100:     p.use3DContext    = false; // default '2d' canvas context
rob@100: 
rob@100:     /**
rob@100:      * Confirms if a Processing program is "focused", meaning that it is
rob@100:      * active and will accept input from mouse or keyboard. This variable
rob@100:      * is "true" if it is focused and "false" if not. This variable is
rob@100:      * often used when you want to warn people they need to click on the
rob@100:      * browser before it will work.
rob@100:     */
rob@100:     p.focused         = false;
rob@100:     p.breakShape      = false;
rob@100: 
rob@100:     // Glyph path storage for textFonts
rob@100:     p.glyphTable      = {};
rob@100: 
rob@100:     // Global vars for tracking mouse position
rob@100:     p.pmouseX         = 0;
rob@100:     p.pmouseY         = 0;
rob@100:     p.mouseX          = 0;
rob@100:     p.mouseY          = 0;
rob@100:     p.mouseButton     = 0;
rob@100:     p.mouseScroll     = 0;
rob@100: 
rob@100:     // Undefined event handlers to be replaced by user when needed
rob@100:     p.mouseClicked    = undef;
rob@100:     p.mouseDragged    = undef;
rob@100:     p.mouseMoved      = undef;
rob@100:     p.mousePressed    = undef;
rob@100:     p.mouseReleased   = undef;
rob@100:     p.mouseScrolled   = undef;
rob@100:     p.mouseOver       = undef;
rob@100:     p.mouseOut        = undef;
rob@100:     p.touchStart      = undef;
rob@100:     p.touchEnd        = undef;
rob@100:     p.touchMove       = undef;
rob@100:     p.touchCancel     = undef;
rob@100:     p.key             = undef;
rob@100:     p.keyCode         = undef;
rob@100:     p.keyPressed      = noop; // needed to remove function checks
rob@100:     p.keyReleased     = noop;
rob@100:     p.keyTyped        = noop;
rob@100:     p.draw            = undef;
rob@100:     p.setup           = undef;
rob@100: 
rob@100:     // Remapped vars
rob@100:     p.__mousePressed  = false;
rob@100:     p.__keyPressed    = false;
rob@100:     p.__frameRate     = 60;
rob@100: 
rob@100:     // The current animation frame
rob@100:     p.frameCount      = 0;
rob@100: 
rob@100:     // The height/width of the canvas
rob@100:     p.width           = 100;
rob@100:     p.height          = 100;
rob@100: 
rob@100:     // "Private" variables used to maintain state
rob@100:     var curContext,
rob@100:         curSketch,
rob@100:         drawing, // hold a Drawing2D or Drawing3D object
rob@100:         doFill = true,
rob@100:         fillStyle = [1.0, 1.0, 1.0, 1.0],
rob@100:         currentFillColor = 0xFFFFFFFF,
rob@100:         isFillDirty = true,
rob@100:         doStroke = true,
rob@100:         strokeStyle = [0.0, 0.0, 0.0, 1.0],
rob@100:         currentStrokeColor = 0xFF000000,
rob@100:         isStrokeDirty = true,
rob@100:         lineWidth = 1,
rob@100:         loopStarted = false,
rob@100:         renderSmooth = false,
rob@100:         doLoop = true,
rob@100:         looping = 0,
rob@100:         curRectMode = PConstants.CORNER,
rob@100:         curEllipseMode = PConstants.CENTER,
rob@100:         normalX = 0,
rob@100:         normalY = 0,
rob@100:         normalZ = 0,
rob@100:         normalMode = PConstants.NORMAL_MODE_AUTO,
rob@100:         curFrameRate = 60,
rob@100:         curMsPerFrame = 1000/curFrameRate,
rob@100:         curCursor = PConstants.ARROW,
rob@100:         oldCursor = curElement.style.cursor,
rob@100:         curShape = PConstants.POLYGON,
rob@100:         curShapeCount = 0,
rob@100:         curvePoints = [],
rob@100:         curTightness = 0,
rob@100:         curveDet = 20,
rob@100:         curveInited = false,
rob@100:         backgroundObj = -3355444, // rgb(204, 204, 204) is the default gray background colour
rob@100:         bezDetail = 20,
rob@100:         colorModeA = 255,
rob@100:         colorModeX = 255,
rob@100:         colorModeY = 255,
rob@100:         colorModeZ = 255,
rob@100:         pathOpen = false,
rob@100:         mouseDragging = false,
rob@100:         pmouseXLastFrame = 0,
rob@100:         pmouseYLastFrame = 0,
rob@100:         curColorMode = PConstants.RGB,
rob@100:         curTint = null,
rob@100:         curTint3d = null,
rob@100:         getLoaded = false,
rob@100:         start = Date.now(),
rob@100:         timeSinceLastFPS = start,
rob@100:         framesSinceLastFPS = 0,
rob@100:         textcanvas,
rob@100:         curveBasisMatrix,
rob@100:         curveToBezierMatrix,
rob@100:         curveDrawMatrix,
rob@100:         bezierDrawMatrix,
rob@100:         bezierBasisInverse,
rob@100:         bezierBasisMatrix,
rob@100:         curContextCache = { attributes: {}, locations: {} },
rob@100:         // Shaders
rob@100:         programObject3D,
rob@100:         programObject2D,
rob@100:         programObjectUnlitShape,
rob@100:         boxBuffer,
rob@100:         boxNormBuffer,
rob@100:         boxOutlineBuffer,
rob@100:         rectBuffer,
rob@100:         rectNormBuffer,
rob@100:         sphereBuffer,
rob@100:         lineBuffer,
rob@100:         fillBuffer,
rob@100:         fillColorBuffer,
rob@100:         strokeColorBuffer,
rob@100:         pointBuffer,
rob@100:         shapeTexVBO,
rob@100:         canTex,   // texture for createGraphics
rob@100:         textTex,   // texture for 3d tex
rob@100:         curTexture = {width:0,height:0},
rob@100:         curTextureMode = PConstants.IMAGE,
rob@100:         usingTexture = false,
rob@100:         textBuffer,
rob@100:         textureBuffer,
rob@100:         indexBuffer,
rob@100:         // Text alignment
rob@100:         horizontalTextAlignment = PConstants.LEFT,
rob@100:         verticalTextAlignment = PConstants.BASELINE,
rob@100:         textMode = PConstants.MODEL,
rob@100:         // Font state
rob@100:         curFontName = "Arial",
rob@100:         curTextSize = 12,
rob@100:         curTextAscent = 9,
rob@100:         curTextDescent = 2,
rob@100:         curTextLeading = 14,
rob@100:         curTextFont = PFont.get(curFontName, curTextSize),
rob@100:         // Pixels cache
rob@100:         originalContext,
rob@100:         proxyContext = null,
rob@100:         isContextReplaced = false,
rob@100:         setPixelsCached,
rob@100:         maxPixelsCached = 1000,
rob@100:         pressedKeysMap = [],
rob@100:         lastPressedKeyCode = null,
rob@100:         codedKeys = [ PConstants.SHIFT, PConstants.CONTROL, PConstants.ALT, PConstants.CAPSLK, PConstants.PGUP, PConstants.PGDN,
rob@100:                       PConstants.END, PConstants.HOME, PConstants.LEFT, PConstants.UP, PConstants.RIGHT, PConstants.DOWN, PConstants.NUMLK,
rob@100:                       PConstants.INSERT, PConstants.F1, PConstants.F2, PConstants.F3, PConstants.F4, PConstants.F5, PConstants.F6, PConstants.F7,
rob@100:                       PConstants.F8, PConstants.F9, PConstants.F10, PConstants.F11, PConstants.F12, PConstants.META ];
rob@100: 
rob@100:     // User can only have MAX_LIGHTS lights
rob@100:     var lightCount = 0;
rob@100: 
rob@100:     //sphere stuff
rob@100:     var sphereDetailV = 0,
rob@100:         sphereDetailU = 0,
rob@100:         sphereX = [],
rob@100:         sphereY = [],
rob@100:         sphereZ = [],
rob@100:         sinLUT = new Float32Array(PConstants.SINCOS_LENGTH),
rob@100:         cosLUT = new Float32Array(PConstants.SINCOS_LENGTH),
rob@100:         sphereVerts,
rob@100:         sphereNorms;
rob@100: 
rob@100:     // Camera defaults and settings
rob@100:     var cam,
rob@100:         cameraInv,
rob@100:         modelView,
rob@100:         modelViewInv,
rob@100:         userMatrixStack,
rob@100:         userReverseMatrixStack,
rob@100:         inverseCopy,
rob@100:         projection,
rob@100:         manipulatingCamera = false,
rob@100:         frustumMode = false,
rob@100:         cameraFOV = 60 * (Math.PI / 180),
rob@100:         cameraX = p.width / 2,
rob@100:         cameraY = p.height / 2,
rob@100:         cameraZ = cameraY / Math.tan(cameraFOV / 2),
rob@100:         cameraNear = cameraZ / 10,
rob@100:         cameraFar = cameraZ * 10,
rob@100:         cameraAspect = p.width / p.height;
rob@100: 
rob@100:     var vertArray = [],
rob@100:         curveVertArray = [],
rob@100:         curveVertCount = 0,
rob@100:         isCurve = false,
rob@100:         isBezier = false,
rob@100:         firstVert = true;
rob@100: 
rob@100:     //PShape stuff
rob@100:     var curShapeMode = PConstants.CORNER;
rob@100: 
rob@100:     // Stores states for pushStyle() and popStyle().
rob@100:     var styleArray = [];
rob@100: 
rob@100:     // The vertices for the box cannot be specified using a triangle strip since each
rob@100:     // side of the cube must have its own set of normals.
rob@100:     // Vertices are specified in a counter-clockwise order.
rob@100:     // Triangles are in this order: back, front, right, bottom, left, top.
rob@100:     var boxVerts = new Float32Array([
rob@100:        0.5,  0.5, -0.5,  0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5,  0.5, -0.5,  0.5,  0.5, -0.5,
rob@100:        0.5,  0.5,  0.5, -0.5,  0.5,  0.5, -0.5, -0.5,  0.5, -0.5, -0.5,  0.5,  0.5, -0.5,  0.5,  0.5,  0.5,  0.5,
rob@100:        0.5,  0.5, -0.5,  0.5,  0.5,  0.5,  0.5, -0.5,  0.5,  0.5, -0.5,  0.5,  0.5, -0.5, -0.5,  0.5,  0.5, -0.5,
rob@100:        0.5, -0.5, -0.5,  0.5, -0.5,  0.5, -0.5, -0.5,  0.5, -0.5, -0.5,  0.5, -0.5, -0.5, -0.5,  0.5, -0.5, -0.5,
rob@100:       -0.5, -0.5, -0.5, -0.5, -0.5,  0.5, -0.5,  0.5,  0.5, -0.5,  0.5,  0.5, -0.5,  0.5, -0.5, -0.5, -0.5, -0.5,
rob@100:        0.5,  0.5,  0.5,  0.5,  0.5, -0.5, -0.5,  0.5, -0.5, -0.5,  0.5, -0.5, -0.5,  0.5,  0.5,  0.5,  0.5,  0.5]);
rob@100: 
rob@100:     var boxOutlineVerts = new Float32Array([
rob@100:        0.5,  0.5,  0.5,  0.5, -0.5,  0.5,  0.5,  0.5, -0.5,  0.5, -0.5, -0.5,
rob@100:       -0.5,  0.5, -0.5, -0.5, -0.5, -0.5, -0.5,  0.5,  0.5, -0.5, -0.5,  0.5,
rob@100:        0.5,  0.5,  0.5,  0.5,  0.5, -0.5,  0.5,  0.5, -0.5, -0.5,  0.5, -0.5,
rob@100:       -0.5,  0.5, -0.5, -0.5,  0.5,  0.5, -0.5,  0.5,  0.5,  0.5,  0.5,  0.5,
rob@100:        0.5, -0.5,  0.5,  0.5, -0.5, -0.5,  0.5, -0.5, -0.5, -0.5, -0.5, -0.5,
rob@100:       -0.5, -0.5, -0.5, -0.5, -0.5,  0.5, -0.5, -0.5,  0.5,  0.5, -0.5,  0.5]);
rob@100: 
rob@100:     var boxNorms = new Float32Array([
rob@100:        0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,
rob@100:        0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,
rob@100:        1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,
rob@100:        0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,
rob@100:       -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0, -1,  0,  0,
rob@100:        0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0]);
rob@100: 
rob@100:     // These verts are used for the fill and stroke using TRIANGLE_FAN and LINE_LOOP.
rob@100:     var rectVerts = new Float32Array([0,0,0, 0,1,0, 1,1,0, 1,0,0]);
rob@100: 
rob@100:     var rectNorms = new Float32Array([0,0,1, 0,0,1, 0,0,1, 0,0,1]);
rob@100: 
rob@100:     // Shader for points and lines in begin/endShape.
rob@100:     var vertexShaderSrcUnlitShape =
rob@100:       "varying vec4 vFrontColor;" +
rob@100: 
rob@100:       "attribute vec3 aVertex;" +
rob@100:       "attribute vec4 aColor;" +
rob@100: 
rob@100:       "uniform mat4 uView;" +
rob@100:       "uniform mat4 uProjection;" +
rob@100:       "uniform float uPointSize;" +
rob@100: 
rob@100:       "void main(void) {" +
rob@100:       "  vFrontColor = aColor;" +
rob@100:       "  gl_PointSize = uPointSize;" +
rob@100:       "  gl_Position = uProjection * uView * vec4(aVertex, 1.0);" +
rob@100:       "}";
rob@100: 
rob@100:     var fragmentShaderSrcUnlitShape =
rob@100:       "#ifdef GL_ES\n" +
rob@100:       "precision highp float;\n" +
rob@100:       "#endif\n" +
rob@100: 
rob@100:       "varying vec4 vFrontColor;" +
rob@100:       "uniform bool uSmooth;" +
rob@100: 
rob@100:       "void main(void){" +
rob@100:       "  if(uSmooth == true){" +
rob@100:       "    float dist = distance(gl_PointCoord, vec2(0.5));" +
rob@100:       "    if(dist > 0.5){" +
rob@100:       "      discard;" +
rob@100:       "    }" +
rob@100:       "  }" +
rob@100:       "  gl_FragColor = vFrontColor;" +
rob@100:       "}";
rob@100: 
rob@100:     // Shader for rect, text, box outlines, sphere outlines, point() and line().
rob@100:     var vertexShaderSrc2D =
rob@100:       "varying vec4 vFrontColor;" +
rob@100: 
rob@100:       "attribute vec3 aVertex;" +
rob@100:       "attribute vec2 aTextureCoord;" +
rob@100:       "uniform vec4 uColor;" +
rob@100: 
rob@100:       "uniform mat4 uModel;" +
rob@100:       "uniform mat4 uView;" +
rob@100:       "uniform mat4 uProjection;" +
rob@100:       "uniform float uPointSize;" +
rob@100:       "varying vec2 vTextureCoord;"+
rob@100: 
rob@100:       "void main(void) {" +
rob@100:       "  gl_PointSize = uPointSize;" +
rob@100:       "  vFrontColor = uColor;" +
rob@100:       "  gl_Position = uProjection * uView * uModel * vec4(aVertex, 1.0);" +
rob@100:       "  vTextureCoord = aTextureCoord;" +
rob@100:       "}";
rob@100: 
rob@100:     var fragmentShaderSrc2D =
rob@100:       "#ifdef GL_ES\n" +
rob@100:       "precision highp float;\n" +
rob@100:       "#endif\n" +
rob@100: 
rob@100:       "varying vec4 vFrontColor;" +
rob@100:       "varying vec2 vTextureCoord;"+
rob@100: 
rob@100:       "uniform sampler2D uSampler;"+
rob@100:       "uniform int uIsDrawingText;"+
rob@100:       "uniform bool uSmooth;" +
rob@100: 
rob@100:       "void main(void){" +
rob@100:       // WebGL does not support POINT_SMOOTH, so we do it ourselves
rob@100:       "  if(uSmooth == true){" +
rob@100:       "    float dist = distance(gl_PointCoord, vec2(0.5));" +
rob@100:       "    if(dist > 0.5){" +
rob@100:       "      discard;" +
rob@100:       "    }" +
rob@100:       "  }" +
rob@100: 
rob@100:       "  if(uIsDrawingText == 1){" +
rob@100:       "    float alpha = texture2D(uSampler, vTextureCoord).a;"+
rob@100:       "    gl_FragColor = vec4(vFrontColor.rgb * alpha, alpha);"+
rob@100:       "  }" +
rob@100:       "  else{" +
rob@100:       "    gl_FragColor = vFrontColor;" +
rob@100:       "  }" +
rob@100:       "}";
rob@100: 
rob@100:     var webglMaxTempsWorkaround = /Windows/.test(navigator.userAgent);
rob@100: 
rob@100:     // Vertex shader for boxes and spheres.
rob@100:     var vertexShaderSrc3D =
rob@100:       "varying vec4 vFrontColor;" +
rob@100: 
rob@100:       "attribute vec3 aVertex;" +
rob@100:       "attribute vec3 aNormal;" +
rob@100:       "attribute vec4 aColor;" +
rob@100:       "attribute vec2 aTexture;" +
rob@100:       "varying   vec2 vTexture;" +
rob@100: 
rob@100:       "uniform vec4 uColor;" +
rob@100: 
rob@100:       "uniform bool uUsingMat;" +
rob@100:       "uniform vec3 uSpecular;" +
rob@100:       "uniform vec3 uMaterialEmissive;" +
rob@100:       "uniform vec3 uMaterialAmbient;" +
rob@100:       "uniform vec3 uMaterialSpecular;" +
rob@100:       "uniform float uShininess;" +
rob@100: 
rob@100:       "uniform mat4 uModel;" +
rob@100:       "uniform mat4 uView;" +
rob@100:       "uniform mat4 uProjection;" +
rob@100:       "uniform mat4 uNormalTransform;" +
rob@100: 
rob@100:       "uniform int uLightCount;" +
rob@100:       "uniform vec3 uFalloff;" +
rob@100: 
rob@100:       // Careful changing the order of these fields. Some cards
rob@100:       // have issues with memory alignment.
rob@100:       "struct Light {" +
rob@100:       "  int type;" +
rob@100:       "  vec3 color;" +
rob@100:       "  vec3 position;" +
rob@100:       "  vec3 direction;" +
rob@100:       "  float angle;" +
rob@100:       "  vec3 halfVector;" +
rob@100:       "  float concentration;" +
rob@100:       "};" +
rob@100: 
rob@100:       // nVidia cards have issues with arrays of structures
rob@100:       // so instead we create 8 instances of Light.
rob@100:       "uniform Light uLights0;" +
rob@100:       "uniform Light uLights1;" +
rob@100:       "uniform Light uLights2;" +
rob@100:       "uniform Light uLights3;" +
rob@100:       "uniform Light uLights4;" +
rob@100:       "uniform Light uLights5;" +
rob@100:       "uniform Light uLights6;" +
rob@100:       "uniform Light uLights7;" +
rob@100: 
rob@100:      // GLSL does not support switch.
rob@100:       "Light getLight(int index){" +
rob@100:       "  if(index == 0) return uLights0;" +
rob@100:       "  if(index == 1) return uLights1;" +
rob@100:       "  if(index == 2) return uLights2;" +
rob@100:       "  if(index == 3) return uLights3;" +
rob@100:       "  if(index == 4) return uLights4;" +
rob@100:       "  if(index == 5) return uLights5;" +
rob@100:       "  if(index == 6) return uLights6;" +
rob@100:       // Do not use a conditional for the last return statement
rob@100:       // because some video cards will fail and complain that
rob@100:       // "not all paths return".
rob@100:       "  return uLights7;" +
rob@100:       "}" +
rob@100: 
rob@100:       "void AmbientLight( inout vec3 totalAmbient, in vec3 ecPos, in Light light ) {" +
rob@100:       // Get the vector from the light to the vertex and
rob@100:       // get the distance from the current vector to the light position.
rob@100:       "  float d = length( light.position - ecPos );" +
rob@100:       "  float attenuation = 1.0 / ( uFalloff[0] + ( uFalloff[1] * d ) + ( uFalloff[2] * d * d ));" +
rob@100:       "  totalAmbient += light.color * attenuation;" +
rob@100:       "}" +
rob@100: 
rob@100:       /*
rob@100:         col - accumulated color
rob@100:         spec - accumulated specular highlight
rob@100:         vertNormal - Normal of the vertex
rob@100:         ecPos - eye coordinate position
rob@100:         light - light structure
rob@100:       */
rob@100:       "void DirectionalLight( inout vec3 col, inout vec3 spec, in vec3 vertNormal, in vec3 ecPos, in Light light ) {" +
rob@100:       "  float powerFactor = 0.0;" +
rob@100:       "  float nDotVP = max(0.0, dot( vertNormal, normalize(-light.position) ));" +
rob@100:       "  float nDotVH = max(0.0, dot( vertNormal, normalize(-light.position-normalize(ecPos) )));" +
rob@100: 
rob@100:       "  if( nDotVP != 0.0 ){" +
rob@100:       "    powerFactor = pow( nDotVH, uShininess );" +
rob@100:       "  }" +
rob@100: 
rob@100:       "  col += light.color * nDotVP;" +
rob@100:       "  spec += uSpecular * powerFactor;" +
rob@100:       "}" +
rob@100: 
rob@100:       /*
rob@100:         col - accumulated color
rob@100:         spec - accumulated specular highlight
rob@100:         vertNormal - Normal of the vertex
rob@100:         ecPos - eye coordinate position
rob@100:         light - light structure
rob@100:       */
rob@100:       "void PointLight( inout vec3 col, inout vec3 spec, in vec3 vertNormal, in vec3 ecPos, in Light light ) {" +
rob@100:       "  float powerFactor;" +
rob@100: 
rob@100:       // Get the vector from the light to the vertex.
rob@100:       "   vec3 VP = light.position - ecPos;" +
rob@100: 
rob@100:       // Get the distance from the current vector to the light position.
rob@100:       "  float d = length( VP ); " +
rob@100: 
rob@100:       // Normalize the light ray so it can be used in the dot product operation.
rob@100:       "  VP = normalize( VP );" +
rob@100: 
rob@100:       "  float attenuation = 1.0 / ( uFalloff[0] + ( uFalloff[1] * d ) + ( uFalloff[2] * d * d ));" +
rob@100: 
rob@100:       "  float nDotVP = max( 0.0, dot( vertNormal, VP ));" +
rob@100:       "  vec3 halfVector = normalize( VP - normalize(ecPos) );" +
rob@100:       "  float nDotHV = max( 0.0, dot( vertNormal, halfVector ));" +
rob@100: 
rob@100:       "  if( nDotVP == 0.0 ) {" +
rob@100:       "    powerFactor = 0.0;" +
rob@100:       "  }" +
rob@100:       "  else {" +
rob@100:       "    powerFactor = pow( nDotHV, uShininess );" +
rob@100:       "  }" +
rob@100: 
rob@100:       "  spec += uSpecular * powerFactor * attenuation;" +
rob@100:       "  col += light.color * nDotVP * attenuation;" +
rob@100:       "}" +
rob@100: 
rob@100:       /*
rob@100:         col - accumulated color
rob@100:         spec - accumulated specular highlight
rob@100:         vertNormal - Normal of the vertex
rob@100:         ecPos - eye coordinate position
rob@100:         light - light structure
rob@100:       */
rob@100:       "void SpotLight( inout vec3 col, inout vec3 spec, in vec3 vertNormal, in vec3 ecPos, in Light light ) {" +
rob@100:       "  float spotAttenuation;" +
rob@100:       "  float powerFactor = 0.0;" +
rob@100: 
rob@100:       // Calculate the vector from the current vertex to the light.
rob@100:       "  vec3 VP = light.position - ecPos;" +
rob@100:       "  vec3 ldir = normalize( -light.direction );" +
rob@100: 
rob@100:       // Get the distance from the spotlight and the vertex
rob@100:       "  float d = length( VP );" +
rob@100:       "  VP = normalize( VP );" +
rob@100: 
rob@100:       "  float attenuation = 1.0 / ( uFalloff[0] + ( uFalloff[1] * d ) + ( uFalloff[2] * d * d ) );" +
rob@100: 
rob@100:       // Dot product of the vector from vertex to light and light direction.
rob@100:       "  float spotDot = dot( VP, ldir );" +
rob@100: 
rob@100:       // If the vertex falls inside the cone
rob@100:       (webglMaxTempsWorkaround ? // Windows reports max temps error if light.angle is used
rob@100:       "  spotAttenuation = 1.0; " :
rob@100:       "  if( spotDot > cos( light.angle ) ) {" +
rob@100:       "    spotAttenuation = pow( spotDot, light.concentration );" +
rob@100:       "  }" +
rob@100:       "  else{" +
rob@100:       "    spotAttenuation = 0.0;" +
rob@100:       "  }" +
rob@100:       "  attenuation *= spotAttenuation;" +
rob@100:       "") +
rob@100: 
rob@100:       "  float nDotVP = max( 0.0, dot( vertNormal, VP ) );" +
rob@100:       "  vec3 halfVector = normalize( VP - normalize(ecPos) );" +
rob@100:       "  float nDotHV = max( 0.0, dot( vertNormal, halfVector ) );" +
rob@100: 
rob@100:       "  if( nDotVP != 0.0 ) {" +
rob@100:       "    powerFactor = pow( nDotHV, uShininess );" +
rob@100:       "  }" +
rob@100: 
rob@100:       "  spec += uSpecular * powerFactor * attenuation;" +
rob@100:       "  col += light.color * nDotVP * attenuation;" +
rob@100:       "}" +
rob@100: 
rob@100:       "void main(void) {" +
rob@100:       "  vec3 finalAmbient = vec3( 0.0 );" +
rob@100:       "  vec3 finalDiffuse = vec3( 0.0 );" +
rob@100:       "  vec3 finalSpecular = vec3( 0.0 );" +
rob@100: 
rob@100:       "  vec4 col = uColor;" +
rob@100: 
rob@100:       "  if ( uColor[0] == -1.0 ){" +
rob@100:       "    col = aColor;" +
rob@100:       "  }" +
rob@100: 
rob@100:       // We use the sphere vertices as the normals when we create the sphere buffer.
rob@100:       // But this only works if the sphere vertices are unit length, so we
rob@100:       // have to normalize the normals here. Since this is only required for spheres
rob@100:       // we could consider placing this in a conditional later on.
rob@100:       "  vec3 norm = normalize(vec3( uNormalTransform * vec4( aNormal, 0.0 ) ));" +
rob@100: 
rob@100:       "  vec4 ecPos4 = uView * uModel * vec4(aVertex, 1.0);" +
rob@100:       "  vec3 ecPos = (vec3(ecPos4))/ecPos4.w;" +
rob@100: 
rob@100:       // If there were no lights this draw call, just use the
rob@100:       // assigned fill color of the shape and the specular value.
rob@100:       "  if( uLightCount == 0 ) {" +
rob@100:       "    vFrontColor = col + vec4(uMaterialSpecular, 1.0);" +
rob@100:       "  }" +
rob@100:       "  else {" +
rob@100:            // WebGL forces us to iterate over a constant value
rob@100:            // so we can't iterate using lightCount.
rob@100:       "    for( int i = 0; i < 8; i++ ) {" +
rob@100:       "      Light l = getLight(i);" +
rob@100: 
rob@100:       // We can stop iterating if we know we have gone past
rob@100:       // the number of lights which are actually on. This gives us a
rob@100:       // significant performance increase with high vertex counts.
rob@100:       "      if( i >= uLightCount ){" +
rob@100:       "        break;" +
rob@100:       "      }" +
rob@100: 
rob@100:       "      if( l.type == 0 ) {" +
rob@100:       "        AmbientLight( finalAmbient, ecPos, l );" +
rob@100:       "      }" +
rob@100:       "      else if( l.type == 1 ) {" +
rob@100:       "        DirectionalLight( finalDiffuse, finalSpecular, norm, ecPos, l );" +
rob@100:       "      }" +
rob@100:       "      else if( l.type == 2 ) {" +
rob@100:       "        PointLight( finalDiffuse, finalSpecular, norm, ecPos, l );" +
rob@100:       "      }" +
rob@100:       "      else {" +
rob@100:       "        SpotLight( finalDiffuse, finalSpecular, norm, ecPos, l );" +
rob@100:       "      }" +
rob@100:       "    }" +
rob@100: 
rob@100:       "   if( uUsingMat == false ) {" +
rob@100:       "     vFrontColor = vec4(" +
rob@100:       "       vec3( col ) * finalAmbient +" +
rob@100:       "       vec3( col ) * finalDiffuse +" +
rob@100:       "       vec3( col ) * finalSpecular," +
rob@100:       "       col[3] );" +
rob@100:       "   }" +
rob@100:       "   else{" +
rob@100:       "     vFrontColor = vec4( " +
rob@100:       "       uMaterialEmissive + " +
rob@100:       "       (vec3(col) * uMaterialAmbient * finalAmbient ) + " +
rob@100:       "       (vec3(col) * finalDiffuse) + " +
rob@100:       "       (uMaterialSpecular * finalSpecular), " +
rob@100:       "       col[3] );" +
rob@100:       "    }" +
rob@100:       "  }" +
rob@100: 
rob@100:       "  vTexture.xy = aTexture.xy;" +
rob@100:       "  gl_Position = uProjection * uView * uModel * vec4( aVertex, 1.0 );" +
rob@100:       "}";
rob@100: 
rob@100:     var fragmentShaderSrc3D =
rob@100:       "#ifdef GL_ES\n" +
rob@100:       "precision highp float;\n" +
rob@100:       "#endif\n" +
rob@100: 
rob@100:       "varying vec4 vFrontColor;" +
rob@100: 
rob@100:       "uniform sampler2D uSampler;" +
rob@100:       "uniform bool uUsingTexture;" +
rob@100:       "varying vec2 vTexture;" +
rob@100: 
rob@100:       // In Processing, when a texture is used, the fill color is ignored
rob@100:       // vec4(1.0,1.0,1.0,0.5)
rob@100:       "void main(void){" +
rob@100:       "  if( uUsingTexture ){" +
rob@100:       "    gl_FragColor = vec4(texture2D(uSampler, vTexture.xy)) * vFrontColor;" +
rob@100:       "  }"+
rob@100:       "  else{" +
rob@100:       "    gl_FragColor = vFrontColor;" +
rob@100:       "  }" +
rob@100:       "}";
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // 3D Functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /*
rob@100:      * Sets a uniform variable in a program object to a particular
rob@100:      * value. Before calling this function, ensure the correct
rob@100:      * program object has been installed as part of the current
rob@100:      * rendering state by calling useProgram.
rob@100:      *
rob@100:      * On some systems, if the variable exists in the shader but isn't used,
rob@100:      * the compiler will optimize it out and this function will fail.
rob@100:      *
rob@100:      * @param {String} cacheId
rob@100:      * @param {WebGLProgram} programObj program object returned from
rob@100:      * createProgramObject
rob@100:      * @param {String} varName the name of the variable in the shader
rob@100:      * @param {float | Array} varValue either a scalar value or an Array
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see uniformi
rob@100:      * @see uniformMatrix
rob@100:     */
rob@100:     function uniformf(cacheId, programObj, varName, varValue) {
rob@100:       var varLocation = curContextCache.locations[cacheId];
rob@100:       if(varLocation === undef) {
rob@100:         varLocation = curContext.getUniformLocation(programObj, varName);
rob@100:         curContextCache.locations[cacheId] = varLocation;
rob@100:       }
rob@100:       // the variable won't be found if it was optimized out.
rob@100:       if (varLocation !== null) {
rob@100:         if (varValue.length === 4) {
rob@100:           curContext.uniform4fv(varLocation, varValue);
rob@100:         } else if (varValue.length === 3) {
rob@100:           curContext.uniform3fv(varLocation, varValue);
rob@100:         } else if (varValue.length === 2) {
rob@100:           curContext.uniform2fv(varLocation, varValue);
rob@100:         } else {
rob@100:           curContext.uniform1f(varLocation, varValue);
rob@100:         }
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Sets a uniform int or int array in a program object to a particular
rob@100:      * value. Before calling this function, ensure the correct
rob@100:      * program object has been installed as part of the current
rob@100:      * rendering state.
rob@100:      *
rob@100:      * On some systems, if the variable exists in the shader but isn't used,
rob@100:      * the compiler will optimize it out and this function will fail.
rob@100:      *
rob@100:      * @param {String} cacheId
rob@100:      * @param {WebGLProgram} programObj program object returned from
rob@100:      * createProgramObject
rob@100:      * @param {String} varName the name of the variable in the shader
rob@100:      * @param {int | Array} varValue either a scalar value or an Array
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see uniformf
rob@100:      * @see uniformMatrix
rob@100:     */
rob@100:     function uniformi(cacheId, programObj, varName, varValue) {
rob@100:       var varLocation = curContextCache.locations[cacheId];
rob@100:       if(varLocation === undef) {
rob@100:         varLocation = curContext.getUniformLocation(programObj, varName);
rob@100:         curContextCache.locations[cacheId] = varLocation;
rob@100:       }
rob@100:       // the variable won't be found if it was optimized out.
rob@100:       if (varLocation !== null) {
rob@100:         if (varValue.length === 4) {
rob@100:           curContext.uniform4iv(varLocation, varValue);
rob@100:         } else if (varValue.length === 3) {
rob@100:           curContext.uniform3iv(varLocation, varValue);
rob@100:         } else if (varValue.length === 2) {
rob@100:           curContext.uniform2iv(varLocation, varValue);
rob@100:         } else {
rob@100:           curContext.uniform1i(varLocation, varValue);
rob@100:         }
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Sets the value of a uniform matrix variable in a program
rob@100:      * object. Before calling this function, ensure the correct
rob@100:      * program object has been installed as part of the current
rob@100:      * rendering state.
rob@100:      *
rob@100:      * On some systems, if the variable exists in the shader but
rob@100:      * isn't used, the compiler will optimize it out and this
rob@100:      * function will fail.
rob@100:      *
rob@100:      * @param {String} cacheId
rob@100:      * @param {WebGLProgram} programObj program object returned from
rob@100:      * createProgramObject
rob@100:      * @param {String} varName the name of the variable in the shader
rob@100:      * @param {boolean} transpose must be false
rob@100:      * @param {Array} matrix an array of 4, 9 or 16 values
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see uniformi
rob@100:      * @see uniformf
rob@100:     */
rob@100:     function uniformMatrix(cacheId, programObj, varName, transpose, matrix) {
rob@100:       var varLocation = curContextCache.locations[cacheId];
rob@100:       if(varLocation === undef) {
rob@100:         varLocation = curContext.getUniformLocation(programObj, varName);
rob@100:         curContextCache.locations[cacheId] = varLocation;
rob@100:       }
rob@100:       // The variable won't be found if it was optimized out.
rob@100:       if (varLocation !== -1) {
rob@100:         if (matrix.length === 16) {
rob@100:           curContext.uniformMatrix4fv(varLocation, transpose, matrix);
rob@100:         } else if (matrix.length === 9) {
rob@100:           curContext.uniformMatrix3fv(varLocation, transpose, matrix);
rob@100:         } else {
rob@100:           curContext.uniformMatrix2fv(varLocation, transpose, matrix);
rob@100:         }
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Binds the VBO, sets the vertex attribute data for the program
rob@100:      * object and enables the attribute.
rob@100:      *
rob@100:      * On some systems, if the attribute exists in the shader but
rob@100:      * isn't used, the compiler will optimize it out and this
rob@100:      * function will fail.
rob@100:      *
rob@100:      * @param {String} cacheId
rob@100:      * @param {WebGLProgram} programObj program object returned from
rob@100:      * createProgramObject
rob@100:      * @param {String} varName the name of the variable in the shader
rob@100:      * @param {int} size the number of components per vertex attribute
rob@100:      * @param {WebGLBuffer} VBO Vertex Buffer Object
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see disableVertexAttribPointer
rob@100:     */
rob@100:     function vertexAttribPointer(cacheId, programObj, varName, size, VBO) {
rob@100:       var varLocation = curContextCache.attributes[cacheId];
rob@100:       if(varLocation === undef) {
rob@100:         varLocation = curContext.getAttribLocation(programObj, varName);
rob@100:         curContextCache.attributes[cacheId] = varLocation;
rob@100:       }
rob@100:       if (varLocation !== -1) {
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, VBO);
rob@100:         curContext.vertexAttribPointer(varLocation, size, curContext.FLOAT, false, 0, 0);
rob@100:         curContext.enableVertexAttribArray(varLocation);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Disables a program object attribute from being sent to WebGL.
rob@100:      *
rob@100:      * @param {String} cacheId
rob@100:      * @param {WebGLProgram} programObj program object returned from
rob@100:      * createProgramObject
rob@100:      * @param {String} varName name of the attribute
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see vertexAttribPointer
rob@100:     */
rob@100:     function disableVertexAttribPointer(cacheId, programObj, varName){
rob@100:       var varLocation = curContextCache.attributes[cacheId];
rob@100:       if(varLocation === undef) {
rob@100:         varLocation = curContext.getAttribLocation(programObj, varName);
rob@100:         curContextCache.attributes[cacheId] = varLocation;
rob@100:       }
rob@100:       if (varLocation !== -1) {
rob@100:         curContext.disableVertexAttribArray(varLocation);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Creates a WebGL program object.
rob@100:      *
rob@100:      * @param {String} vetexShaderSource
rob@100:      * @param {String} fragmentShaderSource
rob@100:      *
rob@100:      * @returns {WebGLProgram} A program object
rob@100:     */
rob@100:     var createProgramObject = function(curContext, vetexShaderSource, fragmentShaderSource) {
rob@100:       var vertexShaderObject = curContext.createShader(curContext.VERTEX_SHADER);
rob@100:       curContext.shaderSource(vertexShaderObject, vetexShaderSource);
rob@100:       curContext.compileShader(vertexShaderObject);
rob@100:       if (!curContext.getShaderParameter(vertexShaderObject, curContext.COMPILE_STATUS)) {
rob@100:         throw curContext.getShaderInfoLog(vertexShaderObject);
rob@100:       }
rob@100: 
rob@100:       var fragmentShaderObject = curContext.createShader(curContext.FRAGMENT_SHADER);
rob@100:       curContext.shaderSource(fragmentShaderObject, fragmentShaderSource);
rob@100:       curContext.compileShader(fragmentShaderObject);
rob@100:       if (!curContext.getShaderParameter(fragmentShaderObject, curContext.COMPILE_STATUS)) {
rob@100:         throw curContext.getShaderInfoLog(fragmentShaderObject);
rob@100:       }
rob@100: 
rob@100:       var programObject = curContext.createProgram();
rob@100:       curContext.attachShader(programObject, vertexShaderObject);
rob@100:       curContext.attachShader(programObject, fragmentShaderObject);
rob@100:       curContext.linkProgram(programObject);
rob@100:       if (!curContext.getProgramParameter(programObject, curContext.LINK_STATUS)) {
rob@100:         throw "Error linking shaders.";
rob@100:       }
rob@100: 
rob@100:       return programObject;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // 2D/3D drawing handling
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     var imageModeCorner = function(x, y, w, h, whAreSizes) {
rob@100:       return {
rob@100:         x: x,
rob@100:         y: y,
rob@100:         w: w,
rob@100:         h: h
rob@100:       };
rob@100:     };
rob@100:     var imageModeConvert = imageModeCorner;
rob@100: 
rob@100:     var imageModeCorners = function(x, y, w, h, whAreSizes) {
rob@100:       return {
rob@100:         x: x,
rob@100:         y: y,
rob@100:         w: whAreSizes ? w : w - x,
rob@100:         h: whAreSizes ? h : h - y
rob@100:       };
rob@100:     };
rob@100: 
rob@100:     var imageModeCenter = function(x, y, w, h, whAreSizes) {
rob@100:       return {
rob@100:         x: x - w / 2,
rob@100:         y: y - h / 2,
rob@100:         w: w,
rob@100:         h: h
rob@100:       };
rob@100:     };
rob@100: 
rob@100:     // Objects for shared, 2D and 3D contexts
rob@100:     var DrawingShared = function(){};
rob@100:     var Drawing2D = function(){};
rob@100:     var Drawing3D = function(){};
rob@100:     var DrawingPre = function(){};
rob@100: 
rob@100:     // Setup the prototype chain
rob@100:     Drawing2D.prototype = new DrawingShared();
rob@100:     Drawing2D.prototype.constructor = Drawing2D;
rob@100:     Drawing3D.prototype = new DrawingShared();
rob@100:     Drawing3D.prototype.constructor = Drawing3D;
rob@100:     DrawingPre.prototype = new DrawingShared();
rob@100:     DrawingPre.prototype.constructor = DrawingPre;
rob@100: 
rob@100:     // A no-op function for when the user calls 3D functions from a 2D sketch
rob@100:     // We can change this to a throw or console.error() later if we want
rob@100:     DrawingShared.prototype.a3DOnlyFunction = noop;
rob@100: 
rob@100:     /**
rob@100:      * The shape() function displays shapes to the screen.
rob@100:      * Processing currently works with SVG shapes only.
rob@100:      * The <b>shape</b> parameter specifies the shape to display and the <b>x</b>
rob@100:      * and <b>y</b> parameters define the location of the shape from its
rob@100:      * upper-left corner.
rob@100:      * The shape is displayed at its original size unless the <b>width</b>
rob@100:      * and <b>height</b> parameters specify a different size.
rob@100:      * The <b>shapeMode()</b> function changes the way the parameters work.
rob@100:      * A call to <b>shapeMode(CORNERS)</b>, for example, will change the width
rob@100:      * and height parameters to define the x and y values of the opposite corner
rob@100:      * of the shape.
rob@100:      * <br><br>
rob@100:      * Note complex shapes may draw awkwardly with P2D, P3D, and OPENGL. Those
rob@100:      * renderers do not yet support shapes that have holes or complicated breaks.
rob@100:      *
rob@100:      * @param {PShape} shape       the shape to display
rob@100:      * @param {int|float} x        x-coordinate of the shape
rob@100:      * @param {int|float} y        y-coordinate of the shape
rob@100:      * @param {int|float} width    width to display the shape
rob@100:      * @param {int|float} height   height to display the shape
rob@100:      *
rob@100:      * @see PShape
rob@100:      * @see loadShape()
rob@100:      * @see shapeMode()
rob@100:      */
rob@100:     p.shape = function(shape, x, y, width, height) {
rob@100:       if (arguments.length >= 1 && arguments[0] !== null) {
rob@100:         if (shape.isVisible()) {
rob@100:           p.pushMatrix();
rob@100:           if (curShapeMode === PConstants.CENTER) {
rob@100:             if (arguments.length === 5) {
rob@100:               p.translate(x - width/2, y - height/2);
rob@100:               p.scale(width / shape.getWidth(), height / shape.getHeight());
rob@100:             } else if (arguments.length === 3) {
rob@100:               p.translate(x - shape.getWidth()/2, - shape.getHeight()/2);
rob@100:             } else {
rob@100:               p.translate(-shape.getWidth()/2, -shape.getHeight()/2);
rob@100:             }
rob@100:           } else if (curShapeMode === PConstants.CORNER) {
rob@100:             if (arguments.length === 5) {
rob@100:               p.translate(x, y);
rob@100:               p.scale(width / shape.getWidth(), height / shape.getHeight());
rob@100:             } else if (arguments.length === 3) {
rob@100:               p.translate(x, y);
rob@100:             }
rob@100:           } else if (curShapeMode === PConstants.CORNERS) {
rob@100:             if (arguments.length === 5) {
rob@100:               width  -= x;
rob@100:               height -= y;
rob@100:               p.translate(x, y);
rob@100:               p.scale(width / shape.getWidth(), height / shape.getHeight());
rob@100:             } else if (arguments.length === 3) {
rob@100:               p.translate(x, y);
rob@100:             }
rob@100:           }
rob@100:           shape.draw(p);
rob@100:           if ((arguments.length === 1 && curShapeMode === PConstants.CENTER ) || arguments.length > 1) {
rob@100:             p.popMatrix();
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The shapeMode() function modifies the location from which shapes draw.
rob@100:      * The default mode is <b>shapeMode(CORNER)</b>, which specifies the
rob@100:      * location to be the upper left corner of the shape and uses the third
rob@100:      * and fourth parameters of <b>shape()</b> to specify the width and height.
rob@100:      * The syntax <b>shapeMode(CORNERS)</b> uses the first and second parameters
rob@100:      * of <b>shape()</b> to set the location of one corner and uses the third
rob@100:      * and fourth parameters to set the opposite corner.
rob@100:      * The syntax <b>shapeMode(CENTER)</b> draws the shape from its center point
rob@100:      * and uses the third and forth parameters of <b>shape()</b> to specify the
rob@100:      * width and height.
rob@100:      * The parameter must be written in "ALL CAPS" because Processing syntax
rob@100:      * is case sensitive.
rob@100:      *
rob@100:      * @param {int} mode One of CORNER, CORNERS, CENTER
rob@100:      *
rob@100:      * @see shape()
rob@100:      * @see rectMode()
rob@100:      */
rob@100:     p.shapeMode = function (mode) {
rob@100:       curShapeMode = mode;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The loadShape() function loads vector shapes into a variable of type PShape. Currently, only SVG files may be loaded.
rob@100:      * In most cases, <b>loadShape()</b> should be used inside <b>setup()</b> because loading shapes inside <b>draw()</b> will reduce the speed of a sketch.
rob@100:      *
rob@100:      * @param {String} filename     an SVG file
rob@100:      *
rob@100:      * @return {PShape} a object of type PShape or null
rob@100:      * @see PShape
rob@100:      * @see PApplet#shape()
rob@100:      * @see PApplet#shapeMode()
rob@100:      */
rob@100:     p.loadShape = function (filename) {
rob@100:       if (arguments.length === 1) {
rob@100:         if (filename.indexOf(".svg") > -1) {
rob@100:           return new PShapeSVG(null, filename);
rob@100:         }
rob@100:       }
rob@100:       return null;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Processing 2.0 function for loading XML files.
rob@100:      *
rob@100:      * @param {String} uri The uri for the xml file to load.
rob@100:      *
rob@100:      * @return {XML} An XML object representing the xml data.
rob@100:      */
rob@100:     p.loadXML = function(uri) {
rob@100:       return new XML(p, uri);
rob@100:     };
rob@100: 
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // 2D Matrix
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * Helper function for printMatrix(). Finds the largest scalar
rob@100:      * in the matrix, then number of digits left of the decimal.
rob@100:      * Call from PMatrix2D and PMatrix3D's print() function.
rob@100:      */
rob@100:     var printMatrixHelper = function(elements) {
rob@100:       var big = 0;
rob@100:       for (var i = 0; i < elements.length; i++) {
rob@100:         if (i !== 0) {
rob@100:           big = Math.max(big, Math.abs(elements[i]));
rob@100:         } else {
rob@100:           big = Math.abs(elements[i]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       var digits = (big + "").indexOf(".");
rob@100:       if (digits === 0) {
rob@100:         digits = 1;
rob@100:       } else if (digits === -1) {
rob@100:         digits = (big + "").length;
rob@100:       }
rob@100: 
rob@100:       return digits;
rob@100:     };
rob@100:     /**
rob@100:      * PMatrix2D is a 3x2 affine matrix implementation. The constructor accepts another PMatrix2D or a list of six float elements.
rob@100:      * If no parameters are provided the matrix is set to the identity matrix.
rob@100:      *
rob@100:      * @param {PMatrix2D} matrix  the initial matrix to set to
rob@100:      * @param {float} m00         the first element of the matrix
rob@100:      * @param {float} m01         the second element of the matrix
rob@100:      * @param {float} m02         the third element of the matrix
rob@100:      * @param {float} m10         the fourth element of the matrix
rob@100:      * @param {float} m11         the fifth element of the matrix
rob@100:      * @param {float} m12         the sixth element of the matrix
rob@100:      */
rob@100:     var PMatrix2D = p.PMatrix2D = function() {
rob@100:       if (arguments.length === 0) {
rob@100:         this.reset();
rob@100:       } else if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:         this.set(arguments[0].array());
rob@100:       } else if (arguments.length === 6) {
rob@100:         this.set(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]);
rob@100:       }
rob@100:     };
rob@100:     /**
rob@100:      * PMatrix2D methods
rob@100:      */
rob@100:     PMatrix2D.prototype = {
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The set() function sets the matrix elements. The function accepts either another PMatrix2D, an array of elements, or a list of six floats.
rob@100:        *
rob@100:        * @param {PMatrix2D} matrix    the matrix to set this matrix to
rob@100:        * @param {float[]} elements    an array of elements to set this matrix to
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the third element of the matrix
rob@100:        * @param {float} m10           the fourth element of the matrix
rob@100:        * @param {float} m11           the fith element of the matrix
rob@100:        * @param {float} m12           the sixth element of the matrix
rob@100:        */
rob@100:       set: function() {
rob@100:         if (arguments.length === 6) {
rob@100:           var a = arguments;
rob@100:           this.set([a[0], a[1], a[2],
rob@100:                     a[3], a[4], a[5]]);
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:           this.elements = arguments[0].array();
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:           this.elements = arguments[0].slice();
rob@100:         }
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The get() function returns a copy of this PMatrix2D.
rob@100:        *
rob@100:        * @return {PMatrix2D} a copy of this PMatrix2D
rob@100:        */
rob@100:       get: function() {
rob@100:         var outgoing = new PMatrix2D();
rob@100:         outgoing.set(this.elements);
rob@100:         return outgoing;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The reset() function sets this PMatrix2D to the identity matrix.
rob@100:        */
rob@100:       reset: function() {
rob@100:         this.set([1, 0, 0, 0, 1, 0]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The array() function returns a copy of the element values.
rob@100:        * @addon
rob@100:        *
rob@100:        * @return {float[]} returns a copy of the element values
rob@100:        */
rob@100:       array: function array() {
rob@100:         return this.elements.slice();
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The translate() function translates this matrix by moving the current coordinates to the location specified by tx and ty.
rob@100:        *
rob@100:        * @param {float} tx  the x-axis coordinate to move to
rob@100:        * @param {float} ty  the y-axis coordinate to move to
rob@100:        */
rob@100:       translate: function(tx, ty) {
rob@100:         this.elements[2] = tx * this.elements[0] + ty * this.elements[1] + this.elements[2];
rob@100:         this.elements[5] = tx * this.elements[3] + ty * this.elements[4] + this.elements[5];
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The invTranslate() function translates this matrix by moving the current coordinates to the negative location specified by tx and ty.
rob@100:        *
rob@100:        * @param {float} tx  the x-axis coordinate to move to
rob@100:        * @param {float} ty  the y-axis coordinate to move to
rob@100:        */
rob@100:       invTranslate: function(tx, ty) {
rob@100:         this.translate(-tx, -ty);
rob@100:       },
rob@100:        /**
rob@100:        * @member PMatrix2D
rob@100:        * The transpose() function is not used in processingjs.
rob@100:        */
rob@100:       transpose: function() {
rob@100:         // Does nothing in Processing.
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The mult() function multiplied this matrix.
rob@100:        * If two array elements are passed in the function will multiply a two element vector against this matrix.
rob@100:        * If target is null or not length four, a new float array will be returned.
rob@100:        * The values for vec and target can be the same (though that's less efficient).
rob@100:        * If two PVectors are passed in the function multiply the x and y coordinates of a PVector against this matrix.
rob@100:        *
rob@100:        * @param {PVector} source, target  the PVectors used to multiply this matrix
rob@100:        * @param {float[]} source, target  the arrays used to multiply this matrix
rob@100:        *
rob@100:        * @return {PVector|float[]} returns a PVector or an array representing the new matrix
rob@100:        */
rob@100:       mult: function(source, target) {
rob@100:         var x, y;
rob@100:         if (source instanceof PVector) {
rob@100:           x = source.x;
rob@100:           y = source.y;
rob@100:           if (!target) {
rob@100:             target = new PVector();
rob@100:           }
rob@100:         } else if (source instanceof Array) {
rob@100:           x = source[0];
rob@100:           y = source[1];
rob@100:           if (!target) {
rob@100:             target = [];
rob@100:           }
rob@100:         }
rob@100:         if (target instanceof Array) {
rob@100:           target[0] = this.elements[0] * x + this.elements[1] * y + this.elements[2];
rob@100:           target[1] = this.elements[3] * x + this.elements[4] * y + this.elements[5];
rob@100:         } else if (target instanceof PVector) {
rob@100:           target.x = this.elements[0] * x + this.elements[1] * y + this.elements[2];
rob@100:           target.y = this.elements[3] * x + this.elements[4] * y + this.elements[5];
rob@100:           target.z = 0;
rob@100:         }
rob@100:         return target;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The multX() function calculates the x component of a vector from a transformation.
rob@100:        *
rob@100:        * @param {float} x the x component of the vector being transformed
rob@100:        * @param {float} y the y component of the vector being transformed
rob@100:        *
rob@100:        * @return {float} returnes the result of the calculation
rob@100:        */
rob@100:       multX: function(x, y) {
rob@100:         return (x * this.elements[0] + y * this.elements[1] + this.elements[2]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The multY() function calculates the y component of a vector from a transformation.
rob@100:        *
rob@100:        * @param {float} x the x component of the vector being transformed
rob@100:        * @param {float} y the y component of the vector being transformed
rob@100:        *
rob@100:        * @return {float} returnes the result of the calculation
rob@100:        */
rob@100:       multY: function(x, y) {
rob@100:         return (x * this.elements[3] + y * this.elements[4] + this.elements[5]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The skewX() function skews the matrix along the x-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of skew specified in radians
rob@100:        */
rob@100:       skewX: function(angle) {
rob@100:         this.apply(1, 0, 1, angle, 0, 0);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The skewY() function skews the matrix along the y-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of skew specified in radians
rob@100:        */
rob@100:       skewY: function(angle) {
rob@100:         this.apply(1, 0, 1,  0, angle, 0);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The shearX() function shears the matrix along the x-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of skew specified in radians
rob@100:        */
rob@100:       shearX: function(angle) {
rob@100:         this.apply(1, 0, 1, Math.tan(angle) , 0, 0);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The shearY() function shears the matrix along the y-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of skew specified in radians
rob@100:        */
rob@100:       shearY: function(angle) {
rob@100:         this.apply(1, 0, 1,  0, Math.tan(angle), 0);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The determinant() function calvculates the determinant of this matrix.
rob@100:        *
rob@100:        * @return {float} the determinant of the matrix
rob@100:        */
rob@100:       determinant: function() {
rob@100:         return (this.elements[0] * this.elements[4] - this.elements[1] * this.elements[3]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The invert() function inverts this matrix
rob@100:        *
rob@100:        * @return {boolean} true if successful
rob@100:        */
rob@100:       invert: function() {
rob@100:         var d = this.determinant();
rob@100:         if (Math.abs( d ) > PConstants.MIN_INT) {
rob@100:           var old00 = this.elements[0];
rob@100:           var old01 = this.elements[1];
rob@100:           var old02 = this.elements[2];
rob@100:           var old10 = this.elements[3];
rob@100:           var old11 = this.elements[4];
rob@100:           var old12 = this.elements[5];
rob@100:           this.elements[0] =  old11 / d;
rob@100:           this.elements[3] = -old10 / d;
rob@100:           this.elements[1] = -old01 / d;
rob@100:           this.elements[4] =  old00 / d;
rob@100:           this.elements[2] = (old01 * old12 - old11 * old02) / d;
rob@100:           this.elements[5] = (old10 * old02 - old00 * old12) / d;
rob@100:           return true;
rob@100:         }
rob@100:         return false;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The scale() function increases or decreases the size of a shape by expanding and contracting vertices. When only one parameter is specified scale will occur in all dimensions.
rob@100:        * This is equivalent to a two parameter call.
rob@100:        *
rob@100:        * @param {float} sx  the amount to scale on the x-axis
rob@100:        * @param {float} sy  the amount to scale on the y-axis
rob@100:        */
rob@100:       scale: function(sx, sy) {
rob@100:         if (sx && !sy) {
rob@100:           sy = sx;
rob@100:         }
rob@100:         if (sx && sy) {
rob@100:           this.elements[0] *= sx;
rob@100:           this.elements[1] *= sy;
rob@100:           this.elements[3] *= sx;
rob@100:           this.elements[4] *= sy;
rob@100:         }
rob@100:       },
rob@100:        /**
rob@100:         * @member PMatrix2D
rob@100:         * The invScale() function decreases or increases the size of a shape by contracting and expanding vertices. When only one parameter is specified scale will occur in all dimensions.
rob@100:         * This is equivalent to a two parameter call.
rob@100:         *
rob@100:         * @param {float} sx  the amount to scale on the x-axis
rob@100:         * @param {float} sy  the amount to scale on the y-axis
rob@100:         */
rob@100:       invScale: function(sx, sy) {
rob@100:         if (sx && !sy) {
rob@100:           sy = sx;
rob@100:         }
rob@100:         this.scale(1 / sx, 1 / sy);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The apply() function multiplies the current matrix by the one specified through the parameters. Note that either a PMatrix2D or a list of floats can be passed in.
rob@100:        *
rob@100:        * @param {PMatrix2D} matrix    the matrix to apply this matrix to
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the third element of the matrix
rob@100:        * @param {float} m10           the fourth element of the matrix
rob@100:        * @param {float} m11           the fith element of the matrix
rob@100:        * @param {float} m12           the sixth element of the matrix
rob@100:        */
rob@100:       apply: function() {
rob@100:         var source;
rob@100:         if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:           source = arguments[0].array();
rob@100:         } else if (arguments.length === 6) {
rob@100:           source = Array.prototype.slice.call(arguments);
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:           source = arguments[0];
rob@100:         }
rob@100: 
rob@100:         var result = [0, 0, this.elements[2],
rob@100:                       0, 0, this.elements[5]];
rob@100:         var e = 0;
rob@100:         for (var row = 0; row < 2; row++) {
rob@100:           for (var col = 0; col < 3; col++, e++) {
rob@100:             result[e] += this.elements[row * 3 + 0] * source[col + 0] +
rob@100:                          this.elements[row * 3 + 1] * source[col + 3];
rob@100:           }
rob@100:         }
rob@100:         this.elements = result.slice();
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The preApply() function applies another matrix to the left of this one. Note that either a PMatrix2D or elements of a matrix can be passed in.
rob@100:        *
rob@100:        * @param {PMatrix2D} matrix    the matrix to apply this matrix to
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the third element of the matrix
rob@100:        * @param {float} m10           the fourth element of the matrix
rob@100:        * @param {float} m11           the fith element of the matrix
rob@100:        * @param {float} m12           the sixth element of the matrix
rob@100:        */
rob@100:       preApply: function() {
rob@100:         var source;
rob@100:         if (arguments.length === 1 && arguments[0] instanceof PMatrix2D) {
rob@100:           source = arguments[0].array();
rob@100:         } else if (arguments.length === 6) {
rob@100:           source = Array.prototype.slice.call(arguments);
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:           source = arguments[0];
rob@100:         }
rob@100:         var result = [0, 0, source[2],
rob@100:                       0, 0, source[5]];
rob@100:         result[2] = source[2] + this.elements[2] * source[0] + this.elements[5] * source[1];
rob@100:         result[5] = source[5] + this.elements[2] * source[3] + this.elements[5] * source[4];
rob@100:         result[0] = this.elements[0] * source[0] + this.elements[3] * source[1];
rob@100:         result[3] = this.elements[0] * source[3] + this.elements[3] * source[4];
rob@100:         result[1] = this.elements[1] * source[0] + this.elements[4] * source[1];
rob@100:         result[4] = this.elements[1] * source[3] + this.elements[4] * source[4];
rob@100:         this.elements = result.slice();
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The rotate() function rotates the matrix.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       rotate: function(angle) {
rob@100:         var c = Math.cos(angle);
rob@100:         var s = Math.sin(angle);
rob@100:         var temp1 = this.elements[0];
rob@100:         var temp2 = this.elements[1];
rob@100:         this.elements[0] =  c * temp1 + s * temp2;
rob@100:         this.elements[1] = -s * temp1 + c * temp2;
rob@100:         temp1 = this.elements[3];
rob@100:         temp2 = this.elements[4];
rob@100:         this.elements[3] =  c * temp1 + s * temp2;
rob@100:         this.elements[4] = -s * temp1 + c * temp2;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The rotateZ() function rotates the matrix.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       rotateZ: function(angle) {
rob@100:         this.rotate(angle);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The invRotateZ() function rotates the matrix in opposite direction.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       invRotateZ: function(angle) {
rob@100:         this.rotateZ(angle - Math.PI);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The print() function prints out the elements of this matrix
rob@100:        */
rob@100:       print: function() {
rob@100:         var digits = printMatrixHelper(this.elements);
rob@100:         var output = "" + p.nfs(this.elements[0], digits, 4) + " " +
rob@100:                      p.nfs(this.elements[1], digits, 4) + " " +
rob@100:                      p.nfs(this.elements[2], digits, 4) + "\n" +
rob@100:                      p.nfs(this.elements[3], digits, 4) + " " +
rob@100:                      p.nfs(this.elements[4], digits, 4) + " " +
rob@100:                      p.nfs(this.elements[5], digits, 4) + "\n\n";
rob@100:         p.println(output);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * PMatrix3D is a 4x4  matrix implementation. The constructor accepts another PMatrix3D or a list of six or sixteen float elements.
rob@100:      * If no parameters are provided the matrix is set to the identity matrix.
rob@100:      */
rob@100:     var PMatrix3D = p.PMatrix3D = function() {
rob@100:       // When a matrix is created, it is set to an identity matrix
rob@100:       this.reset();
rob@100:     };
rob@100:     /**
rob@100:      * PMatrix3D methods
rob@100:      */
rob@100:     PMatrix3D.prototype = {
rob@100:       /**
rob@100:        * @member PMatrix2D
rob@100:        * The set() function sets the matrix elements. The function accepts either another PMatrix3D, an array of elements, or a list of six or sixteen floats.
rob@100:        *
rob@100:        * @param {PMatrix3D} matrix    the initial matrix to set to
rob@100:        * @param {float[]} elements    an array of elements to set this matrix to
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the second element of the matrix
rob@100:        * @param {float} m02           the third element of the matrix
rob@100:        * @param {float} m03           the fourth element of the matrix
rob@100:        * @param {float} m10           the fifth element of the matrix
rob@100:        * @param {float} m11           the sixth element of the matrix
rob@100:        * @param {float} m12           the seventh element of the matrix
rob@100:        * @param {float} m13           the eight element of the matrix
rob@100:        * @param {float} m20           the nineth element of the matrix
rob@100:        * @param {float} m21           the tenth element of the matrix
rob@100:        * @param {float} m22           the eleventh element of the matrix
rob@100:        * @param {float} m23           the twelveth element of the matrix
rob@100:        * @param {float} m30           the thirteenth element of the matrix
rob@100:        * @param {float} m31           the fourtheenth element of the matrix
rob@100:        * @param {float} m32           the fivetheenth element of the matrix
rob@100:        * @param {float} m33           the sixteenth element of the matrix
rob@100:        */
rob@100:       set: function() {
rob@100:         if (arguments.length === 16) {
rob@100:           this.elements = Array.prototype.slice.call(arguments);
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof PMatrix3D) {
rob@100:           this.elements = arguments[0].array();
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:           this.elements = arguments[0].slice();
rob@100:         }
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The get() function returns a copy of this PMatrix3D.
rob@100:        *
rob@100:        * @return {PMatrix3D} a copy of this PMatrix3D
rob@100:        */
rob@100:       get: function() {
rob@100:         var outgoing = new PMatrix3D();
rob@100:         outgoing.set(this.elements);
rob@100:         return outgoing;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The reset() function sets this PMatrix3D to the identity matrix.
rob@100:        */
rob@100:       reset: function() {
rob@100:         this.elements = [1,0,0,0,
rob@100:                          0,1,0,0,
rob@100:                          0,0,1,0,
rob@100:                          0,0,0,1];
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The array() function returns a copy of the element values.
rob@100:        * @addon
rob@100:        *
rob@100:        * @return {float[]} returns a copy of the element values
rob@100:        */
rob@100:       array: function array() {
rob@100:         return this.elements.slice();
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The translate() function translates this matrix by moving the current coordinates to the location specified by tx, ty, and tz.
rob@100:        *
rob@100:        * @param {float} tx  the x-axis coordinate to move to
rob@100:        * @param {float} ty  the y-axis coordinate to move to
rob@100:        * @param {float} tz  the z-axis coordinate to move to
rob@100:        */
rob@100:       translate: function(tx, ty, tz) {
rob@100:         if (tz === undef) {
rob@100:           tz = 0;
rob@100:         }
rob@100: 
rob@100:         this.elements[3]  += tx * this.elements[0]  + ty * this.elements[1]  + tz * this.elements[2];
rob@100:         this.elements[7]  += tx * this.elements[4]  + ty * this.elements[5]  + tz * this.elements[6];
rob@100:         this.elements[11] += tx * this.elements[8]  + ty * this.elements[9]  + tz * this.elements[10];
rob@100:         this.elements[15] += tx * this.elements[12] + ty * this.elements[13] + tz * this.elements[14];
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The transpose() function transpose this matrix.
rob@100:        */
rob@100:       transpose: function() {
rob@100:         var temp = this.elements[4];
rob@100:         this.elements[4] = this.elements[1];
rob@100:         this.elements[1] = temp;
rob@100: 
rob@100:         temp = this.elements[8];
rob@100:         this.elements[8] = this.elements[2];
rob@100:         this.elements[2] = temp;
rob@100: 
rob@100:         temp = this.elements[6];
rob@100:         this.elements[6] = this.elements[9];
rob@100:         this.elements[9] = temp;
rob@100: 
rob@100:         temp = this.elements[3];
rob@100:         this.elements[3] = this.elements[12];
rob@100:         this.elements[12] = temp;
rob@100: 
rob@100:         temp = this.elements[7];
rob@100:         this.elements[7] = this.elements[13];
rob@100:         this.elements[13] = temp;
rob@100: 
rob@100:         temp = this.elements[11];
rob@100:         this.elements[11] = this.elements[14];
rob@100:         this.elements[14] = temp;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The mult() function multiplied this matrix.
rob@100:        * If two array elements are passed in the function will multiply a two element vector against this matrix.
rob@100:        * If target is null or not length four, a new float array will be returned.
rob@100:        * The values for vec and target can be the same (though that's less efficient).
rob@100:        * If two PVectors are passed in the function multiply the x and y coordinates of a PVector against this matrix.
rob@100:        *
rob@100:        * @param {PVector} source, target  the PVectors used to multiply this matrix
rob@100:        * @param {float[]} source, target  the arrays used to multiply this matrix
rob@100:        *
rob@100:        * @return {PVector|float[]} returns a PVector or an array representing the new matrix
rob@100:        */
rob@100:       mult: function(source, target) {
rob@100:         var x, y, z, w;
rob@100:         if (source instanceof PVector) {
rob@100:           x = source.x;
rob@100:           y = source.y;
rob@100:           z = source.z;
rob@100:           w = 1;
rob@100:           if (!target) {
rob@100:             target = new PVector();
rob@100:           }
rob@100:         } else if (source instanceof Array) {
rob@100:           x = source[0];
rob@100:           y = source[1];
rob@100:           z = source[2];
rob@100:           w = source[3] || 1;
rob@100: 
rob@100:           if ( !target || (target.length !== 3 && target.length !== 4) ) {
rob@100:             target = [0, 0, 0];
rob@100:           }
rob@100:         }
rob@100: 
rob@100:         if (target instanceof Array) {
rob@100:           if (target.length === 3) {
rob@100:             target[0] = this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3];
rob@100:             target[1] = this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7];
rob@100:             target[2] = this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11];
rob@100:           } else if (target.length === 4) {
rob@100:             target[0] = this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3] * w;
rob@100:             target[1] = this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7] * w;
rob@100:             target[2] = this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11] * w;
rob@100:             target[3] = this.elements[12] * x + this.elements[13] * y + this.elements[14] * z + this.elements[15] * w;
rob@100:           }
rob@100:         }
rob@100:         if (target instanceof PVector) {
rob@100:           target.x = this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3];
rob@100:           target.y = this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7];
rob@100:           target.z = this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11];
rob@100:         }
rob@100:         return target;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The preApply() function applies another matrix to the left of this one. Note that either a PMatrix3D or elements of a matrix can be passed in.
rob@100:        *
rob@100:        * @param {PMatrix3D} matrix    the matrix to apply this matrix to
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the second element of the matrix
rob@100:        * @param {float} m02           the third element of the matrix
rob@100:        * @param {float} m03           the fourth element of the matrix
rob@100:        * @param {float} m10           the fifth element of the matrix
rob@100:        * @param {float} m11           the sixth element of the matrix
rob@100:        * @param {float} m12           the seventh element of the matrix
rob@100:        * @param {float} m13           the eight element of the matrix
rob@100:        * @param {float} m20           the nineth element of the matrix
rob@100:        * @param {float} m21           the tenth element of the matrix
rob@100:        * @param {float} m22           the eleventh element of the matrix
rob@100:        * @param {float} m23           the twelveth element of the matrix
rob@100:        * @param {float} m30           the thirteenth element of the matrix
rob@100:        * @param {float} m31           the fourtheenth element of the matrix
rob@100:        * @param {float} m32           the fivetheenth element of the matrix
rob@100:        * @param {float} m33           the sixteenth element of the matrix
rob@100:        */
rob@100:       preApply: function() {
rob@100:         var source;
rob@100:         if (arguments.length === 1 && arguments[0] instanceof PMatrix3D) {
rob@100:           source = arguments[0].array();
rob@100:         } else if (arguments.length === 16) {
rob@100:           source = Array.prototype.slice.call(arguments);
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:           source = arguments[0];
rob@100:         }
rob@100: 
rob@100:         var result = [0, 0, 0, 0,
rob@100:                       0, 0, 0, 0,
rob@100:                       0, 0, 0, 0,
rob@100:                       0, 0, 0, 0];
rob@100:         var e = 0;
rob@100:         for (var row = 0; row < 4; row++) {
rob@100:           for (var col = 0; col < 4; col++, e++) {
rob@100:             result[e] += this.elements[col + 0] * source[row * 4 + 0] + this.elements[col + 4] *
rob@100:                          source[row * 4 + 1] + this.elements[col + 8] * source[row * 4 + 2] +
rob@100:                          this.elements[col + 12] * source[row * 4 + 3];
rob@100:           }
rob@100:         }
rob@100:         this.elements = result.slice();
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The apply() function multiplies the current matrix by the one specified through the parameters. Note that either a PMatrix3D or a list of floats can be passed in.
rob@100:        *
rob@100:        * @param {PMatrix3D} matrix    the matrix to apply this matrix to
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the second element of the matrix
rob@100:        * @param {float} m02           the third element of the matrix
rob@100:        * @param {float} m03           the fourth element of the matrix
rob@100:        * @param {float} m10           the fifth element of the matrix
rob@100:        * @param {float} m11           the sixth element of the matrix
rob@100:        * @param {float} m12           the seventh element of the matrix
rob@100:        * @param {float} m13           the eight element of the matrix
rob@100:        * @param {float} m20           the nineth element of the matrix
rob@100:        * @param {float} m21           the tenth element of the matrix
rob@100:        * @param {float} m22           the eleventh element of the matrix
rob@100:        * @param {float} m23           the twelveth element of the matrix
rob@100:        * @param {float} m30           the thirteenth element of the matrix
rob@100:        * @param {float} m31           the fourtheenth element of the matrix
rob@100:        * @param {float} m32           the fivetheenth element of the matrix
rob@100:        * @param {float} m33           the sixteenth element of the matrix
rob@100:        */
rob@100:       apply: function() {
rob@100:         var source;
rob@100:         if (arguments.length === 1 && arguments[0] instanceof PMatrix3D) {
rob@100:           source = arguments[0].array();
rob@100:         } else if (arguments.length === 16) {
rob@100:           source = Array.prototype.slice.call(arguments);
rob@100:         } else if (arguments.length === 1 && arguments[0] instanceof Array) {
rob@100:           source = arguments[0];
rob@100:         }
rob@100: 
rob@100:         var result = [0, 0, 0, 0,
rob@100:                       0, 0, 0, 0,
rob@100:                       0, 0, 0, 0,
rob@100:                       0, 0, 0, 0];
rob@100:         var e = 0;
rob@100:         for (var row = 0; row < 4; row++) {
rob@100:           for (var col = 0; col < 4; col++, e++) {
rob@100:             result[e] += this.elements[row * 4 + 0] * source[col + 0] + this.elements[row * 4 + 1] *
rob@100:                          source[col + 4] + this.elements[row * 4 + 2] * source[col + 8] +
rob@100:                          this.elements[row * 4 + 3] * source[col + 12];
rob@100:           }
rob@100:         }
rob@100:         this.elements = result.slice();
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The rotate() function rotates the matrix.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       rotate: function(angle, v0, v1, v2) {
rob@100:         if (arguments.length < 4) {
rob@100:           this.rotateZ(angle);
rob@100:         } else {
rob@100:           var v = new PVector(v0, v1, v2);
rob@100:           var m = v.mag();
rob@100:           if (m === 0) {
rob@100:             return;
rob@100:           } else if (m != 1) {
rob@100:             v.normalize();
rob@100:             v0 = v.x;
rob@100:             v1 = v.y;
rob@100:             v2 = v.z;
rob@100:           }
rob@100:           var c = p.cos(angle);
rob@100:           var s = p.sin(angle);
rob@100:           var t = 1.0 - c;
rob@100: 
rob@100:           this.apply((t * v0 * v0) + c,
rob@100:                      (t * v0 * v1) - (s * v2),
rob@100:                      (t * v0 * v2) + (s * v1),
rob@100:                      0,
rob@100:                      (t * v0 * v1) + (s * v2),
rob@100:                      (t * v1 * v1) + c,
rob@100:                      (t * v1 * v2) - (s * v0),
rob@100:                      0,
rob@100:                      (t * v0 * v2) - (s * v1),
rob@100:                      (t * v1 * v2) + (s * v0),
rob@100:                      (t * v2 * v2) + c,
rob@100:                      0,
rob@100:                      0, 0, 0, 1);
rob@100:         }
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The invApply() function applies the inverted matrix to this matrix.
rob@100:        *
rob@100:        * @param {float} m00           the first element of the matrix
rob@100:        * @param {float} m01           the second element of the matrix
rob@100:        * @param {float} m02           the third element of the matrix
rob@100:        * @param {float} m03           the fourth element of the matrix
rob@100:        * @param {float} m10           the fifth element of the matrix
rob@100:        * @param {float} m11           the sixth element of the matrix
rob@100:        * @param {float} m12           the seventh element of the matrix
rob@100:        * @param {float} m13           the eight element of the matrix
rob@100:        * @param {float} m20           the nineth element of the matrix
rob@100:        * @param {float} m21           the tenth element of the matrix
rob@100:        * @param {float} m22           the eleventh element of the matrix
rob@100:        * @param {float} m23           the twelveth element of the matrix
rob@100:        * @param {float} m30           the thirteenth element of the matrix
rob@100:        * @param {float} m31           the fourtheenth element of the matrix
rob@100:        * @param {float} m32           the fivetheenth element of the matrix
rob@100:        * @param {float} m33           the sixteenth element of the matrix
rob@100:        *
rob@100:        * @return {boolean} returns true if the operation was successful.
rob@100:        */
rob@100:       invApply: function() {
rob@100:         if (inverseCopy === undef) {
rob@100:           inverseCopy = new PMatrix3D();
rob@100:         }
rob@100:         var a = arguments;
rob@100:         inverseCopy.set(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8],
rob@100:                         a[9], a[10], a[11], a[12], a[13], a[14], a[15]);
rob@100: 
rob@100:         if (!inverseCopy.invert()) {
rob@100:           return false;
rob@100:         }
rob@100:         this.preApply(inverseCopy);
rob@100:         return true;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The rotateZ() function rotates the matrix.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       rotateX: function(angle) {
rob@100:         var c = p.cos(angle);
rob@100:         var s = p.sin(angle);
rob@100:         this.apply([1, 0, 0, 0, 0, c, -s, 0, 0, s, c, 0, 0, 0, 0, 1]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The rotateY() function rotates the matrix.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       rotateY: function(angle) {
rob@100:         var c = p.cos(angle);
rob@100:         var s = p.sin(angle);
rob@100:         this.apply([c, 0, s, 0, 0, 1, 0, 0, -s, 0, c, 0, 0, 0, 0, 1]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The rotateZ() function rotates the matrix.
rob@100:        *
rob@100:        * @param {float} angle         the angle of rotation in radiants
rob@100:        */
rob@100:       rotateZ: function(angle) {
rob@100:         var c = Math.cos(angle);
rob@100:         var s = Math.sin(angle);
rob@100:         this.apply([c, -s, 0, 0, s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The scale() function increases or decreases the size of a matrix by expanding and contracting vertices. When only one parameter is specified scale will occur in all dimensions.
rob@100:        * This is equivalent to a three parameter call.
rob@100:        *
rob@100:        * @param {float} sx  the amount to scale on the x-axis
rob@100:        * @param {float} sy  the amount to scale on the y-axis
rob@100:        * @param {float} sz  the amount to scale on the z-axis
rob@100:        */
rob@100:       scale: function(sx, sy, sz) {
rob@100:         if (sx && !sy && !sz) {
rob@100:           sy = sz = sx;
rob@100:         } else if (sx && sy && !sz) {
rob@100:           sz = 1;
rob@100:         }
rob@100: 
rob@100:         if (sx && sy && sz) {
rob@100:           this.elements[0]  *= sx;
rob@100:           this.elements[1]  *= sy;
rob@100:           this.elements[2]  *= sz;
rob@100:           this.elements[4]  *= sx;
rob@100:           this.elements[5]  *= sy;
rob@100:           this.elements[6]  *= sz;
rob@100:           this.elements[8]  *= sx;
rob@100:           this.elements[9]  *= sy;
rob@100:           this.elements[10] *= sz;
rob@100:           this.elements[12] *= sx;
rob@100:           this.elements[13] *= sy;
rob@100:           this.elements[14] *= sz;
rob@100:         }
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The skewX() function skews the matrix along the x-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of skew specified in radians
rob@100:        */
rob@100:       skewX: function(angle) {
rob@100:         var t = Math.tan(angle);
rob@100:         this.apply(1, t, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The skewY() function skews the matrix along the y-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of skew specified in radians
rob@100:        */
rob@100:       skewY: function(angle) {
rob@100:         var t = Math.tan(angle);
rob@100:         this.apply(1, 0, 0, 0, t, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The shearX() function shears the matrix along the x-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of shear specified in radians
rob@100:        */
rob@100:       shearX: function(angle) {
rob@100:         var t = Math.tan(angle);
rob@100:         this.apply(1, t, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The shearY() function shears the matrix along the y-axis the amount specified by the angle parameter.
rob@100:        * Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the <b>radians()</b> function.
rob@100:        *
rob@100:        * @param {float} angle  angle of shear specified in radians
rob@100:        */
rob@100:       shearY: function(angle) {
rob@100:         var t = Math.tan(angle);
rob@100:         this.apply(1, 0, 0, 0, t, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
rob@100:       },
rob@100:       multX: function(x, y, z, w) {
rob@100:         if (!z) {
rob@100:           return this.elements[0] * x + this.elements[1] * y + this.elements[3];
rob@100:         }
rob@100:         if (!w) {
rob@100:           return this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3];
rob@100:         }
rob@100:         return this.elements[0] * x + this.elements[1] * y + this.elements[2] * z + this.elements[3] * w;
rob@100:       },
rob@100:       multY: function(x, y, z, w) {
rob@100:         if (!z) {
rob@100:           return this.elements[4] * x + this.elements[5] * y + this.elements[7];
rob@100:         }
rob@100:         if (!w) {
rob@100:           return this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7];
rob@100:         }
rob@100:         return this.elements[4] * x + this.elements[5] * y + this.elements[6] * z + this.elements[7] * w;
rob@100:       },
rob@100:       multZ: function(x, y, z, w) {
rob@100:         if (!w) {
rob@100:           return this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11];
rob@100:         }
rob@100:         return this.elements[8] * x + this.elements[9] * y + this.elements[10] * z + this.elements[11] * w;
rob@100:       },
rob@100:       multW: function(x, y, z, w) {
rob@100:         if (!w) {
rob@100:           return this.elements[12] * x + this.elements[13] * y + this.elements[14] * z + this.elements[15];
rob@100:         }
rob@100:         return this.elements[12] * x + this.elements[13] * y + this.elements[14] * z + this.elements[15] * w;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The invert() function inverts this matrix
rob@100:        *
rob@100:        * @return {boolean} true if successful
rob@100:        */
rob@100:       invert: function() {
rob@100:         var fA0 = this.elements[0] * this.elements[5] - this.elements[1] * this.elements[4];
rob@100:         var fA1 = this.elements[0] * this.elements[6] - this.elements[2] * this.elements[4];
rob@100:         var fA2 = this.elements[0] * this.elements[7] - this.elements[3] * this.elements[4];
rob@100:         var fA3 = this.elements[1] * this.elements[6] - this.elements[2] * this.elements[5];
rob@100:         var fA4 = this.elements[1] * this.elements[7] - this.elements[3] * this.elements[5];
rob@100:         var fA5 = this.elements[2] * this.elements[7] - this.elements[3] * this.elements[6];
rob@100:         var fB0 = this.elements[8] * this.elements[13] - this.elements[9] * this.elements[12];
rob@100:         var fB1 = this.elements[8] * this.elements[14] - this.elements[10] * this.elements[12];
rob@100:         var fB2 = this.elements[8] * this.elements[15] - this.elements[11] * this.elements[12];
rob@100:         var fB3 = this.elements[9] * this.elements[14] - this.elements[10] * this.elements[13];
rob@100:         var fB4 = this.elements[9] * this.elements[15] - this.elements[11] * this.elements[13];
rob@100:         var fB5 = this.elements[10] * this.elements[15] - this.elements[11] * this.elements[14];
rob@100: 
rob@100:         // Determinant
rob@100:         var fDet = fA0 * fB5 - fA1 * fB4 + fA2 * fB3 + fA3 * fB2 - fA4 * fB1 + fA5 * fB0;
rob@100: 
rob@100:         // Account for a very small value
rob@100:         // return false if not successful.
rob@100:         if (Math.abs(fDet) <= 1e-9) {
rob@100:           return false;
rob@100:         }
rob@100: 
rob@100:         var kInv = [];
rob@100:         kInv[0]  = +this.elements[5] * fB5 - this.elements[6] * fB4 + this.elements[7] * fB3;
rob@100:         kInv[4]  = -this.elements[4] * fB5 + this.elements[6] * fB2 - this.elements[7] * fB1;
rob@100:         kInv[8]  = +this.elements[4] * fB4 - this.elements[5] * fB2 + this.elements[7] * fB0;
rob@100:         kInv[12] = -this.elements[4] * fB3 + this.elements[5] * fB1 - this.elements[6] * fB0;
rob@100:         kInv[1]  = -this.elements[1] * fB5 + this.elements[2] * fB4 - this.elements[3] * fB3;
rob@100:         kInv[5]  = +this.elements[0] * fB5 - this.elements[2] * fB2 + this.elements[3] * fB1;
rob@100:         kInv[9]  = -this.elements[0] * fB4 + this.elements[1] * fB2 - this.elements[3] * fB0;
rob@100:         kInv[13] = +this.elements[0] * fB3 - this.elements[1] * fB1 + this.elements[2] * fB0;
rob@100:         kInv[2]  = +this.elements[13] * fA5 - this.elements[14] * fA4 + this.elements[15] * fA3;
rob@100:         kInv[6]  = -this.elements[12] * fA5 + this.elements[14] * fA2 - this.elements[15] * fA1;
rob@100:         kInv[10] = +this.elements[12] * fA4 - this.elements[13] * fA2 + this.elements[15] * fA0;
rob@100:         kInv[14] = -this.elements[12] * fA3 + this.elements[13] * fA1 - this.elements[14] * fA0;
rob@100:         kInv[3]  = -this.elements[9] * fA5 + this.elements[10] * fA4 - this.elements[11] * fA3;
rob@100:         kInv[7]  = +this.elements[8] * fA5 - this.elements[10] * fA2 + this.elements[11] * fA1;
rob@100:         kInv[11] = -this.elements[8] * fA4 + this.elements[9] * fA2 - this.elements[11] * fA0;
rob@100:         kInv[15] = +this.elements[8] * fA3 - this.elements[9] * fA1 + this.elements[10] * fA0;
rob@100: 
rob@100:         // Inverse using Determinant
rob@100:         var fInvDet = 1.0 / fDet;
rob@100:         kInv[0]  *= fInvDet;
rob@100:         kInv[1]  *= fInvDet;
rob@100:         kInv[2]  *= fInvDet;
rob@100:         kInv[3]  *= fInvDet;
rob@100:         kInv[4]  *= fInvDet;
rob@100:         kInv[5]  *= fInvDet;
rob@100:         kInv[6]  *= fInvDet;
rob@100:         kInv[7]  *= fInvDet;
rob@100:         kInv[8]  *= fInvDet;
rob@100:         kInv[9]  *= fInvDet;
rob@100:         kInv[10] *= fInvDet;
rob@100:         kInv[11] *= fInvDet;
rob@100:         kInv[12] *= fInvDet;
rob@100:         kInv[13] *= fInvDet;
rob@100:         kInv[14] *= fInvDet;
rob@100:         kInv[15] *= fInvDet;
rob@100: 
rob@100:         this.elements = kInv.slice();
rob@100:         return true;
rob@100:       },
rob@100:       toString: function() {
rob@100:         var str = "";
rob@100:         for (var i = 0; i < 15; i++) {
rob@100:           str += this.elements[i] + ", ";
rob@100:         }
rob@100:         str += this.elements[15];
rob@100:         return str;
rob@100:       },
rob@100:       /**
rob@100:        * @member PMatrix3D
rob@100:        * The print() function prints out the elements of this matrix
rob@100:        */
rob@100:       print: function() {
rob@100:         var digits = printMatrixHelper(this.elements);
rob@100: 
rob@100:         var output = "" + p.nfs(this.elements[0], digits, 4) + " " + p.nfs(this.elements[1], digits, 4) +
rob@100:                      " " + p.nfs(this.elements[2], digits, 4) + " " + p.nfs(this.elements[3], digits, 4) +
rob@100:                      "\n" + p.nfs(this.elements[4], digits, 4) + " " + p.nfs(this.elements[5], digits, 4) +
rob@100:                      " " + p.nfs(this.elements[6], digits, 4) + " " + p.nfs(this.elements[7], digits, 4) +
rob@100:                      "\n" + p.nfs(this.elements[8], digits, 4) + " " + p.nfs(this.elements[9], digits, 4) +
rob@100:                      " " + p.nfs(this.elements[10], digits, 4) + " " + p.nfs(this.elements[11], digits, 4) +
rob@100:                      "\n" + p.nfs(this.elements[12], digits, 4) + " " + p.nfs(this.elements[13], digits, 4) +
rob@100:                      " " + p.nfs(this.elements[14], digits, 4) + " " + p.nfs(this.elements[15], digits, 4) + "\n\n";
rob@100:         p.println(output);
rob@100:       },
rob@100:       invTranslate: function(tx, ty, tz) {
rob@100:         this.preApply(1, 0, 0, -tx, 0, 1, 0, -ty, 0, 0, 1, -tz, 0, 0, 0, 1);
rob@100:       },
rob@100:       invRotateX: function(angle) {
rob@100:         var c = Math.cos(-angle);
rob@100:         var s = Math.sin(-angle);
rob@100:         this.preApply([1, 0, 0, 0, 0, c, -s, 0, 0, s, c, 0, 0, 0, 0, 1]);
rob@100:       },
rob@100:       invRotateY: function(angle) {
rob@100:         var c = Math.cos(-angle);
rob@100:         var s = Math.sin(-angle);
rob@100:         this.preApply([c, 0, s, 0, 0, 1, 0, 0, -s, 0, c, 0, 0, 0, 0, 1]);
rob@100:       },
rob@100:       invRotateZ: function(angle) {
rob@100:         var c = Math.cos(-angle);
rob@100:         var s = Math.sin(-angle);
rob@100:         this.preApply([c, -s, 0, 0, s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
rob@100:       },
rob@100:       invScale: function(x, y, z) {
rob@100:         this.preApply([1 / x, 0, 0, 0, 0, 1 / y, 0, 0, 0, 0, 1 / z, 0, 0, 0, 0, 1]);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @private
rob@100:      * The matrix stack stores the transformations and translations that occur within the space.
rob@100:      */
rob@100:     var PMatrixStack = p.PMatrixStack = function() {
rob@100:       this.matrixStack = [];
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member PMatrixStack
rob@100:      * load pushes the matrix given in the function into the stack
rob@100:      *
rob@100:      * @param {Object | Array} matrix the matrix to be pushed into the stack
rob@100:      */
rob@100:     PMatrixStack.prototype.load = function() {
rob@100:       var tmpMatrix = drawing.$newPMatrix();
rob@100: 
rob@100:       if (arguments.length === 1) {
rob@100:         tmpMatrix.set(arguments[0]);
rob@100:       } else {
rob@100:         tmpMatrix.set(arguments);
rob@100:       }
rob@100:       this.matrixStack.push(tmpMatrix);
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.$newPMatrix = function() {
rob@100:       return new PMatrix2D();
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.$newPMatrix = function() {
rob@100:       return new PMatrix3D();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member PMatrixStack
rob@100:      * push adds a duplicate of the top of the stack onto the stack - uses the peek function
rob@100:      */
rob@100:     PMatrixStack.prototype.push = function() {
rob@100:       this.matrixStack.push(this.peek());
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member PMatrixStack
rob@100:      * pop removes returns the matrix at the top of the stack
rob@100:      *
rob@100:      * @returns {Object} the matrix at the top of the stack
rob@100:      */
rob@100:     PMatrixStack.prototype.pop = function() {
rob@100:       return this.matrixStack.pop();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member PMatrixStack
rob@100:      * peek returns but doesn't remove the matrix at the top of the stack
rob@100:      *
rob@100:      * @returns {Object} the matrix at the top of the stack
rob@100:      */
rob@100:     PMatrixStack.prototype.peek = function() {
rob@100:       var tmpMatrix = drawing.$newPMatrix();
rob@100: 
rob@100:       tmpMatrix.set(this.matrixStack[this.matrixStack.length - 1]);
rob@100:       return tmpMatrix;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @member PMatrixStack
rob@100:      * this function multiplies the matrix at the top of the stack with the matrix given as a parameter
rob@100:      *
rob@100:      * @param {Object | Array} matrix the matrix to be multiplied into the stack
rob@100:      */
rob@100:     PMatrixStack.prototype.mult = function(matrix) {
rob@100:       this.matrixStack[this.matrixStack.length - 1].apply(matrix);
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Array handling
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:     * The split() function breaks a string into pieces using a character or string
rob@100:     * as the divider. The delim  parameter specifies the character or characters that
rob@100:     * mark the boundaries between each piece. A String[] array is returned that contains
rob@100:     * each of the pieces.
rob@100:     * If the result is a set of numbers, you can convert the String[] array to to a float[]
rob@100:     * or int[] array using the datatype conversion functions int() and float() (see example above).
rob@100:     * The splitTokens() function works in a similar fashion, except that it splits using a range
rob@100:     * of characters instead of a specific character or sequence.
rob@100:     *
rob@100:     * @param {String} str       the String to be split
rob@100:     * @param {String} delim     the character or String used to separate the data
rob@100:     *
rob@100:     * @returns {string[]} The new string array
rob@100:     *
rob@100:     * @see splitTokens
rob@100:     * @see join
rob@100:     * @see trim
rob@100:     */
rob@100:     p.split = function(str, delim) {
rob@100:       return str.split(delim);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * The splitTokens() function splits a String at one or many character "tokens." The tokens
rob@100:     * parameter specifies the character or characters to be used as a boundary.
rob@100:     * If no tokens character is specified, any whitespace character is used to split.
rob@100:     * Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form
rob@100:     * feed (\f), and space. To convert a String to an array of integers or floats, use the
rob@100:     * datatype conversion functions int() and float() to convert the array of Strings.
rob@100:     *
rob@100:     * @param {String} str       the String to be split
rob@100:     * @param {Char[]} tokens    list of individual characters that will be used as separators
rob@100:     *
rob@100:     * @returns {string[]} The new string array
rob@100:     *
rob@100:     * @see split
rob@100:     * @see join
rob@100:     * @see trim
rob@100:     */
rob@100:     p.splitTokens = function(str, tokens) {
rob@100:       if (tokens === undef) {
rob@100:         return str.split(/\s+/g);
rob@100:       }
rob@100: 
rob@100:       var chars = tokens.split(/()/g),
rob@100:           buffer = "",
rob@100:           len = str.length,
rob@100:           i, c,
rob@100:           tokenized = [];
rob@100: 
rob@100:       for (i = 0; i < len; i++) {
rob@100:         c = str[i];
rob@100:         if (chars.indexOf(c) > -1) {
rob@100:           if (buffer !== "") {
rob@100:             tokenized.push(buffer);
rob@100:           }
rob@100:           buffer = "";
rob@100:         } else {
rob@100:           buffer += c;
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       if (buffer !== "") {
rob@100:         tokenized.push(buffer);
rob@100:       }
rob@100: 
rob@100:       return tokenized;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Expands an array by one element and adds data to the new position. The datatype of
rob@100:     * the element parameter must be the same as the datatype of the array.
rob@100:     * When using an array of objects, the data returned from the function must be cast to
rob@100:     * the object array's data type. For example: SomeClass[] items = (SomeClass[])
rob@100:     * append(originalArray, element).
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} array boolean[],
rob@100:     * byte[], char[], int[], float[], or String[], or an array of objects
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} element new data for the array
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see shorten
rob@100:     * @see expand
rob@100:     */
rob@100:     p.append = function(array, element) {
rob@100:       array[array.length] = element;
rob@100:       return array;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Concatenates two arrays. For example, concatenating the array { 1, 2, 3 } and the
rob@100:     * array { 4, 5, 6 } yields { 1, 2, 3, 4, 5, 6 }. Both parameters must be arrays of the
rob@100:     * same datatype.
rob@100:     * When using an array of objects, the data returned from the function must be cast to the
rob@100:     * object array's data type. For example: SomeClass[] items = (SomeClass[]) concat(array1, array2).
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} array1 boolean[],
rob@100:     * byte[], char[], int[], float[], String[], or an array of objects
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} array2 boolean[],
rob@100:     * byte[], char[], int[], float[], String[], or an array of objects
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see splice
rob@100:     */
rob@100:     p.concat = function(array1, array2) {
rob@100:       return array1.concat(array2);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sorts an array of numbers from smallest to largest and puts an array of
rob@100:      * words in alphabetical order. The original array is not modified, a
rob@100:      * re-ordered array is returned. The count parameter states the number of
rob@100:      * elements to sort. For example if there are 12 elements in an array and
rob@100:      * if count is the value 5, only the first five elements on the array will
rob@100:      * be sorted. Alphabetical ordering is case insensitive.
rob@100:      *
rob@100:      * @param {String[] | int[] | float[]}  array Array of elements to sort
rob@100:      * @param {int}                         numElem Number of elements to sort
rob@100:      *
rob@100:      * @returns {String[] | int[] | float[]} Array (same datatype as the input)
rob@100:      *
rob@100:      * @see reverse
rob@100:     */
rob@100:     p.sort = function(array, numElem) {
rob@100:       var ret = [];
rob@100: 
rob@100:       // depending on the type used (int, float) or string
rob@100:       // we'll need to use a different compare function
rob@100:       if (array.length > 0) {
rob@100:         // copy since we need to return another array
rob@100:         var elemsToCopy = numElem > 0 ? numElem : array.length;
rob@100:         for (var i = 0; i < elemsToCopy; i++) {
rob@100:           ret.push(array[i]);
rob@100:         }
rob@100:         if (typeof array[0] === "string") {
rob@100:           ret.sort();
rob@100:         }
rob@100:         // int or float
rob@100:         else {
rob@100:           ret.sort(function(a, b) {
rob@100:             return a - b;
rob@100:           });
rob@100:         }
rob@100: 
rob@100:         // copy on the rest of the elements that were not sorted in case the user
rob@100:         // only wanted a subset of an array to be sorted.
rob@100:         if (numElem > 0) {
rob@100:           for (var j = ret.length; j < array.length; j++) {
rob@100:             ret.push(array[j]);
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       return ret;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Inserts a value or array of values into an existing array. The first two parameters must
rob@100:     * be of the same datatype. The array parameter defines the array which will be modified
rob@100:     * and the second parameter defines the data which will be inserted. When using an array
rob@100:     * of objects, the data returned from the function must be cast to the object array's data
rob@100:     * type. For example: SomeClass[] items = (SomeClass[]) splice(array1, array2, index).
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} array boolean[],
rob@100:     * byte[], char[], int[], float[], String[], or an array of objects
rob@100:     * @param {boolean|byte|char|int|float|String|boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects}
rob@100:     * value boolean, byte, char, int, float, String, boolean[], byte[], char[], int[],
rob@100:     * float[], String[], or other Object: value or an array of objects to be spliced in
rob@100:     * @param {int} index                position in the array from which to insert data
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see contract
rob@100:     * @see subset
rob@100:     */
rob@100:     p.splice = function(array, value, index) {
rob@100: 
rob@100:       // Trying to splice an empty array into "array" in P5 won't do
rob@100:       // anything, just return the original.
rob@100:       if(value.length === 0)
rob@100:       {
rob@100:         return array;
rob@100:       }
rob@100: 
rob@100:       // If the second argument was an array, we'll need to iterate over all
rob@100:       // the "value" elements and add one by one because
rob@100:       // array.splice(index, 0, value);
rob@100:       // would create a multi-dimensional array which isn't what we want.
rob@100:       if(value instanceof Array) {
rob@100:         for(var i = 0, j = index; i < value.length; j++,i++) {
rob@100:           array.splice(j, 0, value[i]);
rob@100:         }
rob@100:       } else {
rob@100:         array.splice(index, 0, value);
rob@100:       }
rob@100: 
rob@100:       return array;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts an array of elements from an existing array. The array parameter defines the
rob@100:     * array from which the elements will be copied and the offset and length parameters determine
rob@100:     * which elements to extract. If no length is given, elements will be extracted from the offset
rob@100:     * to the end of the array. When specifying the offset remember the first array element is 0.
rob@100:     * This function does not change the source array.
rob@100:     * When using an array of objects, the data returned from the function must be cast to the
rob@100:     * object array's data type.
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} array boolean[],
rob@100:     * byte[], char[], int[], float[], String[], or an array of objects
rob@100:     * @param {int} offset         position to begin
rob@100:     * @param {int} length         number of values to extract
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see splice
rob@100:     */
rob@100:     p.subset = function(array, offset, length) {
rob@100:       var end = (length !== undef) ? offset + length : array.length;
rob@100:       return array.slice(offset, end);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Combines an array of Strings into one String, each separated by the character(s) used for
rob@100:     * the separator parameter. To join arrays of ints or floats, it's necessary to first convert
rob@100:     * them to strings using nf() or nfs().
rob@100:     *
rob@100:     * @param {Array} array              array of Strings
rob@100:     * @param {char|String} separator    char or String to be placed between each item
rob@100:     *
rob@100:     * @returns {String} The combined string
rob@100:     *
rob@100:     * @see split
rob@100:     * @see trim
rob@100:     * @see nf
rob@100:     * @see nfs
rob@100:     */
rob@100:     p.join = function(array, seperator) {
rob@100:       return array.join(seperator);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Decreases an array by one element and returns the shortened array. When using an
rob@100:     * array of objects, the data returned from the function must be cast to the object array's
rob@100:     * data type. For example: SomeClass[] items = (SomeClass[]) shorten(originalArray).
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} array
rob@100:     * boolean[], byte[], char[], int[], float[], or String[], or an array of objects
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see append
rob@100:     * @see expand
rob@100:     */
rob@100:     p.shorten = function(ary) {
rob@100:       var newary = [];
rob@100: 
rob@100:       // copy array into new array
rob@100:       var len = ary.length;
rob@100:       for (var i = 0; i < len; i++) {
rob@100:         newary[i] = ary[i];
rob@100:       }
rob@100:       newary.pop();
rob@100: 
rob@100:       return newary;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Increases the size of an array. By default, this function doubles the size of the array,
rob@100:     * but the optional newSize parameter provides precise control over the increase in size.
rob@100:     * When using an array of objects, the data returned from the function must be cast to the
rob@100:     * object array's data type. For example: SomeClass[] items = (SomeClass[]) expand(originalArray).
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]|array of objects} ary
rob@100:     * boolean[], byte[], char[], int[], float[], String[], or an array of objects
rob@100:     * @param {int} newSize              positive int: new size for the array
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see contract
rob@100:     */
rob@100:     p.expand = function(ary, targetSize) {
rob@100:       var temp = ary.slice(0),
rob@100:           newSize = targetSize || ary.length * 2;
rob@100:       temp.length = newSize;
rob@100:       return temp;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Copies an array (or part of an array) to another array. The src array is copied to the
rob@100:     * dst array, beginning at the position specified by srcPos and into the position specified
rob@100:     * by dstPos. The number of elements to copy is determined by length. The simplified version
rob@100:     * with two arguments copies an entire array to another of the same size. It is equivalent
rob@100:     * to "arrayCopy(src, 0, dst, 0, src.length)". This function is far more efficient for copying
rob@100:     * array data than iterating through a for and copying each element.
rob@100:     *
rob@100:     * @param {Array} src an array of any data type: the source array
rob@100:     * @param {Array} dest an array of any data type (as long as it's the same as src): the destination array
rob@100:     * @param {int} srcPos     starting position in the source array
rob@100:     * @param {int} destPos    starting position in the destination array
rob@100:     * @param {int} length     number of array elements to be copied
rob@100:     *
rob@100:     * @returns none
rob@100:     */
rob@100:     p.arrayCopy = function() { // src, srcPos, dest, destPos, length) {
rob@100:       var src, srcPos = 0, dest, destPos = 0, length;
rob@100: 
rob@100:       if (arguments.length === 2) {
rob@100:         // recall itself and copy src to dest from start index 0 to 0 of src.length
rob@100:         src = arguments[0];
rob@100:         dest = arguments[1];
rob@100:         length = src.length;
rob@100:       } else if (arguments.length === 3) {
rob@100:         // recall itself and copy src to dest from start index 0 to 0 of length
rob@100:         src = arguments[0];
rob@100:         dest = arguments[1];
rob@100:         length = arguments[2];
rob@100:       } else if (arguments.length === 5) {
rob@100:         src = arguments[0];
rob@100:         srcPos = arguments[1];
rob@100:         dest = arguments[2];
rob@100:         destPos = arguments[3];
rob@100:         length = arguments[4];
rob@100:       }
rob@100: 
rob@100:       // copy src to dest from index srcPos to index destPos of length recursivly on objects
rob@100:       for (var i = srcPos, j = destPos; i < length + srcPos; i++, j++) {
rob@100:         if (dest[j] !== undef) {
rob@100:           dest[j] = src[i];
rob@100:         } else {
rob@100:           throw "array index out of bounds exception";
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Reverses the order of an array.
rob@100:     *
rob@100:     * @param {boolean[]|byte[]|char[]|int[]|float[]|String[]} array
rob@100:     * boolean[], byte[], char[], int[], float[], or String[]
rob@100:     *
rob@100:     * @returns Array (the same datatype as the input)
rob@100:     *
rob@100:     * @see sort
rob@100:     */
rob@100:     p.reverse = function(array) {
rob@100:       return array.reverse();
rob@100:     };
rob@100: 
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Color functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     // helper functions for internal blending modes
rob@100:     p.mix = function(a, b, f) {
rob@100:       return a + (((b - a) * f) >> 8);
rob@100:     };
rob@100: 
rob@100:     p.peg = function(n) {
rob@100:       return (n < 0) ? 0 : ((n > 255) ? 255 : n);
rob@100:     };
rob@100: 
rob@100:     // blending modes
rob@100:     /**
rob@100:     * These are internal blending modes used for BlendColor()
rob@100:     *
rob@100:     * @param {Color} c1       First Color to blend
rob@100:     * @param {Color} c2       Second Color to blend
rob@100:     *
rob@100:     * @returns {Color}        The blended Color
rob@100:     *
rob@100:     * @see BlendColor
rob@100:     * @see Blend
rob@100:     */
rob@100:     p.modes = (function() {
rob@100:       var ALPHA_MASK = PConstants.ALPHA_MASK,
rob@100:         RED_MASK = PConstants.RED_MASK,
rob@100:         GREEN_MASK = PConstants.GREEN_MASK,
rob@100:         BLUE_MASK = PConstants.BLUE_MASK,
rob@100:         min = Math.min,
rob@100:         max = Math.max;
rob@100: 
rob@100:       function applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb) {
rob@100:         var a = min(((c1 & 0xff000000) >>> 24) + f, 0xff) << 24;
rob@100: 
rob@100:         var r = (ar + (((cr - ar) * f) >> 8));
rob@100:         r = ((r < 0) ? 0 : ((r > 255) ? 255 : r)) << 16;
rob@100: 
rob@100:         var g = (ag + (((cg - ag) * f) >> 8));
rob@100:         g = ((g < 0) ? 0 : ((g > 255) ? 255 : g)) << 8;
rob@100: 
rob@100:         var b = ab + (((cb - ab) * f) >> 8);
rob@100:         b = (b < 0) ? 0 : ((b > 255) ? 255 : b);
rob@100: 
rob@100:         return (a | r | g | b);
rob@100:       }
rob@100: 
rob@100:       return {
rob@100:         replace: function(c1, c2) {
rob@100:           return c2;
rob@100:         },
rob@100:         blend: function(c1, c2) {
rob@100:           var f = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK),
rob@100:             ag = (c1 & GREEN_MASK),
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK),
rob@100:             bg = (c2 & GREEN_MASK),
rob@100:             bb = (c2 & BLUE_MASK);
rob@100: 
rob@100:           return (min(((c1 & ALPHA_MASK) >>> 24) + f, 0xff) << 24 |
rob@100:                   (ar + (((br - ar) * f) >> 8)) & RED_MASK |
rob@100:                   (ag + (((bg - ag) * f) >> 8)) & GREEN_MASK |
rob@100:                   (ab + (((bb - ab) * f) >> 8)) & BLUE_MASK);
rob@100:         },
rob@100:         add: function(c1, c2) {
rob@100:           var f = (c2 & ALPHA_MASK) >>> 24;
rob@100:           return (min(((c1 & ALPHA_MASK) >>> 24) + f, 0xff) << 24 |
rob@100:                   min(((c1 & RED_MASK) + ((c2 & RED_MASK) >> 8) * f), RED_MASK) & RED_MASK |
rob@100:                   min(((c1 & GREEN_MASK) + ((c2 & GREEN_MASK) >> 8) * f), GREEN_MASK) & GREEN_MASK |
rob@100:                   min((c1 & BLUE_MASK) + (((c2 & BLUE_MASK) * f) >> 8), BLUE_MASK));
rob@100:         },
rob@100:         subtract: function(c1, c2) {
rob@100:           var f = (c2 & ALPHA_MASK) >>> 24;
rob@100:           return (min(((c1 & ALPHA_MASK) >>> 24) + f, 0xff) << 24 |
rob@100:                   max(((c1 & RED_MASK) - ((c2 & RED_MASK) >> 8) * f), GREEN_MASK) & RED_MASK |
rob@100:                   max(((c1 & GREEN_MASK) - ((c2 & GREEN_MASK) >> 8) * f), BLUE_MASK) & GREEN_MASK |
rob@100:                   max((c1 & BLUE_MASK) - (((c2 & BLUE_MASK) * f) >> 8), 0));
rob@100:         },
rob@100:         lightest: function(c1, c2) {
rob@100:           var f = (c2 & ALPHA_MASK) >>> 24;
rob@100:           return (min(((c1 & ALPHA_MASK) >>> 24) + f, 0xff) << 24 |
rob@100:                   max(c1 & RED_MASK, ((c2 & RED_MASK) >> 8) * f) & RED_MASK |
rob@100:                   max(c1 & GREEN_MASK, ((c2 & GREEN_MASK) >> 8) * f) & GREEN_MASK |
rob@100:                   max(c1 & BLUE_MASK, ((c2 & BLUE_MASK) * f) >> 8));
rob@100:         },
rob@100:         darkest: function(c1, c2) {
rob@100:           var f = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK),
rob@100:             ag = (c1 & GREEN_MASK),
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = min(c1 & RED_MASK, ((c2 & RED_MASK) >> 8) * f),
rob@100:             bg = min(c1 & GREEN_MASK, ((c2 & GREEN_MASK) >> 8) * f),
rob@100:             bb = min(c1 & BLUE_MASK, ((c2 & BLUE_MASK) * f) >> 8);
rob@100: 
rob@100:           return (min(((c1 & ALPHA_MASK) >>> 24) + f, 0xff) << 24 |
rob@100:                   (ar + (((br - ar) * f) >> 8)) & RED_MASK |
rob@100:                   (ag + (((bg - ag) * f) >> 8)) & GREEN_MASK |
rob@100:                   (ab + (((bb - ab) * f) >> 8)) & BLUE_MASK);
rob@100:         },
rob@100:         difference: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = (ar > br) ? (ar - br) : (br - ar),
rob@100:             cg = (ag > bg) ? (ag - bg) : (bg - ag),
rob@100:             cb = (ab > bb) ? (ab - bb) : (bb - ab);
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         exclusion: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = ar + br - ((ar * br) >> 7),
rob@100:             cg = ag + bg - ((ag * bg) >> 7),
rob@100:             cb = ab + bb - ((ab * bb) >> 7);
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         multiply: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = (ar * br) >> 8,
rob@100:             cg = (ag * bg) >> 8,
rob@100:             cb = (ab * bb) >> 8;
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         screen: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = 255 - (((255 - ar) * (255 - br)) >> 8),
rob@100:             cg = 255 - (((255 - ag) * (255 - bg)) >> 8),
rob@100:             cb = 255 - (((255 - ab) * (255 - bb)) >> 8);
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         hard_light: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = (br < 128) ? ((ar * br) >> 7) : (255 - (((255 - ar) * (255 - br)) >> 7)),
rob@100:             cg = (bg < 128) ? ((ag * bg) >> 7) : (255 - (((255 - ag) * (255 - bg)) >> 7)),
rob@100:             cb = (bb < 128) ? ((ab * bb) >> 7) : (255 - (((255 - ab) * (255 - bb)) >> 7));
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         soft_light: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = ((ar * br) >> 7) + ((ar * ar) >> 8) - ((ar * ar * br) >> 15),
rob@100:             cg = ((ag * bg) >> 7) + ((ag * ag) >> 8) - ((ag * ag * bg) >> 15),
rob@100:             cb = ((ab * bb) >> 7) + ((ab * ab) >> 8) - ((ab * ab * bb) >> 15);
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         overlay: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK),
rob@100:             cr = (ar < 128) ? ((ar * br) >> 7) : (255 - (((255 - ar) * (255 - br)) >> 7)),
rob@100:             cg = (ag < 128) ? ((ag * bg) >> 7) : (255 - (((255 - ag) * (255 - bg)) >> 7)),
rob@100:             cb = (ab < 128) ? ((ab * bb) >> 7) : (255 - (((255 - ab) * (255 - bb)) >> 7));
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         dodge: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK);
rob@100: 
rob@100:           var cr = 255;
rob@100:           if (br !== 255) {
rob@100:             cr = (ar << 8) / (255 - br);
rob@100:             cr = (cr < 0) ? 0 : ((cr > 255) ? 255 : cr);
rob@100:           }
rob@100: 
rob@100:           var cg = 255;
rob@100:           if (bg !== 255) {
rob@100:             cg = (ag << 8) / (255 - bg);
rob@100:             cg = (cg < 0) ? 0 : ((cg > 255) ? 255 : cg);
rob@100:           }
rob@100: 
rob@100:           var cb = 255;
rob@100:           if (bb !== 255) {
rob@100:             cb = (ab << 8) / (255 - bb);
rob@100:             cb = (cb < 0) ? 0 : ((cb > 255) ? 255 : cb);
rob@100:           }
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         },
rob@100:         burn: function(c1, c2) {
rob@100:           var f  = (c2 & ALPHA_MASK) >>> 24,
rob@100:             ar = (c1 & RED_MASK) >> 16,
rob@100:             ag = (c1 & GREEN_MASK) >> 8,
rob@100:             ab = (c1 & BLUE_MASK),
rob@100:             br = (c2 & RED_MASK) >> 16,
rob@100:             bg = (c2 & GREEN_MASK) >> 8,
rob@100:             bb = (c2 & BLUE_MASK);
rob@100: 
rob@100:           var cr = 0;
rob@100:           if (br !== 0) {
rob@100:             cr = ((255 - ar) << 8) / br;
rob@100:             cr = 255 - ((cr < 0) ? 0 : ((cr > 255) ? 255 : cr));
rob@100:           }
rob@100: 
rob@100:           var cg = 0;
rob@100:           if (bg !== 0) {
rob@100:             cg = ((255 - ag) << 8) / bg;
rob@100:             cg = 255 - ((cg < 0) ? 0 : ((cg > 255) ? 255 : cg));
rob@100:           }
rob@100: 
rob@100:           var cb = 0;
rob@100:           if (bb !== 0) {
rob@100:             cb = ((255 - ab) << 8) / bb;
rob@100:             cb = 255 - ((cb < 0) ? 0 : ((cb > 255) ? 255 : cb));
rob@100:           }
rob@100: 
rob@100:           return applyMode(c1, f, ar, ag, ab, br, bg, bb, cr, cg, cb);
rob@100:         }
rob@100:       };
rob@100:     }());
rob@100: 
rob@100:     function color$4(aValue1, aValue2, aValue3, aValue4) {
rob@100:       var r, g, b, a;
rob@100: 
rob@100:       if (curColorMode === PConstants.HSB) {
rob@100:         var rgb = p.color.toRGB(aValue1, aValue2, aValue3);
rob@100:         r = rgb[0];
rob@100:         g = rgb[1];
rob@100:         b = rgb[2];
rob@100:       } else {
rob@100:         r = Math.round(255 * (aValue1 / colorModeX));
rob@100:         g = Math.round(255 * (aValue2 / colorModeY));
rob@100:         b = Math.round(255 * (aValue3 / colorModeZ));
rob@100:       }
rob@100: 
rob@100:       a = Math.round(255 * (aValue4 / colorModeA));
rob@100: 
rob@100:       // Limit values less than 0 and greater than 255
rob@100:       r = (r < 0) ? 0 : r;
rob@100:       g = (g < 0) ? 0 : g;
rob@100:       b = (b < 0) ? 0 : b;
rob@100:       a = (a < 0) ? 0 : a;
rob@100:       r = (r > 255) ? 255 : r;
rob@100:       g = (g > 255) ? 255 : g;
rob@100:       b = (b > 255) ? 255 : b;
rob@100:       a = (a > 255) ? 255 : a;
rob@100: 
rob@100:       // Create color int
rob@100:       return (a << 24) & PConstants.ALPHA_MASK | (r << 16) & PConstants.RED_MASK | (g << 8) & PConstants.GREEN_MASK | b & PConstants.BLUE_MASK;
rob@100:     }
rob@100: 
rob@100:     function color$2(aValue1, aValue2) {
rob@100:       var a;
rob@100: 
rob@100:       // Color int and alpha
rob@100:       if (aValue1 & PConstants.ALPHA_MASK) {
rob@100:         a = Math.round(255 * (aValue2 / colorModeA));
rob@100:         // Limit values less than 0 and greater than 255
rob@100:         a = (a > 255) ? 255 : a;
rob@100:         a = (a < 0) ? 0 : a;
rob@100: 
rob@100:         return aValue1 - (aValue1 & PConstants.ALPHA_MASK) + ((a << 24) & PConstants.ALPHA_MASK);
rob@100:       }
rob@100:       // Grayscale and alpha
rob@100:       if (curColorMode === PConstants.RGB) {
rob@100:         return color$4(aValue1, aValue1, aValue1, aValue2);
rob@100:       }
rob@100:       if (curColorMode === PConstants.HSB) {
rob@100:         return color$4(0, 0, (aValue1 / colorModeX) * colorModeZ, aValue2);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     function color$1(aValue1) {
rob@100:       // Grayscale
rob@100:       if (aValue1 <= colorModeX && aValue1 >= 0) {
rob@100:           if (curColorMode === PConstants.RGB) {
rob@100:             return color$4(aValue1, aValue1, aValue1, colorModeA);
rob@100:           }
rob@100:           if (curColorMode === PConstants.HSB) {
rob@100:             return color$4(0, 0, (aValue1 / colorModeX) * colorModeZ, colorModeA);
rob@100:           }
rob@100:       }
rob@100:       // Color int
rob@100:       if (aValue1) {
rob@100:         if (aValue1 > 2147483647) {
rob@100:           // Java Overflow
rob@100:           aValue1 -= 4294967296;
rob@100:         }
rob@100:         return aValue1;
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:     * Creates colors for storing in variables of the color datatype. The parameters are
rob@100:     * interpreted as RGB or HSB values depending on the current colorMode(). The default
rob@100:     * mode is RGB values from 0 to 255 and therefore, the function call color(255, 204, 0)
rob@100:     * will return a bright yellow color. More about how colors are stored can be found in
rob@100:     * the reference for the color datatype.
rob@100:     *
rob@100:     * @param {int|float} aValue1        red or hue or grey values relative to the current color range.
rob@100:     * Also can be color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)
rob@100:     * @param {int|float} aValue2        green or saturation values relative to the current color range
rob@100:     * @param {int|float} aValue3        blue or brightness values relative to the current color range
rob@100:     * @param {int|float} aValue4        relative to current color range. Represents alpha
rob@100:     *
rob@100:     * @returns {color} the color
rob@100:     *
rob@100:     * @see colorMode
rob@100:     */
rob@100:     p.color = function(aValue1, aValue2, aValue3, aValue4) {
rob@100: 
rob@100:       // 4 arguments: (R, G, B, A) or (H, S, B, A)
rob@100:       if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef && aValue4 !== undef) {
rob@100:         return color$4(aValue1, aValue2, aValue3, aValue4);
rob@100:       }
rob@100: 
rob@100:       // 3 arguments: (R, G, B) or (H, S, B)
rob@100:       if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef) {
rob@100:         return color$4(aValue1, aValue2, aValue3, colorModeA);
rob@100:       }
rob@100: 
rob@100:       // 2 arguments: (Color, A) or (Grayscale, A)
rob@100:       if (aValue1 !== undef && aValue2 !== undef) {
rob@100:         return color$2(aValue1, aValue2);
rob@100:       }
rob@100: 
rob@100:       // 1 argument: (Grayscale) or (Color)
rob@100:       if (typeof aValue1 === "number") {
rob@100:         return color$1(aValue1);
rob@100:       }
rob@100: 
rob@100:       // Default
rob@100:       return color$4(colorModeX, colorModeY, colorModeZ, colorModeA);
rob@100:     };
rob@100: 
rob@100:     // Ease of use function to extract the colour bits into a string
rob@100:     p.color.toString = function(colorInt) {
rob@100:       return "rgba(" + ((colorInt & PConstants.RED_MASK) >>> 16) + "," + ((colorInt & PConstants.GREEN_MASK) >>> 8) +
rob@100:              "," + ((colorInt & PConstants.BLUE_MASK)) + "," + ((colorInt & PConstants.ALPHA_MASK) >>> 24) / 255 + ")";
rob@100:     };
rob@100: 
rob@100:     // Easy of use function to pack rgba values into a single bit-shifted color int.
rob@100:     p.color.toInt = function(r, g, b, a) {
rob@100:       return (a << 24) & PConstants.ALPHA_MASK | (r << 16) & PConstants.RED_MASK | (g << 8) & PConstants.GREEN_MASK | b & PConstants.BLUE_MASK;
rob@100:     };
rob@100: 
rob@100:     // Creates a simple array in [R, G, B, A] format, [255, 255, 255, 255]
rob@100:     p.color.toArray = function(colorInt) {
rob@100:       return [(colorInt & PConstants.RED_MASK) >>> 16, (colorInt & PConstants.GREEN_MASK) >>> 8,
rob@100:               colorInt & PConstants.BLUE_MASK, (colorInt & PConstants.ALPHA_MASK) >>> 24];
rob@100:     };
rob@100: 
rob@100:     // Creates a WebGL color array in [R, G, B, A] format. WebGL wants the color ranges between 0 and 1, [1, 1, 1, 1]
rob@100:     p.color.toGLArray = function(colorInt) {
rob@100:       return [((colorInt & PConstants.RED_MASK) >>> 16) / 255, ((colorInt & PConstants.GREEN_MASK) >>> 8) / 255,
rob@100:               (colorInt & PConstants.BLUE_MASK) / 255, ((colorInt & PConstants.ALPHA_MASK) >>> 24) / 255];
rob@100:     };
rob@100: 
rob@100:     // HSB conversion function from Mootools, MIT Licensed
rob@100:     p.color.toRGB = function(h, s, b) {
rob@100:       // Limit values greater than range
rob@100:       h = (h > colorModeX) ? colorModeX : h;
rob@100:       s = (s > colorModeY) ? colorModeY : s;
rob@100:       b = (b > colorModeZ) ? colorModeZ : b;
rob@100: 
rob@100:       h = (h / colorModeX) * 360;
rob@100:       s = (s / colorModeY) * 100;
rob@100:       b = (b / colorModeZ) * 100;
rob@100: 
rob@100:       var br = Math.round(b / 100 * 255);
rob@100: 
rob@100:       if (s === 0) { // Grayscale
rob@100:         return [br, br, br];
rob@100:       }
rob@100:       var hue = h % 360;
rob@100:       var f = hue % 60;
rob@100:       var p = Math.round((b * (100 - s)) / 10000 * 255);
rob@100:       var q = Math.round((b * (6000 - s * f)) / 600000 * 255);
rob@100:       var t = Math.round((b * (6000 - s * (60 - f))) / 600000 * 255);
rob@100:       switch (Math.floor(hue / 60)) {
rob@100:       case 0:
rob@100:         return [br, t, p];
rob@100:       case 1:
rob@100:         return [q, br, p];
rob@100:       case 2:
rob@100:         return [p, br, t];
rob@100:       case 3:
rob@100:         return [p, q, br];
rob@100:       case 4:
rob@100:         return [t, p, br];
rob@100:       case 5:
rob@100:         return [br, p, q];
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     function colorToHSB(colorInt) {
rob@100:       var red, green, blue;
rob@100: 
rob@100:       red   = ((colorInt & PConstants.RED_MASK) >>> 16) / 255;
rob@100:       green = ((colorInt & PConstants.GREEN_MASK) >>> 8) / 255;
rob@100:       blue  = (colorInt & PConstants.BLUE_MASK) / 255;
rob@100: 
rob@100:       var max = p.max(p.max(red,green), blue),
rob@100:           min = p.min(p.min(red,green), blue),
rob@100:           hue, saturation;
rob@100: 
rob@100:       if (min === max) {
rob@100:         return [0, 0, max*colorModeZ];
rob@100:       }
rob@100:       saturation = (max - min) / max;
rob@100: 
rob@100:       if (red === max) {
rob@100:         hue = (green - blue) / (max - min);
rob@100:       } else if (green === max) {
rob@100:         hue = 2 + ((blue - red) / (max - min));
rob@100:       } else {
rob@100:         hue = 4 + ((red - green) / (max - min));
rob@100:       }
rob@100: 
rob@100:       hue /= 6;
rob@100: 
rob@100:       if (hue < 0) {
rob@100:         hue += 1;
rob@100:       } else if (hue > 1) {
rob@100:         hue -= 1;
rob@100:       }
rob@100:       return [hue*colorModeX, saturation*colorModeY, max*colorModeZ];
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:     * Extracts the brightness value from a color.
rob@100:     *
rob@100:     * @param {color} colInt any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The brightness color value.
rob@100:     *
rob@100:     * @see red
rob@100:     * @see green
rob@100:     * @see blue
rob@100:     * @see hue
rob@100:     * @see saturation
rob@100:     */
rob@100:     p.brightness = function(colInt){
rob@100:       return colorToHSB(colInt)[2];
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts the saturation value from a color.
rob@100:     *
rob@100:     * @param {color} colInt any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The saturation color value.
rob@100:     *
rob@100:     * @see red
rob@100:     * @see green
rob@100:     * @see blue
rob@100:     * @see hue
rob@100:     * @see brightness
rob@100:     */
rob@100:     p.saturation = function(colInt){
rob@100:       return colorToHSB(colInt)[1];
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts the hue value from a color.
rob@100:     *
rob@100:     * @param {color} colInt any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The hue color value.
rob@100:     *
rob@100:     * @see red
rob@100:     * @see green
rob@100:     * @see blue
rob@100:     * @see saturation
rob@100:     * @see brightness
rob@100:     */
rob@100:     p.hue = function(colInt){
rob@100:       return colorToHSB(colInt)[0];
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts the red value from a color, scaled to match current colorMode().
rob@100:     * This value is always returned as a float so be careful not to assign it to an int value.
rob@100:     *
rob@100:     * @param {color} aColor any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The red color value.
rob@100:     *
rob@100:     * @see green
rob@100:     * @see blue
rob@100:     * @see alpha
rob@100:     * @see >> right shift
rob@100:     * @see hue
rob@100:     * @see saturation
rob@100:     * @see brightness
rob@100:     */
rob@100:     p.red = function(aColor) {
rob@100:       return ((aColor & PConstants.RED_MASK) >>> 16) / 255 * colorModeX;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts the green value from a color, scaled to match current colorMode().
rob@100:     * This value is always returned as a float so be careful not to assign it to an int value.
rob@100:     *
rob@100:     * @param {color} aColor any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The green color value.
rob@100:     *
rob@100:     * @see red
rob@100:     * @see blue
rob@100:     * @see alpha
rob@100:     * @see >> right shift
rob@100:     * @see hue
rob@100:     * @see saturation
rob@100:     * @see brightness
rob@100:     */
rob@100:     p.green = function(aColor) {
rob@100:       return ((aColor & PConstants.GREEN_MASK) >>> 8) / 255 * colorModeY;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts the blue value from a color, scaled to match current colorMode().
rob@100:     * This value is always returned as a float so be careful not to assign it to an int value.
rob@100:     *
rob@100:     * @param {color} aColor any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The blue color value.
rob@100:     *
rob@100:     * @see red
rob@100:     * @see green
rob@100:     * @see alpha
rob@100:     * @see >> right shift
rob@100:     * @see hue
rob@100:     * @see saturation
rob@100:     * @see brightness
rob@100:     */
rob@100:     p.blue = function(aColor) {
rob@100:       return (aColor & PConstants.BLUE_MASK) / 255 * colorModeZ;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Extracts the alpha value from a color, scaled to match current colorMode().
rob@100:     * This value is always returned as a float so be careful not to assign it to an int value.
rob@100:     *
rob@100:     * @param {color} aColor any value of the color datatype
rob@100:     *
rob@100:     * @returns {float} The alpha color value.
rob@100:     *
rob@100:     * @see red
rob@100:     * @see green
rob@100:     * @see blue
rob@100:     * @see >> right shift
rob@100:     * @see hue
rob@100:     * @see saturation
rob@100:     * @see brightness
rob@100:     */
rob@100:     p.alpha = function(aColor) {
rob@100:       return ((aColor & PConstants.ALPHA_MASK) >>> 24) / 255 * colorModeA;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Calculates a color or colors between two colors at a specific increment.
rob@100:     * The amt parameter is the amount to interpolate between the two values where 0.0
rob@100:     * equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, etc.
rob@100:     *
rob@100:     * @param {color} c1     interpolate from this color
rob@100:     * @param {color} c2     interpolate to this color
rob@100:     * @param {float} amt    between 0.0 and 1.0
rob@100:     *
rob@100:     * @returns {float} The blended color.
rob@100:     *
rob@100:     * @see blendColor
rob@100:     * @see color
rob@100:     */
rob@100:     p.lerpColor = function(c1, c2, amt) {
rob@100:       var r, g, b, a, r1, g1, b1, a1, r2, g2, b2, a2;
rob@100:       var hsb1, hsb2, rgb, h, s;
rob@100:       var colorBits1 = p.color(c1);
rob@100:       var colorBits2 = p.color(c2);
rob@100: 
rob@100:       if (curColorMode === PConstants.HSB) {
rob@100:         // Special processing for HSB mode.
rob@100:         // Get HSB and Alpha values for Color 1 and 2
rob@100:         hsb1 = colorToHSB(colorBits1);
rob@100:         a1 = ((colorBits1 & PConstants.ALPHA_MASK) >>> 24) / colorModeA;
rob@100:         hsb2 = colorToHSB(colorBits2);
rob@100:         a2 = ((colorBits2 & PConstants.ALPHA_MASK) >>> 24) / colorModeA;
rob@100: 
rob@100:         // Return lerp value for each channel, for HSB components
rob@100:         h = p.lerp(hsb1[0], hsb2[0], amt);
rob@100:         s = p.lerp(hsb1[1], hsb2[1], amt);
rob@100:         b = p.lerp(hsb1[2], hsb2[2], amt);
rob@100:         rgb = p.color.toRGB(h, s, b);
rob@100:         // ... and for Alpha-range
rob@100:         a = p.lerp(a1, a2, amt) * colorModeA;
rob@100: 
rob@100:         return (a << 24) & PConstants.ALPHA_MASK |
rob@100:                (rgb[0] << 16) & PConstants.RED_MASK |
rob@100:                (rgb[1] << 8) & PConstants.GREEN_MASK |
rob@100:                rgb[2] & PConstants.BLUE_MASK;
rob@100:       }
rob@100: 
rob@100:       // Get RGBA values for Color 1 to floats
rob@100:       r1 = (colorBits1 & PConstants.RED_MASK) >>> 16;
rob@100:       g1 = (colorBits1 & PConstants.GREEN_MASK) >>> 8;
rob@100:       b1 = (colorBits1 & PConstants.BLUE_MASK);
rob@100:       a1 = ((colorBits1 & PConstants.ALPHA_MASK) >>> 24) / colorModeA;
rob@100: 
rob@100:       // Get RGBA values for Color 2 to floats
rob@100:       r2 = (colorBits2 & PConstants.RED_MASK) >>> 16;
rob@100:       g2 = (colorBits2 & PConstants.GREEN_MASK) >>> 8;
rob@100:       b2 = (colorBits2 & PConstants.BLUE_MASK);
rob@100:       a2 = ((colorBits2 & PConstants.ALPHA_MASK) >>> 24) / colorModeA;
rob@100: 
rob@100:       // Return lerp value for each channel, INT for color, Float for Alpha-range
rob@100:       r = p.lerp(r1, r2, amt) | 0;
rob@100:       g = p.lerp(g1, g2, amt) | 0;
rob@100:       b = p.lerp(b1, b2, amt) | 0;
rob@100:       a = p.lerp(a1, a2, amt) * colorModeA;
rob@100: 
rob@100:       return (a << 24) & PConstants.ALPHA_MASK |
rob@100:              (r << 16) & PConstants.RED_MASK |
rob@100:              (g << 8) & PConstants.GREEN_MASK |
rob@100:              b & PConstants.BLUE_MASK;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Changes the way Processing interprets color data. By default, fill(), stroke(), and background()
rob@100:     * colors are set by values between 0 and 255 using the RGB color model. It is possible to change the
rob@100:     * numerical range used for specifying colors and to switch color systems. For example, calling colorMode(RGB, 1.0)
rob@100:     * will specify that values are specified between 0 and 1. The limits for defining colors are altered by setting the
rob@100:     * parameters range1, range2, range3, and range 4.
rob@100:     *
rob@100:     * @param {MODE} mode Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness
rob@100:     * @param {int|float} range              range for all color elements
rob@100:     * @param {int|float} range1             range for the red or hue depending on the current color mode
rob@100:     * @param {int|float} range2             range for the green or saturation depending on the current color mode
rob@100:     * @param {int|float} range3             range for the blue or brightness depending on the current color mode
rob@100:     * @param {int|float} range4             range for the alpha
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see background
rob@100:     * @see fill
rob@100:     * @see stroke
rob@100:     */
rob@100:     p.colorMode = function() { // mode, range1, range2, range3, range4
rob@100:       curColorMode = arguments[0];
rob@100:       if (arguments.length > 1) {
rob@100:         colorModeX   = arguments[1];
rob@100:         colorModeY   = arguments[2] || arguments[1];
rob@100:         colorModeZ   = arguments[3] || arguments[1];
rob@100:         colorModeA   = arguments[4] || arguments[1];
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Blends two color values together based on the blending mode given as the MODE parameter.
rob@100:     * The possible modes are described in the reference for the blend() function.
rob@100:     *
rob@100:     * @param {color} c1 color: the first color to blend
rob@100:     * @param {color} c2 color: the second color to blend
rob@100:     * @param {MODE} MODE Either BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY,
rob@100:     * SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, or BURN
rob@100:     *
rob@100:     * @returns {float} The blended color.
rob@100:     *
rob@100:     * @see blend
rob@100:     * @see color
rob@100:     */
rob@100:     p.blendColor = function(c1, c2, mode) {
rob@100:       if (mode === PConstants.REPLACE) {
rob@100:         return p.modes.replace(c1, c2);
rob@100:       } else if (mode === PConstants.BLEND) {
rob@100:         return p.modes.blend(c1, c2);
rob@100:       } else if (mode === PConstants.ADD) {
rob@100:         return p.modes.add(c1, c2);
rob@100:       } else if (mode === PConstants.SUBTRACT) {
rob@100:         return p.modes.subtract(c1, c2);
rob@100:       } else if (mode === PConstants.LIGHTEST) {
rob@100:         return p.modes.lightest(c1, c2);
rob@100:       } else if (mode === PConstants.DARKEST) {
rob@100:         return p.modes.darkest(c1, c2);
rob@100:       } else if (mode === PConstants.DIFFERENCE) {
rob@100:         return p.modes.difference(c1, c2);
rob@100:       } else if (mode === PConstants.EXCLUSION) {
rob@100:         return p.modes.exclusion(c1, c2);
rob@100:       } else if (mode === PConstants.MULTIPLY) {
rob@100:         return p.modes.multiply(c1, c2);
rob@100:       } else if (mode === PConstants.SCREEN) {
rob@100:         return p.modes.screen(c1, c2);
rob@100:       } else if (mode === PConstants.HARD_LIGHT) {
rob@100:         return p.modes.hard_light(c1, c2);
rob@100:       } else if (mode === PConstants.SOFT_LIGHT) {
rob@100:         return p.modes.soft_light(c1, c2);
rob@100:       } else if (mode === PConstants.OVERLAY) {
rob@100:         return p.modes.overlay(c1, c2);
rob@100:       } else if (mode === PConstants.DODGE) {
rob@100:         return p.modes.dodge(c1, c2);
rob@100:       } else if (mode === PConstants.BURN) {
rob@100:         return p.modes.burn(c1, c2);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Canvas-Matrix manipulation
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     function saveContext() {
rob@100:       curContext.save();
rob@100:     }
rob@100: 
rob@100:     function restoreContext() {
rob@100:       curContext.restore();
rob@100:       isStrokeDirty = true;
rob@100:       isFillDirty = true;
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:     * Prints the current matrix to the text window.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see pushMatrix
rob@100:     * @see popMatrix
rob@100:     * @see resetMatrix
rob@100:     * @see applyMatrix
rob@100:     */
rob@100:     p.printMatrix = function() {
rob@100:       modelView.print();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation,
rob@100:     * the y parameter specifies up/down translation, and the z parameter specifies translations toward/away from the screen.
rob@100:     * Using this function with the z  parameter requires using the P3D or OPENGL parameter in combination with size as shown
rob@100:     * in the above example. Transformations apply to everything that happens after and subsequent calls to the function
rob@100:     * accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0).
rob@100:     * If translate() is called within draw(), the transformation is reset when the loop begins again.
rob@100:     * This function can be further controlled by the pushMatrix() and popMatrix().
rob@100:     *
rob@100:     * @param {int|float} x        left/right translation
rob@100:     * @param {int|float} y        up/down translation
rob@100:     * @param {int|float} z        forward/back translation
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see pushMatrix
rob@100:     * @see popMatrix
rob@100:     * @see scale
rob@100:     * @see rotate
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     */
rob@100:     Drawing2D.prototype.translate = function(x, y) {
rob@100:       modelView.translate(x, y);
rob@100:       modelViewInv.invTranslate(x, y);
rob@100:       curContext.translate(x, y);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.translate = function(x, y, z) {
rob@100:       modelView.translate(x, y, z);
rob@100:       modelViewInv.invTranslate(x, y, z);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their
rob@100:     * relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the
rob@100:     * function call scale(2.0) increases the dimension of a shape by 200%. Transformations apply to everything that
rob@100:     * happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and
rob@100:     * then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when
rob@100:     * the loop begins again. Using this fuction with the z  parameter requires passing P3D or OPENGL into the size()
rob@100:     * parameter as shown in the example above. This function can be further controlled by pushMatrix() and popMatrix().
rob@100:     *
rob@100:     * @param {int|float} size     percentage to scale the object
rob@100:     * @param {int|float} x        percentage to scale the object in the x-axis
rob@100:     * @param {int|float} y        percentage to scale the object in the y-axis
rob@100:     * @param {int|float} z        percentage to scale the object in the z-axis
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see pushMatrix
rob@100:     * @see popMatrix
rob@100:     * @see translate
rob@100:     * @see rotate
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     */
rob@100:     Drawing2D.prototype.scale = function(x, y) {
rob@100:       modelView.scale(x, y);
rob@100:       modelViewInv.invScale(x, y);
rob@100:       curContext.scale(x, y || x);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.scale = function(x, y, z) {
rob@100:       modelView.scale(x, y, z);
rob@100:       modelViewInv.invScale(x, y, z);
rob@100:     };
rob@100: 
rob@100: 
rob@100:     /**
rob@100:      * helper function for applying a transfrom matrix to a 2D context.
rob@100:      */
rob@100:     Drawing2D.prototype.transform = function(pmatrix) {
rob@100:       var e = pmatrix.array();
rob@100:       curContext.transform(e[0],e[3],e[1],e[4],e[2],e[5]);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * helper function for applying a transfrom matrix to a 3D context.
rob@100:      * not currently implemented.
rob@100:      */
rob@100:     Drawing3D.prototype.transformm = function(pmatrix3d) {
rob@100:       throw("p.transform is currently not supported in 3D mode");
rob@100:     };
rob@100: 
rob@100: 
rob@100:     /**
rob@100:     * Pushes the current transformation matrix onto the matrix stack. Understanding pushMatrix() and popMatrix()
rob@100:     * requires understanding the concept of a matrix stack. The pushMatrix() function saves the current coordinate
rob@100:     * system to the stack and popMatrix() restores the prior coordinate system. pushMatrix() and popMatrix() are
rob@100:     * used in conjuction with the other transformation methods and may be embedded to control the scope of
rob@100:     * the transformations.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see popMatrix
rob@100:     * @see translate
rob@100:     * @see rotate
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     */
rob@100:     Drawing2D.prototype.pushMatrix = function() {
rob@100:       userMatrixStack.load(modelView);
rob@100:       userReverseMatrixStack.load(modelViewInv);
rob@100:       saveContext();
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.pushMatrix = function() {
rob@100:       userMatrixStack.load(modelView);
rob@100:       userReverseMatrixStack.load(modelViewInv);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Pops the current transformation matrix off the matrix stack. Understanding pushing and popping requires
rob@100:     * understanding the concept of a matrix stack. The pushMatrix() function saves the current coordinate system to
rob@100:     * the stack and popMatrix() restores the prior coordinate system. pushMatrix() and popMatrix() are used in
rob@100:     * conjuction with the other transformation methods and may be embedded to control the scope of the transformations.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     */
rob@100:     Drawing2D.prototype.popMatrix = function() {
rob@100:       modelView.set(userMatrixStack.pop());
rob@100:       modelViewInv.set(userReverseMatrixStack.pop());
rob@100:       restoreContext();
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.popMatrix = function() {
rob@100:       modelView.set(userMatrixStack.pop());
rob@100:       modelViewInv.set(userReverseMatrixStack.pop());
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Replaces the current matrix with the identity matrix. The equivalent function in OpenGL is glLoadIdentity().
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     * @see applyMatrix
rob@100:     * @see printMatrix
rob@100:     */
rob@100:     Drawing2D.prototype.resetMatrix = function() {
rob@100:       modelView.reset();
rob@100:       modelViewInv.reset();
rob@100:       curContext.setTransform(1,0,0,1,0,0);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.resetMatrix = function() {
rob@100:       modelView.reset();
rob@100:       modelViewInv.reset();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Multiplies the current matrix by the one specified through the parameters. This is very slow because it will
rob@100:     * try to calculate the inverse of the transform, so avoid it whenever possible. The equivalent function
rob@100:     * in OpenGL is glMultMatrix().
rob@100:     *
rob@100:     * @param {int|float} n00-n15      numbers which define the 4x4 matrix to be multiplied
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     * @see resetMatrix
rob@100:     * @see printMatrix
rob@100:     */
rob@100:     DrawingShared.prototype.applyMatrix = function() {
rob@100:       var a = arguments;
rob@100:       modelView.apply(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9], a[10], a[11], a[12], a[13], a[14], a[15]);
rob@100:       modelViewInv.invApply(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9], a[10], a[11], a[12], a[13], a[14], a[15]);
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.applyMatrix = function() {
rob@100:       var a = arguments;
rob@100:       for (var cnt = a.length; cnt < 16; cnt++) {
rob@100:         a[cnt] = 0;
rob@100:       }
rob@100:       a[10] = a[15] = 1;
rob@100:       DrawingShared.prototype.applyMatrix.apply(this, a);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Rotates a shape around the x-axis the amount specified by the angle parameter. Angles should be
rob@100:     * specified in radians (values from 0 to PI*2) or converted to radians with the radians()  function.
rob@100:     * Objects are always rotated around their relative position to the origin and positive numbers
rob@100:     * rotate objects in a counterclockwise direction. Transformations apply to everything that happens
rob@100:     * after and subsequent calls to the function accumulates the effect. For example, calling rotateX(PI/2)
rob@100:     * and then rotateX(PI/2) is the same as rotateX(PI). If rotateX() is called within the draw(), the
rob@100:     * transformation is reset when the loop begins again. This function requires passing P3D or OPENGL
rob@100:     * into the size() parameter as shown in the example above.
rob@100:     *
rob@100:     * @param {int|float} angleInRadians     angle of rotation specified in radians
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     * @see rotate
rob@100:     * @see translate
rob@100:     * @see scale
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     */
rob@100:     p.rotateX = function(angleInRadians) {
rob@100:       modelView.rotateX(angleInRadians);
rob@100:       modelViewInv.invRotateX(angleInRadians);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Rotates a shape around the z-axis the amount specified by the angle parameter. Angles should be
rob@100:     * specified in radians (values from 0 to PI*2) or converted to radians with the radians()  function.
rob@100:     * Objects are always rotated around their relative position to the origin and positive numbers
rob@100:     * rotate objects in a counterclockwise direction. Transformations apply to everything that happens
rob@100:     * after and subsequent calls to the function accumulates the effect. For example, calling rotateZ(PI/2)
rob@100:     * and then rotateZ(PI/2) is the same as rotateZ(PI). If rotateZ() is called within the draw(), the
rob@100:     * transformation is reset when the loop begins again. This function requires passing P3D or OPENGL
rob@100:     * into the size() parameter as shown in the example above.
rob@100:     *
rob@100:     * @param {int|float} angleInRadians     angle of rotation specified in radians
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotate
rob@100:     * @see translate
rob@100:     * @see scale
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     */
rob@100:     Drawing2D.prototype.rotateZ = function() {
rob@100:       throw "rotateZ() is not supported in 2D mode. Use rotate(float) instead.";
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.rotateZ = function(angleInRadians) {
rob@100:       modelView.rotateZ(angleInRadians);
rob@100:       modelViewInv.invRotateZ(angleInRadians);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Rotates a shape around the y-axis the amount specified by the angle parameter. Angles should be
rob@100:     * specified in radians (values from 0 to PI*2) or converted to radians with the radians()  function.
rob@100:     * Objects are always rotated around their relative position to the origin and positive numbers
rob@100:     * rotate objects in a counterclockwise direction. Transformations apply to everything that happens
rob@100:     * after and subsequent calls to the function accumulates the effect. For example, calling rotateY(PI/2)
rob@100:     * and then rotateY(PI/2) is the same as rotateY(PI). If rotateY() is called within the draw(), the
rob@100:     * transformation is reset when the loop begins again. This function requires passing P3D or OPENGL
rob@100:     * into the size() parameter as shown in the example above.
rob@100:     *
rob@100:     * @param {int|float} angleInRadians     angle of rotation specified in radians
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see rotateX
rob@100:     * @see rotateZ
rob@100:     * @see rotate
rob@100:     * @see translate
rob@100:     * @see scale
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     */
rob@100:     p.rotateY = function(angleInRadians) {
rob@100:       modelView.rotateY(angleInRadians);
rob@100:       modelViewInv.invRotateY(angleInRadians);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Rotates a shape the amount specified by the angle parameter. Angles should be specified in radians
rob@100:     * (values from 0 to TWO_PI) or converted to radians with the radians() function. Objects are always
rob@100:     * rotated around their relative position to the origin and positive numbers rotate objects in a
rob@100:     * clockwise direction. Transformations apply to everything that happens after and subsequent calls
rob@100:     * to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI)
rob@100:     * is the same as rotate(PI). All tranformations are reset when draw() begins again. Technically,
rob@100:     * rotate() multiplies the current transformation matrix by a rotation matrix. This function can be
rob@100:     * further controlled by the pushMatrix() and popMatrix().
rob@100:     *
rob@100:     * @param {int|float} angleInRadians     angle of rotation specified in radians
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     * @see rotate
rob@100:     * @see translate
rob@100:     * @see scale
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     */
rob@100:     Drawing2D.prototype.rotate = function(angleInRadians) {
rob@100:       modelView.rotateZ(angleInRadians);
rob@100:       modelViewInv.invRotateZ(angleInRadians);
rob@100:       curContext.rotate(angleInRadians);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.rotate = function(angleInRadians) {
rob@100:       if (arguments.length < 4) {
rob@100:         p.rotateZ(angleInRadians);
rob@100:       } else {
rob@100:         modelView.rotate(angleInRadians, arguments[1], arguments[2], arguments[3]);
rob@100:         modelViewInv.rotate((-angleInRadians), arguments[1], arguments[2], arguments[3]);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Shears a shape around the x-axis the amount specified by the angle parameter.
rob@100:     * Angles should be specified in radians (values from 0 to PI*2) or converted to radians
rob@100:     * with the radians() function. Objects are always sheared around their relative position
rob@100:     * to the origin and positive numbers shear objects in a clockwise direction. Transformations
rob@100:     * apply to everything that happens after and subsequent calls to the function accumulates the
rob@100:     * effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI)
rob@100:     *
rob@100:     * @param {int|float} angleInRadians     angle of rotation specified in radians
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     * @see rotate
rob@100:     * @see translate
rob@100:     * @see scale
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     */
rob@100: 
rob@100:     Drawing2D.prototype.shearX = function(angleInRadians) {
rob@100:       modelView.shearX(angleInRadians);
rob@100:       curContext.transform(1,0,angleInRadians,1,0,0);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.shearX = function(angleInRadians) {
rob@100:       modelView.shearX(angleInRadians);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Shears a shape around the y-axis the amount specified by the angle parameter.
rob@100:     * Angles should be specified in radians (values from 0 to PI*2) or converted to
rob@100:     * radians with the radians() function. Objects are always sheared around their
rob@100:     * relative position to the origin and positive numbers shear objects in a
rob@100:     * clockwise direction. Transformations apply to everything that happens after
rob@100:     * and subsequent calls to the function accumulates the effect. For example,
rob@100:     * calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI).
rob@100:     *
rob@100:     * @param {int|float} angleInRadians     angle of rotation specified in radians
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see rotateX
rob@100:     * @see rotateY
rob@100:     * @see rotateZ
rob@100:     * @see rotate
rob@100:     * @see translate
rob@100:     * @see scale
rob@100:     * @see popMatrix
rob@100:     * @see pushMatrix
rob@100:     * @see shearX
rob@100:     */
rob@100: 
rob@100:    Drawing2D.prototype.shearY = function(angleInRadians) {
rob@100:       modelView.shearY(angleInRadians);
rob@100:       curContext.transform(1,angleInRadians,0,1,0,0);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.shearY = function(angleInRadians) {
rob@100:       modelView.shearY(angleInRadians);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * The pushStyle() function saves the current style settings and popStyle()  restores the prior settings.
rob@100:     * Note that these functions are always used together. They allow you to change the style settings and later
rob@100:     * return to what you had. When a new style is started with pushStyle(), it builds on the current style information.
rob@100:     * The pushStyle() and popStyle() functions can be embedded to provide more control (see the second example
rob@100:     * above for a demonstration.)
rob@100:     * The style information controlled by the following functions are included in the style: fill(), stroke(), tint(),
rob@100:     * strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), shapeMode(), colorMode(),
rob@100:     * textAlign(), textFont(), textMode(), textSize(), textLeading(), emissive(), specular(), shininess(), ambient()
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see popStyle
rob@100:     */
rob@100:     p.pushStyle = function() {
rob@100:       // Save the canvas state.
rob@100:       saveContext();
rob@100: 
rob@100:       p.pushMatrix();
rob@100: 
rob@100:       var newState = {
rob@100:         'doFill': doFill,
rob@100:         'currentFillColor': currentFillColor,
rob@100:         'doStroke': doStroke,
rob@100:         'currentStrokeColor': currentStrokeColor,
rob@100:         'curTint': curTint,
rob@100:         'curRectMode': curRectMode,
rob@100:         'curColorMode': curColorMode,
rob@100:         'colorModeX': colorModeX,
rob@100:         'colorModeZ': colorModeZ,
rob@100:         'colorModeY': colorModeY,
rob@100:         'colorModeA': colorModeA,
rob@100:         'curTextFont': curTextFont,
rob@100:         'horizontalTextAlignment': horizontalTextAlignment,
rob@100:         'verticalTextAlignment': verticalTextAlignment,
rob@100:         'textMode': textMode,
rob@100:         'curFontName': curFontName,
rob@100:         'curTextSize': curTextSize,
rob@100:         'curTextAscent': curTextAscent,
rob@100:         'curTextDescent': curTextDescent,
rob@100:         'curTextLeading': curTextLeading
rob@100:       };
rob@100: 
rob@100:       styleArray.push(newState);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * The pushStyle() function saves the current style settings and popStyle()  restores the prior settings; these
rob@100:     * functions are always used together. They allow you to change the style settings and later return to what you had.
rob@100:     * When a new style is started with pushStyle(), it builds on the current style information. The pushStyle() and
rob@100:     * popStyle() functions can be embedded to provide more control (see the second example above for a demonstration.)
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see pushStyle
rob@100:     */
rob@100:     p.popStyle = function() {
rob@100:       var oldState = styleArray.pop();
rob@100: 
rob@100:       if (oldState) {
rob@100:         restoreContext();
rob@100: 
rob@100:         p.popMatrix();
rob@100: 
rob@100:         doFill = oldState.doFill;
rob@100:         currentFillColor = oldState.currentFillColor;
rob@100:         doStroke = oldState.doStroke;
rob@100:         currentStrokeColor = oldState.currentStrokeColor;
rob@100:         curTint = oldState.curTint;
rob@100:         curRectMode = oldState.curRectMode;
rob@100:         curColorMode = oldState.curColorMode;
rob@100:         colorModeX = oldState.colorModeX;
rob@100:         colorModeZ = oldState.colorModeZ;
rob@100:         colorModeY = oldState.colorModeY;
rob@100:         colorModeA = oldState.colorModeA;
rob@100:         curTextFont = oldState.curTextFont;
rob@100:         curFontName = oldState.curFontName;
rob@100:         curTextSize = oldState.curTextSize;
rob@100:         horizontalTextAlignment = oldState.horizontalTextAlignment;
rob@100:         verticalTextAlignment = oldState.verticalTextAlignment;
rob@100:         textMode = oldState.textMode;
rob@100:         curTextAscent = oldState.curTextAscent;
rob@100:         curTextDescent = oldState.curTextDescent;
rob@100:         curTextLeading = oldState.curTextLeading;
rob@100:       } else {
rob@100:         throw "Too many popStyle() without enough pushStyle()";
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Time based functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:     * Processing communicates with the clock on your computer.
rob@100:     * The year() function returns the current year as an integer (2003, 2004, 2005, etc).
rob@100:     *
rob@100:     * @returns {float} The current year.
rob@100:     *
rob@100:     * @see millis
rob@100:     * @see second
rob@100:     * @see minute
rob@100:     * @see hour
rob@100:     * @see day
rob@100:     * @see month
rob@100:     */
rob@100:     p.year = function() {
rob@100:       return new Date().getFullYear();
rob@100:     };
rob@100:     /**
rob@100:     * Processing communicates with the clock on your computer.
rob@100:     * The month() function returns the current month as a value from 1 - 12.
rob@100:     *
rob@100:     * @returns {float} The current month.
rob@100:     *
rob@100:     * @see millis
rob@100:     * @see second
rob@100:     * @see minute
rob@100:     * @see hour
rob@100:     * @see day
rob@100:     * @see year
rob@100:     */
rob@100:     p.month = function() {
rob@100:       return new Date().getMonth() + 1;
rob@100:     };
rob@100:     /**
rob@100:     * Processing communicates with the clock on your computer.
rob@100:     * The day() function returns the current day as a value from 1 - 31.
rob@100:     *
rob@100:     * @returns {float} The current day.
rob@100:     *
rob@100:     * @see millis
rob@100:     * @see second
rob@100:     * @see minute
rob@100:     * @see hour
rob@100:     * @see month
rob@100:     * @see year
rob@100:     */
rob@100:     p.day = function() {
rob@100:       return new Date().getDate();
rob@100:     };
rob@100:     /**
rob@100:     * Processing communicates with the clock on your computer.
rob@100:     * The hour() function returns the current hour as a value from 0 - 23.
rob@100:     *
rob@100:     * @returns {float} The current hour.
rob@100:     *
rob@100:     * @see millis
rob@100:     * @see second
rob@100:     * @see minute
rob@100:     * @see month
rob@100:     * @see day
rob@100:     * @see year
rob@100:     */
rob@100:     p.hour = function() {
rob@100:       return new Date().getHours();
rob@100:     };
rob@100:     /**
rob@100:     * Processing communicates with the clock on your computer.
rob@100:     * The minute() function returns the current minute as a value from 0 - 59.
rob@100:     *
rob@100:     * @returns {float} The current minute.
rob@100:     *
rob@100:     * @see millis
rob@100:     * @see second
rob@100:     * @see month
rob@100:     * @see hour
rob@100:     * @see day
rob@100:     * @see year
rob@100:     */
rob@100:     p.minute = function() {
rob@100:       return new Date().getMinutes();
rob@100:     };
rob@100:     /**
rob@100:     * Processing communicates with the clock on your computer.
rob@100:     * The second() function returns the current second as a value from 0 - 59.
rob@100:     *
rob@100:     * @returns {float} The current minute.
rob@100:     *
rob@100:     * @see millis
rob@100:     * @see month
rob@100:     * @see minute
rob@100:     * @see hour
rob@100:     * @see day
rob@100:     * @see year
rob@100:     */
rob@100:     p.second = function() {
rob@100:       return new Date().getSeconds();
rob@100:     };
rob@100:     /**
rob@100:     * Returns the number of milliseconds (thousandths of a second) since starting a sketch.
rob@100:     * This information is often used for timing animation sequences.
rob@100:     *
rob@100:     * @returns {long} The number of milliseconds since starting the sketch.
rob@100:     *
rob@100:     * @see month
rob@100:     * @see second
rob@100:     * @see minute
rob@100:     * @see hour
rob@100:     * @see day
rob@100:     * @see year
rob@100:     */
rob@100:     p.millis = function() {
rob@100:       return Date.now() - start;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Executes the code within draw() one time. This functions allows the program to update
rob@100:     * the display window only when necessary, for example when an event registered by
rob@100:     * mousePressed() or keyPressed() occurs.
rob@100:     * In structuring a program, it only makes sense to call redraw() within events such as
rob@100:     * mousePressed(). This is because redraw() does not run draw() immediately (it only sets
rob@100:     * a flag that indicates an update is needed).
rob@100:     * Calling redraw() within draw() has no effect because draw() is continuously called anyway.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see noLoop
rob@100:     * @see loop
rob@100:     */
rob@100:     function redrawHelper() {
rob@100:       var sec = (Date.now() - timeSinceLastFPS) / 1000;
rob@100:       framesSinceLastFPS++;
rob@100:       var fps = framesSinceLastFPS / sec;
rob@100: 
rob@100:       // recalculate FPS every half second for better accuracy.
rob@100:       if (sec > 0.5) {
rob@100:         timeSinceLastFPS = Date.now();
rob@100:         framesSinceLastFPS = 0;
rob@100:         p.__frameRate = fps;
rob@100:       }
rob@100: 
rob@100:       p.frameCount++;
rob@100:     }
rob@100: 
rob@100:     Drawing2D.prototype.redraw = function() {
rob@100:       redrawHelper();
rob@100: 
rob@100:       curContext.lineWidth = lineWidth;
rob@100:       var pmouseXLastEvent = p.pmouseX,
rob@100:           pmouseYLastEvent = p.pmouseY;
rob@100:       p.pmouseX = pmouseXLastFrame;
rob@100:       p.pmouseY = pmouseYLastFrame;
rob@100: 
rob@100:       saveContext();
rob@100:       p.draw();
rob@100:       restoreContext();
rob@100: 
rob@100:       pmouseXLastFrame = p.mouseX;
rob@100:       pmouseYLastFrame = p.mouseY;
rob@100:       p.pmouseX = pmouseXLastEvent;
rob@100:       p.pmouseY = pmouseYLastEvent;
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.redraw = function() {
rob@100:       redrawHelper();
rob@100: 
rob@100:       var pmouseXLastEvent = p.pmouseX,
rob@100:           pmouseYLastEvent = p.pmouseY;
rob@100:       p.pmouseX = pmouseXLastFrame;
rob@100:       p.pmouseY = pmouseYLastFrame;
rob@100:       // even if the color buffer isn't cleared with background(),
rob@100:       // the depth buffer needs to be cleared regardless.
rob@100:       curContext.clear(curContext.DEPTH_BUFFER_BIT);
rob@100:       curContextCache = { attributes: {}, locations: {} };
rob@100:       // Delete all the lighting states and the materials the
rob@100:       // user set in the last draw() call.
rob@100:       p.noLights();
rob@100:       p.lightFalloff(1, 0, 0);
rob@100:       p.shininess(1);
rob@100:       p.ambient(255, 255, 255);
rob@100:       p.specular(0, 0, 0);
rob@100:       p.emissive(0, 0, 0);
rob@100:       p.camera();
rob@100:       p.draw();
rob@100: 
rob@100:       pmouseXLastFrame = p.mouseX;
rob@100:       pmouseYLastFrame = p.mouseY;
rob@100:       p.pmouseX = pmouseXLastEvent;
rob@100:       p.pmouseY = pmouseYLastEvent;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Stops Processing from continuously executing the code within draw(). If loop() is
rob@100:     * called, the code in draw() begin to run continuously again. If using noLoop() in
rob@100:     * setup(), it should be the last line inside the block.
rob@100:     * When noLoop() is used, it's not possible to manipulate or access the screen inside event
rob@100:     * handling functions such as mousePressed() or keyPressed(). Instead, use those functions
rob@100:     * to call redraw() or loop(), which will run draw(), which can update the screen properly.
rob@100:     * This means that when noLoop() has been called, no drawing can happen, and functions like
rob@100:     * saveFrame() or loadPixels() may not be used.
rob@100:     * Note that if the sketch is resized, redraw() will be called to update the sketch, even
rob@100:     * after noLoop() has been specified. Otherwise, the sketch would enter an odd state until
rob@100:     * loop() was called.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see redraw
rob@100:     * @see draw
rob@100:     * @see loop
rob@100:     */
rob@100:     p.noLoop = function() {
rob@100:       doLoop = false;
rob@100:       loopStarted = false;
rob@100:       clearInterval(looping);
rob@100:       curSketch.onPause();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Causes Processing to continuously execute the code within draw(). If noLoop() is called,
rob@100:     * the code in draw() stops executing.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see noLoop
rob@100:     */
rob@100:     p.loop = function() {
rob@100:       if (loopStarted) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       timeSinceLastFPS = Date.now();
rob@100:       framesSinceLastFPS = 0;
rob@100: 
rob@100:       looping = window.setInterval(function() {
rob@100:         try {
rob@100:           curSketch.onFrameStart();
rob@100:           p.redraw();
rob@100:           curSketch.onFrameEnd();
rob@100:         } catch(e_loop) {
rob@100:           window.clearInterval(looping);
rob@100:           throw e_loop;
rob@100:         }
rob@100:       }, curMsPerFrame);
rob@100:       doLoop = true;
rob@100:       loopStarted = true;
rob@100:       curSketch.onLoop();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Specifies the number of frames to be displayed every second. If the processor is not
rob@100:     * fast enough to maintain the specified rate, it will not be achieved. For example, the
rob@100:     * function call frameRate(30) will attempt to refresh 30 times a second. It is recommended
rob@100:     * to set the frame rate within setup(). The default rate is 60 frames per second.
rob@100:     *
rob@100:     * @param {int} aRate        number of frames per second.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see delay
rob@100:     */
rob@100:     p.frameRate = function(aRate) {
rob@100:       curFrameRate = aRate;
rob@100:       curMsPerFrame = 1000 / curFrameRate;
rob@100: 
rob@100:       // clear and reset interval
rob@100:       if (doLoop) {
rob@100:         p.noLoop();
rob@100:         p.loop();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Quits/stops/exits the program.
rob@100:     * Rather than terminating immediately, exit() will cause the sketch to exit after draw()
rob@100:     * has completed (or after setup() completes if called during the setup() method).
rob@100:     *
rob@100:     * @returns none
rob@100:     */
rob@100:     p.exit = function() {
rob@100:       // cleanup
rob@100:       window.clearInterval(looping);
rob@100:       removeInstance(p.externals.canvas.id);
rob@100:       delete(curElement.onmousedown);
rob@100: 
rob@100:       // Step through the libraries to detach them
rob@100:       for (var lib in Processing.lib) {
rob@100:         if (Processing.lib.hasOwnProperty(lib)) {
rob@100:           if (Processing.lib[lib].hasOwnProperty("detach")) {
rob@100:             Processing.lib[lib].detach(p);
rob@100:           }
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // clean up all event handling
rob@100:       var i = eventHandlers.length;
rob@100:       while (i--) {
rob@100:         detachEventHandler(eventHandlers[i]);
rob@100:       }
rob@100:       curSketch.onExit();
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // MISC functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:     * Sets the cursor to a predefined symbol, an image, or turns it on if already hidden.
rob@100:     * If you are trying to set an image as the cursor, it is recommended to make the size
rob@100:     * 16x16 or 32x32 pixels. It is not possible to load an image as the cursor if you are
rob@100:     * exporting your program for the Web. The values for parameters x and y must be less
rob@100:     * than the dimensions of the image.
rob@100:     *
rob@100:     * @param {MODE} MODE either ARROW, CROSS, HAND, MOVE, TEXT, WAIT
rob@100:     * @param {PImage} image       any variable of type PImage
rob@100:     * @param {int}    x           the horizonal active spot of the cursor
rob@100:     * @param {int}    y           the vertical active spot of the cursor
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see noCursor
rob@100:     */
rob@100:     p.cursor = function() {
rob@100:       if (arguments.length > 1 || (arguments.length === 1 && arguments[0] instanceof p.PImage)) {
rob@100:         var image = arguments[0],
rob@100:           x, y;
rob@100:         if (arguments.length >= 3) {
rob@100:           x = arguments[1];
rob@100:           y = arguments[2];
rob@100:           if (x < 0 || y < 0 || y >= image.height || x >= image.width) {
rob@100:             throw "x and y must be non-negative and less than the dimensions of the image";
rob@100:           }
rob@100:         } else {
rob@100:           x = image.width >>> 1;
rob@100:           y = image.height >>> 1;
rob@100:         }
rob@100: 
rob@100:         // see https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property
rob@100:         var imageDataURL = image.toDataURL();
rob@100:         var style = "url(\"" + imageDataURL + "\") " + x + " " + y + ", default";
rob@100:         curCursor = curElement.style.cursor = style;
rob@100:       } else if (arguments.length === 1) {
rob@100:         var mode = arguments[0];
rob@100:         curCursor = curElement.style.cursor = mode;
rob@100:       } else {
rob@100:         curCursor = curElement.style.cursor = oldCursor;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Hides the cursor from view.
rob@100:     *
rob@100:     * @returns none
rob@100:     *
rob@100:     * @see cursor
rob@100:     */
rob@100:     p.noCursor = function() {
rob@100:       curCursor = curElement.style.cursor = PConstants.NOCURSOR;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Links to a webpage either in the same window or in a new window. The complete URL
rob@100:     * must be specified.
rob@100:     *
rob@100:     * @param {String} href      complete url as a String in quotes
rob@100:     * @param {String} target    name of the window to load the URL as a string in quotes
rob@100:     *
rob@100:     * @returns none
rob@100:     */
rob@100:     p.link = function(href, target) {
rob@100:       if (target !== undef) {
rob@100:         window.open(href, target);
rob@100:       } else {
rob@100:         window.location = href;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     // PGraphics methods
rob@100:     // These functions exist only for compatibility with P5
rob@100:     p.beginDraw = noop;
rob@100:     p.endDraw = noop;
rob@100: 
rob@100:     /**
rob@100:      * This function takes content from a canvas and turns it into an ImageData object to be used with a PImage
rob@100:      *
rob@100:      * @returns {ImageData}        ImageData object to attach to a PImage (1D array of pixel data)
rob@100:      *
rob@100:      * @see PImage
rob@100:      */
rob@100:     Drawing2D.prototype.toImageData = function(x, y, w, h) {
rob@100:       x = x !== undef ? x : 0;
rob@100:       y = y !== undef ? y : 0;
rob@100:       w = w !== undef ? w : p.width;
rob@100:       h = h !== undef ? h : p.height;
rob@100:       return curContext.getImageData(x, y, w, h);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.toImageData = function(x, y, w, h) {
rob@100:       x = x !== undef ? x : 0;
rob@100:       y = y !== undef ? y : 0;
rob@100:       w = w !== undef ? w : p.width;
rob@100:       h = h !== undef ? h : p.height;
rob@100:       var c = document.createElement("canvas"),
rob@100:           ctx = c.getContext("2d"),
rob@100:           obj = ctx.createImageData(w, h),
rob@100:           uBuff = new Uint8Array(w * h * 4);
rob@100:       curContext.readPixels(x, y, w, h, curContext.RGBA, curContext.UNSIGNED_BYTE, uBuff);
rob@100:       for (var i=0, ul=uBuff.length, obj_data=obj.data; i < ul; i++) {
rob@100:         obj_data[i] = uBuff[(h - 1 - Math.floor(i / 4 / w)) * w * 4 + (i % (w * 4))];
rob@100:       }
rob@100:       return obj;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Displays message in the browser's status area. This is the text area in the lower
rob@100:     * left corner of the browser. The status() function will only work when the
rob@100:     * Processing program is running in a web browser.
rob@100:     *
rob@100:     * @param {String} text      any valid String
rob@100:     *
rob@100:     * @returns none
rob@100:     */
rob@100:     p.status = function(text) {
rob@100:       window.status = text;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Binary Functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:     * Converts a byte, char, int, or color to a String containing the equivalent binary
rob@100:     * notation. For example color(0, 102, 153, 255) will convert to the String
rob@100:     * "11111111000000000110011010011001". This function can help make your geeky debugging
rob@100:     * sessions much happier.
rob@100:     *
rob@100:     * @param {byte|char|int|color} num          byte, char, int, color: value to convert
rob@100:     * @param {int} numBits                      number of digits to return
rob@100:     *
rob@100:     * @returns {String}
rob@100:     *
rob@100:     * @see unhex
rob@100:     * @see hex
rob@100:     * @see unbinary
rob@100:     */
rob@100:     p.binary = function(num, numBits) {
rob@100:       var bit;
rob@100:       if (numBits > 0) {
rob@100:         bit = numBits;
rob@100:       } else if(num instanceof Char) {
rob@100:         bit = 16;
rob@100:         num |= 0; // making it int
rob@100:       } else {
rob@100:         // autodetect, skipping zeros
rob@100:         bit = 32;
rob@100:         while (bit > 1 && !((num >>> (bit - 1)) & 1)) {
rob@100:           bit--;
rob@100:         }
rob@100:       }
rob@100:       var result = "";
rob@100:       while (bit > 0) {
rob@100:         result += ((num >>> (--bit)) & 1) ? "1" : "0";
rob@100:       }
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Converts a String representation of a binary number to its equivalent integer value.
rob@100:     * For example, unbinary("00001000") will return 8.
rob@100:     *
rob@100:     * @param {String} binaryString String
rob@100:     *
rob@100:     * @returns {Int}
rob@100:     *
rob@100:     * @see hex
rob@100:     * @see binary
rob@100:     * @see unbinary
rob@100:     */
rob@100:     p.unbinary = function(binaryString) {
rob@100:       var i = binaryString.length - 1, mask = 1, result = 0;
rob@100:       while (i >= 0) {
rob@100:         var ch = binaryString[i--];
rob@100:         if (ch !== '0' && ch !== '1') {
rob@100:           throw "the value passed into unbinary was not an 8 bit binary number";
rob@100:         }
rob@100:         if (ch === '1') {
rob@100:           result += mask;
rob@100:         }
rob@100:         mask <<= 1;
rob@100:       }
rob@100:       return result;
rob@100:     };
rob@100: 
rob@100:     var decimalToHex = function(d, padding) {
rob@100:       //if there is no padding value added, default padding to 8 else go into while statement.
rob@100:       padding = (padding === undef || padding === null) ? padding = 8 : padding;
rob@100:       if (d < 0) {
rob@100:         d = 0xFFFFFFFF + d + 1;
rob@100:       }
rob@100:       var hex = Number(d).toString(16).toUpperCase();
rob@100:       while (hex.length < padding) {
rob@100:         hex = "0" + hex;
rob@100:       }
rob@100:       if (hex.length >= padding) {
rob@100:         hex = hex.substring(hex.length - padding, hex.length);
rob@100:       }
rob@100:       return hex;
rob@100:     };
rob@100: 
rob@100:     // note: since we cannot keep track of byte, int types by default the returned string is 8 chars long
rob@100:     // if no 2nd argument is passed.  closest compromise we can use to match java implementation Feb 5 2010
rob@100:     // also the char parser has issues with chars that are not digits or letters IE: !@#$%^&*
rob@100:     /**
rob@100:     * Converts a byte, char, int, or color to a String containing the equivalent hexadecimal notation.
rob@100:     * For example color(0, 102, 153, 255) will convert to the String "FF006699". This function can help
rob@100:     * make your geeky debugging sessions much happier.
rob@100:     *
rob@100:     * @param {byte|char|int|Color} value   the value to turn into a hex string
rob@100:     * @param {int} digits                 the number of digits to return
rob@100:     *
rob@100:     * @returns {String}
rob@100:     *
rob@100:     * @see unhex
rob@100:     * @see binary
rob@100:     * @see unbinary
rob@100:     */
rob@100:     p.hex = function(value, len) {
rob@100:       if (arguments.length === 1) {
rob@100:         if (value instanceof Char) {
rob@100:           len = 4;
rob@100:         } else { // int or byte, indistinguishable at the moment, default to 8
rob@100:           len = 8;
rob@100:         }
rob@100:       }
rob@100:       return decimalToHex(value, len);
rob@100:     };
rob@100: 
rob@100:     function unhexScalar(hex) {
rob@100:       var value = parseInt("0x" + hex, 16);
rob@100: 
rob@100:       // correct for int overflow java expectation
rob@100:       if (value > 2147483647) {
rob@100:         value -= 4294967296;
rob@100:       }
rob@100:       return value;
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:     * Converts a String representation of a hexadecimal number to its equivalent integer value.
rob@100:     *
rob@100:     * @param {String} hex   the hex string to convert to an int
rob@100:     *
rob@100:     * @returns {int}
rob@100:     *
rob@100:     * @see hex
rob@100:     * @see binary
rob@100:     * @see unbinary
rob@100:     */
rob@100:     p.unhex = function(hex) {
rob@100:       if (hex instanceof Array) {
rob@100:         var arr = [];
rob@100:         for (var i = 0; i < hex.length; i++) {
rob@100:           arr.push(unhexScalar(hex[i]));
rob@100:         }
rob@100:         return arr;
rob@100:       }
rob@100:       return unhexScalar(hex);
rob@100:     };
rob@100: 
rob@100:     // Load a file or URL into strings
rob@100:     /**
rob@100:     * Reads the contents of a file or url and creates a String array of its individual lines.
rob@100:     * The filename parameter can also be a URL to a file found online.  If the file is not available or an error occurs,
rob@100:     * null will be returned and an error message will be printed to the console. The error message does not halt
rob@100:     * the program.
rob@100:     *
rob@100:     * @param {String} filename    name of the file or url to load
rob@100:     *
rob@100:     * @returns {String[]}
rob@100:     *
rob@100:     * @see loadBytes
rob@100:     * @see saveStrings
rob@100:     * @see saveBytes
rob@100:     */
rob@100:     p.loadStrings = function(filename) {
rob@100:       if (localStorage[filename]) {
rob@100:         return localStorage[filename].split("\n");
rob@100:       }
rob@100: 
rob@100:       var filecontent = ajax(filename);
rob@100:       if(typeof filecontent !== "string" || filecontent === "") {
rob@100:         return [];
rob@100:       }
rob@100: 
rob@100:       // deal with the fact that Windows uses \r\n, Unix uses \n,
rob@100:       // Mac uses \r, and we actually expect \n
rob@100:       filecontent = filecontent.replace(/(\r\n?)/g,"\n").replace(/\n$/,"");
rob@100: 
rob@100:       return filecontent.split("\n");
rob@100:     };
rob@100: 
rob@100:     // Writes an array of strings to a file, one line per string
rob@100:     /**
rob@100:     * Writes an array of strings to a file, one line per string. This file is saved to the localStorage.
rob@100:     *
rob@100:     * @param {String} filename    name of the file to save to localStorage
rob@100:     * @param {String[]} strings   string array to be written
rob@100:     *
rob@100:     * @see loadBytes
rob@100:     * @see loadStrings
rob@100:     * @see saveBytes
rob@100:     */
rob@100:     p.saveStrings = function(filename, strings) {
rob@100:       localStorage[filename] = strings.join('\n');
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Reads the contents of a file or url and places it in a byte array. If a file is specified, it must be located in the localStorage.
rob@100:     * The filename parameter can also be a URL to a file found online.
rob@100:     *
rob@100:     * @param {String} filename   name of a file in the localStorage or a URL.
rob@100:     *
rob@100:     * @returns {byte[]}
rob@100:     *
rob@100:     * @see loadStrings
rob@100:     * @see saveStrings
rob@100:     * @see saveBytes
rob@100:     */
rob@100:     p.loadBytes = function(url) {
rob@100:       var string = ajax(url);
rob@100:       var ret = [];
rob@100: 
rob@100:       for (var i = 0; i < string.length; i++) {
rob@100:         ret.push(string.charCodeAt(i));
rob@100:       }
rob@100: 
rob@100:       return ret;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // String Functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     /**
rob@100:      * The matchAll() function is identical to match(), except that it returns an array of all matches in
rob@100:      * the specified String, rather than just the first.
rob@100:      *
rob@100:      * @param {String} aString  the String to search inside
rob@100:      * @param {String} aRegExp  the regexp to be used for matching
rob@100:      *
rob@100:      * @return {String[]} returns an array of matches
rob@100:      *
rob@100:      * @see #match
rob@100:      */
rob@100:     p.matchAll = function(aString, aRegExp) {
rob@100:       var results = [],
rob@100:           latest;
rob@100:       var regexp = new RegExp(aRegExp, "g");
rob@100:       while ((latest = regexp.exec(aString)) !== null) {
rob@100:         results.push(latest);
rob@100:         if (latest[0].length === 0) {
rob@100:           ++regexp.lastIndex;
rob@100:         }
rob@100:       }
rob@100:       return results.length > 0 ? results : null;
rob@100:     };
rob@100:     /**
rob@100:      * The match() function matches a string with a regular expression, and returns the match as an
rob@100:      * array. The first index is the matching expression, and array elements
rob@100:      * [1] and higher represent each of the groups (sequences found in parens).
rob@100:      *
rob@100:      * @param {String} str      the String to be searched
rob@100:      * @param {String} regexp   the regexp to be used for matching
rob@100:      *
rob@100:      * @return {String[]} an array of matching strings
rob@100:      */
rob@100:     p.match = function(str, regexp) {
rob@100:       return str.match(regexp);
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Other java specific functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100: 
rob@100:     var logBuffer = [];
rob@100: 
rob@100:     /**
rob@100:      * The println() function writes to the console area of the Processing environment.
rob@100:      * Each call to this function creates a new line of output. Individual elements can be separated with quotes ("") and joined with the string concatenation operator (+).
rob@100:      *
rob@100:      * @param {String} message the string to write to the console
rob@100:      *
rob@100:      * @see #join
rob@100:      * @see #print
rob@100:      */
rob@100:     p.println = function(message) {
rob@100:       Processing.logger.println(message);
rob@100:     };
rob@100:     /**
rob@100:      * The print() function writes to the console area of the Processing environment.
rob@100:      *
rob@100:      * @param {String} message the string to write to the console
rob@100:      *
rob@100:      * @see #join
rob@100:      */
rob@100:     p.print = function(message) {
rob@100:       Processing.logger.print(message);
rob@100:     };
rob@100: 
rob@100:     // Alphanumeric chars arguments automatically converted to numbers when
rob@100:     // passed in, and will come out as numbers.
rob@100:     p.str = function(val) {
rob@100:       if (val instanceof Array) {
rob@100:         var arr = [];
rob@100:         for (var i = 0; i < val.length; i++) {
rob@100:           arr.push(val[i].toString() + "");
rob@100:         }
rob@100:         return arr;
rob@100:       }
rob@100:       return (val.toString() + "");
rob@100:     };
rob@100: 
rob@100: 
rob@100:     // Conversion
rob@100:     function booleanScalar(val) {
rob@100:       if (typeof val === 'number') {
rob@100:         return val !== 0;
rob@100:       }
rob@100:       if (typeof val === 'boolean') {
rob@100:         return val;
rob@100:       }
rob@100:       if (typeof val === 'string') {
rob@100:         return val.toLowerCase() === 'true';
rob@100:       }
rob@100:       if (val instanceof Char) {
rob@100:         // 1, T or t
rob@100:         return val.code === 49 || val.code === 84 || val.code === 116;
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Converts the passed parameter to the function to its boolean value.
rob@100:      * It will return an array of booleans if an array is passed in.
rob@100:      *
rob@100:      * @param {int, byte, string} val          the parameter to be converted to boolean
rob@100:      * @param {int[], byte[], string[]} val    the array to be converted to boolean[]
rob@100:      *
rob@100:      * @return {boolean|boolean[]} returns a boolean or an array of booleans
rob@100:      */
rob@100:     p.parseBoolean = function (val) {
rob@100:       if (val instanceof Array) {
rob@100:         var ret = [];
rob@100:         for (var i = 0; i < val.length; i++) {
rob@100:           ret.push(booleanScalar(val[i]));
rob@100:         }
rob@100:         return ret;
rob@100:       }
rob@100:       return booleanScalar(val);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Converts the passed parameter to the function to its byte value.
rob@100:      * A byte is a number between -128 and 127.
rob@100:      * It will return an array of bytes if an array is passed in.
rob@100:      *
rob@100:      * @param {int, char} what        the parameter to be conveted to byte
rob@100:      * @param {int[], char[]} what    the array to be converted to byte[]
rob@100:      *
rob@100:      * @return {byte|byte[]} returns a byte or an array of bytes
rob@100:      */
rob@100:     p.parseByte = function(what) {
rob@100:       if (what instanceof Array) {
rob@100:         var bytes = [];
rob@100:         for (var i = 0; i < what.length; i++) {
rob@100:           bytes.push((0 - (what[i] & 0x80)) | (what[i] & 0x7F));
rob@100:         }
rob@100:         return bytes;
rob@100:       }
rob@100:       return (0 - (what & 0x80)) | (what & 0x7F);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Converts the passed parameter to the function to its char value.
rob@100:      * It will return an array of chars if an array is passed in.
rob@100:      *
rob@100:      * @param {int, byte} key        the parameter to be conveted to char
rob@100:      * @param {int[], byte[]} key    the array to be converted to char[]
rob@100:      *
rob@100:      * @return {char|char[]} returns a char or an array of chars
rob@100:      */
rob@100:     p.parseChar = function(key) {
rob@100:       if (typeof key === "number") {
rob@100:         return new Char(String.fromCharCode(key & 0xFFFF));
rob@100:       }
rob@100:       if (key instanceof Array) {
rob@100:         var ret = [];
rob@100:         for (var i = 0; i < key.length; i++) {
rob@100:           ret.push(new Char(String.fromCharCode(key[i] & 0xFFFF)));
rob@100:         }
rob@100:         return ret;
rob@100:       }
rob@100:       throw "char() may receive only one argument of type int, byte, int[], or byte[].";
rob@100:     };
rob@100: 
rob@100:     // Processing doc claims good argument types are: int, char, byte, boolean,
rob@100:     // String, int[], char[], byte[], boolean[], String[].
rob@100:     // floats should not work. However, floats with only zeroes right of the
rob@100:     // decimal will work because JS converts those to int.
rob@100:     function floatScalar(val) {
rob@100:       if (typeof val === 'number') {
rob@100:         return val;
rob@100:       }
rob@100:       if (typeof val === 'boolean') {
rob@100:         return val ? 1 : 0;
rob@100:       }
rob@100:       if (typeof val === 'string') {
rob@100:         return parseFloat(val);
rob@100:       }
rob@100:       if (val instanceof Char) {
rob@100:         return val.code;
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Converts the passed parameter to the function to its float value.
rob@100:      * It will return an array of floats if an array is passed in.
rob@100:      *
rob@100:      * @param {int, char, boolean, string} val            the parameter to be conveted to float
rob@100:      * @param {int[], char[], boolean[], string[]} val    the array to be converted to float[]
rob@100:      *
rob@100:      * @return {float|float[]} returns a float or an array of floats
rob@100:      */
rob@100:     p.parseFloat = function(val) {
rob@100:       if (val instanceof Array) {
rob@100:         var ret = [];
rob@100:         for (var i = 0; i < val.length; i++) {
rob@100:           ret.push(floatScalar(val[i]));
rob@100:         }
rob@100:         return ret;
rob@100:       }
rob@100:       return floatScalar(val);
rob@100:     };
rob@100: 
rob@100:     function intScalar(val, radix) {
rob@100:       if (typeof val === 'number') {
rob@100:         return val & 0xFFFFFFFF;
rob@100:       }
rob@100:       if (typeof val === 'boolean') {
rob@100:         return val ? 1 : 0;
rob@100:       }
rob@100:       if (typeof val === 'string') {
rob@100:         var number = parseInt(val, radix || 10); // Default to decimal radix.
rob@100:         return number & 0xFFFFFFFF;
rob@100:       }
rob@100:       if (val instanceof Char) {
rob@100:         return val.code;
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Converts the passed parameter to the function to its int value.
rob@100:      * It will return an array of ints if an array is passed in.
rob@100:      *
rob@100:      * @param {string, char, boolean, float} val            the parameter to be conveted to int
rob@100:      * @param {string[], char[], boolean[], float[]} val    the array to be converted to int[]
rob@100:      * @param {int} radix                                   optional the radix of the number (for js compatibility)
rob@100:      *
rob@100:      * @return {int|int[]} returns a int or an array of ints
rob@100:      */
rob@100:     p.parseInt = function(val, radix) {
rob@100:       if (val instanceof Array) {
rob@100:         var ret = [];
rob@100:         for (var i = 0; i < val.length; i++) {
rob@100:           if (typeof val[i] === 'string' && !/^\s*[+\-]?\d+\s*$/.test(val[i])) {
rob@100:             ret.push(0);
rob@100:           } else {
rob@100:             ret.push(intScalar(val[i], radix));
rob@100:           }
rob@100:         }
rob@100:         return ret;
rob@100:       }
rob@100:       return intScalar(val, radix);
rob@100:     };
rob@100: 
rob@100:     p.__int_cast = function(val) {
rob@100:       return 0|val;
rob@100:     };
rob@100: 
rob@100:     p.__instanceof = function(obj, type) {
rob@100:       if (typeof type !== "function") {
rob@100:         throw "Function is expected as type argument for instanceof operator";
rob@100:       }
rob@100: 
rob@100:       if (typeof obj === "string") {
rob@100:         // special case for strings
rob@100:         return type === Object || type === String;
rob@100:       }
rob@100: 
rob@100:       if (obj instanceof type) {
rob@100:         // fast check if obj is already of type instance
rob@100:         return true;
rob@100:       }
rob@100: 
rob@100:       if (typeof obj !== "object" || obj === null) {
rob@100:         return false; // not an object or null
rob@100:       }
rob@100: 
rob@100:       var objType = obj.constructor;
rob@100:       if (type.$isInterface) {
rob@100:         // expecting the interface
rob@100:         // queueing interfaces from type and its base classes
rob@100:         var interfaces = [];
rob@100:         while (objType) {
rob@100:           if (objType.$interfaces) {
rob@100:             interfaces = interfaces.concat(objType.$interfaces);
rob@100:           }
rob@100:           objType = objType.$base;
rob@100:         }
rob@100:         while (interfaces.length > 0) {
rob@100:           var i = interfaces.shift();
rob@100:           if (i === type) {
rob@100:             return true;
rob@100:           }
rob@100:           // wide search in base interfaces
rob@100:           if (i.$interfaces) {
rob@100:             interfaces = interfaces.concat(i.$interfaces);
rob@100:           }
rob@100:         }
rob@100:         return false;
rob@100:       }
rob@100: 
rob@100:       while (objType.hasOwnProperty("$base")) {
rob@100:         objType = objType.$base;
rob@100:         if (objType === type) {
rob@100:           return true; // object was found
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       return false;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Defines the dimension of the display window in units of pixels. The size() function must
rob@100:     * be the first line in setup(). If size() is not called, the default size of the window is
rob@100:     * 100x100 pixels. The system variables width and height are set by the parameters passed to
rob@100:     * the size() function.
rob@100:     *
rob@100:     * @param {int} aWidth     width of the display window in units of pixels
rob@100:     * @param {int} aHeight    height of the display window in units of pixels
rob@100:     * @param {MODE} aMode     Either P2D, P3D, JAVA2D, or OPENGL
rob@100:     *
rob@100:     * @see createGraphics
rob@100:     * @see screen
rob@100:     */
rob@100:     DrawingShared.prototype.size = function(aWidth, aHeight, aMode) {
rob@100:       if (doStroke) {
rob@100:         p.stroke(0);
rob@100:       }
rob@100: 
rob@100:       if (doFill) {
rob@100:         p.fill(255);
rob@100:       }
rob@100: 
rob@100:       // The default 2d context has already been created in the p.init() stage if
rob@100:       // a 3d context was not specified. This is so that a 2d context will be
rob@100:       // available if size() was not called.
rob@100:       var savedProperties = {
rob@100:         fillStyle: curContext.fillStyle,
rob@100:         strokeStyle: curContext.strokeStyle,
rob@100:         lineCap: curContext.lineCap,
rob@100:         lineJoin: curContext.lineJoin
rob@100:       };
rob@100:       // remove the style width and height properties to ensure that the canvas gets set to
rob@100:       // aWidth and aHeight coming in
rob@100:       if (curElement.style.length > 0 ) {
rob@100:         curElement.style.removeProperty("width");
rob@100:         curElement.style.removeProperty("height");
rob@100:       }
rob@100: 
rob@100:       curElement.width = p.width = aWidth || 100;
rob@100:       curElement.height = p.height = aHeight || 100;
rob@100: 
rob@100:       for (var prop in savedProperties) {
rob@100:         if (savedProperties.hasOwnProperty(prop)) {
rob@100:           curContext[prop] = savedProperties[prop];
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // make sure to set the default font the first time round.
rob@100:       p.textFont(curTextFont);
rob@100: 
rob@100:       // Set the background to whatever it was called last as if background() was called before size()
rob@100:       // If background() hasn't been called before, set background() to a light gray
rob@100:       p.background();
rob@100: 
rob@100:       // set 5% for pixels to cache (or 1000)
rob@100:       maxPixelsCached = Math.max(1000, aWidth * aHeight * 0.05);
rob@100: 
rob@100:       // Externalize the context
rob@100:       p.externals.context = curContext;
rob@100: 
rob@100:       for (var i = 0; i < PConstants.SINCOS_LENGTH; i++) {
rob@100:         sinLUT[i] = p.sin(i * (PConstants.PI / 180) * 0.5);
rob@100:         cosLUT[i] = p.cos(i * (PConstants.PI / 180) * 0.5);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.size = function(aWidth, aHeight, aMode) {
rob@100:       if (curContext === undef) {
rob@100:         // size() was called without p.init() default context, i.e. p.createGraphics()
rob@100:         curContext = curElement.getContext("2d");
rob@100:         userMatrixStack = new PMatrixStack();
rob@100:         userReverseMatrixStack = new PMatrixStack();
rob@100:         modelView = new PMatrix2D();
rob@100:         modelViewInv = new PMatrix2D();
rob@100:       }
rob@100: 
rob@100:       DrawingShared.prototype.size.apply(this, arguments);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.size = (function() {
rob@100:       var size3DCalled = false;
rob@100: 
rob@100:       return function size(aWidth, aHeight, aMode) {
rob@100:         if (size3DCalled) {
rob@100:           throw "Multiple calls to size() for 3D renders are not allowed.";
rob@100:         }
rob@100:         size3DCalled = true;
rob@100: 
rob@100:         function getGLContext(canvas) {
rob@100:           var ctxNames = ['experimental-webgl', 'webgl', 'webkit-3d'],
rob@100:               gl;
rob@100: 
rob@100:           for (var i=0, l=ctxNames.length; i<l; i++) {
rob@100:             gl = canvas.getContext(ctxNames[i], {antialias: false, preserveDrawingBuffer: true});
rob@100:             if (gl) {
rob@100:               break;
rob@100:             }
rob@100:           }
rob@100: 
rob@100:           return gl;
rob@100:         }
rob@100: 
rob@100:         // Get the 3D rendering context.
rob@100:         try {
rob@100:           // If the HTML <canvas> dimensions differ from the
rob@100:           // dimensions specified in the size() call in the sketch, for
rob@100:           // 3D sketches, browsers will either not render or render the
rob@100:           // scene incorrectly. To fix this, we need to adjust the
rob@100:           // width and height attributes of the canvas.
rob@100:           curElement.width = p.width = aWidth || 100;
rob@100:           curElement.height = p.height = aHeight || 100;
rob@100:           curContext = getGLContext(curElement);
rob@100:           canTex = curContext.createTexture();
rob@100:           textTex = curContext.createTexture();
rob@100:         } catch(e_size) {
rob@100:           Processing.debug(e_size);
rob@100:         }
rob@100: 
rob@100:         if (!curContext) {
rob@100:           throw "WebGL context is not supported on this browser.";
rob@100:         }
rob@100: 
rob@100:         // Set defaults
rob@100:         curContext.viewport(0, 0, curElement.width, curElement.height);
rob@100:         curContext.enable(curContext.DEPTH_TEST);
rob@100:         curContext.enable(curContext.BLEND);
rob@100:         curContext.blendFunc(curContext.SRC_ALPHA, curContext.ONE_MINUS_SRC_ALPHA);
rob@100: 
rob@100:         // Create the program objects to render 2D (points, lines) and
rob@100:         // 3D (spheres, boxes) shapes. Because 2D shapes are not lit,
rob@100:         // lighting calculations are ommitted from this program object.
rob@100:         programObject2D = createProgramObject(curContext, vertexShaderSrc2D, fragmentShaderSrc2D);
rob@100: 
rob@100:         programObjectUnlitShape = createProgramObject(curContext, vertexShaderSrcUnlitShape, fragmentShaderSrcUnlitShape);
rob@100: 
rob@100:         // Set the default point and line width for the 2D and unlit shapes.
rob@100:         p.strokeWeight(1);
rob@100: 
rob@100:         // Now that the programs have been compiled, we can set the default
rob@100:         // states for the lights.
rob@100:         programObject3D = createProgramObject(curContext, vertexShaderSrc3D, fragmentShaderSrc3D);
rob@100:         curContext.useProgram(programObject3D);
rob@100: 
rob@100:         // Assume we aren't using textures by default.
rob@100:         uniformi("usingTexture3d", programObject3D, "usingTexture", usingTexture);
rob@100: 
rob@100:         // Set some defaults.
rob@100:         p.lightFalloff(1, 0, 0);
rob@100:         p.shininess(1);
rob@100:         p.ambient(255, 255, 255);
rob@100:         p.specular(0, 0, 0);
rob@100:         p.emissive(0, 0, 0);
rob@100: 
rob@100:         // Create buffers for 3D primitives
rob@100:         boxBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, boxBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, boxVerts, curContext.STATIC_DRAW);
rob@100: 
rob@100:         boxNormBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, boxNormBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, boxNorms, curContext.STATIC_DRAW);
rob@100: 
rob@100:         boxOutlineBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, boxOutlineBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, boxOutlineVerts, curContext.STATIC_DRAW);
rob@100: 
rob@100:         // used to draw the rectangle and the outline
rob@100:         rectBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, rectBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, rectVerts, curContext.STATIC_DRAW);
rob@100: 
rob@100:         rectNormBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, rectNormBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, rectNorms, curContext.STATIC_DRAW);
rob@100: 
rob@100:         // The sphere vertices are specified dynamically since the user
rob@100:         // can change the level of detail. Everytime the user does that
rob@100:         // using sphereDetail(), the new vertices are calculated.
rob@100:         sphereBuffer = curContext.createBuffer();
rob@100: 
rob@100:         lineBuffer = curContext.createBuffer();
rob@100: 
rob@100:         // Shape buffers
rob@100:         fillBuffer = curContext.createBuffer();
rob@100:         fillColorBuffer = curContext.createBuffer();
rob@100:         strokeColorBuffer = curContext.createBuffer();
rob@100:         shapeTexVBO = curContext.createBuffer();
rob@100: 
rob@100:         pointBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, pointBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array([0, 0, 0]), curContext.STATIC_DRAW);
rob@100: 
rob@100:         textBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, textBuffer );
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array([1,1,0,-1,1,0,-1,-1,0,1,-1,0]), curContext.STATIC_DRAW);
rob@100: 
rob@100:         textureBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ARRAY_BUFFER, textureBuffer);
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array([0,0,1,0,1,1,0,1]), curContext.STATIC_DRAW);
rob@100: 
rob@100:         indexBuffer = curContext.createBuffer();
rob@100:         curContext.bindBuffer(curContext.ELEMENT_ARRAY_BUFFER, indexBuffer);
rob@100:         curContext.bufferData(curContext.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2,2,3,0]), curContext.STATIC_DRAW);
rob@100: 
rob@100:         cam = new PMatrix3D();
rob@100:         cameraInv = new PMatrix3D();
rob@100:         modelView = new PMatrix3D();
rob@100:         modelViewInv = new PMatrix3D();
rob@100:         projection = new PMatrix3D();
rob@100:         p.camera();
rob@100:         p.perspective();
rob@100: 
rob@100:         userMatrixStack = new PMatrixStack();
rob@100:         userReverseMatrixStack = new PMatrixStack();
rob@100:         // used by both curve and bezier, so just init here
rob@100:         curveBasisMatrix = new PMatrix3D();
rob@100:         curveToBezierMatrix = new PMatrix3D();
rob@100:         curveDrawMatrix = new PMatrix3D();
rob@100:         bezierDrawMatrix = new PMatrix3D();
rob@100:         bezierBasisInverse = new PMatrix3D();
rob@100:         bezierBasisMatrix = new PMatrix3D();
rob@100:         bezierBasisMatrix.set(-1, 3, -3, 1, 3, -6, 3, 0, -3, 3, 0, 0, 1, 0, 0, 0);
rob@100: 
rob@100:         DrawingShared.prototype.size.apply(this, arguments);
rob@100:       };
rob@100:     }());
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Lights
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * Adds an ambient light. Ambient light doesn't come from a specific direction,
rob@100:      * the rays have light have bounced around so much that objects are evenly lit
rob@100:      * from all sides. Ambient lights are almost always used in combination with
rob@100:      * other types of lights. Lights need to be included in the <b>draw()</b> to
rob@100:      * remain persistent in a looping program. Placing them in the <b>setup()</b>
rob@100:      * of a looping program will cause them to only have an effect the first time
rob@100:      * through the loop. The effect of the parameters is determined by the current
rob@100:      * color mode.
rob@100:      *
rob@100:      * @param {int | float} r red or hue value
rob@100:      * @param {int | float} g green or hue value
rob@100:      * @param {int | float} b blue or hue value
rob@100:      *
rob@100:      * @param {int | float} x x position of light (used for falloff)
rob@100:      * @param {int | float} y y position of light (used for falloff)
rob@100:      * @param {int | float} z z position of light (used for falloff)
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:      * @see directionalLight
rob@100:      * @see pointLight
rob@100:      * @see spotLight
rob@100:     */
rob@100:     Drawing2D.prototype.ambientLight = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.ambientLight = function(r, g, b, x, y, z) {
rob@100:       if (lightCount === PConstants.MAX_LIGHTS) {
rob@100:         throw "can only create " + PConstants.MAX_LIGHTS + " lights";
rob@100:       }
rob@100: 
rob@100:       var pos = new PVector(x, y, z);
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.mult(pos, pos);
rob@100: 
rob@100:       // Instead of calling p.color, we do the calculations ourselves to
rob@100:       // reduce property lookups.
rob@100:       var col = color$4(r, g, b, 0);
rob@100:       var normalizedCol = [ ((col & PConstants.RED_MASK) >>> 16) / 255,
rob@100:                             ((col & PConstants.GREEN_MASK) >>> 8) / 255,
rob@100:                              (col & PConstants.BLUE_MASK) / 255 ];
rob@100: 
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformf("uLights.color.3d." + lightCount, programObject3D, "uLights" + lightCount + ".color", normalizedCol);
rob@100:       uniformf("uLights.position.3d." + lightCount, programObject3D, "uLights" + lightCount + ".position", pos.array());
rob@100:       uniformi("uLights.type.3d." + lightCount, programObject3D, "uLights" + lightCount + ".type", 0);
rob@100:       uniformi("uLightCount3d", programObject3D, "uLightCount", ++lightCount);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Adds a directional light. Directional light comes from one direction and
rob@100:      * is stronger when hitting a surface squarely and weaker if it hits at a
rob@100:      * gentle angle. After hitting a surface, a directional lights scatters in
rob@100:      * all directions. Lights need to be included in the <b>draw()</b> to remain
rob@100:      * persistent in a looping program. Placing them in the <b>setup()</b> of a
rob@100:      * looping program will cause them to only have an effect the first time
rob@100:      * through the loop. The affect of the <br>r</b>, <br>g</b>, and <br>b</b>
rob@100:      * parameters is determined by the current color mode. The <b>nx</b>,
rob@100:      * <b>ny</b>, and <b>nz</b> parameters specify the direction the light is
rob@100:      * facing. For example, setting <b>ny</b> to -1 will cause the geometry to be
rob@100:      * lit from below (the light is facing directly upward).
rob@100:      *
rob@100:      * @param {int | float} r red or hue value
rob@100:      * @param {int | float} g green or hue value
rob@100:      * @param {int | float} b blue or hue value
rob@100:      *
rob@100:      * @param {int | float} nx direction along the x axis
rob@100:      * @param {int | float} ny direction along the y axis
rob@100:      * @param {int | float} nz direction along the z axis
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:      * @see ambientLight
rob@100:      * @see pointLight
rob@100:      * @see spotLight
rob@100:     */
rob@100:     Drawing2D.prototype.directionalLight = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.directionalLight = function(r, g, b, nx, ny, nz) {
rob@100:       if (lightCount === PConstants.MAX_LIGHTS) {
rob@100:         throw "can only create " + PConstants.MAX_LIGHTS + " lights";
rob@100:       }
rob@100: 
rob@100:       curContext.useProgram(programObject3D);
rob@100: 
rob@100:       var mvm = new PMatrix3D();
rob@100:       mvm.scale(1, -1, 1);
rob@100:       mvm.apply(modelView.array());
rob@100:       mvm = mvm.array();
rob@100: 
rob@100:       // We need to multiply the direction by the model view matrix, but
rob@100:       // the mult function checks the w component of the vector, if it isn't
rob@100:       // present, it uses 1, so we manually multiply.
rob@100:       var dir = [
rob@100:         mvm[0] * nx + mvm[4] * ny + mvm[8] * nz,
rob@100:         mvm[1] * nx + mvm[5] * ny + mvm[9] * nz,
rob@100:         mvm[2] * nx + mvm[6] * ny + mvm[10] * nz
rob@100:       ];
rob@100: 
rob@100:       // Instead of calling p.color, we do the calculations ourselves to
rob@100:       // reduce property lookups.
rob@100:       var col = color$4(r, g, b, 0);
rob@100:       var normalizedCol = [ ((col & PConstants.RED_MASK) >>> 16) / 255,
rob@100:                             ((col & PConstants.GREEN_MASK) >>> 8) / 255,
rob@100:                              (col & PConstants.BLUE_MASK) / 255 ];
rob@100: 
rob@100:       uniformf("uLights.color.3d." + lightCount, programObject3D, "uLights" + lightCount + ".color", normalizedCol);
rob@100:       uniformf("uLights.position.3d." + lightCount, programObject3D, "uLights" + lightCount + ".position", dir);
rob@100:       uniformi("uLights.type.3d." + lightCount, programObject3D, "uLights" + lightCount + ".type", 1);
rob@100:       uniformi("uLightCount3d", programObject3D, "uLightCount", ++lightCount);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the falloff rates for point lights, spot lights, and ambient lights.
rob@100:      * The parameters are used to determine the falloff with the following equation:
rob@100:      *
rob@100:      * d = distance from light position to vertex position
rob@100:      * falloff = 1 / (CONSTANT + d * LINEAR + (d*d) * QUADRATIC)
rob@100:      *
rob@100:      * Like <b>fill()</b>, it affects only the elements which are created after it in the
rob@100:      * code. The default value if <b>LightFalloff(1.0, 0.0, 0.0)</b>. Thinking about an
rob@100:      * ambient light with a falloff can be tricky. It is used, for example, if you
rob@100:      * wanted a region of your scene to be lit ambiently one color and another region
rob@100:      * to be lit ambiently by another color, you would use an ambient light with location
rob@100:      * and falloff. You can think of it as a point light that doesn't care which direction
rob@100:      * a surface is facing.
rob@100:      *
rob@100:      * @param {int | float} constant constant value for determining falloff
rob@100:      * @param {int | float} linear linear value for determining falloff
rob@100:      * @param {int | float} quadratic quadratic value for determining falloff
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:      * @see ambientLight
rob@100:      * @see pointLight
rob@100:      * @see spotLight
rob@100:      * @see lightSpecular
rob@100:     */
rob@100:     Drawing2D.prototype.lightFalloff = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.lightFalloff = function(constant, linear, quadratic) {
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformf("uFalloff3d", programObject3D, "uFalloff", [constant, linear, quadratic]);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the specular color for lights. Like <b>fill()</b>, it affects only the
rob@100:      * elements which are created after it in the code. Specular refers to light
rob@100:      * which bounces off a surface in a perferred direction (rather than bouncing
rob@100:      * in all directions like a diffuse light) and is used for creating highlights.
rob@100:      * The specular quality of a light interacts with the specular material qualities
rob@100:      * set through the <b>specular()</b> and <b>shininess()</b> functions.
rob@100:      *
rob@100:      * @param {int | float} r red or hue value
rob@100:      * @param {int | float} g green or hue value
rob@100:      * @param {int | float} b blue or hue value
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:      * @see ambientLight
rob@100:      * @see pointLight
rob@100:      * @see spotLight
rob@100:     */
rob@100:     Drawing2D.prototype.lightSpecular = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.lightSpecular = function(r, g, b) {
rob@100: 
rob@100:       // Instead of calling p.color, we do the calculations ourselves to
rob@100:       // reduce property lookups.
rob@100:       var col = color$4(r, g, b, 0);
rob@100:       var normalizedCol = [ ((col & PConstants.RED_MASK) >>> 16) / 255,
rob@100:                             ((col & PConstants.GREEN_MASK) >>> 8) / 255,
rob@100:                              (col & PConstants.BLUE_MASK) / 255 ];
rob@100: 
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformf("uSpecular3d", programObject3D, "uSpecular", normalizedCol);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the default ambient light, directional light, falloff, and specular
rob@100:      * values. The defaults are ambientLight(128, 128, 128) and
rob@100:      * directionalLight(128, 128, 128, 0, 0, -1), lightFalloff(1, 0, 0), and
rob@100:      * lightSpecular(0, 0, 0). Lights need to be included in the draw() to remain
rob@100:      * persistent in a looping program. Placing them in the setup() of a looping
rob@100:      * program will cause them to only have an effect the first time through the
rob@100:      * loop.
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see ambientLight
rob@100:      * @see directionalLight
rob@100:      * @see pointLight
rob@100:      * @see spotLight
rob@100:      * @see noLights
rob@100:      *
rob@100:     */
rob@100:     p.lights = function() {
rob@100:       p.ambientLight(128, 128, 128);
rob@100:       p.directionalLight(128, 128, 128, 0, 0, -1);
rob@100:       p.lightFalloff(1, 0, 0);
rob@100:       p.lightSpecular(0, 0, 0);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Adds a point light. Lights need to be included in the <b>draw()</b> to remain
rob@100:      * persistent in a looping program. Placing them in the <b>setup()</b> of a
rob@100:      * looping program will cause them to only have an effect the first time through
rob@100:      * the loop. The affect of the <b>r</b>, <b>g</b>, and <b>b</b> parameters
rob@100:      * is determined by the current color mode. The <b>x</b>, <b>y</b>, and <b>z</b>
rob@100:      * parameters set the position of the light.
rob@100:      *
rob@100:      * @param {int | float} r red or hue value
rob@100:      * @param {int | float} g green or hue value
rob@100:      * @param {int | float} b blue or hue value
rob@100:      * @param {int | float} x x coordinate of the light
rob@100:      * @param {int | float} y y coordinate of the light
rob@100:      * @param {int | float} z z coordinate of the light
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:      * @see directionalLight
rob@100:      * @see ambientLight
rob@100:      * @see spotLight
rob@100:     */
rob@100:     Drawing2D.prototype.pointLight = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.pointLight = function(r, g, b, x, y, z) {
rob@100:       if (lightCount === PConstants.MAX_LIGHTS) {
rob@100:         throw "can only create " + PConstants.MAX_LIGHTS + " lights";
rob@100:       }
rob@100: 
rob@100:       // Place the point in view space once instead of once per vertex
rob@100:       // in the shader.
rob@100:       var pos = new PVector(x, y, z);
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.mult(pos, pos);
rob@100: 
rob@100:       // Instead of calling p.color, we do the calculations ourselves to
rob@100:       // reduce property lookups.
rob@100:       var col = color$4(r, g, b, 0);
rob@100:       var normalizedCol = [ ((col & PConstants.RED_MASK) >>> 16) / 255,
rob@100:                             ((col & PConstants.GREEN_MASK) >>> 8) / 255,
rob@100:                              (col & PConstants.BLUE_MASK) / 255 ];
rob@100: 
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformf("uLights.color.3d." + lightCount, programObject3D, "uLights" + lightCount + ".color", normalizedCol);
rob@100:       uniformf("uLights.position.3d." + lightCount, programObject3D, "uLights" + lightCount + ".position", pos.array());
rob@100:       uniformi("uLights.type.3d." + lightCount, programObject3D, "uLights" + lightCount + ".type", 2);
rob@100:       uniformi("uLightCount3d", programObject3D, "uLightCount", ++lightCount);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Disable all lighting. Lighting is turned off by default and enabled with
rob@100:      * the lights() method. This function can be used to disable lighting so
rob@100:      * that 2D geometry (which does not require lighting) can be drawn after a
rob@100:      * set of lighted 3D geometry.
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:     */
rob@100:     Drawing2D.prototype.noLights = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.noLights = function() {
rob@100:       lightCount = 0;
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformi("uLightCount3d", programObject3D, "uLightCount", lightCount);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Adds a spot light. Lights need to be included in the <b>draw()</b> to
rob@100:      * remain persistent in a looping program. Placing them in the <b>setup()</b>
rob@100:      * of a looping program will cause them to only have an effect the first time
rob@100:      * through the loop. The affect of the <b>r</b>, <b>g</b>, and <b>b</b> parameters
rob@100:      * is determined by the current color mode. The <b>x</b>, <b>y</b>, and <b>z</b>
rob@100:      * parameters specify the position of the light and <b>nx</b>, <b>ny</b>, <b>nz</b>
rob@100:      * specify the direction or light. The angle parameter affects <b>angle</b> of the
rob@100:      * spotlight cone.
rob@100:      *
rob@100:      * @param {int | float} r red or hue value
rob@100:      * @param {int | float} g green or hue value
rob@100:      * @param {int | float} b blue or hue value
rob@100:      * @param {int | float} x coordinate of the light
rob@100:      * @param {int | float} y coordinate of the light
rob@100:      * @param {int | float} z coordinate of the light
rob@100:      * @param {int | float} nx direction along the x axis
rob@100:      * @param {int | float} ny direction along the y axis
rob@100:      * @param {int | float} nz direction along the z axis
rob@100:      * @param {float} angle angle of the spotlight cone
rob@100:      * @param {float} concentration exponent determining the center bias of the cone
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see lights
rob@100:      * @see directionalLight
rob@100:      * @see ambientLight
rob@100:      * @see pointLight
rob@100:     */
rob@100:     Drawing2D.prototype.spotLight = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.spotLight = function(r, g, b, x, y, z, nx, ny, nz, angle, concentration) {
rob@100:       if (lightCount === PConstants.MAX_LIGHTS) {
rob@100:         throw "can only create " + PConstants.MAX_LIGHTS + " lights";
rob@100:       }
rob@100: 
rob@100:       curContext.useProgram(programObject3D);
rob@100: 
rob@100:       // multiply the position and direction by the model view matrix
rob@100:       // once per object rather than once per vertex.
rob@100:       var pos = new PVector(x, y, z);
rob@100:       var mvm = new PMatrix3D();
rob@100:       mvm.scale(1, -1, 1);
rob@100:       mvm.apply(modelView.array());
rob@100:       mvm.mult(pos, pos);
rob@100: 
rob@100:       // Convert to array since we need to directly access the elements.
rob@100:       mvm = mvm.array();
rob@100: 
rob@100:       // We need to multiply the direction by the model view matrix, but
rob@100:       // the mult function checks the w component of the vector, if it isn't
rob@100:       // present, it uses 1, so we use a very small value as a work around.
rob@100:       var dir = [
rob@100:           mvm[0] * nx + mvm[4] * ny + mvm[8] * nz,
rob@100:           mvm[1] * nx + mvm[5] * ny + mvm[9] * nz,
rob@100:           mvm[2] * nx + mvm[6] * ny + mvm[10] * nz
rob@100:       ];
rob@100: 
rob@100:       // Instead of calling p.color, we do the calculations ourselves to
rob@100:       // reduce property lookups.
rob@100:       var col = color$4(r, g, b, 0);
rob@100:       var normalizedCol = [ ((col & PConstants.RED_MASK) >>> 16) / 255,
rob@100:                             ((col & PConstants.GREEN_MASK) >>> 8) / 255,
rob@100:                              (col & PConstants.BLUE_MASK) / 255 ];
rob@100: 
rob@100:       uniformf("uLights.color.3d." + lightCount, programObject3D, "uLights" + lightCount + ".color", normalizedCol);
rob@100:       uniformf("uLights.position.3d." + lightCount, programObject3D, "uLights" + lightCount + ".position", pos.array());
rob@100:       uniformf("uLights.direction.3d." + lightCount, programObject3D, "uLights" + lightCount + ".direction", dir);
rob@100:       uniformf("uLights.concentration.3d." + lightCount, programObject3D, "uLights" + lightCount + ".concentration", concentration);
rob@100:       uniformf("uLights.angle.3d." + lightCount, programObject3D, "uLights" + lightCount + ".angle", angle);
rob@100:       uniformi("uLights.type.3d." + lightCount, programObject3D, "uLights" + lightCount + ".type", 3);
rob@100:       uniformi("uLightCount3d", programObject3D, "uLightCount", ++lightCount);
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Camera functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * The <b>beginCamera()</b> and <b>endCamera()</b> functions enable advanced customization of the camera space.
rob@100:      * The functions are useful if you want to more control over camera movement, however for most users, the <b>camera()</b>
rob@100:      * function will be sufficient.<br /><br />The camera functions will replace any transformations (such as <b>rotate()</b>
rob@100:      * or <b>translate()</b>) that occur before them in <b>draw()</b>, but they will not automatically replace the camera
rob@100:      * transform itself. For this reason, camera functions should be placed at the beginning of <b>draw()</b> (so that
rob@100:      * transformations happen afterwards), and the <b>camera()</b> function can be used after <b>beginCamera()</b> if
rob@100:      * you want to reset the camera before applying transformations.<br /><br />This function sets the matrix mode to the
rob@100:      * camera matrix so calls such as <b>translate()</b>, <b>rotate()</b>, applyMatrix() and resetMatrix() affect the camera.
rob@100:      * <b>beginCamera()</b> should always be used with a following <b>endCamera()</b> and pairs of <b>beginCamera()</b> and
rob@100:      * <b>endCamera()</b> cannot be nested.
rob@100:      *
rob@100:      * @see camera
rob@100:      * @see endCamera
rob@100:      * @see applyMatrix
rob@100:      * @see resetMatrix
rob@100:      * @see translate
rob@100:      * @see rotate
rob@100:      * @see scale
rob@100:      */
rob@100:     Drawing2D.prototype.beginCamera = function() {
rob@100:       throw ("beginCamera() is not available in 2D mode");
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.beginCamera = function() {
rob@100:       if (manipulatingCamera) {
rob@100:         throw ("You cannot call beginCamera() again before calling endCamera()");
rob@100:       }
rob@100:       manipulatingCamera = true;
rob@100:       modelView = cameraInv;
rob@100:       modelViewInv = cam;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The <b>beginCamera()</b> and <b>endCamera()</b> functions enable advanced customization of the camera space.
rob@100:      * Please see the reference for <b>beginCamera()</b> for a description of how the functions are used.
rob@100:      *
rob@100:      * @see beginCamera
rob@100:      */
rob@100:     Drawing2D.prototype.endCamera = function() {
rob@100:       throw ("endCamera() is not available in 2D mode");
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.endCamera = function() {
rob@100:       if (!manipulatingCamera) {
rob@100:         throw ("You cannot call endCamera() before calling beginCamera()");
rob@100:       }
rob@100:       modelView.set(cam);
rob@100:       modelViewInv.set(cameraInv);
rob@100:       manipulatingCamera = false;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the position of the camera through setting the eye position, the center of the scene, and which axis is facing
rob@100:      * upward. Moving the eye position and the direction it is pointing (the center of the scene) allows the images to be
rob@100:      * seen from different angles. The version without any parameters sets the camera to the default position, pointing to
rob@100:      * the center of the display window with the Y axis as up. The default values are camera(width/2.0, height/2.0,
rob@100:      * (height/2.0) / tan(PI*60.0 / 360.0), width/2.0, height/2.0, 0, 0, 1, 0). This function is similar to gluLookAt()
rob@100:      * in OpenGL, but it first clears the current camera settings.
rob@100:      *
rob@100:      * @param {float} eyeX    x-coordinate for the eye
rob@100:      * @param {float} eyeY    y-coordinate for the eye
rob@100:      * @param {float} eyeZ    z-coordinate for the eye
rob@100:      * @param {float} centerX x-coordinate for the center of the scene
rob@100:      * @param {float} centerY y-coordinate for the center of the scene
rob@100:      * @param {float} centerZ z-coordinate for the center of the scene
rob@100:      * @param {float} upX     usually 0.0, 1.0, -1.0
rob@100:      * @param {float} upY     usually 0.0, 1.0, -1.0
rob@100:      * @param {float} upZ     usually 0.0, 1.0, -1.0
rob@100:      *
rob@100:      * @see beginCamera
rob@100:      * @see endCamera
rob@100:      * @see frustum
rob@100:      */
rob@100:     p.camera = function(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) {
rob@100:       if (eyeX === undef) {
rob@100:         // Workaround if createGraphics is used.
rob@100:         cameraX = p.width / 2;
rob@100:         cameraY = p.height / 2;
rob@100:         cameraZ = cameraY / Math.tan(cameraFOV / 2);
rob@100:         eyeX = cameraX;
rob@100:         eyeY = cameraY;
rob@100:         eyeZ = cameraZ;
rob@100:         centerX = cameraX;
rob@100:         centerY = cameraY;
rob@100:         centerZ = 0;
rob@100:         upX = 0;
rob@100:         upY = 1;
rob@100:         upZ = 0;
rob@100:       }
rob@100: 
rob@100:       var z = new PVector(eyeX - centerX, eyeY - centerY, eyeZ - centerZ);
rob@100:       var y = new PVector(upX, upY, upZ);
rob@100:       z.normalize();
rob@100:       var x = PVector.cross(y, z);
rob@100:       y = PVector.cross(z, x);
rob@100:       x.normalize();
rob@100:       y.normalize();
rob@100: 
rob@100:       var xX = x.x,
rob@100:           xY = x.y,
rob@100:           xZ = x.z;
rob@100: 
rob@100:       var yX = y.x,
rob@100:           yY = y.y,
rob@100:           yZ = y.z;
rob@100: 
rob@100:       var zX = z.x,
rob@100:           zY = z.y,
rob@100:           zZ = z.z;
rob@100: 
rob@100:       cam.set(xX, xY, xZ, 0, yX, yY, yZ, 0, zX, zY, zZ, 0, 0, 0, 0, 1);
rob@100: 
rob@100:       cam.translate(-eyeX, -eyeY, -eyeZ);
rob@100: 
rob@100:       cameraInv.reset();
rob@100:       cameraInv.invApply(xX, xY, xZ, 0, yX, yY, yZ, 0, zX, zY, zZ, 0, 0, 0, 0, 1);
rob@100: 
rob@100:       cameraInv.translate(eyeX, eyeY, eyeZ);
rob@100: 
rob@100:       modelView.set(cam);
rob@100:       modelViewInv.set(cameraInv);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets a perspective projection applying foreshortening, making distant objects appear smaller than closer ones. The
rob@100:      * parameters define a viewing volume with the shape of truncated pyramid. Objects near to the front of the volume appear
rob@100:      * their actual size, while farther objects appear smaller. This projection simulates the perspective of the world more
rob@100:      * accurately than orthographic projection. The version of perspective without parameters sets the default perspective and
rob@100:      * the version with four parameters allows the programmer to set the area precisely. The default values are:
rob@100:      * perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0) where cameraZ is ((height/2.0) / tan(PI*60.0/360.0));
rob@100:      *
rob@100:      * @param {float} fov     field-of-view angle (in radians) for vertical direction
rob@100:      * @param {float} aspect  ratio of width to height
rob@100:      * @param {float} zNear   z-position of nearest clipping plane
rob@100:      * @param {float} zFar    z-positions of farthest clipping plane
rob@100:      */
rob@100:     p.perspective = function(fov, aspect, near, far) {
rob@100:       if (arguments.length === 0) {
rob@100:         //in case canvas is resized
rob@100:         cameraY = curElement.height / 2;
rob@100:         cameraZ = cameraY / Math.tan(cameraFOV / 2);
rob@100:         cameraNear = cameraZ / 10;
rob@100:         cameraFar = cameraZ * 10;
rob@100:         cameraAspect = p.width / p.height;
rob@100:         fov = cameraFOV;
rob@100:         aspect = cameraAspect;
rob@100:         near = cameraNear;
rob@100:         far = cameraFar;
rob@100:       }
rob@100: 
rob@100:       var yMax, yMin, xMax, xMin;
rob@100:       yMax = near * Math.tan(fov / 2);
rob@100:       yMin = -yMax;
rob@100:       xMax = yMax * aspect;
rob@100:       xMin = yMin * aspect;
rob@100:       p.frustum(xMin, xMax, yMin, yMax, near, far);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets a perspective matrix defined through the parameters. Works like glFrustum, except it wipes out the current
rob@100:      * perspective matrix rather than muliplying itself with it.
rob@100:      *
rob@100:      * @param {float} left   left coordinate of the clipping plane
rob@100:      * @param {float} right  right coordinate of the clipping plane
rob@100:      * @param {float} bottom bottom coordinate of the clipping plane
rob@100:      * @param {float} top    top coordinate of the clipping plane
rob@100:      * @param {float} near   near coordinate of the clipping plane
rob@100:      * @param {float} far    far coordinate of the clipping plane
rob@100:      *
rob@100:      * @see beginCamera
rob@100:      * @see camera
rob@100:      * @see endCamera
rob@100:      * @see perspective
rob@100:      */
rob@100:     Drawing2D.prototype.frustum = function() {
rob@100:       throw("Processing.js: frustum() is not supported in 2D mode");
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.frustum = function(left, right, bottom, top, near, far) {
rob@100:       frustumMode = true;
rob@100:       projection = new PMatrix3D();
rob@100:       projection.set((2 * near) / (right - left), 0, (right + left) / (right - left),
rob@100:                      0, 0, (2 * near) / (top - bottom), (top + bottom) / (top - bottom),
rob@100:                      0, 0, 0, -(far + near) / (far - near), -(2 * far * near) / (far - near),
rob@100:                      0, 0, -1, 0);
rob@100:       var proj = new PMatrix3D();
rob@100:       proj.set(projection);
rob@100:       proj.transpose();
rob@100:       curContext.useProgram(programObject2D);
rob@100:       uniformMatrix("projection2d", programObject2D, "uProjection", false, proj.array());
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformMatrix("projection3d", programObject3D, "uProjection", false, proj.array());
rob@100:       curContext.useProgram(programObjectUnlitShape);
rob@100:       uniformMatrix("uProjectionUS", programObjectUnlitShape, "uProjection", false, proj.array());
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets an orthographic projection and defines a parallel clipping volume. All objects with the same dimension appear
rob@100:      * the same size, regardless of whether they are near or far from the camera. The parameters to this function specify
rob@100:      * the clipping volume where left and right are the minimum and maximum x values, top and bottom are the minimum and
rob@100:      * maximum y values, and near and far are the minimum and maximum z values. If no parameters are given, the default
rob@100:      * is used: ortho(0, width, 0, height, -10, 10).
rob@100:      *
rob@100:      * @param {float} left   left plane of the clipping volume
rob@100:      * @param {float} right  right plane of the clipping volume
rob@100:      * @param {float} bottom bottom plane of the clipping volume
rob@100:      * @param {float} top    top plane of the clipping volume
rob@100:      * @param {float} near   maximum distance from the origin to the viewer
rob@100:      * @param {float} far    maximum distance from the origin away from the viewer
rob@100:      */
rob@100:     p.ortho = function(left, right, bottom, top, near, far) {
rob@100:       if (arguments.length === 0) {
rob@100:         left = 0;
rob@100:         right = p.width;
rob@100:         bottom = 0;
rob@100:         top = p.height;
rob@100:         near = -10;
rob@100:         far = 10;
rob@100:       }
rob@100: 
rob@100:       var x = 2 / (right - left);
rob@100:       var y = 2 / (top - bottom);
rob@100:       var z = -2 / (far - near);
rob@100: 
rob@100:       var tx = -(right + left) / (right - left);
rob@100:       var ty = -(top + bottom) / (top - bottom);
rob@100:       var tz = -(far + near) / (far - near);
rob@100: 
rob@100:       projection = new PMatrix3D();
rob@100:       projection.set(x, 0, 0, tx, 0, y, 0, ty, 0, 0, z, tz, 0, 0, 0, 1);
rob@100: 
rob@100:       var proj = new PMatrix3D();
rob@100:       proj.set(projection);
rob@100:       proj.transpose();
rob@100:       curContext.useProgram(programObject2D);
rob@100:       uniformMatrix("projection2d", programObject2D, "uProjection", false, proj.array());
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformMatrix("projection3d", programObject3D, "uProjection", false, proj.array());
rob@100:       curContext.useProgram(programObjectUnlitShape);
rob@100:       uniformMatrix("uProjectionUS", programObjectUnlitShape, "uProjection", false, proj.array());
rob@100:       frustumMode = false;
rob@100:     };
rob@100:     /**
rob@100:      * The printProjection() prints the current projection matrix to the text window.
rob@100:      */
rob@100:     p.printProjection = function() {
rob@100:       projection.print();
rob@100:     };
rob@100:     /**
rob@100:      * The printCamera() function prints the current camera matrix.
rob@100:      */
rob@100:     p.printCamera = function() {
rob@100:       cam.print();
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Shapes
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     /**
rob@100:      * The box() function renders a box. A box is an extruded rectangle. A box with equal dimension on all sides is a cube.
rob@100:      * Calling this function with only one parameter will create a cube.
rob@100:      *
rob@100:      * @param {int|float} w  dimension of the box in the x-dimension
rob@100:      * @param {int|float} h  dimension of the box in the y-dimension
rob@100:      * @param {int|float} d  dimension of the box in the z-dimension
rob@100:      */
rob@100:     Drawing2D.prototype.box = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.box = function(w, h, d) {
rob@100:       // user can uniformly scale the box by
rob@100:       // passing in only one argument.
rob@100:       if (!h || !d) {
rob@100:         h = d = w;
rob@100:       }
rob@100: 
rob@100:       // Modeling transformation
rob@100:       var model = new PMatrix3D();
rob@100:       model.scale(w, h, d);
rob@100: 
rob@100:       // Viewing transformation needs to have Y flipped
rob@100:       // becuase that's what Processing does.
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       if (doFill) {
rob@100:         curContext.useProgram(programObject3D);
rob@100:         uniformMatrix("model3d", programObject3D, "uModel", false, model.array());
rob@100:         uniformMatrix("view3d", programObject3D, "uView", false, view.array());
rob@100:         // Fix stitching problems. (lines get occluded by triangles
rob@100:         // since they share the same depth values). This is not entirely
rob@100:         // working, but it's a start for drawing the outline. So
rob@100:         // developers can start playing around with styles.
rob@100:         curContext.enable(curContext.POLYGON_OFFSET_FILL);
rob@100:         curContext.polygonOffset(1, 1);
rob@100:         uniformf("color3d", programObject3D, "uColor", fillStyle);
rob@100: 
rob@100:         // Calculating the normal matrix can be expensive, so only
rob@100:         // do it if it's necessary.
rob@100:         if(lightCount > 0){
rob@100:           // Create the normal transformation matrix.
rob@100:           var v = new PMatrix3D();
rob@100:           v.set(view);
rob@100: 
rob@100:           var m = new PMatrix3D();
rob@100:           m.set(model);
rob@100: 
rob@100:           v.mult(m);
rob@100: 
rob@100:           var normalMatrix = new PMatrix3D();
rob@100:           normalMatrix.set(v);
rob@100:           normalMatrix.invert();
rob@100:           normalMatrix.transpose();
rob@100: 
rob@100:           uniformMatrix("uNormalTransform3d", programObject3D, "uNormalTransform", false, normalMatrix.array());
rob@100:           vertexAttribPointer("aNormal3d", programObject3D, "aNormal", 3, boxNormBuffer);
rob@100:         }
rob@100:         else{
rob@100:           disableVertexAttribPointer("aNormal3d", programObject3D, "aNormal");
rob@100:         }
rob@100: 
rob@100:         vertexAttribPointer("aVertex3d", programObject3D, "aVertex", 3, boxBuffer);
rob@100: 
rob@100:         // Turn off per vertex colors.
rob@100:         disableVertexAttribPointer("aColor3d", programObject3D, "aColor");
rob@100:         disableVertexAttribPointer("aTexture3d", programObject3D, "aTexture");
rob@100: 
rob@100:         curContext.drawArrays(curContext.TRIANGLES, 0, boxVerts.length / 3);
rob@100:         curContext.disable(curContext.POLYGON_OFFSET_FILL);
rob@100:       }
rob@100: 
rob@100:       // Draw the box outline.
rob@100:       if (lineWidth > 0 && doStroke) {
rob@100:         curContext.useProgram(programObject2D);
rob@100:         uniformMatrix("uModel2d", programObject2D, "uModel", false, model.array());
rob@100:         uniformMatrix("uView2d", programObject2D, "uView", false, view.array());
rob@100:         uniformf("uColor2d", programObject2D, "uColor", strokeStyle);
rob@100:         uniformi("uIsDrawingText2d", programObject2D, "uIsDrawingText", false);
rob@100:         vertexAttribPointer("vertex2d", programObject2D, "aVertex", 3, boxOutlineBuffer);
rob@100:         disableVertexAttribPointer("aTextureCoord2d", programObject2D, "aTextureCoord");
rob@100:         curContext.drawArrays(curContext.LINES, 0, boxOutlineVerts.length / 3);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The initSphere() function is a helper function used by <b>sphereDetail()</b>
rob@100:      * This function creates and stores sphere vertices every time the user changes sphere detail.
rob@100:      *
rob@100:      * @see #sphereDetail
rob@100:      */
rob@100:     var initSphere = function() {
rob@100:       var i;
rob@100:       sphereVerts = [];
rob@100: 
rob@100:       for (i = 0; i < sphereDetailU; i++) {
rob@100:         sphereVerts.push(0);
rob@100:         sphereVerts.push(-1);
rob@100:         sphereVerts.push(0);
rob@100:         sphereVerts.push(sphereX[i]);
rob@100:         sphereVerts.push(sphereY[i]);
rob@100:         sphereVerts.push(sphereZ[i]);
rob@100:       }
rob@100:       sphereVerts.push(0);
rob@100:       sphereVerts.push(-1);
rob@100:       sphereVerts.push(0);
rob@100:       sphereVerts.push(sphereX[0]);
rob@100:       sphereVerts.push(sphereY[0]);
rob@100:       sphereVerts.push(sphereZ[0]);
rob@100: 
rob@100:       var v1, v11, v2;
rob@100: 
rob@100:       // middle rings
rob@100:       var voff = 0;
rob@100:       for (i = 2; i < sphereDetailV; i++) {
rob@100:         v1 = v11 = voff;
rob@100:         voff += sphereDetailU;
rob@100:         v2 = voff;
rob@100:         for (var j = 0; j < sphereDetailU; j++) {
rob@100:           sphereVerts.push(sphereX[v1]);
rob@100:           sphereVerts.push(sphereY[v1]);
rob@100:           sphereVerts.push(sphereZ[v1++]);
rob@100:           sphereVerts.push(sphereX[v2]);
rob@100:           sphereVerts.push(sphereY[v2]);
rob@100:           sphereVerts.push(sphereZ[v2++]);
rob@100:         }
rob@100: 
rob@100:         // close each ring
rob@100:         v1 = v11;
rob@100:         v2 = voff;
rob@100: 
rob@100:         sphereVerts.push(sphereX[v1]);
rob@100:         sphereVerts.push(sphereY[v1]);
rob@100:         sphereVerts.push(sphereZ[v1]);
rob@100:         sphereVerts.push(sphereX[v2]);
rob@100:         sphereVerts.push(sphereY[v2]);
rob@100:         sphereVerts.push(sphereZ[v2]);
rob@100:       }
rob@100: 
rob@100:       // add the northern cap
rob@100:       for (i = 0; i < sphereDetailU; i++) {
rob@100:         v2 = voff + i;
rob@100: 
rob@100:         sphereVerts.push(sphereX[v2]);
rob@100:         sphereVerts.push(sphereY[v2]);
rob@100:         sphereVerts.push(sphereZ[v2]);
rob@100:         sphereVerts.push(0);
rob@100:         sphereVerts.push(1);
rob@100:         sphereVerts.push(0);
rob@100:       }
rob@100: 
rob@100:       sphereVerts.push(sphereX[voff]);
rob@100:       sphereVerts.push(sphereY[voff]);
rob@100:       sphereVerts.push(sphereZ[voff]);
rob@100:       sphereVerts.push(0);
rob@100:       sphereVerts.push(1);
rob@100:       sphereVerts.push(0);
rob@100: 
rob@100:       //set the buffer data
rob@100:       curContext.bindBuffer(curContext.ARRAY_BUFFER, sphereBuffer);
rob@100:       curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array(sphereVerts), curContext.STATIC_DRAW);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The sphereDetail() function controls the detail used to render a sphere by adjusting the number of
rob@100:      * vertices of the sphere mesh. The default resolution is 30, which creates
rob@100:      * a fairly detailed sphere definition with vertices every 360/30 = 12
rob@100:      * degrees. If you're going to render a great number of spheres per frame,
rob@100:      * it is advised to reduce the level of detail using this function.
rob@100:      * The setting stays active until <b>sphereDetail()</b> is called again with
rob@100:      * a new parameter and so should <i>not</i> be called prior to every
rob@100:      * <b>sphere()</b> statement, unless you wish to render spheres with
rob@100:      * different settings, e.g. using less detail for smaller spheres or ones
rob@100:      * further away from the camera. To control the detail of the horizontal
rob@100:      * and vertical resolution independently, use the version of the functions
rob@100:      * with two parameters. Calling this function with one parameter sets the number of segments
rob@100:      *(minimum of 3) used per full circle revolution. This is equivalent to calling the function with
rob@100:      * two identical values.
rob@100:      *
rob@100:      * @param {int} ures    number of segments used horizontally (longitudinally) per full circle revolution
rob@100:      * @param {int} vres    number of segments used vertically (latitudinally) from top to bottom
rob@100:      *
rob@100:      * @see #sphere()
rob@100:      */
rob@100:     p.sphereDetail = function(ures, vres) {
rob@100:       var i;
rob@100: 
rob@100:       if (arguments.length === 1) {
rob@100:         ures = vres = arguments[0];
rob@100:       }
rob@100: 
rob@100:       if (ures < 3) {
rob@100:         ures = 3;
rob@100:       } // force a minimum res
rob@100:       if (vres < 2) {
rob@100:         vres = 2;
rob@100:       } // force a minimum res
rob@100:       // if it hasn't changed do nothing
rob@100:       if ((ures === sphereDetailU) && (vres === sphereDetailV)) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       var delta = PConstants.SINCOS_LENGTH / ures;
rob@100:       var cx = new Float32Array(ures);
rob@100:       var cz = new Float32Array(ures);
rob@100:       // calc unit circle in XZ plane
rob@100:       for (i = 0; i < ures; i++) {
rob@100:         cx[i] = cosLUT[((i * delta) % PConstants.SINCOS_LENGTH) | 0];
rob@100:         cz[i] = sinLUT[((i * delta) % PConstants.SINCOS_LENGTH) | 0];
rob@100:       }
rob@100: 
rob@100:       // computing vertexlist
rob@100:       // vertexlist starts at south pole
rob@100:       var vertCount = ures * (vres - 1) + 2;
rob@100:       var currVert = 0;
rob@100: 
rob@100:       // re-init arrays to store vertices
rob@100:       sphereX = new Float32Array(vertCount);
rob@100:       sphereY = new Float32Array(vertCount);
rob@100:       sphereZ = new Float32Array(vertCount);
rob@100: 
rob@100:       var angle_step = (PConstants.SINCOS_LENGTH * 0.5) / vres;
rob@100:       var angle = angle_step;
rob@100: 
rob@100:       // step along Y axis
rob@100:       for (i = 1; i < vres; i++) {
rob@100:         var curradius = sinLUT[(angle % PConstants.SINCOS_LENGTH) | 0];
rob@100:         var currY = -cosLUT[(angle % PConstants.SINCOS_LENGTH) | 0];
rob@100:         for (var j = 0; j < ures; j++) {
rob@100:           sphereX[currVert] = cx[j] * curradius;
rob@100:           sphereY[currVert] = currY;
rob@100:           sphereZ[currVert++] = cz[j] * curradius;
rob@100:         }
rob@100:         angle += angle_step;
rob@100:       }
rob@100:       sphereDetailU = ures;
rob@100:       sphereDetailV = vres;
rob@100: 
rob@100:       // make the sphere verts and norms
rob@100:       initSphere();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The sphere() function draws a sphere with radius r centered at coordinate 0, 0, 0.
rob@100:      * A sphere is a hollow ball made from tessellated triangles.
rob@100:      *
rob@100:      * @param {int|float} r the radius of the sphere
rob@100:      */
rob@100:     Drawing2D.prototype.sphere = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.sphere = function() {
rob@100:       var sRad = arguments[0];
rob@100: 
rob@100:       if ((sphereDetailU < 3) || (sphereDetailV < 2)) {
rob@100:         p.sphereDetail(30);
rob@100:       }
rob@100: 
rob@100:       // Modeling transformation.
rob@100:       var model = new PMatrix3D();
rob@100:       model.scale(sRad, sRad, sRad);
rob@100: 
rob@100:       // viewing transformation needs to have Y flipped
rob@100:       // becuase that's what Processing does.
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       if (doFill) {
rob@100:         // Calculating the normal matrix can be expensive, so only
rob@100:         // do it if it's necessary.
rob@100:         if(lightCount > 0){
rob@100:           // Create a normal transformation matrix.
rob@100:           var v = new PMatrix3D();
rob@100:           v.set(view);
rob@100: 
rob@100:           var m = new PMatrix3D();
rob@100:           m.set(model);
rob@100: 
rob@100:           v.mult(m);
rob@100: 
rob@100:           var normalMatrix = new PMatrix3D();
rob@100:           normalMatrix.set(v);
rob@100:           normalMatrix.invert();
rob@100:           normalMatrix.transpose();
rob@100: 
rob@100:           uniformMatrix("uNormalTransform3d", programObject3D, "uNormalTransform", false, normalMatrix.array());
rob@100:           vertexAttribPointer("aNormal3d", programObject3D, "aNormal", 3, sphereBuffer);
rob@100:         }
rob@100:         else{
rob@100:           disableVertexAttribPointer("aNormal3d", programObject3D, "aNormal");
rob@100:         }
rob@100: 
rob@100:         curContext.useProgram(programObject3D);
rob@100:         disableVertexAttribPointer("aTexture3d", programObject3D, "aTexture");
rob@100: 
rob@100:         uniformMatrix("uModel3d", programObject3D, "uModel", false, model.array());
rob@100:         uniformMatrix("uView3d", programObject3D, "uView", false, view.array());
rob@100:         vertexAttribPointer("aVertex3d", programObject3D, "aVertex", 3, sphereBuffer);
rob@100: 
rob@100:         // Turn off per vertex colors.
rob@100:         disableVertexAttribPointer("aColor3d", programObject3D, "aColor");
rob@100: 
rob@100:         // fix stitching problems. (lines get occluded by triangles
rob@100:         // since they share the same depth values). This is not entirely
rob@100:         // working, but it's a start for drawing the outline. So
rob@100:         // developers can start playing around with styles.
rob@100:         curContext.enable(curContext.POLYGON_OFFSET_FILL);
rob@100:         curContext.polygonOffset(1, 1);
rob@100:         uniformf("uColor3d", programObject3D, "uColor", fillStyle);
rob@100:         curContext.drawArrays(curContext.TRIANGLE_STRIP, 0, sphereVerts.length / 3);
rob@100:         curContext.disable(curContext.POLYGON_OFFSET_FILL);
rob@100:       }
rob@100: 
rob@100:       // Draw the sphere outline.
rob@100:       if (lineWidth > 0 && doStroke) {
rob@100:         curContext.useProgram(programObject2D);
rob@100:         uniformMatrix("uModel2d", programObject2D, "uModel", false, model.array());
rob@100:         uniformMatrix("uView2d", programObject2D, "uView", false, view.array());
rob@100:         vertexAttribPointer("aVertex2d", programObject2D, "aVertex", 3, sphereBuffer);
rob@100:         disableVertexAttribPointer("aTextureCoord2d", programObject2D, "aTextureCoord");
rob@100:         uniformf("uColor2d", programObject2D, "uColor", strokeStyle);
rob@100:         uniformi("uIsDrawingText", programObject2D, "uIsDrawingText", false);
rob@100:         curContext.drawArrays(curContext.LINE_STRIP, 0, sphereVerts.length / 3);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Coordinates
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * Returns the three-dimensional X, Y, Z position in model space. This returns
rob@100:      * the X value for a given coordinate based on the current set of transformations
rob@100:      * (scale, rotate, translate, etc.) The X value can be used to place an object
rob@100:      * in space relative to the location of the original point once the transformations
rob@100:      * are no longer in use.<br />
rob@100:      * <br />
rob@100:      *
rob@100:      * @param {int | float} x 3D x coordinate to be mapped
rob@100:      * @param {int | float} y 3D y coordinate to be mapped
rob@100:      * @param {int | float} z 3D z coordinate to be mapped
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see modelY
rob@100:      * @see modelZ
rob@100:     */
rob@100:     p.modelX = function(x, y, z) {
rob@100:       var mv = modelView.array();
rob@100:       var ci = cameraInv.array();
rob@100: 
rob@100:       var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3];
rob@100:       var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7];
rob@100:       var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11];
rob@100:       var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15];
rob@100: 
rob@100:       var ox = ci[0] * ax + ci[1] * ay + ci[2] * az + ci[3] * aw;
rob@100:       var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw;
rob@100: 
rob@100:       return (ow !== 0) ? ox / ow : ox;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Returns the three-dimensional X, Y, Z position in model space. This returns
rob@100:      * the Y value for a given coordinate based on the current set of transformations
rob@100:      * (scale, rotate, translate, etc.) The Y value can be used to place an object in
rob@100:      * space relative to the location of the original point once the transformations
rob@100:      * are no longer in use.<br />
rob@100:      * <br />
rob@100:      *
rob@100:      * @param {int | float} x 3D x coordinate to be mapped
rob@100:      * @param {int | float} y 3D y coordinate to be mapped
rob@100:      * @param {int | float} z 3D z coordinate to be mapped
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see modelX
rob@100:      * @see modelZ
rob@100:     */
rob@100:     p.modelY = function(x, y, z) {
rob@100:       var mv = modelView.array();
rob@100:       var ci = cameraInv.array();
rob@100: 
rob@100:       var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3];
rob@100:       var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7];
rob@100:       var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11];
rob@100:       var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15];
rob@100: 
rob@100:       var oy = ci[4] * ax + ci[5] * ay + ci[6] * az + ci[7] * aw;
rob@100:       var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw;
rob@100: 
rob@100:       return (ow !== 0) ? oy / ow : oy;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Returns the three-dimensional X, Y, Z position in model space. This returns
rob@100:      * the Z value for a given coordinate based on the current set of transformations
rob@100:      * (scale, rotate, translate, etc.) The Z value can be used to place an object in
rob@100:      * space relative to the location of the original point once the transformations
rob@100:      * are no longer in use.
rob@100:      *
rob@100:      * @param {int | float} x 3D x coordinate to be mapped
rob@100:      * @param {int | float} y 3D y coordinate to be mapped
rob@100:      * @param {int | float} z 3D z coordinate to be mapped
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see modelX
rob@100:      * @see modelY
rob@100:     */
rob@100:     p.modelZ = function(x, y, z) {
rob@100:       var mv = modelView.array();
rob@100:       var ci = cameraInv.array();
rob@100: 
rob@100:       var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3];
rob@100:       var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7];
rob@100:       var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11];
rob@100:       var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15];
rob@100: 
rob@100:       var oz = ci[8] * ax + ci[9] * ay + ci[10] * az + ci[11] * aw;
rob@100:       var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw;
rob@100: 
rob@100:       return (ow !== 0) ? oz / ow : oz;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Material Properties
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * Sets the ambient reflectance for shapes drawn to the screen. This is
rob@100:      * combined with the ambient light component of environment. The color
rob@100:      * components set through the parameters define the reflectance. For example in
rob@100:      * the default color mode, setting v1=255, v2=126, v3=0, would cause all the
rob@100:      * red light to reflect and half of the green light to reflect. Used in combination
rob@100:      * with <b>emissive()</b>, <b>specular()</b>, and <b>shininess()</b> in setting
rob@100:      * the materal properties of shapes.
rob@100:      *
rob@100:      * @param {int | float} gray
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see emissive
rob@100:      * @see specular
rob@100:      * @see shininess
rob@100:     */
rob@100:     Drawing2D.prototype.ambient = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.ambient = function(v1, v2, v3) {
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformi("uUsingMat3d", programObject3D, "uUsingMat", true);
rob@100:       var col = p.color(v1, v2, v3);
rob@100:       uniformf("uMaterialAmbient3d", programObject3D, "uMaterialAmbient", p.color.toGLArray(col).slice(0, 3));
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the emissive color of the material used for drawing shapes
rob@100:      * drawn to the screen. Used in combination with ambient(), specular(),
rob@100:      * and shininess() in setting the material properties of shapes.
rob@100:      *
rob@100:      * Can be called in the following ways:
rob@100:      *
rob@100:      * emissive(gray)
rob@100:      * @param {int | float} gray number specifying value between white and black
rob@100:      *
rob@100:      * emissive(color)
rob@100:      * @param {color} color any value of the color datatype
rob@100:      *
rob@100:      * emissive(v1, v2, v3)
rob@100:      * @param {int | float} v1 red or hue value
rob@100:      * @param {int | float} v2 green or saturation value
rob@100:      * @param {int | float} v3 blue or brightness value
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see ambient
rob@100:      * @see specular
rob@100:      * @see shininess
rob@100:     */
rob@100:     Drawing2D.prototype.emissive = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.emissive = function(v1, v2, v3) {
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformi("uUsingMat3d", programObject3D, "uUsingMat", true);
rob@100:       var col = p.color(v1, v2, v3);
rob@100:       uniformf("uMaterialEmissive3d", programObject3D, "uMaterialEmissive", p.color.toGLArray(col).slice(0, 3));
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the amount of gloss in the surface of shapes. Used in combination with
rob@100:      * <b>ambient()</b>, <b>specular()</b>, and <b>emissive()</b> in setting the
rob@100:      * material properties of shapes.
rob@100:      *
rob@100:      * @param {float} shine degree of shininess
rob@100:      *
rob@100:      * @returns none
rob@100:     */
rob@100:     Drawing2D.prototype.shininess = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.shininess = function(shine) {
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformi("uUsingMat3d", programObject3D, "uUsingMat", true);
rob@100:       uniformf("uShininess3d", programObject3D, "uShininess", shine);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the specular color of the materials used for shapes drawn to the screen,
rob@100:      * which sets the color of hightlights. Specular refers to light which bounces
rob@100:      * off a surface in a perferred direction (rather than bouncing in all directions
rob@100:      * like a diffuse light). Used in combination with emissive(), ambient(), and
rob@100:      * shininess() in setting the material properties of shapes.
rob@100:      *
rob@100:      * Can be called in the following ways:
rob@100:      *
rob@100:      * specular(gray)
rob@100:      * @param {int | float} gray number specifying value between white and black
rob@100:      *
rob@100:      * specular(gray, alpha)
rob@100:      * @param {int | float} gray number specifying value between white and black
rob@100:      * @param {int | float} alpha opacity
rob@100:      *
rob@100:      * specular(color)
rob@100:      * @param {color} color any value of the color datatype
rob@100:      *
rob@100:      * specular(v1, v2, v3)
rob@100:      * @param {int | float} v1 red or hue value
rob@100:      * @param {int | float} v2 green or saturation value
rob@100:      * @param {int | float} v3 blue or brightness value
rob@100:      *
rob@100:      * specular(v1, v2, v3, alpha)
rob@100:      * @param {int | float} v1 red or hue value
rob@100:      * @param {int | float} v2 green or saturation value
rob@100:      * @param {int | float} v3 blue or brightness value
rob@100:      * @param {int | float} alpha opacity
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see ambient
rob@100:      * @see emissive
rob@100:      * @see shininess
rob@100:     */
rob@100:     Drawing2D.prototype.specular = DrawingShared.prototype.a3DOnlyFunction;
rob@100: 
rob@100:     Drawing3D.prototype.specular = function(v1, v2, v3) {
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformi("uUsingMat3d", programObject3D, "uUsingMat", true);
rob@100:       var col = p.color(v1, v2, v3);
rob@100:       uniformf("uMaterialSpecular3d", programObject3D, "uMaterialSpecular", p.color.toGLArray(col).slice(0, 3));
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Coordinates
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * Takes a three-dimensional X, Y, Z position and returns the X value for
rob@100:      * where it will appear on a (two-dimensional) screen.
rob@100:      *
rob@100:      * @param {int | float} x 3D x coordinate to be mapped
rob@100:      * @param {int | float} y 3D y coordinate to be mapped
rob@100:      * @param {int | float} z 3D z optional coordinate to be mapped
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see screenY
rob@100:      * @see screenZ
rob@100:     */
rob@100:     p.screenX = function( x, y, z ) {
rob@100:       var mv = modelView.array();
rob@100:       if( mv.length === 16 )
rob@100:       {
rob@100:         var ax = mv[ 0]*x + mv[ 1]*y + mv[ 2]*z + mv[ 3];
rob@100:         var ay = mv[ 4]*x + mv[ 5]*y + mv[ 6]*z + mv[ 7];
rob@100:         var az = mv[ 8]*x + mv[ 9]*y + mv[10]*z + mv[11];
rob@100:         var aw = mv[12]*x + mv[13]*y + mv[14]*z + mv[15];
rob@100: 
rob@100:         var pj = projection.array();
rob@100: 
rob@100:         var ox = pj[ 0]*ax + pj[ 1]*ay + pj[ 2]*az + pj[ 3]*aw;
rob@100:         var ow = pj[12]*ax + pj[13]*ay + pj[14]*az + pj[15]*aw;
rob@100: 
rob@100:         if ( ow !== 0 ){
rob@100:           ox /= ow;
rob@100:         }
rob@100:         return p.width * ( 1 + ox ) / 2.0;
rob@100:       }
rob@100:       // We assume that we're in 2D
rob@100:       return modelView.multX(x, y);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Takes a three-dimensional X, Y, Z position and returns the Y value for
rob@100:      * where it will appear on a (two-dimensional) screen.
rob@100:      *
rob@100:      * @param {int | float} x 3D x coordinate to be mapped
rob@100:      * @param {int | float} y 3D y coordinate to be mapped
rob@100:      * @param {int | float} z 3D z optional coordinate to be mapped
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see screenX
rob@100:      * @see screenZ
rob@100:     */
rob@100:     p.screenY = function screenY( x, y, z ) {
rob@100:       var mv = modelView.array();
rob@100:       if( mv.length === 16 ) {
rob@100:         var ax = mv[ 0]*x + mv[ 1]*y + mv[ 2]*z + mv[ 3];
rob@100:         var ay = mv[ 4]*x + mv[ 5]*y + mv[ 6]*z + mv[ 7];
rob@100:         var az = mv[ 8]*x + mv[ 9]*y + mv[10]*z + mv[11];
rob@100:         var aw = mv[12]*x + mv[13]*y + mv[14]*z + mv[15];
rob@100: 
rob@100:         var pj = projection.array();
rob@100: 
rob@100:         var oy = pj[ 4]*ax + pj[ 5]*ay + pj[ 6]*az + pj[ 7]*aw;
rob@100:         var ow = pj[12]*ax + pj[13]*ay + pj[14]*az + pj[15]*aw;
rob@100: 
rob@100:         if ( ow !== 0 ){
rob@100:           oy /= ow;
rob@100:         }
rob@100:         return p.height * ( 1 + oy ) / 2.0;
rob@100:       }
rob@100:       // We assume that we're in 2D
rob@100:       return modelView.multY(x, y);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Takes a three-dimensional X, Y, Z position and returns the Z value for
rob@100:      * where it will appear on a (two-dimensional) screen.
rob@100:      *
rob@100:      * @param {int | float} x 3D x coordinate to be mapped
rob@100:      * @param {int | float} y 3D y coordinate to be mapped
rob@100:      * @param {int | float} z 3D z coordinate to be mapped
rob@100:      *
rob@100:      * @returns {float}
rob@100:      *
rob@100:      * @see screenX
rob@100:      * @see screenY
rob@100:     */
rob@100:     p.screenZ = function screenZ( x, y, z ) {
rob@100:       var mv = modelView.array();
rob@100:       if( mv.length !== 16 ) {
rob@100:         return 0;
rob@100:       }
rob@100: 
rob@100:       var pj = projection.array();
rob@100: 
rob@100:       var ax = mv[ 0]*x + mv[ 1]*y + mv[ 2]*z + mv[ 3];
rob@100:       var ay = mv[ 4]*x + mv[ 5]*y + mv[ 6]*z + mv[ 7];
rob@100:       var az = mv[ 8]*x + mv[ 9]*y + mv[10]*z + mv[11];
rob@100:       var aw = mv[12]*x + mv[13]*y + mv[14]*z + mv[15];
rob@100: 
rob@100:       var oz = pj[ 8]*ax + pj[ 9]*ay + pj[10]*az + pj[11]*aw;
rob@100:       var ow = pj[12]*ax + pj[13]*ay + pj[14]*az + pj[15]*aw;
rob@100: 
rob@100:       if ( ow !== 0 ) {
rob@100:         oz /= ow;
rob@100:       }
rob@100:       return ( oz + 1 ) / 2.0;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Style functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     /**
rob@100:      * The fill() function sets the color used to fill shapes. For example, if you run <b>fill(204, 102, 0)</b>, all subsequent shapes will be filled with orange.
rob@100:      * This color is either specified in terms of the RGB or HSB color depending on the current <b>colorMode()</b>
rob@100:      *(the default color space is RGB, with each value in the range from 0 to 255).
rob@100:      * <br><br>When using hexadecimal notation to specify a color, use "#" or "0x" before the values (e.g. #CCFFAA, 0xFFCCFFAA).
rob@100:      * The # syntax uses six digits to specify a color (the way colors are specified in HTML and CSS). When using the hexadecimal notation starting with "0x",
rob@100:      * the hexadecimal value must be specified with eight characters; the first two characters define the alpha component and the remainder the red, green, and blue components.
rob@100:      * <br><br>The value for the parameter "gray" must be less than or equal to the current maximum value as specified by <b>colorMode()</b>. The default maximum value is 255.
rob@100:      * <br><br>To change the color of an image (or a texture), use tint().
rob@100:      *
rob@100:      * @param {int|float} gray    number specifying value between white and black
rob@100:      * @param {int|float} value1  red or hue value
rob@100:      * @param {int|float} value2  green or saturation value
rob@100:      * @param {int|float} value3  blue or brightness value
rob@100:      * @param {int|float} alpha   opacity of the fill
rob@100:      * @param {Color} color       any value of the color datatype
rob@100:      * @param {int} hex           color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)
rob@100:      *
rob@100:      * @see #noFill()
rob@100:      * @see #stroke()
rob@100:      * @see #tint()
rob@100:      * @see #background()
rob@100:      * @see #colorMode()
rob@100:      */
rob@100:     DrawingShared.prototype.fill = function() {
rob@100:       var color = p.color.apply(this, arguments);
rob@100:       if(color === currentFillColor && doFill) {
rob@100:         return;
rob@100:       }
rob@100:       doFill = true;
rob@100:       currentFillColor = color;
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.fill = function() {
rob@100:       DrawingShared.prototype.fill.apply(this, arguments);
rob@100:       isFillDirty = true;
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.fill = function() {
rob@100:       DrawingShared.prototype.fill.apply(this, arguments);
rob@100:       fillStyle = p.color.toGLArray(currentFillColor);
rob@100:     };
rob@100: 
rob@100:     function executeContextFill() {
rob@100:       if(doFill) {
rob@100:         if(isFillDirty) {
rob@100:           curContext.fillStyle = p.color.toString(currentFillColor);
rob@100:           isFillDirty = false;
rob@100:         }
rob@100:         curContext.fill();
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * The noFill() function disables filling geometry. If both <b>noStroke()</b> and <b>noFill()</b>
rob@100:      * are called, no shapes will be drawn to the screen.
rob@100:      *
rob@100:      * @see #fill()
rob@100:      *
rob@100:      */
rob@100:     p.noFill = function() {
rob@100:       doFill = false;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The stroke() function sets the color used to draw lines and borders around shapes. This color
rob@100:      * is either specified in terms of the RGB or HSB color depending on the
rob@100:      * current <b>colorMode()</b> (the default color space is RGB, with each
rob@100:      * value in the range from 0 to 255).
rob@100:      * <br><br>When using hexadecimal notation to specify a color, use "#" or
rob@100:      * "0x" before the values (e.g. #CCFFAA, 0xFFCCFFAA). The # syntax uses six
rob@100:      * digits to specify a color (the way colors are specified in HTML and CSS).
rob@100:      * When using the hexadecimal notation starting with "0x", the hexadecimal
rob@100:      * value must be specified with eight characters; the first two characters
rob@100:      * define the alpha component and the remainder the red, green, and blue
rob@100:      * components.
rob@100:      * <br><br>The value for the parameter "gray" must be less than or equal
rob@100:      * to the current maximum value as specified by <b>colorMode()</b>.
rob@100:      * The default maximum value is 255.
rob@100:      *
rob@100:      * @param {int|float} gray    number specifying value between white and black
rob@100:      * @param {int|float} value1  red or hue value
rob@100:      * @param {int|float} value2  green or saturation value
rob@100:      * @param {int|float} value3  blue or brightness value
rob@100:      * @param {int|float} alpha   opacity of the stroke
rob@100:      * @param {Color} color       any value of the color datatype
rob@100:      * @param {int} hex           color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)
rob@100:      *
rob@100:      * @see #fill()
rob@100:      * @see #noStroke()
rob@100:      * @see #tint()
rob@100:      * @see #background()
rob@100:      * @see #colorMode()
rob@100:      */
rob@100:     DrawingShared.prototype.stroke = function() {
rob@100:       var color = p.color.apply(this, arguments);
rob@100:       if(color === currentStrokeColor && doStroke) {
rob@100:         return;
rob@100:       }
rob@100:       doStroke = true;
rob@100:       currentStrokeColor = color;
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.stroke = function() {
rob@100:       DrawingShared.prototype.stroke.apply(this, arguments);
rob@100:       isStrokeDirty = true;
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.stroke = function() {
rob@100:       DrawingShared.prototype.stroke.apply(this, arguments);
rob@100:       strokeStyle = p.color.toGLArray(currentStrokeColor);
rob@100:     };
rob@100: 
rob@100:     function executeContextStroke() {
rob@100:       if(doStroke) {
rob@100:         if(isStrokeDirty) {
rob@100:           curContext.strokeStyle = p.color.toString(currentStrokeColor);
rob@100:           isStrokeDirty = false;
rob@100:         }
rob@100:         curContext.stroke();
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * The noStroke() function disables drawing the stroke (outline). If both <b>noStroke()</b> and
rob@100:      * <b>noFill()</b> are called, no shapes will be drawn to the screen.
rob@100:      *
rob@100:      * @see #stroke()
rob@100:      */
rob@100:     p.noStroke = function() {
rob@100:       doStroke = false;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The strokeWeight() function sets the width of the stroke used for lines, points, and the border around shapes.
rob@100:      * All widths are set in units of pixels.
rob@100:      *
rob@100:      * @param {int|float} w the weight (in pixels) of the stroke
rob@100:      */
rob@100:     DrawingShared.prototype.strokeWeight = function(w) {
rob@100:       lineWidth = w;
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.strokeWeight = function(w) {
rob@100:       DrawingShared.prototype.strokeWeight.apply(this, arguments);
rob@100:       curContext.lineWidth = w;
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.strokeWeight = function(w) {
rob@100:       DrawingShared.prototype.strokeWeight.apply(this, arguments);
rob@100: 
rob@100:       // Processing groups the weight of points and lines under this one function,
rob@100:       // but for WebGL, we need to set a uniform for points and call a function for line.
rob@100: 
rob@100:       curContext.useProgram(programObject2D);
rob@100:       uniformf("pointSize2d", programObject2D, "uPointSize", w);
rob@100: 
rob@100:       curContext.useProgram(programObjectUnlitShape);
rob@100:       uniformf("pointSizeUnlitShape", programObjectUnlitShape, "uPointSize", w);
rob@100: 
rob@100:       curContext.lineWidth(w);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The strokeCap() function sets the style for rendering line endings. These ends are either squared, extended, or rounded and
rob@100:      * specified with the corresponding parameters SQUARE, PROJECT, and ROUND. The default cap is ROUND.
rob@100:      * This function is not available with the P2D, P3D, or OPENGL renderers
rob@100:      *
rob@100:      * @param {int} value Either SQUARE, PROJECT, or ROUND
rob@100:      */
rob@100:     p.strokeCap = function(value) {
rob@100:       drawing.$ensureContext().lineCap = value;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The strokeJoin() function sets the style of the joints which connect line segments.
rob@100:      * These joints are either mitered, beveled, or rounded and specified with the corresponding parameters MITER, BEVEL, and ROUND. The default joint is MITER.
rob@100:      * This function is not available with the P2D, P3D, or OPENGL renderers
rob@100:      *
rob@100:      * @param {int} value Either SQUARE, PROJECT, or ROUND
rob@100:      */
rob@100:     p.strokeJoin = function(value) {
rob@100:       drawing.$ensureContext().lineJoin = value;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The smooth() function draws all geometry with smooth (anti-aliased) edges. This will slow down the frame rate of the application,
rob@100:      * but will enhance the visual refinement. <br/><br/>
rob@100:      * Note that smooth() will also improve image quality of resized images, and noSmooth() will disable image (and font) smoothing altogether.
rob@100:      * When working with a 3D sketch, smooth will draw points as circles rather than squares.
rob@100:      *
rob@100:      * @see #noSmooth()
rob@100:      * @see #hint()
rob@100:      * @see #size()
rob@100:      */
rob@100: 
rob@100:     Drawing2D.prototype.smooth = function() {
rob@100:       renderSmooth = true;
rob@100:       var style = curElement.style;
rob@100:       style.setProperty("image-rendering", "optimizeQuality", "important");
rob@100:       style.setProperty("-ms-interpolation-mode", "bicubic", "important");
rob@100:       if (curContext.hasOwnProperty("mozImageSmoothingEnabled")) {
rob@100:         curContext.mozImageSmoothingEnabled = true;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.smooth = function(){
rob@100:       renderSmooth = true;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The noSmooth() function draws all geometry with jagged (aliased) edges.
rob@100:      *
rob@100:      * @see #smooth()
rob@100:      */
rob@100: 
rob@100:     Drawing2D.prototype.noSmooth = function() {
rob@100:       renderSmooth = false;
rob@100:       var style = curElement.style;
rob@100:       style.setProperty("image-rendering", "optimizeSpeed", "important");
rob@100:       style.setProperty("image-rendering", "-moz-crisp-edges", "important");
rob@100:       style.setProperty("image-rendering", "-webkit-optimize-contrast", "important");
rob@100:       style.setProperty("image-rendering", "optimize-contrast", "important");
rob@100:       style.setProperty("-ms-interpolation-mode", "nearest-neighbor", "important");
rob@100:       if (curContext.hasOwnProperty("mozImageSmoothingEnabled")) {
rob@100:         curContext.mozImageSmoothingEnabled = false;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.noSmooth = function(){
rob@100:       renderSmooth = false;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Vector drawing functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     /**
rob@100:      * The point() function draws a point, a coordinate in space at the dimension of one pixel.
rob@100:      * The first parameter is the horizontal value for the point, the second
rob@100:      * value is the vertical value for the point, and the optional third value
rob@100:      * is the depth value. Drawing this shape in 3D using the <b>z</b>
rob@100:      * parameter requires the P3D or OPENGL parameter in combination with
rob@100:      * size as shown in the above example.
rob@100:      *
rob@100:      * @param {int|float} x x-coordinate of the point
rob@100:      * @param {int|float} y y-coordinate of the point
rob@100:      * @param {int|float} z z-coordinate of the point
rob@100:      *
rob@100:      * @see #beginShape()
rob@100:      */
rob@100:     Drawing2D.prototype.point = function(x, y) {
rob@100:       if (!doStroke) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       x = Math.round(x);
rob@100:       y = Math.round(y);
rob@100:       curContext.fillStyle = p.color.toString(currentStrokeColor);
rob@100:       isFillDirty = true;
rob@100:       // Draw a circle for any point larger than 1px
rob@100:       if (lineWidth > 1) {
rob@100:         curContext.beginPath();
rob@100:         curContext.arc(x, y, lineWidth / 2, 0, PConstants.TWO_PI, false);
rob@100:         curContext.fill();
rob@100:       } else {
rob@100:         curContext.fillRect(x, y, 1, 1);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.point = function(x, y, z) {
rob@100:       var model = new PMatrix3D();
rob@100: 
rob@100:       // move point to position
rob@100:       model.translate(x, y, z || 0);
rob@100:       model.transpose();
rob@100: 
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       curContext.useProgram(programObject2D);
rob@100:       uniformMatrix("uModel2d", programObject2D, "uModel", false, model.array());
rob@100:       uniformMatrix("uView2d", programObject2D, "uView", false, view.array());
rob@100: 
rob@100:       if (lineWidth > 0 && doStroke) {
rob@100:         // this will be replaced with the new bit shifting color code
rob@100:         uniformf("uColor2d", programObject2D, "uColor", strokeStyle);
rob@100:         uniformi("uIsDrawingText2d", programObject2D, "uIsDrawingText", false);
rob@100:         uniformi("uSmooth2d", programObject2D, "uSmooth", renderSmooth);
rob@100:         vertexAttribPointer("aVertex2d", programObject2D, "aVertex", 3, pointBuffer);
rob@100:         disableVertexAttribPointer("aTextureCoord2d", programObject2D, "aTextureCoord");
rob@100:         curContext.drawArrays(curContext.POINTS, 0, 1);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Using the <b>beginShape()</b> and <b>endShape()</b> functions allow creating more complex forms.
rob@100:      * <b>beginShape()</b> begins recording vertices for a shape and <b>endShape()</b> stops recording.
rob@100:      * The value of the <b>MODE</b> parameter tells it which types of shapes to create from the provided vertices.
rob@100:      * With no mode specified, the shape can be any irregular polygon. After calling the <b>beginShape()</b> function,
rob@100:      * a series of <b>vertex()</b> commands must follow. To stop drawing the shape, call <b>endShape()</b>.
rob@100:      * The <b>vertex()</b> function with two parameters specifies a position in 2D and the <b>vertex()</b>
rob@100:      * function with three parameters specifies a position in 3D. Each shape will be outlined with the current
rob@100:      * stroke color and filled with the fill color.
rob@100:      *
rob@100:      * @param {int} MODE either POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP.
rob@100:      *
rob@100:      * @see endShape
rob@100:      * @see vertex
rob@100:      * @see curveVertex
rob@100:      * @see bezierVertex
rob@100:      */
rob@100:     p.beginShape = function(type) {
rob@100:       curShape = type;
rob@100:       curvePoints = [];
rob@100:       vertArray = [];
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * All shapes are constructed by connecting a series of vertices. <b>vertex()</b> is used to specify the vertex
rob@100:      * coordinates for points, lines, triangles, quads, and polygons and is used exclusively within the <b>beginShape()</b>
rob@100:      * and <b>endShape()</b> function. <br /><br />Drawing a vertex in 3D using the <b>z</b> parameter requires the P3D or
rob@100:      * OPENGL parameter in combination with size as shown in the above example.<br /><br />This function is also used to map a
rob@100:      * texture onto the geometry. The <b>texture()</b> function declares the texture to apply to the geometry and the <b>u</b>
rob@100:      * and <b>v</b> coordinates set define the mapping of this texture to the form. By default, the coordinates used for
rob@100:      * <b>u</b> and <b>v</b> are specified in relation to the image's size in pixels, but this relation can be changed with
rob@100:      * <b>textureMode()</b>.
rob@100:      *
rob@100:      * @param {int | float} x x-coordinate of the vertex
rob@100:      * @param {int | float} y y-coordinate of the vertex
rob@100:      * @param {boolean} moveto flag to indicate whether this is a new subpath
rob@100:      *
rob@100:      * @see beginShape
rob@100:      * @see endShape
rob@100:      * @see bezierVertex
rob@100:      * @see curveVertex
rob@100:      * @see texture
rob@100:      */
rob@100: 
rob@100:     Drawing2D.prototype.vertex = function(x, y, moveTo) {
rob@100:       var vert = [];
rob@100: 
rob@100:       if (firstVert) { firstVert = false; }
rob@100:       vert.isVert = true;
rob@100: 
rob@100:       vert[0] = x;
rob@100:       vert[1] = y;
rob@100:       vert[2] = 0;
rob@100:       vert[3] = 0;
rob@100:       vert[4] = 0;
rob@100: 
rob@100:       // fill and stroke color
rob@100:       vert[5] = currentFillColor;
rob@100:       vert[6] = currentStrokeColor;
rob@100: 
rob@100:       vertArray.push(vert);
rob@100:       if (moveTo) {
rob@100:         vertArray[vertArray.length-1].moveTo = moveTo;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.vertex = function(x, y, z, u, v) {
rob@100:       var vert = [];
rob@100: 
rob@100:       if (firstVert) { firstVert = false; }
rob@100:       vert.isVert = true;
rob@100: 
rob@100:       if (v === undef && usingTexture) {
rob@100:         v = u;
rob@100:         u = z;
rob@100:         z = 0;
rob@100:       }
rob@100: 
rob@100:       // Convert u and v to normalized coordinates
rob@100:       if (u !== undef && v !== undef) {
rob@100:         if (curTextureMode === PConstants.IMAGE) {
rob@100:           u /= curTexture.width;
rob@100:           v /= curTexture.height;
rob@100:         }
rob@100:         u = u > 1 ? 1 : u;
rob@100:         u = u < 0 ? 0 : u;
rob@100:         v = v > 1 ? 1 : v;
rob@100:         v = v < 0 ? 0 : v;
rob@100:       }
rob@100: 
rob@100:       vert[0] = x;
rob@100:       vert[1] = y;
rob@100:       vert[2] = z || 0;
rob@100:       vert[3] = u || 0;
rob@100:       vert[4] = v || 0;
rob@100: 
rob@100:       // fill rgba
rob@100:       vert[5] = fillStyle[0];
rob@100:       vert[6] = fillStyle[1];
rob@100:       vert[7] = fillStyle[2];
rob@100:       vert[8] = fillStyle[3];
rob@100:       // stroke rgba
rob@100:       vert[9] = strokeStyle[0];
rob@100:       vert[10] = strokeStyle[1];
rob@100:       vert[11] = strokeStyle[2];
rob@100:       vert[12] = strokeStyle[3];
rob@100:       //normals
rob@100:       vert[13] = normalX;
rob@100:       vert[14] = normalY;
rob@100:       vert[15] = normalZ;
rob@100: 
rob@100:       vertArray.push(vert);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @private
rob@100:      * Renders 3D points created from calls to vertex and beginShape/endShape
rob@100:      *
rob@100:      * @param {Array} vArray an array of vertex coordinate
rob@100:      * @param {Array} cArray an array of colours used for the vertices
rob@100:      *
rob@100:      * @see beginShape
rob@100:      * @see endShape
rob@100:      * @see vertex
rob@100:      */
rob@100:     var point3D = function(vArray, cArray){
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       curContext.useProgram(programObjectUnlitShape);
rob@100: 
rob@100:       uniformMatrix("uViewUS", programObjectUnlitShape, "uView", false, view.array());
rob@100:       uniformi("uSmoothUS", programObjectUnlitShape, "uSmooth", renderSmooth);
rob@100: 
rob@100:       vertexAttribPointer("aVertexUS", programObjectUnlitShape, "aVertex", 3, pointBuffer);
rob@100:       curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array(vArray), curContext.STREAM_DRAW);
rob@100: 
rob@100:       vertexAttribPointer("aColorUS", programObjectUnlitShape, "aColor", 4, fillColorBuffer);
rob@100:       curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array(cArray), curContext.STREAM_DRAW);
rob@100: 
rob@100:       curContext.drawArrays(curContext.POINTS, 0, vArray.length/3);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @private
rob@100:      * Renders 3D lines created from calls to beginShape/vertex/endShape - based on the mode specified LINES, LINE_LOOP, etc.
rob@100:      *
rob@100:      * @param {Array} vArray an array of vertex coordinate
rob@100:      * @param {String} mode  either LINES, LINE_LOOP, or LINE_STRIP
rob@100:      * @param {Array} cArray an array of colours used for the vertices
rob@100:      *
rob@100:      * @see beginShape
rob@100:      * @see endShape
rob@100:      * @see vertex
rob@100:      */
rob@100:     var line3D = function(vArray, mode, cArray){
rob@100:       var ctxMode;
rob@100:       if (mode === "LINES"){
rob@100:         ctxMode = curContext.LINES;
rob@100:       }
rob@100:       else if(mode === "LINE_LOOP"){
rob@100:         ctxMode = curContext.LINE_LOOP;
rob@100:       }
rob@100:       else{
rob@100:         ctxMode = curContext.LINE_STRIP;
rob@100:       }
rob@100: 
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       curContext.useProgram(programObjectUnlitShape);
rob@100:       uniformMatrix("uViewUS", programObjectUnlitShape, "uView", false, view.array());
rob@100:       vertexAttribPointer("aVertexUS", programObjectUnlitShape, "aVertex", 3, lineBuffer);
rob@100:       curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array(vArray), curContext.STREAM_DRAW);
rob@100:       vertexAttribPointer("aColorUS", programObjectUnlitShape, "aColor", 4, strokeColorBuffer);
rob@100:       curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array(cArray), curContext.STREAM_DRAW);
rob@100:       curContext.drawArrays(ctxMode, 0, vArray.length/3);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * @private
rob@100:      * Render filled shapes created from calls to beginShape/vertex/endShape - based on the mode specified TRIANGLES, etc.
rob@100:      *
rob@100:      * @param {Array} vArray an array of vertex coordinate
rob@100:      * @param {String} mode  either LINES, LINE_LOOP, or LINE_STRIP
rob@100:      * @param {Array} cArray an array of colours used for the vertices
rob@100:      * @param {Array} tArray an array of u,v coordinates for textures
rob@100:      *
rob@100:      * @see beginShape
rob@100:      * @see endShape
rob@100:      * @see vertex
rob@100:      */
rob@100:     var fill3D = function(vArray, mode, cArray, tArray){
rob@100:       var ctxMode;
rob@100:       if (mode === "TRIANGLES") {
rob@100:         ctxMode = curContext.TRIANGLES;
rob@100:       } else if(mode === "TRIANGLE_FAN") {
rob@100:         ctxMode = curContext.TRIANGLE_FAN;
rob@100:       } else {
rob@100:         ctxMode = curContext.TRIANGLE_STRIP;
rob@100:       }
rob@100: 
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale( 1, -1, 1 );
rob@100:       view.apply( modelView.array() );
rob@100:       view.transpose();
rob@100: 
rob@100:       curContext.useProgram( programObject3D );
rob@100:       uniformMatrix( "model3d", programObject3D, "uModel", false,  [1,0,0,0,  0,1,0,0,   0,0,1,0,   0,0,0,1] );
rob@100:       uniformMatrix( "view3d", programObject3D, "uView", false, view.array() );
rob@100:       curContext.enable( curContext.POLYGON_OFFSET_FILL );
rob@100:       curContext.polygonOffset( 1, 1 );
rob@100:       uniformf( "color3d", programObject3D, "uColor", [-1,0,0,0] );
rob@100:       vertexAttribPointer( "vertex3d", programObject3D, "aVertex", 3, fillBuffer );
rob@100:       curContext.bufferData( curContext.ARRAY_BUFFER, new Float32Array(vArray), curContext.STREAM_DRAW );
rob@100: 
rob@100:       // if we are using a texture and a tint, then overwrite the
rob@100:       // contents of the color buffer with the current tint
rob@100:       if ( usingTexture && curTint !== null ){
rob@100:         curTint3d( cArray );
rob@100:       }
rob@100: 
rob@100:       vertexAttribPointer( "aColor3d", programObject3D, "aColor", 4, fillColorBuffer );
rob@100:       curContext.bufferData( curContext.ARRAY_BUFFER, new Float32Array(cArray), curContext.STREAM_DRAW );
rob@100: 
rob@100:       // No support for lights....yet
rob@100:       disableVertexAttribPointer( "aNormal3d", programObject3D, "aNormal" );
rob@100: 
rob@100:       if ( usingTexture ) {
rob@100:         uniformi( "uUsingTexture3d", programObject3D, "uUsingTexture", usingTexture );
rob@100:         vertexAttribPointer( "aTexture3d", programObject3D, "aTexture", 2, shapeTexVBO );
rob@100:         curContext.bufferData( curContext.ARRAY_BUFFER, new Float32Array(tArray), curContext.STREAM_DRAW );
rob@100:       }
rob@100: 
rob@100:       curContext.drawArrays( ctxMode, 0, vArray.length/3 );
rob@100:       curContext.disable( curContext.POLYGON_OFFSET_FILL );
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * this series of three operations is used a lot in Drawing2D.prototype.endShape
rob@100:      * and has been split off as its own function, to tighten the code and allow for
rob@100:      * fewer bugs.
rob@100:      */
rob@100:     function fillStrokeClose() {
rob@100:       executeContextFill();
rob@100:       executeContextStroke();
rob@100:       curContext.closePath();
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * The endShape() function is the companion to beginShape() and may only be called after beginShape().
rob@100:      * When endshape() is called, all of image data defined since the previous call to beginShape() is written
rob@100:      * into the image buffer.
rob@100:      *
rob@100:      * @param {int} MODE Use CLOSE to close the shape
rob@100:      *
rob@100:      * @see beginShape
rob@100:      */
rob@100:     Drawing2D.prototype.endShape = function(mode) {
rob@100:       // Duplicated in Drawing3D; too many variables used
rob@100:       if (vertArray.length === 0) { return; }
rob@100: 
rob@100:       var closeShape = mode === PConstants.CLOSE;
rob@100: 
rob@100:       // if the shape is closed, the first element is also the last element
rob@100:       if (closeShape) {
rob@100:         vertArray.push(vertArray[0]);
rob@100:       }
rob@100: 
rob@100:       var lineVertArray = [];
rob@100:       var fillVertArray = [];
rob@100:       var colorVertArray = [];
rob@100:       var strokeVertArray = [];
rob@100:       var texVertArray = [];
rob@100:       var cachedVertArray;
rob@100: 
rob@100:       firstVert = true;
rob@100:       var i, j, k;
rob@100:       var vertArrayLength = vertArray.length;
rob@100: 
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         for (j = 0; j < 3; j++) {
rob@100:           fillVertArray.push(cachedVertArray[j]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // 5,6,7,8
rob@100:       // R,G,B,A - fill colour
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         for (j = 5; j < 9; j++) {
rob@100:           colorVertArray.push(cachedVertArray[j]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // 9,10,11,12
rob@100:       // R, G, B, A - stroke colour
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         for (j = 9; j < 13; j++) {
rob@100:           strokeVertArray.push(cachedVertArray[j]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // texture u,v
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         texVertArray.push(cachedVertArray[3]);
rob@100:         texVertArray.push(cachedVertArray[4]);
rob@100:       }
rob@100: 
rob@100:       // curveVertex
rob@100:       if ( isCurve && (curShape === PConstants.POLYGON || curShape === undef) ) {
rob@100:         if (vertArrayLength > 3) {
rob@100:           var b = [],
rob@100:               s = 1 - curTightness;
rob@100:           curContext.beginPath();
rob@100:           curContext.moveTo(vertArray[1][0], vertArray[1][1]);
rob@100:             /*
rob@100:             * Matrix to convert from Catmull-Rom to cubic Bezier
rob@100:             * where t = curTightness
rob@100:             * |0         1          0         0       |
rob@100:             * |(t-1)/6   1          (1-t)/6   0       |
rob@100:             * |0         (1-t)/6    1         (t-1)/6 |
rob@100:             * |0         0          0         0       |
rob@100:             */
rob@100:           for (i = 1; (i+2) < vertArrayLength; i++) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             b[0] = [cachedVertArray[0], cachedVertArray[1]];
rob@100:             b[1] = [cachedVertArray[0] + (s * vertArray[i+1][0] - s * vertArray[i-1][0]) / 6,
rob@100:                    cachedVertArray[1] + (s * vertArray[i+1][1] - s * vertArray[i-1][1]) / 6];
rob@100:             b[2] = [vertArray[i+1][0] + (s * vertArray[i][0] - s * vertArray[i+2][0]) / 6,
rob@100:                    vertArray[i+1][1] + (s * vertArray[i][1] - s * vertArray[i+2][1]) / 6];
rob@100:             b[3] = [vertArray[i+1][0], vertArray[i+1][1]];
rob@100:             curContext.bezierCurveTo(b[1][0], b[1][1], b[2][0], b[2][1], b[3][0], b[3][1]);
rob@100:           }
rob@100:           fillStrokeClose();
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // bezierVertex
rob@100:       else if ( isBezier && (curShape === PConstants.POLYGON || curShape === undef) ) {
rob@100:         curContext.beginPath();
rob@100:         for (i = 0; i < vertArrayLength; i++) {
rob@100:           cachedVertArray = vertArray[i];
rob@100:           if (vertArray[i].isVert) { //if it is a vertex move to the position
rob@100:             if (vertArray[i].moveTo) {
rob@100:               curContext.moveTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:             } else {
rob@100:               curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:             }
rob@100:           } else { //otherwise continue drawing bezier
rob@100:             curContext.bezierCurveTo(vertArray[i][0], vertArray[i][1], vertArray[i][2], vertArray[i][3], vertArray[i][4], vertArray[i][5]);
rob@100:           }
rob@100:         }
rob@100:         fillStrokeClose();
rob@100:       }
rob@100: 
rob@100:       // render the vertices provided
rob@100:       else {
rob@100:         if (curShape === PConstants.POINTS) {
rob@100:           for (i = 0; i < vertArrayLength; i++) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             if (doStroke) {
rob@100:               p.stroke(cachedVertArray[6]);
rob@100:             }
rob@100:             p.point(cachedVertArray[0], cachedVertArray[1]);
rob@100:           }
rob@100:         } else if (curShape === PConstants.LINES) {
rob@100:           for (i = 0; (i + 1) < vertArrayLength; i+=2) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             if (doStroke) {
rob@100:               p.stroke(vertArray[i+1][6]);
rob@100:             }
rob@100:             p.line(cachedVertArray[0], cachedVertArray[1], vertArray[i+1][0], vertArray[i+1][1]);
rob@100:           }
rob@100:         } else if (curShape === PConstants.TRIANGLES) {
rob@100:           for (i = 0; (i + 2) < vertArrayLength; i+=3) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             curContext.beginPath();
rob@100:             curContext.moveTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:             curContext.lineTo(vertArray[i+1][0], vertArray[i+1][1]);
rob@100:             curContext.lineTo(vertArray[i+2][0], vertArray[i+2][1]);
rob@100:             curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100: 
rob@100:             if (doFill) {
rob@100:               p.fill(vertArray[i+2][5]);
rob@100:               executeContextFill();
rob@100:             }
rob@100:             if (doStroke) {
rob@100:               p.stroke(vertArray[i+2][6]);
rob@100:               executeContextStroke();
rob@100:             }
rob@100: 
rob@100:             curContext.closePath();
rob@100:           }
rob@100:         } else if (curShape === PConstants.TRIANGLE_STRIP) {
rob@100:           for (i = 0; (i+1) < vertArrayLength; i++) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             curContext.beginPath();
rob@100:             curContext.moveTo(vertArray[i+1][0], vertArray[i+1][1]);
rob@100:             curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100: 
rob@100:             if (doStroke) {
rob@100:               p.stroke(vertArray[i+1][6]);
rob@100:             }
rob@100:             if (doFill) {
rob@100:               p.fill(vertArray[i+1][5]);
rob@100:             }
rob@100: 
rob@100:             if (i + 2 < vertArrayLength) {
rob@100:               curContext.lineTo(vertArray[i+2][0], vertArray[i+2][1]);
rob@100:               if (doStroke) {
rob@100:                 p.stroke(vertArray[i+2][6]);
rob@100:               }
rob@100:               if (doFill) {
rob@100:                 p.fill(vertArray[i+2][5]);
rob@100:               }
rob@100:             }
rob@100:             fillStrokeClose();
rob@100:           }
rob@100:         } else if (curShape === PConstants.TRIANGLE_FAN) {
rob@100:           if (vertArrayLength > 2) {
rob@100:             curContext.beginPath();
rob@100:             curContext.moveTo(vertArray[0][0], vertArray[0][1]);
rob@100:             curContext.lineTo(vertArray[1][0], vertArray[1][1]);
rob@100:             curContext.lineTo(vertArray[2][0], vertArray[2][1]);
rob@100: 
rob@100:             if (doFill) {
rob@100:               p.fill(vertArray[2][5]);
rob@100:               executeContextFill();
rob@100:             }
rob@100:             if (doStroke) {
rob@100:               p.stroke(vertArray[2][6]);
rob@100:               executeContextStroke();
rob@100:             }
rob@100: 
rob@100:             curContext.closePath();
rob@100:             for (i = 3; i < vertArrayLength; i++) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               curContext.beginPath();
rob@100:               curContext.moveTo(vertArray[0][0], vertArray[0][1]);
rob@100:               curContext.lineTo(vertArray[i-1][0], vertArray[i-1][1]);
rob@100:               curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100: 
rob@100:               if (doFill) {
rob@100:                 p.fill(cachedVertArray[5]);
rob@100:                 executeContextFill();
rob@100:               }
rob@100:               if (doStroke) {
rob@100:                 p.stroke(cachedVertArray[6]);
rob@100:                 executeContextStroke();
rob@100:               }
rob@100: 
rob@100:               curContext.closePath();
rob@100:             }
rob@100:           }
rob@100:         } else if (curShape === PConstants.QUADS) {
rob@100:           for (i = 0; (i + 3) < vertArrayLength; i+=4) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             curContext.beginPath();
rob@100:             curContext.moveTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:             for (j = 1; j < 4; j++) {
rob@100:               curContext.lineTo(vertArray[i+j][0], vertArray[i+j][1]);
rob@100:             }
rob@100:             curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100: 
rob@100:             if (doFill) {
rob@100:               p.fill(vertArray[i+3][5]);
rob@100:               executeContextFill();
rob@100:             }
rob@100:             if (doStroke) {
rob@100:               p.stroke(vertArray[i+3][6]);
rob@100:               executeContextStroke();
rob@100:             }
rob@100: 
rob@100:             curContext.closePath();
rob@100:           }
rob@100:         } else if (curShape === PConstants.QUAD_STRIP) {
rob@100:           if (vertArrayLength > 3) {
rob@100:             for (i = 0; (i+1) < vertArrayLength; i+=2) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               curContext.beginPath();
rob@100:               if (i+3 < vertArrayLength) {
rob@100:                 curContext.moveTo(vertArray[i+2][0], vertArray[i+2][1]);
rob@100:                 curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:                 curContext.lineTo(vertArray[i+1][0], vertArray[i+1][1]);
rob@100:                 curContext.lineTo(vertArray[i+3][0], vertArray[i+3][1]);
rob@100: 
rob@100:                 if (doFill) {
rob@100:                   p.fill(vertArray[i+3][5]);
rob@100:                 }
rob@100:                 if (doStroke) {
rob@100:                   p.stroke(vertArray[i+3][6]);
rob@100:                 }
rob@100:               } else {
rob@100:                 curContext.moveTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:                 curContext.lineTo(vertArray[i+1][0], vertArray[i+1][1]);
rob@100:               }
rob@100:               fillStrokeClose();
rob@100:             }
rob@100:           }
rob@100:         } else {
rob@100:           curContext.beginPath();
rob@100:           curContext.moveTo(vertArray[0][0], vertArray[0][1]);
rob@100:           for (i = 1; i < vertArrayLength; i++) {
rob@100:             cachedVertArray = vertArray[i];
rob@100:             if (cachedVertArray.isVert) { //if it is a vertex move to the position
rob@100:               if (cachedVertArray.moveTo) {
rob@100:                 curContext.moveTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:               } else {
rob@100:                 curContext.lineTo(cachedVertArray[0], cachedVertArray[1]);
rob@100:               }
rob@100:             }
rob@100:           }
rob@100:           fillStrokeClose();
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // Reset some settings
rob@100:       isCurve = false;
rob@100:       isBezier = false;
rob@100:       curveVertArray = [];
rob@100:       curveVertCount = 0;
rob@100: 
rob@100:       // If the shape is closed, the first element was added as last element.
rob@100:       // We must remove it again to prevent the list of vertices from growing
rob@100:       // over successive calls to endShape(CLOSE)
rob@100:       if (closeShape) {
rob@100:         vertArray.pop();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.endShape = function(mode) {
rob@100:       // Duplicated in Drawing3D; too many variables used
rob@100:       if (vertArray.length === 0) { return; }
rob@100: 
rob@100:       var closeShape = mode === PConstants.CLOSE;
rob@100:       var lineVertArray = [];
rob@100:       var fillVertArray = [];
rob@100:       var colorVertArray = [];
rob@100:       var strokeVertArray = [];
rob@100:       var texVertArray = [];
rob@100:       var cachedVertArray;
rob@100: 
rob@100:       firstVert = true;
rob@100:       var i, j, k;
rob@100:       var vertArrayLength = vertArray.length;
rob@100: 
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         for (j = 0; j < 3; j++) {
rob@100:           fillVertArray.push(cachedVertArray[j]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // 5,6,7,8
rob@100:       // R,G,B,A - fill colour
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         for (j = 5; j < 9; j++) {
rob@100:           colorVertArray.push(cachedVertArray[j]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // 9,10,11,12
rob@100:       // R, G, B, A - stroke colour
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         for (j = 9; j < 13; j++) {
rob@100:           strokeVertArray.push(cachedVertArray[j]);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // texture u,v
rob@100:       for (i = 0; i < vertArrayLength; i++) {
rob@100:         cachedVertArray = vertArray[i];
rob@100:         texVertArray.push(cachedVertArray[3]);
rob@100:         texVertArray.push(cachedVertArray[4]);
rob@100:       }
rob@100: 
rob@100:       // if shape is closed, push the first point into the last point (including colours)
rob@100:       if (closeShape) {
rob@100:         fillVertArray.push(vertArray[0][0]);
rob@100:         fillVertArray.push(vertArray[0][1]);
rob@100:         fillVertArray.push(vertArray[0][2]);
rob@100: 
rob@100:         for (i = 5; i < 9; i++) {
rob@100:           colorVertArray.push(vertArray[0][i]);
rob@100:         }
rob@100: 
rob@100:         for (i = 9; i < 13; i++) {
rob@100:           strokeVertArray.push(vertArray[0][i]);
rob@100:         }
rob@100: 
rob@100:         texVertArray.push(vertArray[0][3]);
rob@100:         texVertArray.push(vertArray[0][4]);
rob@100:       }
rob@100:       // End duplication
rob@100: 
rob@100:       // curveVertex
rob@100:       if ( isCurve && (curShape === PConstants.POLYGON || curShape === undef) ) {
rob@100:         lineVertArray = fillVertArray;
rob@100:         if (doStroke) {
rob@100:           line3D(lineVertArray, null, strokeVertArray);
rob@100:         }
rob@100:         if (doFill) {
rob@100:           fill3D(fillVertArray, null, colorVertArray);
rob@100:         }
rob@100:       }
rob@100:       // bezierVertex
rob@100:       else if ( isBezier && (curShape === PConstants.POLYGON || curShape === undef) ) {
rob@100:         lineVertArray = fillVertArray;
rob@100:         lineVertArray.splice(lineVertArray.length - 3);
rob@100:         strokeVertArray.splice(strokeVertArray.length - 4);
rob@100:         if (doStroke) {
rob@100:           line3D(lineVertArray, null, strokeVertArray);
rob@100:         }
rob@100:         if (doFill) {
rob@100:           fill3D(fillVertArray, "TRIANGLES", colorVertArray);
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // render the vertices provided
rob@100:       else {
rob@100:         if (curShape === PConstants.POINTS) {       // if POINTS was the specified parameter in beginShape
rob@100:           for (i = 0; i < vertArrayLength; i++) {  // loop through and push the point location information to the array
rob@100:             cachedVertArray = vertArray[i];
rob@100:             for (j = 0; j < 3; j++) {
rob@100:               lineVertArray.push(cachedVertArray[j]);
rob@100:             }
rob@100:           }
rob@100:           point3D(lineVertArray, strokeVertArray);  // render function for points
rob@100:         } else if (curShape === PConstants.LINES) { // if LINES was the specified parameter in beginShape
rob@100:           for (i = 0; i < vertArrayLength; i++) {  // loop through and push the point location information to the array
rob@100:             cachedVertArray = vertArray[i];
rob@100:             for (j = 0; j < 3; j++) {
rob@100:               lineVertArray.push(cachedVertArray[j]);
rob@100:             }
rob@100:           }
rob@100:           for (i = 0; i < vertArrayLength; i++) {  // loop through and push the color information to the array
rob@100:             cachedVertArray = vertArray[i];
rob@100:             for (j = 5; j < 9; j++) {
rob@100:               colorVertArray.push(cachedVertArray[j]);
rob@100:             }
rob@100:           }
rob@100:           line3D(lineVertArray, "LINES", strokeVertArray);  // render function for lines
rob@100:         } else if (curShape === PConstants.TRIANGLES) {     // if TRIANGLES was the specified parameter in beginShape
rob@100:           if (vertArrayLength > 2) {
rob@100:             for (i = 0; (i+2) < vertArrayLength; i+=3) {   // loop through the array per triangle
rob@100:               fillVertArray = [];
rob@100:               texVertArray = [];
rob@100:               lineVertArray = [];
rob@100:               colorVertArray = [];
rob@100:               strokeVertArray = [];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 for (k = 0; k < 3; k++) {                   // loop through and push
rob@100:                   lineVertArray.push(vertArray[i+j][k]);    // the line point location information
rob@100:                   fillVertArray.push(vertArray[i+j][k]);    // and fill point location information
rob@100:                 }
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {                     // loop through and push the texture information
rob@100:                 for (k = 3; k < 5; k++) {
rob@100:                   texVertArray.push(vertArray[i+j][k]);
rob@100:                 }
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 for (k = 5; k < 9; k++) {                   // loop through and push
rob@100:                   colorVertArray.push(vertArray[i+j][k]);   // the colour information
rob@100:                   strokeVertArray.push(vertArray[i+j][k+4]);// and the stroke information
rob@100:                 }
rob@100:               }
rob@100:               if (doStroke) {
rob@100:                 line3D(lineVertArray, "LINE_LOOP", strokeVertArray );               // line render function
rob@100:               }
rob@100:               if (doFill || usingTexture) {
rob@100:                 fill3D(fillVertArray, "TRIANGLES", colorVertArray, texVertArray);   // fill shape render function
rob@100:               }
rob@100:             }
rob@100:           }
rob@100:         } else if (curShape === PConstants.TRIANGLE_STRIP) {    // if TRIANGLE_STRIP was the specified parameter in beginShape
rob@100:           if (vertArrayLength > 2) {
rob@100:             for (i = 0; (i+2) < vertArrayLength; i++) {
rob@100:               lineVertArray = [];
rob@100:               fillVertArray = [];
rob@100:               strokeVertArray = [];
rob@100:               colorVertArray = [];
rob@100:               texVertArray = [];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 for (k = 0; k < 3; k++) {
rob@100:                   lineVertArray.push(vertArray[i+j][k]);
rob@100:                   fillVertArray.push(vertArray[i+j][k]);
rob@100:                 }
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 for (k = 3; k < 5; k++) {
rob@100:                   texVertArray.push(vertArray[i+j][k]);
rob@100:                 }
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 for (k = 5; k < 9; k++) {
rob@100:                   strokeVertArray.push(vertArray[i+j][k+4]);
rob@100:                   colorVertArray.push(vertArray[i+j][k]);
rob@100:                 }
rob@100:               }
rob@100: 
rob@100:               if (doFill || usingTexture) {
rob@100:                 fill3D(fillVertArray, "TRIANGLE_STRIP", colorVertArray, texVertArray);
rob@100:               }
rob@100:               if (doStroke) {
rob@100:                 line3D(lineVertArray, "LINE_LOOP", strokeVertArray);
rob@100:               }
rob@100:             }
rob@100:           }
rob@100:         } else if (curShape === PConstants.TRIANGLE_FAN) {
rob@100:           if (vertArrayLength > 2) {
rob@100:             for (i = 0; i < 3; i++) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(cachedVertArray[j]);
rob@100:               }
rob@100:             }
rob@100:             for (i = 0; i < 3; i++) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               for (j = 9; j < 13; j++) {
rob@100:                 strokeVertArray.push(cachedVertArray[j]);
rob@100:               }
rob@100:             }
rob@100:             if (doStroke) {
rob@100:               line3D(lineVertArray, "LINE_LOOP", strokeVertArray);
rob@100:             }
rob@100: 
rob@100:             for (i = 2; (i+1) < vertArrayLength; i++) {
rob@100:               lineVertArray = [];
rob@100:               strokeVertArray = [];
rob@100:               lineVertArray.push(vertArray[0][0]);
rob@100:               lineVertArray.push(vertArray[0][1]);
rob@100:               lineVertArray.push(vertArray[0][2]);
rob@100: 
rob@100:               strokeVertArray.push(vertArray[0][9]);
rob@100:               strokeVertArray.push(vertArray[0][10]);
rob@100:               strokeVertArray.push(vertArray[0][11]);
rob@100:               strokeVertArray.push(vertArray[0][12]);
rob@100: 
rob@100:               for (j = 0; j < 2; j++) {
rob@100:                 for (k = 0; k < 3; k++) {
rob@100:                   lineVertArray.push(vertArray[i+j][k]);
rob@100:                 }
rob@100:               }
rob@100:               for (j = 0; j < 2; j++) {
rob@100:                 for (k = 9; k < 13; k++) {
rob@100:                   strokeVertArray.push(vertArray[i+j][k]);
rob@100:                 }
rob@100:               }
rob@100:               if (doStroke) {
rob@100:                 line3D(lineVertArray, "LINE_STRIP",strokeVertArray);
rob@100:               }
rob@100:             }
rob@100:             if (doFill || usingTexture) {
rob@100:               fill3D(fillVertArray, "TRIANGLE_FAN", colorVertArray, texVertArray);
rob@100:             }
rob@100:           }
rob@100:         } else if (curShape === PConstants.QUADS) {
rob@100:           for (i = 0; (i + 3) < vertArrayLength; i+=4) {
rob@100:             lineVertArray = [];
rob@100:             for (j = 0; j < 4; j++) {
rob@100:               cachedVertArray = vertArray[i+j];
rob@100:               for (k = 0; k < 3; k++) {
rob@100:                 lineVertArray.push(cachedVertArray[k]);
rob@100:               }
rob@100:             }
rob@100:             if (doStroke) {
rob@100:               line3D(lineVertArray, "LINE_LOOP",strokeVertArray);
rob@100:             }
rob@100: 
rob@100:             if (doFill) {
rob@100:               fillVertArray = [];
rob@100:               colorVertArray = [];
rob@100:               texVertArray = [];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 fillVertArray.push(vertArray[i][j]);
rob@100:               }
rob@100:               for (j = 5; j < 9; j++) {
rob@100:                 colorVertArray.push(vertArray[i][j]);
rob@100:               }
rob@100: 
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 fillVertArray.push(vertArray[i+1][j]);
rob@100:               }
rob@100:               for (j = 5; j < 9; j++) {
rob@100:                 colorVertArray.push(vertArray[i+1][j]);
rob@100:               }
rob@100: 
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 fillVertArray.push(vertArray[i+3][j]);
rob@100:               }
rob@100:               for (j = 5; j < 9; j++) {
rob@100:                 colorVertArray.push(vertArray[i+3][j]);
rob@100:               }
rob@100: 
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 fillVertArray.push(vertArray[i+2][j]);
rob@100:               }
rob@100:               for (j = 5; j < 9; j++) {
rob@100:                 colorVertArray.push(vertArray[i+2][j]);
rob@100:               }
rob@100: 
rob@100:               if (usingTexture) {
rob@100:                 texVertArray.push(vertArray[i+0][3]);
rob@100:                 texVertArray.push(vertArray[i+0][4]);
rob@100:                 texVertArray.push(vertArray[i+1][3]);
rob@100:                 texVertArray.push(vertArray[i+1][4]);
rob@100:                 texVertArray.push(vertArray[i+3][3]);
rob@100:                 texVertArray.push(vertArray[i+3][4]);
rob@100:                 texVertArray.push(vertArray[i+2][3]);
rob@100:                 texVertArray.push(vertArray[i+2][4]);
rob@100:               }
rob@100: 
rob@100:               fill3D(fillVertArray, "TRIANGLE_STRIP", colorVertArray, texVertArray);
rob@100:             }
rob@100:           }
rob@100:         } else if (curShape === PConstants.QUAD_STRIP) {
rob@100:           var tempArray = [];
rob@100:           if (vertArrayLength > 3) {
rob@100:             for (i = 0; i < 2; i++) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(cachedVertArray[j]);
rob@100:               }
rob@100:             }
rob@100: 
rob@100:             for (i = 0; i < 2; i++) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               for (j = 9; j < 13; j++) {
rob@100:                 strokeVertArray.push(cachedVertArray[j]);
rob@100:               }
rob@100:             }
rob@100: 
rob@100:             line3D(lineVertArray, "LINE_STRIP", strokeVertArray);
rob@100:             if (vertArrayLength > 4 && vertArrayLength % 2 > 0) {
rob@100:               tempArray = fillVertArray.splice(fillVertArray.length - 3);
rob@100:               vertArray.pop();
rob@100:             }
rob@100:             for (i = 0; (i+3) < vertArrayLength; i+=2) {
rob@100:               lineVertArray = [];
rob@100:               strokeVertArray = [];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(vertArray[i+1][j]);
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(vertArray[i+3][j]);
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(vertArray[i+2][j]);
rob@100:               }
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(vertArray[i+0][j]);
rob@100:               }
rob@100:               for (j = 9; j < 13; j++) {
rob@100:                 strokeVertArray.push(vertArray[i+1][j]);
rob@100:               }
rob@100:               for (j = 9; j < 13; j++) {
rob@100:                 strokeVertArray.push(vertArray[i+3][j]);
rob@100:               }
rob@100:               for (j = 9; j < 13; j++) {
rob@100:                 strokeVertArray.push(vertArray[i+2][j]);
rob@100:               }
rob@100:               for (j = 9; j < 13; j++) {
rob@100:                 strokeVertArray.push(vertArray[i+0][j]);
rob@100:               }
rob@100:               if (doStroke) {
rob@100:                 line3D(lineVertArray, "LINE_STRIP", strokeVertArray);
rob@100:               }
rob@100:             }
rob@100: 
rob@100:             if (doFill || usingTexture) {
rob@100:               fill3D(fillVertArray, "TRIANGLE_LIST", colorVertArray, texVertArray);
rob@100:             }
rob@100:           }
rob@100:         }
rob@100:         // If the user didn't specify a type (LINES, TRIANGLES, etc)
rob@100:         else {
rob@100:           // If only one vertex was specified, it must be a point
rob@100:           if (vertArrayLength === 1) {
rob@100:             for (j = 0; j < 3; j++) {
rob@100:               lineVertArray.push(vertArray[0][j]);
rob@100:             }
rob@100:             for (j = 9; j < 13; j++) {
rob@100:               strokeVertArray.push(vertArray[0][j]);
rob@100:             }
rob@100:             point3D(lineVertArray,strokeVertArray);
rob@100:           } else {
rob@100:             for (i = 0; i < vertArrayLength; i++) {
rob@100:               cachedVertArray = vertArray[i];
rob@100:               for (j = 0; j < 3; j++) {
rob@100:                 lineVertArray.push(cachedVertArray[j]);
rob@100:               }
rob@100:               for (j = 5; j < 9; j++) {
rob@100:                 strokeVertArray.push(cachedVertArray[j]);
rob@100:               }
rob@100:             }
rob@100:             if (doStroke && closeShape) {
rob@100:               line3D(lineVertArray, "LINE_LOOP", strokeVertArray);
rob@100:             } else if (doStroke && !closeShape) {
rob@100:               line3D(lineVertArray, "LINE_STRIP", strokeVertArray);
rob@100:             }
rob@100: 
rob@100:             // fill is ignored if textures are used
rob@100:             if (doFill || usingTexture) {
rob@100:               fill3D(fillVertArray, "TRIANGLE_FAN", colorVertArray, texVertArray);
rob@100:             }
rob@100:           }
rob@100:         }
rob@100:         // everytime beginShape is followed by a call to
rob@100:         // texture(), texturing it turned back on. We do this to
rob@100:         // figure out if the shape should be textured or filled
rob@100:         // with a color.
rob@100:         usingTexture = false;
rob@100:         curContext.useProgram(programObject3D);
rob@100:         uniformi("usingTexture3d", programObject3D, "uUsingTexture", usingTexture);
rob@100:       }
rob@100: 
rob@100:       // Reset some settings
rob@100:       isCurve = false;
rob@100:       isBezier = false;
rob@100:       curveVertArray = [];
rob@100:       curveVertCount = 0;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The function splineForward() setup forward-differencing matrix to be used for speedy
rob@100:      * curve rendering. It's based on using a specific number
rob@100:      * of curve segments and just doing incremental adds for each
rob@100:      * vertex of the segment, rather than running the mathematically
rob@100:      * expensive cubic equation. This function is used by both curveDetail and bezierDetail.
rob@100:      *
rob@100:      * @param {int} segments      number of curve segments to use when drawing
rob@100:      * @param {PMatrix3D} matrix  target object for the new matrix
rob@100:      */
rob@100:     var splineForward = function(segments, matrix) {
rob@100:       var f = 1.0 / segments;
rob@100:       var ff = f * f;
rob@100:       var fff = ff * f;
rob@100: 
rob@100:       matrix.set(0, 0, 0, 1, fff, ff, f, 0, 6 * fff, 2 * ff, 0, 0, 6 * fff, 0, 0, 0);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The curveInit() function set the number of segments to use when drawing a Catmull-Rom
rob@100:      * curve, and setting the s parameter, which defines how tightly
rob@100:      * the curve fits to each vertex. Catmull-Rom curves are actually
rob@100:      * a subset of this curve type where the s is set to zero.
rob@100:      * This in an internal function used by curveDetail() and curveTightness().
rob@100:      */
rob@100:     var curveInit = function() {
rob@100:       // allocate only if/when used to save startup time
rob@100:       if (!curveDrawMatrix) {
rob@100:         curveBasisMatrix = new PMatrix3D();
rob@100:         curveDrawMatrix = new PMatrix3D();
rob@100:         curveInited = true;
rob@100:       }
rob@100: 
rob@100:       var s = curTightness;
rob@100:       curveBasisMatrix.set((s - 1) / 2, (s + 3) / 2, (-3 - s) / 2, (1 - s) / 2,
rob@100:                            (1 - s), (-5 - s) / 2, (s + 2), (s - 1) / 2,
rob@100:                            (s - 1) / 2, 0, (1 - s) / 2, 0, 0, 1, 0, 0);
rob@100: 
rob@100:       splineForward(curveDet, curveDrawMatrix);
rob@100: 
rob@100:       if (!bezierBasisInverse) {
rob@100:         //bezierBasisInverse = bezierBasisMatrix.get();
rob@100:         //bezierBasisInverse.invert();
rob@100:         curveToBezierMatrix = new PMatrix3D();
rob@100:       }
rob@100: 
rob@100:       // TODO only needed for PGraphicsJava2D? if so, move it there
rob@100:       // actually, it's generally useful for other renderers, so keep it
rob@100:       // or hide the implementation elsewhere.
rob@100:       curveToBezierMatrix.set(curveBasisMatrix);
rob@100:       curveToBezierMatrix.preApply(bezierBasisInverse);
rob@100: 
rob@100:       // multiply the basis and forward diff matrices together
rob@100:       // saves much time since this needn't be done for each curve
rob@100:       curveDrawMatrix.apply(curveBasisMatrix);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Specifies vertex coordinates for Bezier curves. Each call to <b>bezierVertex()</b> defines the position of two control
rob@100:      * points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time
rob@100:      * <b>bezierVertex()</b> is used within a <b>beginShape()</b> call, it must be prefaced with a call to <b>vertex()</b>
rob@100:      * to set the first anchor point. This function must be used between <b>beginShape()</b> and <b>endShape()</b> and only
rob@100:      * when there is no MODE parameter specified to <b>beginShape()</b>. Using the 3D version of requires rendering with P3D
rob@100:      * or OPENGL (see the Environment reference for more information). <br /> <br /> <b>NOTE: </b> Fill does not work properly yet.
rob@100:      *
rob@100:      * @param {float | int} cx1 The x-coordinate of 1st control point
rob@100:      * @param {float | int} cy1 The y-coordinate of 1st control point
rob@100:      * @param {float | int} cz1 The z-coordinate of 1st control point
rob@100:      * @param {float | int} cx2 The x-coordinate of 2nd control point
rob@100:      * @param {float | int} cy2 The y-coordinate of 2nd control point
rob@100:      * @param {float | int} cz2 The z-coordinate of 2nd control point
rob@100:      * @param {float | int} x   The x-coordinate of the anchor point
rob@100:      * @param {float | int} y   The y-coordinate of the anchor point
rob@100:      * @param {float | int} z   The z-coordinate of the anchor point
rob@100:      *
rob@100:      * @see curveVertex
rob@100:      * @see vertex
rob@100:      * @see bezier
rob@100:      */
rob@100:     Drawing2D.prototype.bezierVertex = function() {
rob@100:       isBezier = true;
rob@100:       var vert = [];
rob@100:       if (firstVert) {
rob@100:         throw ("vertex() must be used at least once before calling bezierVertex()");
rob@100:       }
rob@100: 
rob@100:       for (var i = 0; i < arguments.length; i++) {
rob@100:         vert[i] = arguments[i];
rob@100:       }
rob@100:       vertArray.push(vert);
rob@100:       vertArray[vertArray.length -1].isVert = false;
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.bezierVertex = function() {
rob@100:       isBezier = true;
rob@100:       var vert = [];
rob@100:       if (firstVert) {
rob@100:         throw ("vertex() must be used at least once before calling bezierVertex()");
rob@100:       }
rob@100: 
rob@100:       if (arguments.length === 9) {
rob@100:         if (bezierDrawMatrix === undef) {
rob@100:           bezierDrawMatrix = new PMatrix3D();
rob@100:         }
rob@100:         // setup matrix for forward differencing to speed up drawing
rob@100:         var lastPoint = vertArray.length - 1;
rob@100:         splineForward( bezDetail, bezierDrawMatrix );
rob@100:         bezierDrawMatrix.apply( bezierBasisMatrix );
rob@100:         var draw = bezierDrawMatrix.array();
rob@100:         var x1 = vertArray[lastPoint][0],
rob@100:             y1 = vertArray[lastPoint][1],
rob@100:             z1 = vertArray[lastPoint][2];
rob@100:         var xplot1 = draw[4] * x1 + draw[5] * arguments[0] + draw[6] * arguments[3] + draw[7] * arguments[6];
rob@100:         var xplot2 = draw[8] * x1 + draw[9] * arguments[0] + draw[10]* arguments[3] + draw[11]* arguments[6];
rob@100:         var xplot3 = draw[12]* x1 + draw[13]* arguments[0] + draw[14]* arguments[3] + draw[15]* arguments[6];
rob@100: 
rob@100:         var yplot1 = draw[4] * y1 + draw[5] * arguments[1] + draw[6] * arguments[4] + draw[7] * arguments[7];
rob@100:         var yplot2 = draw[8] * y1 + draw[9] * arguments[1] + draw[10]* arguments[4] + draw[11]* arguments[7];
rob@100:         var yplot3 = draw[12]* y1 + draw[13]* arguments[1] + draw[14]* arguments[4] + draw[15]* arguments[7];
rob@100: 
rob@100:         var zplot1 = draw[4] * z1 + draw[5] * arguments[2] + draw[6] * arguments[5] + draw[7] * arguments[8];
rob@100:         var zplot2 = draw[8] * z1 + draw[9] * arguments[2] + draw[10]* arguments[5] + draw[11]* arguments[8];
rob@100:         var zplot3 = draw[12]* z1 + draw[13]* arguments[2] + draw[14]* arguments[5] + draw[15]* arguments[8];
rob@100:         for (var j = 0; j < bezDetail; j++) {
rob@100:           x1 += xplot1; xplot1 += xplot2; xplot2 += xplot3;
rob@100:           y1 += yplot1; yplot1 += yplot2; yplot2 += yplot3;
rob@100:           z1 += zplot1; zplot1 += zplot2; zplot2 += zplot3;
rob@100:           p.vertex(x1, y1, z1);
rob@100:         }
rob@100:         p.vertex(arguments[6], arguments[7], arguments[8]);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets a texture to be applied to vertex points. The <b>texture()</b> function
rob@100:      * must be called between <b>beginShape()</b> and <b>endShape()</b> and before
rob@100:      * any calls to vertex().
rob@100:      *
rob@100:      * When textures are in use, the fill color is ignored. Instead, use tint() to
rob@100:      * specify the color of the texture as it is applied to the shape.
rob@100:      *
rob@100:      * @param {PImage} pimage the texture to apply
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see textureMode
rob@100:      * @see beginShape
rob@100:      * @see endShape
rob@100:      * @see vertex
rob@100:     */
rob@100:     p.texture = function(pimage) {
rob@100:       var curContext = drawing.$ensureContext();
rob@100: 
rob@100:       if (pimage.__texture) {
rob@100:         curContext.bindTexture(curContext.TEXTURE_2D, pimage.__texture);
rob@100:       } else if (pimage.localName === "canvas") {
rob@100:         curContext.bindTexture(curContext.TEXTURE_2D, canTex);
rob@100:         curContext.texImage2D(curContext.TEXTURE_2D, 0, curContext.RGBA, curContext.RGBA, curContext.UNSIGNED_BYTE, pimage);
rob@100:         curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_MAG_FILTER, curContext.LINEAR);
rob@100:         curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_MIN_FILTER, curContext.LINEAR);
rob@100:         curContext.generateMipmap(curContext.TEXTURE_2D);
rob@100:         curTexture.width = pimage.width;
rob@100:         curTexture.height = pimage.height;
rob@100:       } else {
rob@100:         var texture = curContext.createTexture(),
rob@100:             cvs = document.createElement('canvas'),
rob@100:             cvsTextureCtx = cvs.getContext('2d'),
rob@100:             pot;
rob@100: 
rob@100:         // WebGL requires power of two textures
rob@100:         if (pimage.width & (pimage.width-1) === 0) {
rob@100:           cvs.width = pimage.width;
rob@100:         } else {
rob@100:           pot = 1;
rob@100:           while (pot < pimage.width) {
rob@100:             pot *= 2;
rob@100:           }
rob@100:           cvs.width = pot;
rob@100:         }
rob@100: 
rob@100:         if (pimage.height & (pimage.height-1) === 0) {
rob@100:           cvs.height = pimage.height;
rob@100:         } else {
rob@100:           pot = 1;
rob@100:           while (pot < pimage.height) {
rob@100:             pot *= 2;
rob@100:           }
rob@100:           cvs.height = pot;
rob@100:         }
rob@100: 
rob@100:         cvsTextureCtx.drawImage(pimage.sourceImg, 0, 0, pimage.width, pimage.height, 0, 0, cvs.width, cvs.height);
rob@100: 
rob@100:         curContext.bindTexture(curContext.TEXTURE_2D, texture);
rob@100:         curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_MIN_FILTER, curContext.LINEAR_MIPMAP_LINEAR);
rob@100:         curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_MAG_FILTER, curContext.LINEAR);
rob@100:         curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_WRAP_T, curContext.CLAMP_TO_EDGE);
rob@100:         curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_WRAP_S, curContext.CLAMP_TO_EDGE);
rob@100:         curContext.texImage2D(curContext.TEXTURE_2D, 0, curContext.RGBA, curContext.RGBA, curContext.UNSIGNED_BYTE, cvs);
rob@100:         curContext.generateMipmap(curContext.TEXTURE_2D);
rob@100: 
rob@100:         pimage.__texture = texture;
rob@100:         curTexture.width = pimage.width;
rob@100:         curTexture.height = pimage.height;
rob@100:       }
rob@100: 
rob@100:       usingTexture = true;
rob@100:       curContext.useProgram(programObject3D);
rob@100:       uniformi("usingTexture3d", programObject3D, "uUsingTexture", usingTexture);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the coordinate space for texture mapping. There are two options, IMAGE,
rob@100:      * which refers to the actual coordinates of the image, and NORMALIZED, which
rob@100:      * refers to a normalized space of values ranging from 0 to 1. The default mode
rob@100:      * is IMAGE. In IMAGE, if an image is 100 x 200 pixels, mapping the image onto
rob@100:      * the entire size of a quad would require the points (0,0) (0,100) (100,200) (0,200).
rob@100:      * The same mapping in NORMAL_SPACE is (0,0) (0,1) (1,1) (0,1).
rob@100:      *
rob@100:      * @param MODE either IMAGE or NORMALIZED
rob@100:      *
rob@100:      * @returns none
rob@100:      *
rob@100:      * @see texture
rob@100:     */
rob@100:     p.textureMode = function(mode){
rob@100:       curTextureMode = mode;
rob@100:     };
rob@100:     /**
rob@100:      * The curveVertexSegment() function handle emitting a specific segment of Catmull-Rom curve. Internal helper function used by <b>curveVertex()</b>.
rob@100:      */
rob@100:     var curveVertexSegment = function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) {
rob@100:       var x0 = x2;
rob@100:       var y0 = y2;
rob@100:       var z0 = z2;
rob@100: 
rob@100:       var draw = curveDrawMatrix.array();
rob@100: 
rob@100:       var xplot1 = draw[4] * x1 + draw[5] * x2 + draw[6] * x3 + draw[7] * x4;
rob@100:       var xplot2 = draw[8] * x1 + draw[9] * x2 + draw[10] * x3 + draw[11] * x4;
rob@100:       var xplot3 = draw[12] * x1 + draw[13] * x2 + draw[14] * x3 + draw[15] * x4;
rob@100: 
rob@100:       var yplot1 = draw[4] * y1 + draw[5] * y2 + draw[6] * y3 + draw[7] * y4;
rob@100:       var yplot2 = draw[8] * y1 + draw[9] * y2 + draw[10] * y3 + draw[11] * y4;
rob@100:       var yplot3 = draw[12] * y1 + draw[13] * y2 + draw[14] * y3 + draw[15] * y4;
rob@100: 
rob@100:       var zplot1 = draw[4] * z1 + draw[5] * z2 + draw[6] * z3 + draw[7] * z4;
rob@100:       var zplot2 = draw[8] * z1 + draw[9] * z2 + draw[10] * z3 + draw[11] * z4;
rob@100:       var zplot3 = draw[12] * z1 + draw[13] * z2 + draw[14] * z3 + draw[15] * z4;
rob@100: 
rob@100:       p.vertex(x0, y0, z0);
rob@100:       for (var j = 0; j < curveDet; j++) {
rob@100:         x0 += xplot1; xplot1 += xplot2; xplot2 += xplot3;
rob@100:         y0 += yplot1; yplot1 += yplot2; yplot2 += yplot3;
rob@100:         z0 += zplot1; zplot1 += zplot2; zplot2 += zplot3;
rob@100:         p.vertex(x0, y0, z0);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Specifies vertex coordinates for curves. This function may only be used between <b>beginShape()</b> and
rob@100:      * <b>endShape()</b> and only when there is no MODE parameter specified to <b>beginShape()</b>. The first and last points
rob@100:      * in a series of <b>curveVertex()</b> lines will be used to guide the beginning and end of a the curve. A minimum of four
rob@100:      * points is required to draw a tiny curve between the second and third points. Adding a fifth point with
rob@100:      * <b>curveVertex()</b> will draw the curve between the second, third, and fourth points. The <b>curveVertex()</b> function
rob@100:      * is an implementation of Catmull-Rom splines. Using the 3D version of requires rendering with P3D or OPENGL (see the
rob@100:      * Environment reference for more information). <br /> <br /><b>NOTE: </b> Fill does not work properly yet.
rob@100:      *
rob@100:      * @param {float | int} x The x-coordinate of the vertex
rob@100:      * @param {float | int} y The y-coordinate of the vertex
rob@100:      * @param {float | int} z The z-coordinate of the vertex
rob@100:      *
rob@100:      * @see curve
rob@100:      * @see beginShape
rob@100:      * @see endShape
rob@100:      * @see vertex
rob@100:      * @see bezierVertex
rob@100:      */
rob@100:     Drawing2D.prototype.curveVertex = function(x, y) {
rob@100:       isCurve = true;
rob@100: 
rob@100:       p.vertex(x, y);
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.curveVertex = function(x, y, z) {
rob@100:       isCurve = true;
rob@100: 
rob@100:       if (!curveInited) {
rob@100:         curveInit();
rob@100:       }
rob@100:       var vert = [];
rob@100:       vert[0] = x;
rob@100:       vert[1] = y;
rob@100:       vert[2] = z;
rob@100:       curveVertArray.push(vert);
rob@100:       curveVertCount++;
rob@100: 
rob@100:       if (curveVertCount > 3) {
rob@100:         curveVertexSegment( curveVertArray[curveVertCount-4][0],
rob@100:                             curveVertArray[curveVertCount-4][1],
rob@100:                             curveVertArray[curveVertCount-4][2],
rob@100:                             curveVertArray[curveVertCount-3][0],
rob@100:                             curveVertArray[curveVertCount-3][1],
rob@100:                             curveVertArray[curveVertCount-3][2],
rob@100:                             curveVertArray[curveVertCount-2][0],
rob@100:                             curveVertArray[curveVertCount-2][1],
rob@100:                             curveVertArray[curveVertCount-2][2],
rob@100:                             curveVertArray[curveVertCount-1][0],
rob@100:                             curveVertArray[curveVertCount-1][1],
rob@100:                             curveVertArray[curveVertCount-1][2] );
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The curve() function draws a curved line on the screen. The first and second parameters
rob@100:      * specify the beginning control point and the last two parameters specify
rob@100:      * the ending control point. The middle parameters specify the start and
rob@100:      * stop of the curve. Longer curves can be created by putting a series of
rob@100:      * <b>curve()</b> functions together or using <b>curveVertex()</b>.
rob@100:      * An additional function called <b>curveTightness()</b> provides control
rob@100:      * for the visual quality of the curve. The <b>curve()</b> function is an
rob@100:      * implementation of Catmull-Rom splines. Using the 3D version of requires
rob@100:      * rendering with P3D or OPENGL (see the Environment reference for more
rob@100:      * information).
rob@100:      *
rob@100:      * @param {int|float} x1 coordinates for the beginning control point
rob@100:      * @param {int|float} y1 coordinates for the beginning control point
rob@100:      * @param {int|float} z1 coordinates for the beginning control point
rob@100:      * @param {int|float} x2 coordinates for the first point
rob@100:      * @param {int|float} y2 coordinates for the first point
rob@100:      * @param {int|float} z2 coordinates for the first point
rob@100:      * @param {int|float} x3 coordinates for the second point
rob@100:      * @param {int|float} y3 coordinates for the second point
rob@100:      * @param {int|float} z3 coordinates for the second point
rob@100:      * @param {int|float} x4 coordinates for the ending control point
rob@100:      * @param {int|float} y4 coordinates for the ending control point
rob@100:      * @param {int|float} z4 coordinates for the ending control point
rob@100:      *
rob@100:      * @see #curveVertex()
rob@100:      * @see #curveTightness()
rob@100:      * @see #bezier()
rob@100:      */
rob@100:     Drawing2D.prototype.curve = function(x1, y1, x2, y2, x3, y3, x4, y4) {
rob@100:       p.beginShape();
rob@100:       p.curveVertex(x1, y1);
rob@100:       p.curveVertex(x2, y2);
rob@100:       p.curveVertex(x3, y3);
rob@100:       p.curveVertex(x4, y4);
rob@100:       p.endShape();
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.curve = function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) {
rob@100:       if (z4 !== undef) {
rob@100:         p.beginShape();
rob@100:         p.curveVertex(x1, y1, z1);
rob@100:         p.curveVertex(x2, y2, z2);
rob@100:         p.curveVertex(x3, y3, z3);
rob@100:         p.curveVertex(x4, y4, z4);
rob@100:         p.endShape();
rob@100:         return;
rob@100:       }
rob@100:       p.beginShape();
rob@100:       p.curveVertex(x1, y1);
rob@100:       p.curveVertex(z1, x2);
rob@100:       p.curveVertex(y2, z2);
rob@100:       p.curveVertex(x3, y3);
rob@100:       p.endShape();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The curveTightness() function modifies the quality of forms created with <b>curve()</b> and
rob@100:      * <b>curveVertex()</b>. The parameter <b>squishy</b> determines how the
rob@100:      * curve fits to the vertex points. The value 0.0 is the default value for
rob@100:      * <b>squishy</b> (this value defines the curves to be Catmull-Rom splines)
rob@100:      * and the value 1.0 connects all the points with straight lines.
rob@100:      * Values within the range -5.0 and 5.0 will deform the curves but
rob@100:      * will leave them recognizable and as values increase in magnitude,
rob@100:      * they will continue to deform.
rob@100:      *
rob@100:      * @param {float} tightness amount of deformation from the original vertices
rob@100:      *
rob@100:      * @see #curve()
rob@100:      * @see #curveVertex()
rob@100:      *
rob@100:      */
rob@100:     p.curveTightness = function(tightness) {
rob@100:       curTightness = tightness;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The curveDetail() function sets the resolution at which curves display. The default value is 20.
rob@100:      * This function is only useful when using the P3D or OPENGL renderer.
rob@100:      *
rob@100:      * @param {int} detail resolution of the curves
rob@100:      *
rob@100:      * @see curve()
rob@100:      * @see curveVertex()
rob@100:      * @see curveTightness()
rob@100:      */
rob@100:     p.curveDetail = function(detail) {
rob@100:       curveDet = detail;
rob@100:       curveInit();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Modifies the location from which rectangles draw. The default mode is rectMode(CORNER), which
rob@100:     * specifies the location to be the upper left corner of the shape and uses the third and fourth
rob@100:     * parameters of rect() to specify the width and height. The syntax rectMode(CORNERS) uses the
rob@100:     * first and second parameters of rect() to set the location of one corner and uses the third and
rob@100:     * fourth parameters to set the opposite corner. The syntax rectMode(CENTER) draws the image from
rob@100:     * its center point and uses the third and forth parameters of rect() to specify the image's width
rob@100:     * and height. The syntax rectMode(RADIUS) draws the image from its center point and uses the third
rob@100:     * and forth parameters of rect()  to specify half of the image's width and height. The parameter must
rob@100:     * be written in ALL CAPS because Processing is a case sensitive language. Note: In version 125, the
rob@100:     * mode named CENTER_RADIUS was shortened to RADIUS.
rob@100:     *
rob@100:     * @param {MODE} MODE      Either CORNER, CORNERS, CENTER, or RADIUS
rob@100:     *
rob@100:     * @see rect
rob@100:     */
rob@100:     p.rectMode = function(aRectMode) {
rob@100:       curRectMode = aRectMode;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Modifies the location from which images draw. The default mode is imageMode(CORNER), which specifies
rob@100:     * the location to be the upper left corner and uses the fourth and fifth parameters of image() to set
rob@100:     * the image's width and height. The syntax imageMode(CORNERS) uses the second and third parameters of
rob@100:     * image() to set the location of one corner of the image and uses the fourth and fifth parameters to
rob@100:     * set the opposite corner. Use imageMode(CENTER) to draw images centered at the given x and y position.
rob@100:     * The parameter to imageMode() must be written in ALL CAPS because Processing is a case sensitive language.
rob@100:     *
rob@100:     * @param {MODE} MODE      Either CORNER, CORNERS, or CENTER
rob@100:     *
rob@100:     * @see loadImage
rob@100:     * @see PImage
rob@100:     * @see image
rob@100:     * @see background
rob@100:     */
rob@100:     p.imageMode = function(mode) {
rob@100:       switch (mode) {
rob@100:       case PConstants.CORNER:
rob@100:         imageModeConvert = imageModeCorner;
rob@100:         break;
rob@100:       case PConstants.CORNERS:
rob@100:         imageModeConvert = imageModeCorners;
rob@100:         break;
rob@100:       case PConstants.CENTER:
rob@100:         imageModeConvert = imageModeCenter;
rob@100:         break;
rob@100:       default:
rob@100:         throw "Invalid imageMode";
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * The origin of the ellipse is modified by the ellipseMode() function. The default configuration is
rob@100:     * ellipseMode(CENTER), which specifies the location of the ellipse as the center of the shape. The RADIUS
rob@100:     * mode is the same, but the width and height parameters to ellipse()  specify the radius of the ellipse,
rob@100:     * rather than the diameter. The CORNER mode draws the shape from the upper-left corner of its bounding box.
rob@100:     * The CORNERS mode uses the four parameters to ellipse() to set two opposing corners of the ellipse's bounding
rob@100:     * box. The parameter must be written in "ALL CAPS" because Processing is a case sensitive language.
rob@100:     *
rob@100:     * @param {MODE} MODE      Either CENTER, RADIUS, CORNER, or CORNERS.
rob@100:     *
rob@100:     * @see ellipse
rob@100:     */
rob@100:     p.ellipseMode = function(aEllipseMode) {
rob@100:       curEllipseMode = aEllipseMode;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The arc() function draws an arc in the display window.
rob@100:      * Arcs are drawn along the outer edge of an ellipse defined by the
rob@100:      * <b>x</b>, <b>y</b>, <b>width</b> and <b>height</b> parameters.
rob@100:      * The origin or the arc's ellipse may be changed with the
rob@100:      * <b>ellipseMode()</b> function.
rob@100:      * The <b>start</b> and <b>stop</b> parameters specify the angles
rob@100:      * at which to draw the arc.
rob@100:      *
rob@100:      * @param {float} a       x-coordinate of the arc's ellipse
rob@100:      * @param {float} b       y-coordinate of the arc's ellipse
rob@100:      * @param {float} c       width of the arc's ellipse
rob@100:      * @param {float} d       height of the arc's ellipse
rob@100:      * @param {float} start   angle to start the arc, specified in radians
rob@100:      * @param {float} stop    angle to stop the arc, specified in radians
rob@100:      *
rob@100:      * @see #ellipseMode()
rob@100:      * @see #ellipse()
rob@100:      */
rob@100:     p.arc = function(x, y, width, height, start, stop) {
rob@100:       if (width <= 0 || stop < start) { return; }
rob@100: 
rob@100:       if (curEllipseMode === PConstants.CORNERS) {
rob@100:         width = width - x;
rob@100:         height = height - y;
rob@100:       } else if (curEllipseMode === PConstants.RADIUS) {
rob@100:         x = x - width;
rob@100:         y = y - height;
rob@100:         width = width * 2;
rob@100:         height = height * 2;
rob@100:       } else if (curEllipseMode === PConstants.CENTER) {
rob@100:         x = x - width/2;
rob@100:         y = y - height/2;
rob@100:       }
rob@100:       // make sure that we're starting at a useful point
rob@100:       while (start < 0) {
rob@100:         start += PConstants.TWO_PI;
rob@100:         stop += PConstants.TWO_PI;
rob@100:       }
rob@100:       if (stop - start > PConstants.TWO_PI) {
rob@100:         start = 0;
rob@100:         stop = PConstants.TWO_PI;
rob@100:       }
rob@100:       var hr = width / 2,
rob@100:           vr = height / 2,
rob@100:           centerX = x + hr,
rob@100:           centerY = y + vr,
rob@100:           startLUT = 0 | (0.5 + start * p.RAD_TO_DEG * 2),
rob@100:           stopLUT  = 0 | (0.5 + stop * p.RAD_TO_DEG * 2),
rob@100:           i, j;
rob@100:       if (doFill) {
rob@100:         // shut off stroke for a minute
rob@100:         var savedStroke = doStroke;
rob@100:         doStroke = false;
rob@100:         p.beginShape();
rob@100:         p.vertex(centerX, centerY);
rob@100:         for (i = startLUT; i <= stopLUT; i++) {
rob@100:           j = i % PConstants.SINCOS_LENGTH;
rob@100:           p.vertex(centerX + cosLUT[j] * hr, centerY + sinLUT[j] * vr);
rob@100:         }
rob@100:         p.endShape(PConstants.CLOSE);
rob@100:         doStroke = savedStroke;
rob@100:       }
rob@100: 
rob@100:       if (doStroke) {
rob@100:         // and doesn't include the first (center) vertex.
rob@100:         var savedFill = doFill;
rob@100:         doFill = false;
rob@100:         p.beginShape();
rob@100:         for (i = startLUT; i <= stopLUT; i++) {
rob@100:           j = i % PConstants.SINCOS_LENGTH;
rob@100:           p.vertex(centerX + cosLUT[j] * hr, centerY + sinLUT[j] * vr);
rob@100:         }
rob@100:         p.endShape();
rob@100:         doFill = savedFill;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Draws a line (a direct path between two points) to the screen. The version of line() with four parameters
rob@100:     * draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the
rob@100:     * fill()  method will not affect the color of a line. 2D lines are drawn with a width of one pixel by default,
rob@100:     * but this can be changed with the strokeWeight()  function. The version with six parameters allows the line
rob@100:     * to be placed anywhere within XYZ space. Drawing this shape in 3D using the z parameter requires the P3D or
rob@100:     * OPENGL parameter in combination with size.
rob@100:     *
rob@100:     * @param {int|float} x1       x-coordinate of the first point
rob@100:     * @param {int|float} y1       y-coordinate of the first point
rob@100:     * @param {int|float} z1       z-coordinate of the first point
rob@100:     * @param {int|float} x2       x-coordinate of the second point
rob@100:     * @param {int|float} y2       y-coordinate of the second point
rob@100:     * @param {int|float} z2       z-coordinate of the second point
rob@100:     *
rob@100:     * @see strokeWeight
rob@100:     * @see strokeJoin
rob@100:     * @see strokeCap
rob@100:     * @see beginShape
rob@100:     */
rob@100:     Drawing2D.prototype.line = function(x1, y1, x2, y2) {
rob@100:       if (!doStroke) {
rob@100:         return;
rob@100:       }
rob@100:       x1 = Math.round(x1);
rob@100:       x2 = Math.round(x2);
rob@100:       y1 = Math.round(y1);
rob@100:       y2 = Math.round(y2);
rob@100:       // A line is only defined if it has different start and end coordinates.
rob@100:       // If they are the same, we call point instead.
rob@100:       if (x1 === x2 && y1 === y2) {
rob@100:         p.point(x1, y1);
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       var swap = undef,
rob@100:           lineCap = undef,
rob@100:           drawCrisp = true,
rob@100:           currentModelView = modelView.array(),
rob@100:           identityMatrix = [1, 0, 0, 0, 1, 0];
rob@100:       // Test if any transformations have been applied to the sketch
rob@100:       for (var i = 0; i < 6 && drawCrisp; i++) {
rob@100:         drawCrisp = currentModelView[i] === identityMatrix[i];
rob@100:       }
rob@100:       /* Draw crisp lines if the line is vertical or horizontal with the following method
rob@100:        * If any transformations have been applied to the sketch, don't make the line crisp
rob@100:        * If the line is directed up or to the left, reverse it by swapping x1/x2 or y1/y2
rob@100:        * Make the line 1 pixel longer to work around cross-platform canvas implementations
rob@100:        * If the lineWidth is odd, translate the line by 0.5 in the perpendicular direction
rob@100:        * Even lineWidths do not need to be translated because the canvas will draw them on pixel boundaries
rob@100:        * Change the cap to butt-end to work around cross-platform canvas implementations
rob@100:        * Reverse the translate and lineCap canvas state changes after drawing the line
rob@100:        */
rob@100:       if (drawCrisp) {
rob@100:         if (x1 === x2) {
rob@100:           if (y1 > y2) {
rob@100:             swap = y1;
rob@100:             y1 = y2;
rob@100:             y2 = swap;
rob@100:           }
rob@100:           y2++;
rob@100:           if (lineWidth % 2 === 1) {
rob@100:             curContext.translate(0.5, 0.0);
rob@100:           }
rob@100:         } else if (y1 === y2) {
rob@100:           if (x1 > x2) {
rob@100:             swap = x1;
rob@100:             x1 = x2;
rob@100:             x2 = swap;
rob@100:           }
rob@100:           x2++;
rob@100:           if (lineWidth % 2 === 1) {
rob@100:             curContext.translate(0.0, 0.5);
rob@100:           }
rob@100:         }
rob@100:         if (lineWidth === 1) {
rob@100:           lineCap = curContext.lineCap;
rob@100:           curContext.lineCap = 'butt';
rob@100:         }
rob@100:       }
rob@100:       curContext.beginPath();
rob@100:       curContext.moveTo(x1 || 0, y1 || 0);
rob@100:       curContext.lineTo(x2 || 0, y2 || 0);
rob@100:       executeContextStroke();
rob@100:       if (drawCrisp) {
rob@100:         if (x1 === x2 && lineWidth % 2 === 1) {
rob@100:           curContext.translate(-0.5, 0.0);
rob@100:         } else if (y1 === y2 && lineWidth % 2 === 1) {
rob@100:           curContext.translate(0.0, -0.5);
rob@100:         }
rob@100:         if (lineWidth === 1) {
rob@100:           curContext.lineCap = lineCap;
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.line = function(x1, y1, z1, x2, y2, z2) {
rob@100:       if (y2 === undef || z2 === undef) { // 2D line called in 3D context
rob@100:         z2 = 0;
rob@100:         y2 = x2;
rob@100:         x2 = z1;
rob@100:         z1 = 0;
rob@100:       }
rob@100: 
rob@100:       // a line is only defined if it has different start and end coordinates.
rob@100:       // If they are the same, we call point instead.
rob@100:       if (x1===x2 && y1===y2 && z1===z2) {
rob@100:         p.point(x1,y1,z1);
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       var lineVerts = [x1, y1, z1, x2, y2, z2];
rob@100: 
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       if (lineWidth > 0 && doStroke) {
rob@100:         curContext.useProgram(programObject2D);
rob@100: 
rob@100:         uniformMatrix("uModel2d", programObject2D, "uModel", false, [1,0,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1]);
rob@100:         uniformMatrix("uView2d", programObject2D, "uView", false, view.array());
rob@100: 
rob@100:         uniformf("uColor2d", programObject2D, "uColor", strokeStyle);
rob@100:         uniformi("uIsDrawingText", programObject2D, "uIsDrawingText", false);
rob@100: 
rob@100:         vertexAttribPointer("aVertex2d", programObject2D, "aVertex", 3, lineBuffer);
rob@100:         disableVertexAttribPointer("aTextureCoord2d", programObject2D, "aTextureCoord");
rob@100: 
rob@100:         curContext.bufferData(curContext.ARRAY_BUFFER, new Float32Array(lineVerts), curContext.STREAM_DRAW);
rob@100:         curContext.drawArrays(curContext.LINES, 0, 2);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Draws a Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first
rob@100:      * two parameters specify the first anchor point and the last two parameters specify the other anchor point. The
rob@100:      * middle parameters specify the control points which define the shape of the curve. Bezier curves were developed
rob@100:      * by French engineer Pierre Bezier. Using the 3D version of requires rendering with P3D or OPENGL (see the
rob@100:      * Environment reference for more information).
rob@100:      *
rob@100:      * @param {int | float} x1,y1,z1    coordinates for the first anchor point
rob@100:      * @param {int | float} cx1,cy1,cz1 coordinates for the first control point
rob@100:      * @param {int | float} cx2,cy2,cz2 coordinates for the second control point
rob@100:      * @param {int | float} x2,y2,z2    coordinates for the second anchor point
rob@100:      *
rob@100:      * @see bezierVertex
rob@100:      * @see curve
rob@100:      */
rob@100:     Drawing2D.prototype.bezier = function() {
rob@100:       if (arguments.length !== 8) {
rob@100:         throw("You must use 8 parameters for bezier() in 2D mode");
rob@100:       }
rob@100: 
rob@100:       p.beginShape();
rob@100:       p.vertex( arguments[0], arguments[1] );
rob@100:       p.bezierVertex( arguments[2], arguments[3],
rob@100:                       arguments[4], arguments[5],
rob@100:                       arguments[6], arguments[7] );
rob@100:       p.endShape();
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.bezier = function() {
rob@100:       if (arguments.length !== 12) {
rob@100:         throw("You must use 12 parameters for bezier() in 3D mode");
rob@100:       }
rob@100: 
rob@100:       p.beginShape();
rob@100:       p.vertex( arguments[0], arguments[1], arguments[2] );
rob@100:       p.bezierVertex( arguments[3], arguments[4], arguments[5],
rob@100:                       arguments[6], arguments[7], arguments[8],
rob@100:                       arguments[9], arguments[10], arguments[11] );
rob@100:       p.endShape();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the resolution at which Beziers display. The default value is 20. This function is only useful when using the P3D
rob@100:      * or OPENGL renderer as the default (JAVA2D) renderer does not use this information.
rob@100:      *
rob@100:      * @param {int} detail resolution of the curves
rob@100:      *
rob@100:      * @see curve
rob@100:      * @see curveVertex
rob@100:      * @see curveTightness
rob@100:      */
rob@100:     p.bezierDetail = function( detail ){
rob@100:       bezDetail = detail;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The bezierPoint() function evalutes quadratic bezier at point t for points a, b, c, d.
rob@100:      * The parameter t varies between 0 and 1. The a and d parameters are the
rob@100:      * on-curve points, b and c are the control points. To make a two-dimensional
rob@100:      * curve, call this function once with the x coordinates and a second time
rob@100:      * with the y coordinates to get the location of a bezier curve at t.
rob@100:      *
rob@100:      * @param {float} a   coordinate of first point on the curve
rob@100:      * @param {float} b   coordinate of first control point
rob@100:      * @param {float} c   coordinate of second control point
rob@100:      * @param {float} d   coordinate of second point on the curve
rob@100:      * @param {float} t   value between 0 and 1
rob@100:      *
rob@100:      * @see #bezier()
rob@100:      * @see #bezierVertex()
rob@100:      * @see #curvePoint()
rob@100:      */
rob@100:     p.bezierPoint = function(a, b, c, d, t) {
rob@100:       return (1 - t) * (1 - t) * (1 - t) * a + 3 * (1 - t) * (1 - t) * t * b + 3 * (1 - t) * t * t * c + t * t * t * d;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The bezierTangent() function calculates the tangent of a point on a Bezier curve. There is a good
rob@100:      * definition of "tangent" at Wikipedia: <a href="http://en.wikipedia.org/wiki/Tangent" target="new">http://en.wikipedia.org/wiki/Tangent</a>
rob@100:      *
rob@100:      * @param {float} a   coordinate of first point on the curve
rob@100:      * @param {float} b   coordinate of first control point
rob@100:      * @param {float} c   coordinate of second control point
rob@100:      * @param {float} d   coordinate of second point on the curve
rob@100:      * @param {float} t   value between 0 and 1
rob@100:      *
rob@100:      * @see #bezier()
rob@100:      * @see #bezierVertex()
rob@100:      * @see #curvePoint()
rob@100:      */
rob@100:     p.bezierTangent = function(a, b, c, d, t) {
rob@100:       return (3 * t * t * (-a + 3 * b - 3 * c + d) + 6 * t * (a - 2 * b + c) + 3 * (-a + b));
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The curvePoint() function evalutes the Catmull-Rom curve at point t for points a, b, c, d. The
rob@100:      * parameter t varies between 0 and 1, a and d are points on the curve,
rob@100:      * and b and c are the control points. This can be done once with the x
rob@100:      * coordinates and a second time with the y coordinates to get the
rob@100:      * location of a curve at t.
rob@100:      *
rob@100:      * @param {int|float} a   coordinate of first point on the curve
rob@100:      * @param {int|float} b   coordinate of second point on the curve
rob@100:      * @param {int|float} c   coordinate of third point on the curve
rob@100:      * @param {int|float} d   coordinate of fourth point on the curve
rob@100:      * @param {float} t       value between 0 and 1
rob@100:      *
rob@100:      * @see #curve()
rob@100:      * @see #curveVertex()
rob@100:      * @see #bezierPoint()
rob@100:      */
rob@100:     p.curvePoint = function(a, b, c, d, t) {
rob@100:       return 0.5 * ((2 * b) + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (-a + 3 * b - 3 * c + d) * t * t * t);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The curveTangent() function calculates the tangent of a point on a Catmull-Rom curve.
rob@100:      * There is a good definition of "tangent" at Wikipedia: <a href="http://en.wikipedia.org/wiki/Tangent" target="new">http://en.wikipedia.org/wiki/Tangent</a>.
rob@100:      *
rob@100:      * @param {int|float} a   coordinate of first point on the curve
rob@100:      * @param {int|float} b   coordinate of first control point
rob@100:      * @param {int|float} c   coordinate of second control point
rob@100:      * @param {int|float} d   coordinate of second point on the curve
rob@100:      * @param {float} t       value between 0 and 1
rob@100:      *
rob@100:      * @see #curve()
rob@100:      * @see #curveVertex()
rob@100:      * @see #curvePoint()
rob@100:      * @see #bezierTangent()
rob@100:      */
rob@100:     p.curveTangent = function(a, b, c, d, t) {
rob@100:       return 0.5 * ((-a + c) + 2 * (2 * a - 5 * b + 4 * c - d) * t + 3 * (-a + 3 * b - 3 * c + d) * t * t);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * A triangle is a plane created by connecting three points. The first two arguments specify the first point,
rob@100:      * the middle two arguments specify the second point, and the last two arguments specify the third point.
rob@100:      *
rob@100:      * @param {int | float} x1 x-coordinate of the first point
rob@100:      * @param {int | float} y1 y-coordinate of the first point
rob@100:      * @param {int | float} x2 x-coordinate of the second point
rob@100:      * @param {int | float} y2 y-coordinate of the second point
rob@100:      * @param {int | float} x3 x-coordinate of the third point
rob@100:      * @param {int | float} y3 y-coordinate of the third point
rob@100:      */
rob@100:     p.triangle = function(x1, y1, x2, y2, x3, y3) {
rob@100:       p.beginShape(PConstants.TRIANGLES);
rob@100:       p.vertex(x1, y1, 0);
rob@100:       p.vertex(x2, y2, 0);
rob@100:       p.vertex(x3, y3, 0);
rob@100:       p.endShape();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its
rob@100:      * edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex
rob@100:      * and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape.
rob@100:      *
rob@100:      * @param {float | int} x1 x-coordinate of the first corner
rob@100:      * @param {float | int} y1 y-coordinate of the first corner
rob@100:      * @param {float | int} x2 x-coordinate of the second corner
rob@100:      * @param {float | int} y2 y-coordinate of the second corner
rob@100:      * @param {float | int} x3 x-coordinate of the third corner
rob@100:      * @param {float | int} y3 y-coordinate of the third corner
rob@100:      * @param {float | int} x4 x-coordinate of the fourth corner
rob@100:      * @param {float | int} y4 y-coordinate of the fourth corner
rob@100:      */
rob@100:     p.quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {
rob@100:       p.beginShape(PConstants.QUADS);
rob@100:       p.vertex(x1, y1, 0);
rob@100:       p.vertex(x2, y2, 0);
rob@100:       p.vertex(x3, y3, 0);
rob@100:       p.vertex(x4, y4, 0);
rob@100:       p.endShape();
rob@100:     };
rob@100: 
rob@100:     var roundedRect$2d = function(x, y, width, height, tl, tr, br, bl) {
rob@100:       if (bl === undef) {
rob@100:         tr = tl;
rob@100:         br = tl;
rob@100:         bl = tl;
rob@100:       }
rob@100:       var halfWidth = width / 2,
rob@100:           halfHeight = height / 2;
rob@100:       if (tl > halfWidth || tl > halfHeight) {
rob@100:         tl = Math.min(halfWidth, halfHeight);
rob@100:       }
rob@100:       if (tr > halfWidth || tr > halfHeight) {
rob@100:         tr = Math.min(halfWidth, halfHeight);
rob@100:       }
rob@100:       if (br > halfWidth || br > halfHeight) {
rob@100:         br = Math.min(halfWidth, halfHeight);
rob@100:       }
rob@100:       if (bl > halfWidth || bl > halfHeight) {
rob@100:         bl = Math.min(halfWidth, halfHeight);
rob@100:       }
rob@100:       // Translate the stroke by (0.5, 0.5) to draw a crisp border
rob@100:       if (!doFill || doStroke) {
rob@100:         curContext.translate(0.5, 0.5);
rob@100:       }
rob@100:       curContext.beginPath();
rob@100:       curContext.moveTo(x + tl, y);
rob@100:       curContext.lineTo(x + width - tr, y);
rob@100:       curContext.quadraticCurveTo(x + width, y, x + width, y + tr);
rob@100:       curContext.lineTo(x + width, y + height - br);
rob@100:       curContext.quadraticCurveTo(x + width, y + height, x + width - br, y + height);
rob@100:       curContext.lineTo(x + bl, y + height);
rob@100:       curContext.quadraticCurveTo(x, y + height, x, y + height - bl);
rob@100:       curContext.lineTo(x, y + tl);
rob@100:       curContext.quadraticCurveTo(x, y, x + tl, y);
rob@100:       if (!doFill || doStroke) {
rob@100:         curContext.translate(-0.5, -0.5);
rob@100:       }
rob@100:       executeContextFill();
rob@100:       executeContextStroke();
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety
rob@100:     * degrees. The first two parameters set the location, the third sets the width, and the fourth
rob@100:     * sets the height. The origin is changed with the rectMode() function.
rob@100:     *
rob@100:     * @param {int|float} x        x-coordinate of the rectangle
rob@100:     * @param {int|float} y        y-coordinate of the rectangle
rob@100:     * @param {int|float} width    width of the rectangle
rob@100:     * @param {int|float} height   height of the rectangle
rob@100:     *
rob@100:     * @see rectMode
rob@100:     * @see quad
rob@100:     */
rob@100:     Drawing2D.prototype.rect = function(x, y, width, height, tl, tr, br, bl) {
rob@100:       if (!width && !height) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       if (curRectMode === PConstants.CORNERS) {
rob@100:         width -= x;
rob@100:         height -= y;
rob@100:       } else if (curRectMode === PConstants.RADIUS) {
rob@100:         width *= 2;
rob@100:         height *= 2;
rob@100:         x -= width / 2;
rob@100:         y -= height / 2;
rob@100:       } else if (curRectMode === PConstants.CENTER) {
rob@100:         x -= width / 2;
rob@100:         y -= height / 2;
rob@100:       }
rob@100: 
rob@100:       x = Math.round(x);
rob@100:       y = Math.round(y);
rob@100:       width = Math.round(width);
rob@100:       height = Math.round(height);
rob@100:       if (tl !== undef) {
rob@100:         roundedRect$2d(x, y, width, height, tl, tr, br, bl);
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       // Translate the line by (0.5, 0.5) to draw a crisp rectangle border
rob@100:       if (doStroke && lineWidth % 2 === 1) {
rob@100:         curContext.translate(0.5, 0.5);
rob@100:       }
rob@100:       curContext.beginPath();
rob@100:       curContext.rect(x, y, width, height);
rob@100:       executeContextFill();
rob@100:       executeContextStroke();
rob@100:       if (doStroke && lineWidth % 2 === 1) {
rob@100:         curContext.translate(-0.5, -0.5);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.rect = function(x, y, width, height, tl, tr, br, bl) {
rob@100:       if (tl !== undef) {
rob@100:         throw "rect() with rounded corners is not supported in 3D mode";
rob@100:       }
rob@100: 
rob@100:       if (curRectMode === PConstants.CORNERS) {
rob@100:         width -= x;
rob@100:         height -= y;
rob@100:       } else if (curRectMode === PConstants.RADIUS) {
rob@100:         width *= 2;
rob@100:         height *= 2;
rob@100:         x -= width / 2;
rob@100:         y -= height / 2;
rob@100:       } else if (curRectMode === PConstants.CENTER) {
rob@100:         x -= width / 2;
rob@100:         y -= height / 2;
rob@100:       }
rob@100: 
rob@100:       // Modeling transformation
rob@100:       var model = new PMatrix3D();
rob@100:       model.translate(x, y, 0);
rob@100:       model.scale(width, height, 1);
rob@100:       model.transpose();
rob@100: 
rob@100:       // viewing transformation needs to have Y flipped
rob@100:       // becuase that's what Processing does.
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       if (lineWidth > 0 && doStroke) {
rob@100:         curContext.useProgram(programObject2D);
rob@100:         uniformMatrix("uModel2d", programObject2D, "uModel", false, model.array());
rob@100:         uniformMatrix("uView2d", programObject2D, "uView", false, view.array());
rob@100:         uniformf("uColor2d", programObject2D, "uColor", strokeStyle);
rob@100:         uniformi("uIsDrawingText2d", programObject2D, "uIsDrawingText", false);
rob@100:         vertexAttribPointer("aVertex2d", programObject2D, "aVertex", 3, rectBuffer);
rob@100:         disableVertexAttribPointer("aTextureCoord2d", programObject2D, "aTextureCoord");
rob@100:         curContext.drawArrays(curContext.LINE_LOOP, 0, rectVerts.length / 3);
rob@100:       }
rob@100: 
rob@100:       if (doFill) {
rob@100:         curContext.useProgram(programObject3D);
rob@100:         uniformMatrix("uModel3d", programObject3D, "uModel", false, model.array());
rob@100:         uniformMatrix("uView3d", programObject3D, "uView", false, view.array());
rob@100: 
rob@100:         // fix stitching problems. (lines get occluded by triangles
rob@100:         // since they share the same depth values). This is not entirely
rob@100:         // working, but it's a start for drawing the outline. So
rob@100:         // developers can start playing around with styles.
rob@100:         curContext.enable(curContext.POLYGON_OFFSET_FILL);
rob@100:         curContext.polygonOffset(1, 1);
rob@100: 
rob@100:         uniformf("color3d", programObject3D, "uColor", fillStyle);
rob@100: 
rob@100:         if(lightCount > 0){
rob@100:           var v = new PMatrix3D();
rob@100:           v.set(view);
rob@100: 
rob@100:           var m = new PMatrix3D();
rob@100:           m.set(model);
rob@100: 
rob@100:           v.mult(m);
rob@100: 
rob@100:           var normalMatrix = new PMatrix3D();
rob@100:           normalMatrix.set(v);
rob@100:           normalMatrix.invert();
rob@100:           normalMatrix.transpose();
rob@100: 
rob@100:           uniformMatrix("uNormalTransform3d", programObject3D, "uNormalTransform", false, normalMatrix.array());
rob@100:           vertexAttribPointer("aNormal3d", programObject3D, "aNormal", 3, rectNormBuffer);
rob@100:         }
rob@100:         else{
rob@100:           disableVertexAttribPointer("normal3d", programObject3D, "aNormal");
rob@100:         }
rob@100: 
rob@100:         vertexAttribPointer("vertex3d", programObject3D, "aVertex", 3, rectBuffer);
rob@100: 
rob@100:         curContext.drawArrays(curContext.TRIANGLE_FAN, 0, rectVerts.length / 3);
rob@100:         curContext.disable(curContext.POLYGON_OFFSET_FILL);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Draws an ellipse (oval) in the display window. An ellipse with an equal <b>width</b> and <b>height</b> is a circle.
rob@100:      * The first two parameters set the location, the third sets the width, and the fourth sets the height. The origin may be
rob@100:      * changed with the <b>ellipseMode()</b> function.
rob@100:      *
rob@100:      * @param {float|int} x      x-coordinate of the ellipse
rob@100:      * @param {float|int} y      y-coordinate of the ellipse
rob@100:      * @param {float|int} width  width of the ellipse
rob@100:      * @param {float|int} height height of the ellipse
rob@100:      *
rob@100:      * @see ellipseMode
rob@100:      */
rob@100:     Drawing2D.prototype.ellipse = function(x, y, width, height) {
rob@100:       x = x || 0;
rob@100:       y = y || 0;
rob@100: 
rob@100:       if (width <= 0 && height <= 0) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       if (curEllipseMode === PConstants.RADIUS) {
rob@100:         width *= 2;
rob@100:         height *= 2;
rob@100:       } else if (curEllipseMode === PConstants.CORNERS) {
rob@100:         width = width - x;
rob@100:         height = height - y;
rob@100:         x += width / 2;
rob@100:         y += height / 2;
rob@100:       } else if (curEllipseMode === PConstants.CORNER) {
rob@100:         x += width / 2;
rob@100:         y += height / 2;
rob@100:       }
rob@100: 
rob@100:       // Shortcut for drawing a 2D circle
rob@100:       if (width === height) {
rob@100:         curContext.beginPath();
rob@100:         curContext.arc(x, y, width / 2, 0, PConstants.TWO_PI, false);
rob@100:         executeContextFill();
rob@100:         executeContextStroke();
rob@100:       } else {
rob@100:         var w = width / 2,
rob@100:             h = height / 2,
rob@100:             C = 0.5522847498307933,
rob@100:             c_x = C * w,
rob@100:             c_y = C * h;
rob@100: 
rob@100:         p.beginShape();
rob@100:         p.vertex(x + w, y);
rob@100:         p.bezierVertex(x + w, y - c_y, x + c_x, y - h, x, y - h);
rob@100:         p.bezierVertex(x - c_x, y - h, x - w, y - c_y, x - w, y);
rob@100:         p.bezierVertex(x - w, y + c_y, x - c_x, y + h, x, y + h);
rob@100:         p.bezierVertex(x + c_x, y + h, x + w, y + c_y, x + w, y);
rob@100:         p.endShape();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.ellipse = function(x, y, width, height) {
rob@100:       x = x || 0;
rob@100:       y = y || 0;
rob@100: 
rob@100:       if (width <= 0 && height <= 0) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       if (curEllipseMode === PConstants.RADIUS) {
rob@100:         width *= 2;
rob@100:         height *= 2;
rob@100:       } else if (curEllipseMode === PConstants.CORNERS) {
rob@100:         width = width - x;
rob@100:         height = height - y;
rob@100:         x += width / 2;
rob@100:         y += height / 2;
rob@100:       } else if (curEllipseMode === PConstants.CORNER) {
rob@100:         x += width / 2;
rob@100:         y += height / 2;
rob@100:       }
rob@100: 
rob@100:       var w = width / 2,
rob@100:           h = height / 2,
rob@100:           C = 0.5522847498307933,
rob@100:           c_x = C * w,
rob@100:           c_y = C * h;
rob@100: 
rob@100:       p.beginShape();
rob@100:       p.vertex(x + w, y);
rob@100:       p.bezierVertex(x + w, y - c_y, 0, x + c_x, y - h, 0, x, y - h, 0);
rob@100:       p.bezierVertex(x - c_x, y - h, 0, x - w, y - c_y, 0, x - w, y, 0);
rob@100:       p.bezierVertex(x - w, y + c_y, 0, x - c_x, y + h, 0, x, y + h, 0);
rob@100:       p.bezierVertex(x + c_x, y + h, 0, x + w, y + c_y, 0, x + w, y, 0);
rob@100:       p.endShape();
rob@100: 
rob@100:       if (doFill) {
rob@100:         //temporary workaround to not working fills for bezier -- will fix later
rob@100:         var xAv = 0, yAv = 0, i, j;
rob@100:         for (i = 0; i < vertArray.length; i++) {
rob@100:           xAv += vertArray[i][0];
rob@100:           yAv += vertArray[i][1];
rob@100:         }
rob@100:         xAv /= vertArray.length;
rob@100:         yAv /= vertArray.length;
rob@100:         var vert = [],
rob@100:             fillVertArray = [],
rob@100:             colorVertArray = [];
rob@100:         vert[0] = xAv;
rob@100:         vert[1] = yAv;
rob@100:         vert[2] = 0;
rob@100:         vert[3] = 0;
rob@100:         vert[4] = 0;
rob@100:         vert[5] = fillStyle[0];
rob@100:         vert[6] = fillStyle[1];
rob@100:         vert[7] = fillStyle[2];
rob@100:         vert[8] = fillStyle[3];
rob@100:         vert[9] = strokeStyle[0];
rob@100:         vert[10] = strokeStyle[1];
rob@100:         vert[11] = strokeStyle[2];
rob@100:         vert[12] = strokeStyle[3];
rob@100:         vert[13] = normalX;
rob@100:         vert[14] = normalY;
rob@100:         vert[15] = normalZ;
rob@100:         vertArray.unshift(vert);
rob@100:         for (i = 0; i < vertArray.length; i++) {
rob@100:           for (j = 0; j < 3; j++) {
rob@100:             fillVertArray.push(vertArray[i][j]);
rob@100:           }
rob@100:           for (j = 5; j < 9; j++) {
rob@100:             colorVertArray.push(vertArray[i][j]);
rob@100:           }
rob@100:         }
rob@100:         fill3D(fillVertArray, "TRIANGLE_FAN", colorVertArray);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Sets the current normal vector. This is for drawing three dimensional shapes and surfaces and
rob@100:     * specifies a vector perpendicular to the surface of the shape which determines how lighting affects
rob@100:     * it. Processing attempts to automatically assign normals to shapes, but since that's imperfect,
rob@100:     * this is a better option when you want more control. This function is identical to glNormal3f() in OpenGL.
rob@100:     *
rob@100:     * @param {float} nx       x direction
rob@100:     * @param {float} ny       y direction
rob@100:     * @param {float} nz       z direction
rob@100:     *
rob@100:     * @see beginShape
rob@100:     * @see endShape
rob@100:     * @see lights
rob@100:     */
rob@100:     p.normal = function(nx, ny, nz) {
rob@100:       if (arguments.length !== 3 || !(typeof nx === "number" && typeof ny === "number" && typeof nz === "number")) {
rob@100:         throw "normal() requires three numeric arguments.";
rob@100:       }
rob@100: 
rob@100:       normalX = nx;
rob@100:       normalY = ny;
rob@100:       normalZ = nz;
rob@100: 
rob@100:       if (curShape !== 0) {
rob@100:         if (normalMode === PConstants.NORMAL_MODE_AUTO) {
rob@100:           normalMode = PConstants.NORMAL_MODE_SHAPE;
rob@100:         } else if (normalMode === PConstants.NORMAL_MODE_SHAPE) {
rob@100:           normalMode = PConstants.NORMAL_MODE_VERTEX;
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Raster drawing functions
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:     * Saves an image from the display window. Images are saved in TIFF, TARGA, JPEG, and PNG format
rob@100:     * depending on the extension within the filename  parameter. For example, "image.tif" will have
rob@100:     * a TIFF image and "image.png" will save a PNG image. If no extension is included in the filename,
rob@100:     * the image will save in TIFF format and .tif will be added to the name. These files are saved to
rob@100:     * the sketch's folder, which may be opened by selecting "Show sketch folder" from the "Sketch" menu.
rob@100:     * It is not possible to use save() while running the program in a web browser.  All images saved
rob@100:     * from the main drawing window will be opaque. To save images without a background, use createGraphics().
rob@100:     *
rob@100:     * @param {String} filename      any sequence of letters and numbers
rob@100:     *
rob@100:     * @see saveFrame
rob@100:     * @see createGraphics
rob@100:     */
rob@100:     p.save = function(file, img) {
rob@100:       // file is unused at the moment
rob@100:       // may implement this differently in later release
rob@100:       if (img !== undef) {
rob@100:         return window.open(img.toDataURL(),"_blank");
rob@100:       }
rob@100:       return window.open(p.externals.canvas.toDataURL(),"_blank");
rob@100:     };
rob@100: 
rob@100:     var saveNumber = 0;
rob@100: 
rob@100:     p.saveFrame = function(file) {
rob@100:       if(file === undef) {
rob@100:         // use default name template if parameter is not specified
rob@100:         file = "screen-####.png";
rob@100:       }
rob@100:       // Increment changeable part: screen-0000.png, screen-0001.png, ...
rob@100:       var frameFilename = file.replace(/#+/, function(all) {
rob@100:         var s = "" + (saveNumber++);
rob@100:         while(s.length < all.length) {
rob@100:           s = "0" + s;
rob@100:         }
rob@100:         return s;
rob@100:       });
rob@100:       p.save(frameFilename);
rob@100:     };
rob@100: 
rob@100:     var utilityContext2d = document.createElement("canvas").getContext("2d");
rob@100: 
rob@100:     var canvasDataCache = [undef, undef, undef]; // we need three for now
rob@100: 
rob@100:     function getCanvasData(obj, w, h) {
rob@100:       var canvasData = canvasDataCache.shift();
rob@100: 
rob@100:       if (canvasData === undef) {
rob@100:         canvasData = {};
rob@100:         canvasData.canvas = document.createElement("canvas");
rob@100:         canvasData.context = canvasData.canvas.getContext('2d');
rob@100:       }
rob@100: 
rob@100:       canvasDataCache.push(canvasData);
rob@100: 
rob@100:       var canvas = canvasData.canvas, context = canvasData.context,
rob@100:           width = w || obj.width, height = h || obj.height;
rob@100: 
rob@100:       canvas.width = width;
rob@100:       canvas.height = height;
rob@100: 
rob@100:       if (!obj) {
rob@100:         context.clearRect(0, 0, width, height);
rob@100:       } else if ("data" in obj) { // ImageData
rob@100:         context.putImageData(obj, 0, 0);
rob@100:       } else {
rob@100:         context.clearRect(0, 0, width, height);
rob@100:         context.drawImage(obj, 0, 0, width, height);
rob@100:       }
rob@100:       return canvasData;
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * Handle the sketch code for pixels[] and pixels.length
rob@100:      * parser code converts pixels[] to getPixels()
rob@100:      * or setPixels(), .length becomes getLength()
rob@100:      */
rob@100:     function buildPixelsObject(pImage) {
rob@100:       return {
rob@100: 
rob@100:         getLength: (function(aImg) {
rob@100:           return function() {
rob@100:             if (aImg.isRemote) {
rob@100:               throw "Image is loaded remotely. Cannot get length.";
rob@100:             } else {
rob@100:               return aImg.imageData.data.length ? aImg.imageData.data.length/4 : 0;
rob@100:             }
rob@100:           };
rob@100:         }(pImage)),
rob@100: 
rob@100:         getPixel: (function(aImg) {
rob@100:           return function(i) {
rob@100:             var offset = i*4,
rob@100:               data = aImg.imageData.data;
rob@100: 
rob@100:             if (aImg.isRemote) {
rob@100:               throw "Image is loaded remotely. Cannot get pixels.";
rob@100:             }
rob@100: 
rob@100:             return (data[offset+3] << 24) & PConstants.ALPHA_MASK |
rob@100:                    (data[offset] << 16) & PConstants.RED_MASK |
rob@100:                    (data[offset+1] << 8) & PConstants.GREEN_MASK |
rob@100:                    data[offset+2] & PConstants.BLUE_MASK;
rob@100:           };
rob@100:         }(pImage)),
rob@100: 
rob@100:         setPixel: (function(aImg) {
rob@100:           return function(i, c) {
rob@100:             var offset = i*4,
rob@100:               data = aImg.imageData.data;
rob@100: 
rob@100:             if (aImg.isRemote) {
rob@100:               throw "Image is loaded remotely. Cannot set pixel.";
rob@100:             }
rob@100: 
rob@100:             data[offset+0] = (c & PConstants.RED_MASK) >>> 16;
rob@100:             data[offset+1] = (c & PConstants.GREEN_MASK) >>> 8;
rob@100:             data[offset+2] = (c & PConstants.BLUE_MASK);
rob@100:             data[offset+3] = (c & PConstants.ALPHA_MASK) >>> 24;
rob@100:             aImg.__isDirty = true;
rob@100:           };
rob@100:         }(pImage)),
rob@100: 
rob@100:         toArray: (function(aImg) {
rob@100:           return function() {
rob@100:             var arr = [],
rob@100:               data = aImg.imageData.data,
rob@100:               length = aImg.width * aImg.height;
rob@100: 
rob@100:             if (aImg.isRemote) {
rob@100:               throw "Image is loaded remotely. Cannot get pixels.";
rob@100:             }
rob@100: 
rob@100:             for (var i = 0, offset = 0; i < length; i++, offset += 4) {
rob@100:               arr.push( (data[offset+3] << 24) & PConstants.ALPHA_MASK |
rob@100:                         (data[offset] << 16) & PConstants.RED_MASK |
rob@100:                         (data[offset+1] << 8) & PConstants.GREEN_MASK |
rob@100:                         data[offset+2] & PConstants.BLUE_MASK );
rob@100:             }
rob@100:             return arr;
rob@100:           };
rob@100:         }(pImage)),
rob@100: 
rob@100:         set: (function(aImg) {
rob@100:           return function(arr) {
rob@100:             var offset,
rob@100:               data,
rob@100:               c;
rob@100:             if (this.isRemote) {
rob@100:               throw "Image is loaded remotely. Cannot set pixels.";
rob@100:             }
rob@100: 
rob@100:             data = aImg.imageData.data;
rob@100:             for (var i = 0, aL = arr.length; i < aL; i++) {
rob@100:               c = arr[i];
rob@100:               offset = i*4;
rob@100: 
rob@100:               data[offset+0] = (c & PConstants.RED_MASK) >>> 16;
rob@100:               data[offset+1] = (c & PConstants.GREEN_MASK) >>> 8;
rob@100:               data[offset+2] = (c & PConstants.BLUE_MASK);
rob@100:               data[offset+3] = (c & PConstants.ALPHA_MASK) >>> 24;
rob@100:             }
rob@100:             aImg.__isDirty = true;
rob@100:           };
rob@100:         }(pImage))
rob@100: 
rob@100:       };
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:     * Datatype for storing images. Processing can display .gif, .jpg, .tga, and .png images. Images may be
rob@100:     * displayed in 2D and 3D space. Before an image is used, it must be loaded with the loadImage() function.
rob@100:     * The PImage object contains fields for the width and height of the image, as well as an array called
rob@100:     * pixels[]  which contains the values for every pixel in the image. A group of methods, described below,
rob@100:     * allow easy access to the image's pixels and alpha channel and simplify the process of compositing.
rob@100:     * Before using the pixels[] array, be sure to use the loadPixels() method on the image to make sure that the
rob@100:     * pixel data is properly loaded. To create a new image, use the createImage() function (do not use new PImage()).
rob@100:     *
rob@100:     * @param {int} width                image width
rob@100:     * @param {int} height               image height
rob@100:     * @param {MODE} format              Either RGB, ARGB, ALPHA (grayscale alpha channel)
rob@100:     *
rob@100:     * @returns {PImage}
rob@100:     *
rob@100:     * @see loadImage
rob@100:     * @see imageMode
rob@100:     * @see createImage
rob@100:     */
rob@100:     var PImage = function(aWidth, aHeight, aFormat) {
rob@100: 
rob@100:       // Keep track of whether or not the cached imageData has been touched.
rob@100:       this.__isDirty = false;
rob@100: 
rob@100:       if (aWidth instanceof HTMLImageElement) {
rob@100:         // convert an <img> to a PImage
rob@100:         this.fromHTMLImageData(aWidth);
rob@100:       } else if (aHeight || aFormat) {
rob@100:         this.width = aWidth || 1;
rob@100:         this.height = aHeight || 1;
rob@100: 
rob@100:         // Stuff a canvas into sourceImg so image() calls can use drawImage like an <img>
rob@100:         var canvas = this.sourceImg = document.createElement("canvas");
rob@100:         canvas.width = this.width;
rob@100:         canvas.height = this.height;
rob@100: 
rob@100:         var imageData = this.imageData = canvas.getContext('2d').createImageData(this.width, this.height);
rob@100:         this.format = (aFormat === PConstants.ARGB || aFormat === PConstants.ALPHA) ? aFormat : PConstants.RGB;
rob@100:         if (this.format === PConstants.RGB) {
rob@100:           // Set the alpha channel of an RGB image to opaque.
rob@100:           for (var i = 3, data = this.imageData.data, len = data.length; i < len; i += 4) {
rob@100:             data[i] = 255;
rob@100:           }
rob@100:         }
rob@100: 
rob@100:         this.__isDirty = true;
rob@100:         this.updatePixels();
rob@100:       } else {
rob@100:         this.width = 0;
rob@100:         this.height = 0;
rob@100:         this.imageData = utilityContext2d.createImageData(1, 1);
rob@100:         this.format = PConstants.ARGB;
rob@100:       }
rob@100: 
rob@100:       this.pixels = buildPixelsObject(this);
rob@100:     };
rob@100:     PImage.prototype = {
rob@100: 
rob@100:       /**
rob@100:        * Temporary hack to deal with cross-Processing-instance created PImage.  See
rob@100:        * tickets #1623 and #1644.
rob@100:        */
rob@100:       __isPImage: true,
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Updates the image with the data in its pixels[] array. Use in conjunction with loadPixels(). If
rob@100:       * you're only reading pixels from the array, there's no need to call updatePixels().
rob@100:       * Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule
rob@100:       * is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and
rob@100:       * after changes have been made, call updatePixels(). Even if the renderer may not seem to use this
rob@100:       * function in the current Processing release, this will always be subject to change.
rob@100:       * Currently, none of the renderers use the additional parameters to updatePixels().
rob@100:       */
rob@100:       updatePixels: function() {
rob@100:         var canvas = this.sourceImg;
rob@100:         if (canvas && canvas instanceof HTMLCanvasElement && this.__isDirty) {
rob@100:           canvas.getContext('2d').putImageData(this.imageData, 0, 0);
rob@100:         }
rob@100:         this.__isDirty = false;
rob@100:       },
rob@100: 
rob@100:       fromHTMLImageData: function(htmlImg) {
rob@100:         // convert an <img> to a PImage
rob@100:         var canvasData = getCanvasData(htmlImg);
rob@100:         try {
rob@100:           var imageData = canvasData.context.getImageData(0, 0, htmlImg.width, htmlImg.height);
rob@100:           this.fromImageData(imageData);
rob@100:         } catch(e) {
rob@100:           if (htmlImg.width && htmlImg.height) {
rob@100:             this.isRemote = true;
rob@100:             this.width = htmlImg.width;
rob@100:             this.height = htmlImg.height;
rob@100:           }
rob@100:         }
rob@100:         this.sourceImg = htmlImg;
rob@100:       },
rob@100: 
rob@100:       'get': function(x, y, w, h) {
rob@100:         if (!arguments.length) {
rob@100:           return p.get(this);
rob@100:         }
rob@100:         if (arguments.length === 2) {
rob@100:           return p.get(x, y, this);
rob@100:         }
rob@100:         if (arguments.length === 4) {
rob@100:           return p.get(x, y, w, h, this);
rob@100:         }
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Changes the color of any pixel or writes an image directly into the image. The x and y parameter
rob@100:       * specify the pixel or the upper-left corner of the image. The color parameter specifies the color value.
rob@100:       * Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data
rob@100:       * directly into pixels[]. The equivalent statement to "set(x, y, #000000)" using pixels[] is
rob@100:       * "pixels[y*width+x] = #000000". Processing requires calling loadPixels() to load the display window
rob@100:       * data into the pixels[] array before getting the values and calling updatePixels() to update the window.
rob@100:       *
rob@100:       * @param {int} x        x-coordinate of the pixel or upper-left corner of the image
rob@100:       * @param {int} y        y-coordinate of the pixel or upper-left corner of the image
rob@100:       * @param {color} color  any value of the color datatype
rob@100:       *
rob@100:       * @see get
rob@100:       * @see pixels[]
rob@100:       * @see copy
rob@100:       */
rob@100:       'set': function(x, y, c) {
rob@100:         p.set(x, y, c, this);
rob@100:         this.__isDirty = true;
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Blends a region of pixels into the image specified by the img parameter. These copies utilize full
rob@100:       * alpha channel support and a choice of the following modes to blend the colors of source pixels (A)
rob@100:       * with the ones of pixels in the destination image (B):
rob@100:       * BLEND - linear interpolation of colours: C = A*factor + B
rob@100:       * ADD - additive blending with white clip: C = min(A*factor + B, 255)
rob@100:       * SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0)
rob@100:       * DARKEST - only the darkest colour succeeds: C = min(A*factor, B)
rob@100:       * LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B)
rob@100:       * DIFFERENCE - subtract colors from underlying image.
rob@100:       * EXCLUSION - similar to DIFFERENCE, but less extreme.
rob@100:       * MULTIPLY - Multiply the colors, result will always be darker.
rob@100:       * SCREEN - Opposite multiply, uses inverse values of the colors.
rob@100:       * OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and screens light values.
rob@100:       * HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower.
rob@100:       * SOFT_LIGHT - Mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh.
rob@100:       * DODGE - Lightens light tones and increases contrast, ignores darks. Called "Color Dodge" in Illustrator and Photoshop.
rob@100:       * BURN - Darker areas are applied, increasing contrast, ignores lights. Called "Color Burn" in Illustrator and Photoshop.
rob@100:       * All modes use the alpha information (highest byte) of source image pixels as the blending factor.
rob@100:       * If the source and destination regions are different sizes, the image will be automatically resized to
rob@100:       * match the destination size. If the srcImg parameter is not used, the display window is used as the source image.
rob@100:       * This function ignores imageMode().
rob@100:       *
rob@100:       * @param {int} x              X coordinate of the source's upper left corner
rob@100:       * @param {int} y              Y coordinate of the source's upper left corner
rob@100:       * @param {int} width          source image width
rob@100:       * @param {int} height         source image height
rob@100:       * @param {int} dx             X coordinate of the destinations's upper left corner
rob@100:       * @param {int} dy             Y coordinate of the destinations's upper left corner
rob@100:       * @param {int} dwidth         destination image width
rob@100:       * @param {int} dheight        destination image height
rob@100:       * @param {PImage} srcImg      an image variable referring to the source image
rob@100:       * @param {MODE} MODE          Either BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION,
rob@100:       * MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN
rob@100:       *
rob@100:       * @see alpha
rob@100:       * @see copy
rob@100:       */
rob@100:       blend: function(srcImg, x, y, width, height, dx, dy, dwidth, dheight, MODE) {
rob@100:         if (arguments.length === 9) {
rob@100:           p.blend(this, srcImg, x, y, width, height, dx, dy, dwidth, dheight, this);
rob@100:         } else if (arguments.length === 10) {
rob@100:           p.blend(srcImg, x, y, width, height, dx, dy, dwidth, dheight, MODE, this);
rob@100:         }
rob@100:         delete this.sourceImg;
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Copies a region of pixels from one image into another. If the source and destination regions
rob@100:       * aren't the same size, it will automatically resize source pixels to fit the specified target region.
rob@100:       * No alpha information is used in the process, however if the source image has an alpha channel set,
rob@100:       * it will be copied as well. This function ignores imageMode().
rob@100:       *
rob@100:       * @param {int} sx             X coordinate of the source's upper left corner
rob@100:       * @param {int} sy             Y coordinate of the source's upper left corner
rob@100:       * @param {int} swidth         source image width
rob@100:       * @param {int} sheight        source image height
rob@100:       * @param {int} dx             X coordinate of the destinations's upper left corner
rob@100:       * @param {int} dy             Y coordinate of the destinations's upper left corner
rob@100:       * @param {int} dwidth         destination image width
rob@100:       * @param {int} dheight        destination image height
rob@100:       * @param {PImage} srcImg      an image variable referring to the source image
rob@100:       *
rob@100:       * @see alpha
rob@100:       * @see blend
rob@100:       */
rob@100:       copy: function(srcImg, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) {
rob@100:         if (arguments.length === 8) {
rob@100:           p.blend(this, srcImg, sx, sy, swidth, sheight, dx, dy, dwidth, PConstants.REPLACE, this);
rob@100:         } else if (arguments.length === 9) {
rob@100:           p.blend(srcImg, sx, sy, swidth, sheight, dx, dy, dwidth, dheight, PConstants.REPLACE, this);
rob@100:         }
rob@100:         delete this.sourceImg;
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Filters an image as defined by one of the following modes:
rob@100:       * THRESHOLD - converts the image to black and white pixels depending if they are above or below
rob@100:       * the threshold defined by the level parameter. The level must be between 0.0 (black) and 1.0(white).
rob@100:       * If no level is specified, 0.5 is used.
rob@100:       * GRAY - converts any colors in the image to grayscale equivalents
rob@100:       * INVERT - sets each pixel to its inverse value
rob@100:       * POSTERIZE - limits each channel of the image to the number of colors specified as the level parameter
rob@100:       * BLUR - executes a Guassian blur with the level parameter specifying the extent of the blurring.
rob@100:       * If no level parameter is used, the blur is equivalent to Guassian blur of radius 1.
rob@100:       * OPAQUE - sets the alpha channel to entirely opaque.
rob@100:       * ERODE - reduces the light areas with the amount defined by the level parameter.
rob@100:       * DILATE - increases the light areas with the amount defined by the level parameter
rob@100:       *
rob@100:       * @param {MODE} MODE        Either THRESHOLD, GRAY, INVERT, POSTERIZE, BLUR, OPAQUE, ERODE, or DILATE
rob@100:       * @param {int|float} param  in the range from 0 to 1
rob@100:       */
rob@100:       filter: function(mode, param) {
rob@100:         if (arguments.length === 2) {
rob@100:           p.filter(mode, param, this);
rob@100:         } else if (arguments.length === 1) {
rob@100:           // no param specified, send null to show its invalid
rob@100:           p.filter(mode, null, this);
rob@100:         }
rob@100:         delete this.sourceImg;
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Saves the image into a file. Images are saved in TIFF, TARGA, JPEG, and PNG format depending on
rob@100:       * the extension within the filename  parameter. For example, "image.tif" will have a TIFF image and
rob@100:       * "image.png" will save a PNG image. If no extension is included in the filename, the image will save
rob@100:       * in TIFF format and .tif will be added to the name. These files are saved to the sketch's folder,
rob@100:       * which may be opened by selecting "Show sketch folder" from the "Sketch" menu. It is not possible to
rob@100:       * use save() while running the program in a web browser.
rob@100:       * To save an image created within the code, rather than through loading, it's necessary to make the
rob@100:       * image with the createImage() function so it is aware of the location of the program and can therefore
rob@100:       * save the file to the right place. See the createImage() reference for more information.
rob@100:       *
rob@100:       * @param {String} filename        a sequence of letters and numbers
rob@100:       */
rob@100:       save: function(file){
rob@100:         p.save(file,this);
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Resize the image to a new width and height. To make the image scale proportionally, use 0 as the
rob@100:       * value for the wide or high parameter.
rob@100:       *
rob@100:       * @param {int} wide         the resized image width
rob@100:       * @param {int} high         the resized image height
rob@100:       *
rob@100:       * @see get
rob@100:       */
rob@100:       resize: function(w, h) {
rob@100:         if (this.isRemote) { // Remote images cannot access imageData
rob@100:           throw "Image is loaded remotely. Cannot resize.";
rob@100:         }
rob@100:         if (this.width !== 0 || this.height !== 0) {
rob@100:           // make aspect ratio if w or h is 0
rob@100:           if (w === 0 && h !== 0) {
rob@100:             w = Math.floor(this.width / this.height * h);
rob@100:           } else if (h === 0 && w !== 0) {
rob@100:             h = Math.floor(this.height / this.width * w);
rob@100:           }
rob@100:           // put 'this.imageData' into a new canvas
rob@100:           var canvas = getCanvasData(this.imageData).canvas;
rob@100:           // pull imageData object out of canvas into ImageData object
rob@100:           var imageData = getCanvasData(canvas, w, h).context.getImageData(0, 0, w, h);
rob@100:           // set this as new pimage
rob@100:           this.fromImageData(imageData);
rob@100:         }
rob@100:       },
rob@100: 
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Masks part of an image from displaying by loading another image and using it as an alpha channel.
rob@100:       * This mask image should only contain grayscale data, but only the blue color channel is used. The
rob@100:       * mask image needs to be the same size as the image to which it is applied.
rob@100:       * In addition to using a mask image, an integer array containing the alpha channel data can be
rob@100:       * specified directly. This method is useful for creating dynamically generated alpha masks. This
rob@100:       * array must be of the same length as the target image's pixels array and should contain only grayscale
rob@100:       * data of values between 0-255.
rob@100:       *
rob@100:       * @param {PImage} maskImg         any PImage object used as the alpha channel for "img", needs to be same
rob@100:       *                                 size as "img"
rob@100:       * @param {int[]} maskArray        any array of Integer numbers used as the alpha channel, needs to be same
rob@100:       *                                 length as the image's pixel array
rob@100:       */
rob@100:       mask: function(mask) {
rob@100:         var obj = this.toImageData(),
rob@100:             i,
rob@100:             size;
rob@100: 
rob@100:         if (mask instanceof PImage || mask.__isPImage) {
rob@100:           if (mask.width === this.width && mask.height === this.height) {
rob@100:             mask = mask.toImageData();
rob@100: 
rob@100:             for (i = 2, size = this.width * this.height * 4; i < size; i += 4) {
rob@100:               // using it as an alpha channel
rob@100:               obj.data[i + 1] = mask.data[i];
rob@100:               // but only the blue color channel
rob@100:             }
rob@100:           } else {
rob@100:             throw "mask must have the same dimensions as PImage.";
rob@100:           }
rob@100:         } else if (mask instanceof Array) {
rob@100:           if (this.width * this.height === mask.length) {
rob@100:             for (i = 0, size = mask.length; i < size; ++i) {
rob@100:               obj.data[i * 4 + 3] = mask[i];
rob@100:             }
rob@100:           } else {
rob@100:             throw "mask array must be the same length as PImage pixels array.";
rob@100:           }
rob@100:         }
rob@100: 
rob@100:         this.fromImageData(obj);
rob@100:       },
rob@100: 
rob@100:       // These are intentionally left blank for PImages, we work live with pixels and draw as necessary
rob@100:       /**
rob@100:       * @member PImage
rob@100:       * Loads the pixel data for the image into its pixels[] array. This function must always be called
rob@100:       * before reading from or writing to pixels[].
rob@100:       * Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the
rob@100:       * rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(),
rob@100:       * and after changes have been made, call updatePixels(). Even if the renderer may not seem to use
rob@100:       * this function in the current Processing release, this will always be subject to change.
rob@100:       */
rob@100:       loadPixels: noop,
rob@100: 
rob@100:       toImageData: function() {
rob@100:         if (this.isRemote) {
rob@100:           return this.sourceImg;
rob@100:         }
rob@100: 
rob@100:         if (!this.__isDirty) {
rob@100:           return this.imageData;
rob@100:         }
rob@100: 
rob@100:         var canvasData = getCanvasData(this.sourceImg);
rob@100:         return canvasData.context.getImageData(0, 0, this.width, this.height);
rob@100:       },
rob@100: 
rob@100:       toDataURL: function() {
rob@100:         if (this.isRemote) { // Remote images cannot access imageData
rob@100:           throw "Image is loaded remotely. Cannot create dataURI.";
rob@100:         }
rob@100:         var canvasData = getCanvasData(this.imageData);
rob@100:         return canvasData.canvas.toDataURL();
rob@100:       },
rob@100: 
rob@100:       fromImageData: function(canvasImg) {
rob@100:         var w = canvasImg.width,
rob@100:           h = canvasImg.height,
rob@100:           canvas = document.createElement('canvas'),
rob@100:           ctx = canvas.getContext('2d');
rob@100: 
rob@100:         this.width = canvas.width = w;
rob@100:         this.height = canvas.height = h;
rob@100: 
rob@100:         ctx.putImageData(canvasImg, 0, 0);
rob@100: 
rob@100:         // changed for 0.9
rob@100:         this.format = PConstants.ARGB;
rob@100: 
rob@100:         this.imageData = canvasImg;
rob@100:         this.sourceImg = canvas;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     p.PImage = PImage;
rob@100: 
rob@100:     /**
rob@100:     * Creates a new PImage (the datatype for storing images). This provides a fresh buffer of pixels to play
rob@100:     * with. Set the size of the buffer with the width and height parameters. The format parameter defines how
rob@100:     * the pixels are stored. See the PImage reference for more information.
rob@100:     * Be sure to include all three parameters, specifying only the width and height (but no format) will
rob@100:     * produce a strange error.
rob@100:     * Advanced users please note that createImage() should be used instead of the syntax new PImage().
rob@100:     *
rob@100:     * @param {int} width                image width
rob@100:     * @param {int} height               image height
rob@100:     * @param {MODE} format              Either RGB, ARGB, ALPHA (grayscale alpha channel)
rob@100:     *
rob@100:     * @returns {PImage}
rob@100:     *
rob@100:     * @see PImage
rob@100:     * @see PGraphics
rob@100:     */
rob@100:     p.createImage = function(w, h, mode) {
rob@100:       return new PImage(w,h,mode);
rob@100:     };
rob@100: 
rob@100:     // Loads an image for display. Type is an extension. Callback is fired on load.
rob@100:     /**
rob@100:     * Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may
rob@100:     * be loaded. To load correctly, images must be located in the data directory of the current sketch. In most
rob@100:     * cases, load all images in setup() to preload them at the start of the program. Loading images inside draw()
rob@100:     * will reduce the speed of a program.
rob@100:     * The filename parameter can also be a URL to a file found online. For security reasons, a Processing sketch
rob@100:     * found online can only download files from the same server from which it came. Getting around this restriction
rob@100:     * requires a signed applet.
rob@100:     * The extension parameter is used to determine the image type in cases where the image filename does not end
rob@100:     * with a proper extension. Specify the extension as the second parameter to loadImage(), as shown in the
rob@100:     * third example on this page.
rob@100:     * If an image is not loaded successfully, the null value is returned and an error message will be printed to
rob@100:     * the console. The error message does not halt the program, however the null value may cause a NullPointerException
rob@100:     * if your code does not check whether the value returned from loadImage() is null.
rob@100:     * Depending on the type of error, a PImage object may still be returned, but the width and height of the image
rob@100:     * will be set to -1. This happens if bad image data is returned or cannot be decoded properly. Sometimes this happens
rob@100:     * with image URLs that produce a 403 error or that redirect to a password prompt, because loadImage() will attempt
rob@100:     * to interpret the HTML as image data.
rob@100:     *
rob@100:     * @param {String} filename        name of file to load, can be .gif, .jpg, .tga, or a handful of other image
rob@100:     *                                 types depending on your platform.
rob@100:     * @param {String} extension       the type of image to load, for example "png", "gif", "jpg"
rob@100:     *
rob@100:     * @returns {PImage}
rob@100:     *
rob@100:     * @see PImage
rob@100:     * @see image
rob@100:     * @see imageMode
rob@100:     * @see background
rob@100:     */
rob@100:     p.loadImage = function(file, type, callback) {
rob@100:       // if type is specified, we just ignore it
rob@100: 
rob@100:       var pimg;
rob@100:       // if image is in the preloader cache return a new PImage
rob@100:       if (curSketch.imageCache.images[file]) {
rob@100:         pimg = new PImage(curSketch.imageCache.images[file]);
rob@100:         pimg.loaded = true;
rob@100:         return pimg;
rob@100:       }
rob@100:       // else async load it
rob@100:       pimg = new PImage();
rob@100:       var img = document.createElement('img');
rob@100: 
rob@100:       pimg.sourceImg = img;
rob@100: 
rob@100:       img.onload = (function(aImage, aPImage, aCallback) {
rob@100:         var image = aImage;
rob@100:         var pimg = aPImage;
rob@100:         var callback = aCallback;
rob@100:         return function() {
rob@100:           // change the <img> object into a PImage now that its loaded
rob@100:           pimg.fromHTMLImageData(image);
rob@100:           pimg.loaded = true;
rob@100:           if (callback) {
rob@100:             callback();
rob@100:           }
rob@100:         };
rob@100:       }(img, pimg, callback));
rob@100: 
rob@100:       img.src = file; // needs to be called after the img.onload function is declared or it wont work in opera
rob@100:       return pimg;
rob@100:     };
rob@100: 
rob@100:     // async loading of large images, same functionality as loadImage above
rob@100:     /**
rob@100:     * This function load images on a separate thread so that your sketch does not freeze while images load during
rob@100:     * setup(). While the image is loading, its width and height will be 0. If an error occurs while loading the image,
rob@100:     * its width and height will be set to -1. You'll know when the image has loaded properly because its width and
rob@100:     * height will be greater than 0. Asynchronous image loading (particularly when downloading from a server) can
rob@100:     * dramatically improve performance.
rob@100:     * The extension parameter is used to determine the image type in cases where the image filename does not end
rob@100:     * with a proper extension. Specify the extension as the second parameter to requestImage().
rob@100:     *
rob@100:     * @param {String} filename        name of file to load, can be .gif, .jpg, .tga, or a handful of other image
rob@100:     *                                 types depending on your platform.
rob@100:     * @param {String} extension       the type of image to load, for example "png", "gif", "jpg"
rob@100:     *
rob@100:     * @returns {PImage}
rob@100:     *
rob@100:     * @see PImage
rob@100:     * @see loadImage
rob@100:     */
rob@100:     p.requestImage = p.loadImage;
rob@100: 
rob@100:     function get$2(x,y) {
rob@100:       var data;
rob@100:       // return the color at x,y (int) of curContext
rob@100:       if (x >= p.width || x < 0 || y < 0 || y >= p.height) {
rob@100:         // x,y is outside image return transparent black
rob@100:         return 0;
rob@100:       }
rob@100: 
rob@100:       // loadPixels() has been called
rob@100:       if (isContextReplaced) {
rob@100:         var offset = ((0|x) + p.width * (0|y)) * 4;
rob@100:         data = p.imageData.data;
rob@100:         return (data[offset + 3] << 24) & PConstants.ALPHA_MASK |
rob@100:                (data[offset] << 16) & PConstants.RED_MASK |
rob@100:                (data[offset + 1] << 8) & PConstants.GREEN_MASK |
rob@100:                data[offset + 2] & PConstants.BLUE_MASK;
rob@100:       }
rob@100: 
rob@100:       // x,y is inside canvas space
rob@100:       data = p.toImageData(0|x, 0|y, 1, 1).data;
rob@100:       return (data[3] << 24) & PConstants.ALPHA_MASK |
rob@100:              (data[0] << 16) & PConstants.RED_MASK |
rob@100:              (data[1] << 8) & PConstants.GREEN_MASK |
rob@100:              data[2] & PConstants.BLUE_MASK;
rob@100:     }
rob@100:     function get$3(x,y,img) {
rob@100:       if (img.isRemote) { // Remote images cannot access imageData
rob@100:         throw "Image is loaded remotely. Cannot get x,y.";
rob@100:       }
rob@100:       // PImage.get(x,y) was called, return the color (int) at x,y of img
rob@100:       var offset = y * img.width * 4 + (x * 4),
rob@100:           data = img.imageData.data;
rob@100:       return (data[offset + 3] << 24) & PConstants.ALPHA_MASK |
rob@100:              (data[offset] << 16) & PConstants.RED_MASK |
rob@100:              (data[offset + 1] << 8) & PConstants.GREEN_MASK |
rob@100:              data[offset + 2] & PConstants.BLUE_MASK;
rob@100:     }
rob@100:     function get$4(x, y, w, h) {
rob@100:       // return a PImage of w and h from cood x,y of curContext
rob@100:       var c = new PImage(w, h, PConstants.ARGB);
rob@100:       c.fromImageData(p.toImageData(x, y, w, h));
rob@100:       return c;
rob@100:     }
rob@100:     function get$5(x, y, w, h, img) {
rob@100:       if (img.isRemote) { // Remote images cannot access imageData
rob@100:         throw "Image is loaded remotely. Cannot get x,y,w,h.";
rob@100:       }
rob@100:       // PImage.get(x,y,w,h) was called, return x,y,w,h PImage of img
rob@100:       // offset start point needs to be *4
rob@100:       var c = new PImage(w, h, PConstants.ARGB), cData = c.imageData.data,
rob@100:         imgWidth = img.width, imgHeight = img.height, imgData = img.imageData.data;
rob@100:       // Don't need to copy pixels from the image outside ranges.
rob@100:       var startRow = Math.max(0, -y), startColumn = Math.max(0, -x),
rob@100:         stopRow = Math.min(h, imgHeight - y), stopColumn = Math.min(w, imgWidth - x);
rob@100:       for (var i = startRow; i < stopRow; ++i) {
rob@100:         var sourceOffset = ((y + i) * imgWidth + (x + startColumn)) * 4;
rob@100:         var targetOffset = (i * w + startColumn) * 4;
rob@100:         for (var j = startColumn; j < stopColumn; ++j) {
rob@100:           cData[targetOffset++] = imgData[sourceOffset++];
rob@100:           cData[targetOffset++] = imgData[sourceOffset++];
rob@100:           cData[targetOffset++] = imgData[sourceOffset++];
rob@100:           cData[targetOffset++] = imgData[sourceOffset++];
rob@100:         }
rob@100:       }
rob@100:       c.__isDirty = true;
rob@100:       return c;
rob@100:     }
rob@100: 
rob@100:     // Gets a single pixel or block of pixels from the current Canvas Context or a PImage
rob@100:     /**
rob@100:     * Reads the color of any pixel or grabs a section of an image. If no parameters are specified, the entire
rob@100:     * image is returned. Get the value of one pixel by specifying an x,y coordinate. Get a section of the display
rob@100:     * window by specifying an additional width and height parameter. If the pixel requested is outside of the image
rob@100:     * window, black is returned. The numbers returned are scaled according to the current color ranges, but only RGB
rob@100:     * values are returned by this function. For example, even though you may have drawn a shape with colorMode(HSB),
rob@100:     * the numbers returned will be in RGB.
rob@100:     * Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly
rob@100:     * from pixels[]. The equivalent statement to "get(x, y)" using pixels[] is "pixels[y*width+x]". Processing
rob@100:     * requires calling loadPixels() to load the display window data into the pixels[] array before getting the values.
rob@100:     * This function ignores imageMode().
rob@100:     *
rob@100:     * @param {int} x            x-coordinate of the pixel
rob@100:     * @param {int} y            y-coordinate of the pixel
rob@100:     * @param {int} width        width of pixel rectangle to get
rob@100:     * @param {int} height       height of pixel rectangle to get
rob@100:     *
rob@100:     * @returns {Color|PImage}
rob@100:     *
rob@100:     * @see set
rob@100:     * @see pixels[]
rob@100:     * @see imageMode
rob@100:     */
rob@100:     p.get = function(x, y, w, h, img) {
rob@100:       // for 0 2 and 4 arguments use curContext, otherwise PImage.get was called
rob@100:       if (img !== undefined) {
rob@100:         return get$5(x, y, w, h, img);
rob@100:       }
rob@100:       if (h !== undefined) {
rob@100:         return get$4(x, y, w, h);
rob@100:       }
rob@100:       if (w !== undefined) {
rob@100:         return get$3(x, y, w);
rob@100:       }
rob@100:       if (y !== undefined) {
rob@100:         return get$2(x, y);
rob@100:       }
rob@100:       if (x !== undefined) {
rob@100:         // PImage.get() was called, return a new PImage
rob@100:         return get$5(0, 0, x.width, x.height, x);
rob@100:       }
rob@100: 
rob@100:       return get$4(0, 0, p.width, p.height);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Creates and returns a new <b>PGraphics</b> object of the types P2D, P3D, and JAVA2D. Use this class if you need to draw
rob@100:      * into an off-screen graphics buffer. It's not possible to use <b>createGraphics()</b> with OPENGL, because it doesn't
rob@100:      * allow offscreen use. The DXF and PDF renderers require the filename parameter. <br /><br /> It's important to call
rob@100:      * any drawing commands between beginDraw() and endDraw() statements. This is also true for any commands that affect
rob@100:      * drawing, such as smooth() or colorMode().<br /><br /> Unlike the main drawing surface which is completely opaque,
rob@100:      * surfaces created with createGraphics() can have transparency. This makes it possible to draw into a graphics and
rob@100:      * maintain the alpha channel.
rob@100:      *
rob@100:      * @param {int} width       width in pixels
rob@100:      * @param {int} height      height in pixels
rob@100:      * @param {int} renderer    Either P2D, P3D, JAVA2D, PDF, DXF
rob@100:      * @param {String} filename the name of the file (not supported yet)
rob@100:      */
rob@100:     p.createGraphics = function(w, h, render) {
rob@100:       var pg = new Processing();
rob@100:       pg.size(w, h, render);
rob@100:       pg.background(0,0);
rob@100:       return pg;
rob@100:     };
rob@100: 
rob@100:     // pixels caching
rob@100:     function resetContext() {
rob@100:       if(isContextReplaced) {
rob@100:         curContext = originalContext;
rob@100:         isContextReplaced = false;
rob@100: 
rob@100:         p.updatePixels();
rob@100:       }
rob@100:     }
rob@100:     function SetPixelContextWrapper() {
rob@100:       function wrapFunction(newContext, name) {
rob@100:         function wrapper() {
rob@100:           resetContext();
rob@100:           curContext[name].apply(curContext, arguments);
rob@100:         }
rob@100:         newContext[name] = wrapper;
rob@100:       }
rob@100:       function wrapProperty(newContext, name) {
rob@100:         function getter() {
rob@100:           resetContext();
rob@100:           return curContext[name];
rob@100:         }
rob@100:         function setter(value) {
rob@100:           resetContext();
rob@100:           curContext[name] = value;
rob@100:         }
rob@100:         p.defineProperty(newContext, name, { get: getter, set: setter });
rob@100:       }
rob@100:       for(var n in curContext) {
rob@100:         if(typeof curContext[n] === 'function') {
rob@100:           wrapFunction(this, n);
rob@100:         } else {
rob@100:           wrapProperty(this, n);
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:     function replaceContext() {
rob@100:       if(isContextReplaced) {
rob@100:         return;
rob@100:       }
rob@100:       p.loadPixels();
rob@100:       if(proxyContext === null) {
rob@100:         originalContext = curContext;
rob@100:         proxyContext = new SetPixelContextWrapper();
rob@100:       }
rob@100:       isContextReplaced = true;
rob@100:       curContext = proxyContext;
rob@100:       setPixelsCached = 0;
rob@100:     }
rob@100: 
rob@100:     function set$3(x, y, c) {
rob@100:       if (x < p.width && x >= 0 && y >= 0 && y < p.height) {
rob@100:         replaceContext();
rob@100:         p.pixels.setPixel((0|x)+p.width*(0|y), c);
rob@100:         if(++setPixelsCached > maxPixelsCached) {
rob@100:           resetContext();
rob@100:         }
rob@100:       }
rob@100:     }
rob@100:     function set$4(x, y, obj, img) {
rob@100:       if (img.isRemote) { // Remote images cannot access imageData
rob@100:         throw "Image is loaded remotely. Cannot set x,y.";
rob@100:       }
rob@100:       var c = p.color.toArray(obj);
rob@100:       var offset = y * img.width * 4 + (x*4);
rob@100:       var data = img.imageData.data;
rob@100:       data[offset] = c[0];
rob@100:       data[offset+1] = c[1];
rob@100:       data[offset+2] = c[2];
rob@100:       data[offset+3] = c[3];
rob@100:     }
rob@100: 
rob@100:     // Paints a pixel array into the canvas
rob@100:     /**
rob@100:     * Changes the color of any pixel or writes an image directly into the display window. The x and y parameters
rob@100:     * specify the pixel to change and the color  parameter specifies the color value. The color parameter is affected
rob@100:     * by the current color mode (the default is RGB values from 0 to 255). When setting an image, the x and y
rob@100:     * parameters define the coordinates for the upper-left corner of the image.
rob@100:     * Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly
rob@100:     * into pixels[]. The equivalent statement to "set(x, y, #000000)" using pixels[] is "pixels[y*width+x] = #000000".
rob@100:     * You must call loadPixels() to load the display window data into the pixels[] array before setting the values
rob@100:     * and calling updatePixels() to update the window with any changes. This function ignores imageMode().
rob@100:     *
rob@100:     * @param {int} x            x-coordinate of the pixel
rob@100:     * @param {int} y            y-coordinate of the pixel
rob@100:     * @param {Color} obj        any value of the color datatype
rob@100:     * @param {PImage} img       any valid variable of type PImage
rob@100:     *
rob@100:     * @see get
rob@100:     * @see pixels[]
rob@100:     * @see imageMode
rob@100:     */
rob@100:     p.set = function(x, y, obj, img) {
rob@100:       var color, oldFill;
rob@100:       if (arguments.length === 3) {
rob@100:         // called p.set(), was it with a color or a img ?
rob@100:         if (typeof obj === "number") {
rob@100:           set$3(x, y, obj);
rob@100:         } else if (obj instanceof PImage || obj.__isPImage) {
rob@100:           p.image(obj, x, y);
rob@100:         }
rob@100:       } else if (arguments.length === 4) {
rob@100:         // PImage.set(x,y,c) was called, set coordinate x,y color to c of img
rob@100:         set$4(x, y, obj, img);
rob@100:       }
rob@100:     };
rob@100:     p.imageData = {};
rob@100: 
rob@100:     // handle the sketch code for pixels[]
rob@100:     // parser code converts pixels[] to getPixels() or setPixels(),
rob@100:     // .length becomes getLength()
rob@100:     /**
rob@100:     * Array containing the values for all the pixels in the display window. These values are of the color datatype.
rob@100:     * This array is the size of the display window. For example, if the image is 100x100 pixels, there will be 10000
rob@100:     * values and if the window is 200x300 pixels, there will be 60000 values. The index value defines the position
rob@100:     * of a value within the array. For example, the statment color b = pixels[230] will set the variable b to be
rob@100:     * equal to the value at that location in the array.
rob@100:     * Before accessing this array, the data must loaded with the loadPixels() function. After the array data has
rob@100:     * been modified, the updatePixels() function must be run to update the changes.
rob@100:     *
rob@100:     * @param {int} index      must not exceed the size of the array
rob@100:     *
rob@100:     * @see loadPixels
rob@100:     * @see updatePixels
rob@100:     * @see get
rob@100:     * @see set
rob@100:     * @see PImage
rob@100:     */
rob@100:     p.pixels = {
rob@100:       getLength: function() { return p.imageData.data.length ? p.imageData.data.length/4 : 0; },
rob@100:       getPixel: function(i) {
rob@100:         var offset = i*4, data = p.imageData.data;
rob@100:         return (data[offset+3] << 24) & 0xff000000 |
rob@100:                (data[offset+0] << 16) & 0x00ff0000 |
rob@100:                (data[offset+1] << 8) & 0x0000ff00 |
rob@100:                data[offset+2] & 0x000000ff;
rob@100:       },
rob@100:       setPixel: function(i,c) {
rob@100:         var offset = i*4, data = p.imageData.data;
rob@100:         data[offset+0] = (c & 0x00ff0000) >>> 16; // RED_MASK
rob@100:         data[offset+1] = (c & 0x0000ff00) >>> 8;  // GREEN_MASK
rob@100:         data[offset+2] = (c & 0x000000ff);        // BLUE_MASK
rob@100:         data[offset+3] = (c & 0xff000000) >>> 24; // ALPHA_MASK
rob@100:       },
rob@100:       toArray: function() {
rob@100:         var arr = [], length = p.imageData.width * p.imageData.height, data = p.imageData.data;
rob@100:         for (var i = 0, offset = 0; i < length; i++, offset += 4) {
rob@100:           arr.push((data[offset+3] << 24) & 0xff000000 |
rob@100:                    (data[offset+0] << 16) & 0x00ff0000 |
rob@100:                    (data[offset+1] << 8) & 0x0000ff00 |
rob@100:                    data[offset+2] & 0x000000ff);
rob@100:         }
rob@100:         return arr;
rob@100:       },
rob@100:       set: function(arr) {
rob@100:         for (var i = 0, aL = arr.length; i < aL; i++) {
rob@100:           this.setPixel(i, arr[i]);
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     // Gets a 1-Dimensional pixel array from Canvas
rob@100:     /**
rob@100:     * Loads the pixel data for the display window into the pixels[] array. This function must always be called
rob@100:     * before reading from or writing to pixels[].
rob@100:     * Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule is that
rob@100:     * any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes
rob@100:     * have been made, call updatePixels(). Even if the renderer may not seem to use this function in the current
rob@100:     * Processing release, this will always be subject to change.
rob@100:     *
rob@100:     * @see pixels[]
rob@100:     * @see updatePixels
rob@100:     */
rob@100:     p.loadPixels = function() {
rob@100:       p.imageData = drawing.$ensureContext().getImageData(0, 0, p.width, p.height);
rob@100:     };
rob@100: 
rob@100:     // Draws a 1-Dimensional pixel array to Canvas
rob@100:     /**
rob@100:     * Updates the display window with the data in the pixels[] array. Use in conjunction with loadPixels(). If
rob@100:     * you're only reading pixels from the array, there's no need to call updatePixels() unless there are changes.
rob@100:     * Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule is that
rob@100:     * any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes
rob@100:     * have been made, call updatePixels(). Even if the renderer may not seem to use this function in the current
rob@100:     * Processing release, this will always be subject to change.
rob@100:     * Currently, none of the renderers use the additional parameters to updatePixels(), however this may be
rob@100:     * implemented in the future.
rob@100:     *
rob@100:     * @see loadPixels
rob@100:     * @see pixels[]
rob@100:     */
rob@100:     p.updatePixels = function() {
rob@100:       if (p.imageData) {
rob@100:         drawing.$ensureContext().putImageData(p.imageData, 0, 0);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Set various hints and hacks for the renderer. This is used to handle obscure rendering features that cannot be
rob@100:     * implemented in a consistent manner across renderers. Many options will often graduate to standard features
rob@100:     * instead of hints over time.
rob@100:     * hint(ENABLE_OPENGL_4X_SMOOTH) - Enable 4x anti-aliasing for OpenGL. This can help force anti-aliasing if
rob@100:     * it has not been enabled by the user. On some graphics cards, this can also be set by the graphics driver's
rob@100:     * control panel, however not all cards make this available. This hint must be called immediately after the
rob@100:     * size() command because it resets the renderer, obliterating any settings and anything drawn (and like size(),
rob@100:     * re-running the code that came before it again).
rob@100:     * hint(DISABLE_OPENGL_2X_SMOOTH) - In Processing 1.0, Processing always enables 2x smoothing when the OpenGL
rob@100:     * renderer is used. This hint disables the default 2x smoothing and returns the smoothing behavior found in
rob@100:     * earlier releases, where smooth() and noSmooth() could be used to enable and disable smoothing, though the
rob@100:     * quality was inferior.
rob@100:     * hint(ENABLE_NATIVE_FONTS) - Use the native version fonts when they are installed, rather than the bitmapped
rob@100:     * version from a .vlw file. This is useful with the JAVA2D renderer setting, as it will improve font rendering
rob@100:     * speed. This is not enabled by default, because it can be misleading while testing because the type will look
rob@100:     * great on your machine (because you have the font installed) but lousy on others' machines if the identical
rob@100:     * font is unavailable. This option can only be set per-sketch, and must be called before any use of textFont().
rob@100:     * hint(DISABLE_DEPTH_TEST) - Disable the zbuffer, allowing you to draw on top of everything at will. When depth
rob@100:     * testing is disabled, items will be drawn to the screen sequentially, like a painting. This hint is most often
rob@100:     * used to draw in 3D, then draw in 2D on top of it (for instance, to draw GUI controls in 2D on top of a 3D
rob@100:     * interface). Starting in release 0149, this will also clear the depth buffer. Restore the default with
rob@100:     * hint(ENABLE_DEPTH_TEST), but note that with the depth buffer cleared, any 3D drawing that happens later in
rob@100:     * draw() will ignore existing shapes on the screen.
rob@100:     * hint(ENABLE_DEPTH_SORT) - Enable primitive z-sorting of triangles and lines in P3D and OPENGL. This can slow
rob@100:     * performance considerably, and the algorithm is not yet perfect. Restore the default with hint(DISABLE_DEPTH_SORT).
rob@100:     * hint(DISABLE_OPENGL_ERROR_REPORT) - Speeds up the OPENGL renderer setting by not checking for errors while
rob@100:     * running. Undo with hint(ENABLE_OPENGL_ERROR_REPORT).
rob@100:     * As of release 0149, unhint() has been removed in favor of adding additional ENABLE/DISABLE constants to reset
rob@100:     * the default behavior. This prevents the double negatives, and also reinforces which hints can be enabled or disabled.
rob@100:     *
rob@100:     * @param {MODE} item          constant: name of the hint to be enabled or disabled
rob@100:     *
rob@100:     * @see PGraphics
rob@100:     * @see createGraphics
rob@100:     * @see size
rob@100:     */
rob@100:     p.hint = function(which) {
rob@100:       var curContext = drawing.$ensureContext();
rob@100:       if (which === PConstants.DISABLE_DEPTH_TEST) {
rob@100:          curContext.disable(curContext.DEPTH_TEST);
rob@100:          curContext.depthMask(false);
rob@100:          curContext.clear(curContext.DEPTH_BUFFER_BIT);
rob@100:       }
rob@100:       else if (which === PConstants.ENABLE_DEPTH_TEST) {
rob@100:          curContext.enable(curContext.DEPTH_TEST);
rob@100:          curContext.depthMask(true);
rob@100:       }
rob@100:       else if (which === PConstants.ENABLE_OPENGL_2X_SMOOTH ||
rob@100:                which === PConstants.ENABLE_OPENGL_4X_SMOOTH){
rob@100:         renderSmooth = true;
rob@100:       }
rob@100:       else if (which === PConstants.DISABLE_OPENGL_2X_SMOOTH){
rob@100:         renderSmooth = false;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The background() function sets the color used for the background of the Processing window.
rob@100:      * The default background is light gray. In the <b>draw()</b> function, the background color is used to clear the display window at the beginning of each frame.
rob@100:      * An image can also be used as the background for a sketch, however its width and height must be the same size as the sketch window.
rob@100:      * To resize an image 'b' to the size of the sketch window, use b.resize(width, height).
rob@100:      * Images used as background will ignore the current <b>tint()</b> setting.
rob@100:      * For the main drawing surface, the alpha value will be ignored. However,
rob@100:      * alpha can be used on PGraphics objects from <b>createGraphics()</b>. This is
rob@100:      * the only way to set all the pixels partially transparent, for instance.
rob@100:      * If the 'gray' parameter is passed in the function sets the background to a grayscale value, based on the
rob@100:      * current colorMode.
rob@100:      * <p>
rob@100:      * Note that background() should be called before any transformations occur,
rob@100:      * because some implementations may require the current transformation matrix
rob@100:      * to be identity before drawing.
rob@100:      *
rob@100:      * @param {int|float} gray    specifies a value between white and black
rob@100:      * @param {int|float} value1  red or hue value (depending on the current color mode)
rob@100:      * @param {int|float} value2  green or saturation value (depending on the current color mode)
rob@100:      * @param {int|float} value3  blue or brightness value (depending on the current color mode)
rob@100:      * @param {int|float} alpha   opacity of the background
rob@100:      * @param {Color} color       any value of the color datatype
rob@100:      * @param {int} hex           color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)
rob@100:      * @param {PImage} image      an instance of a PImage to use as a background
rob@100:      *
rob@100:      * @see #stroke()
rob@100:      * @see #fill()
rob@100:      * @see #tint()
rob@100:      * @see #colorMode()
rob@100:      */
rob@100:     var backgroundHelper = function(arg1, arg2, arg3, arg4) {
rob@100:       var obj;
rob@100: 
rob@100:       if (arg1 instanceof PImage || arg1.__isPImage) {
rob@100:         obj = arg1;
rob@100: 
rob@100:         if (!obj.loaded) {
rob@100:           throw "Error using image in background(): PImage not loaded.";
rob@100:         }
rob@100:         if(obj.width !== p.width || obj.height !== p.height){
rob@100:           throw "Background image must be the same dimensions as the canvas.";
rob@100:         }
rob@100:       } else {
rob@100:         obj = p.color(arg1, arg2, arg3, arg4);
rob@100:       }
rob@100: 
rob@100:       backgroundObj = obj;
rob@100:     };
rob@100: 
rob@100:     Drawing2D.prototype.background = function(arg1, arg2, arg3, arg4) {
rob@100:       if (arg1 !== undef) {
rob@100:         backgroundHelper(arg1, arg2, arg3, arg4);
rob@100:       }
rob@100: 
rob@100:       if (backgroundObj instanceof PImage || backgroundObj.__isPImage) {
rob@100:         saveContext();
rob@100:         curContext.setTransform(1, 0, 0, 1, 0, 0);
rob@100:         p.image(backgroundObj, 0, 0);
rob@100:         restoreContext();
rob@100:       } else {
rob@100:         saveContext();
rob@100:         curContext.setTransform(1, 0, 0, 1, 0, 0);
rob@100: 
rob@100:         // If the background is transparent
rob@100:         if (p.alpha(backgroundObj) !== colorModeA) {
rob@100:           curContext.clearRect(0,0, p.width, p.height);
rob@100:         }
rob@100:         curContext.fillStyle = p.color.toString(backgroundObj);
rob@100:         curContext.fillRect(0, 0, p.width, p.height);
rob@100:         isFillDirty = true;
rob@100:         restoreContext();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.background = function(arg1, arg2, arg3, arg4) {
rob@100:       if (arguments.length > 0) {
rob@100:         backgroundHelper(arg1, arg2, arg3, arg4);
rob@100:       }
rob@100: 
rob@100:       var c = p.color.toGLArray(backgroundObj);
rob@100:       curContext.clearColor(c[0], c[1], c[2], c[3]);
rob@100:       curContext.clear(curContext.COLOR_BUFFER_BIT | curContext.DEPTH_BUFFER_BIT);
rob@100: 
rob@100:       // An image as a background in 3D is not implemented yet
rob@100:     };
rob@100: 
rob@100:     // Draws an image to the Canvas
rob@100:     /**
rob@100:     * Displays images to the screen. The images must be in the sketch's "data" directory to load correctly. Select "Add
rob@100:     * file..." from the "Sketch" menu to add the image. Processing currently works with GIF, JPEG, and Targa images. The
rob@100:     * color of an image may be modified with the tint() function and if a GIF has transparency, it will maintain its
rob@100:     * transparency. The img parameter specifies the image to display and the x and y parameters define the location of
rob@100:     * the image from its upper-left corner. The image is displayed at its original size unless the width and height
rob@100:     * parameters specify a different size. The imageMode() function changes the way the parameters work. A call to
rob@100:     * imageMode(CORNERS) will change the width and height parameters to define the x and y values of the opposite
rob@100:     * corner of the image.
rob@100:     *
rob@100:     * @param {PImage} img            the image to display
rob@100:     * @param {int|float} x           x-coordinate of the image
rob@100:     * @param {int|float} y           y-coordinate of the image
rob@100:     * @param {int|float} width       width to display the image
rob@100:     * @param {int|float} height      height to display the image
rob@100:     *
rob@100:     * @see loadImage
rob@100:     * @see PImage
rob@100:     * @see imageMode
rob@100:     * @see tint
rob@100:     * @see background
rob@100:     * @see alpha
rob@100:     */
rob@100:     Drawing2D.prototype.image = function(img, x, y, w, h) {
rob@100:       // Fix fractional positions
rob@100:       x = Math.round(x);
rob@100:       y = Math.round(y);
rob@100: 
rob@100:       if (img.width > 0) {
rob@100:         var wid = w || img.width;
rob@100:         var hgt = h || img.height;
rob@100: 
rob@100:         var bounds = imageModeConvert(x || 0, y || 0, w || img.width, h || img.height, arguments.length < 4);
rob@100:         var fastImage = !!img.sourceImg && curTint === null;
rob@100:         if (fastImage) {
rob@100:           var htmlElement = img.sourceImg;
rob@100:           if (img.__isDirty) {
rob@100:             img.updatePixels();
rob@100:           }
rob@100:           // Using HTML element's width and height in case if the image was resized.
rob@100:           curContext.drawImage(htmlElement, 0, 0,
rob@100:             htmlElement.width, htmlElement.height, bounds.x, bounds.y, bounds.w, bounds.h);
rob@100:         } else {
rob@100:           var obj = img.toImageData();
rob@100: 
rob@100:           // Tint the image
rob@100:           if (curTint !== null) {
rob@100:             curTint(obj);
rob@100:             img.__isDirty = true;
rob@100:           }
rob@100: 
rob@100:           curContext.drawImage(getCanvasData(obj).canvas, 0, 0,
rob@100:             img.width, img.height, bounds.x, bounds.y, bounds.w, bounds.h);
rob@100:         }
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.image = function(img, x, y, w, h) {
rob@100:       if (img.width > 0) {
rob@100:         // Fix fractional positions
rob@100:         x = Math.round(x);
rob@100:         y = Math.round(y);
rob@100:         w = w || img.width;
rob@100:         h = h || img.height;
rob@100: 
rob@100:         p.beginShape(p.QUADS);
rob@100:         p.texture(img);
rob@100:         p.vertex(x, y, 0, 0, 0);
rob@100:         p.vertex(x, y+h, 0, 0, h);
rob@100:         p.vertex(x+w, y+h, 0, w, h);
rob@100:         p.vertex(x+w, y, 0, w, 0);
rob@100:         p.endShape();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The tint() function sets the fill value for displaying images. Images can be tinted to
rob@100:      * specified colors or made transparent by setting the alpha.
rob@100:      * <br><br>To make an image transparent, but not change it's color,
rob@100:      * use white as the tint color and specify an alpha value. For instance,
rob@100:      * tint(255, 128) will make an image 50% transparent (unless
rob@100:      * <b>colorMode()</b> has been used).
rob@100:      *
rob@100:      * <br><br>When using hexadecimal notation to specify a color, use "#" or
rob@100:      * "0x" before the values (e.g. #CCFFAA, 0xFFCCFFAA). The # syntax uses six
rob@100:      * digits to specify a color (the way colors are specified in HTML and CSS).
rob@100:      * When using the hexadecimal notation starting with "0x", the hexadecimal
rob@100:      * value must be specified with eight characters; the first two characters
rob@100:      * define the alpha component and the remainder the red, green, and blue
rob@100:      * components.
rob@100:      * <br><br>The value for the parameter "gray" must be less than or equal
rob@100:      * to the current maximum value as specified by <b>colorMode()</b>.
rob@100:      * The default maximum value is 255.
rob@100:      * <br><br>The tint() method is also used to control the coloring of
rob@100:      * textures in 3D.
rob@100:      *
rob@100:      * @param {int|float} gray    any valid number
rob@100:      * @param {int|float} alpha    opacity of the image
rob@100:      * @param {int|float} value1  red or hue value
rob@100:      * @param {int|float} value2  green or saturation value
rob@100:      * @param {int|float} value3  blue or brightness value
rob@100:      * @param {int|float} color    any value of the color datatype
rob@100:      * @param {int} hex            color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)
rob@100:      *
rob@100:      * @see #noTint()
rob@100:      * @see #image()
rob@100:      */
rob@100:     p.tint = function(a1, a2, a3, a4) {
rob@100:       var tintColor = p.color(a1, a2, a3, a4);
rob@100:       var r = p.red(tintColor) / colorModeX;
rob@100:       var g = p.green(tintColor) / colorModeY;
rob@100:       var b = p.blue(tintColor) / colorModeZ;
rob@100:       var a = p.alpha(tintColor) / colorModeA;
rob@100:       curTint = function(obj) {
rob@100:         var data = obj.data,
rob@100:             length = 4 * obj.width * obj.height;
rob@100:         for (var i = 0; i < length;) {
rob@100:           data[i++] *= r;
rob@100:           data[i++] *= g;
rob@100:           data[i++] *= b;
rob@100:           data[i++] *= a;
rob@100:         }
rob@100:       };
rob@100:       // for overriding the color buffer when 3d rendering
rob@100:       curTint3d = function(data){
rob@100:         for (var i = 0; i < data.length;) {
rob@100:           data[i++] = r;
rob@100:           data[i++] = g;
rob@100:           data[i++] = b;
rob@100:           data[i++] = a;
rob@100:         }
rob@100:       };
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * The noTint() function removes the current fill value for displaying images and reverts to displaying images with their original hues.
rob@100:      *
rob@100:      * @see #tint()
rob@100:      * @see #image()
rob@100:      */
rob@100:     p.noTint = function() {
rob@100:       curTint = null;
rob@100:       curTint3d = null;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Copies a region of pixels from the display window to another area of the display window and copies a region of pixels from an
rob@100:     * image used as the srcImg  parameter into the display window. If the source and destination regions aren't the same size, it will
rob@100:     * automatically resize the source pixels to fit the specified target region. No alpha information is used in the process, however
rob@100:     * if the source image has an alpha channel set, it will be copied as well. This function ignores imageMode().
rob@100:     *
rob@100:     * @param {int} x            X coordinate of the source's upper left corner
rob@100:     * @param {int} y            Y coordinate of the source's upper left corner
rob@100:     * @param {int} width        source image width
rob@100:     * @param {int} height       source image height
rob@100:     * @param {int} dx           X coordinate of the destination's upper left corner
rob@100:     * @param {int} dy           Y coordinate of the destination's upper left corner
rob@100:     * @param {int} dwidth       destination image width
rob@100:     * @param {int} dheight      destination image height
rob@100:     * @param {PImage} srcImg    image variable referring to the source image
rob@100:     *
rob@100:     * @see blend
rob@100:     * @see get
rob@100:     */
rob@100:     p.copy = function(src, sx, sy, sw, sh, dx, dy, dw, dh) {
rob@100:       if (dh === undef) {
rob@100:         // shift everything, and introduce p
rob@100:         dh = dw;
rob@100:         dw = dy;
rob@100:         dy = dx;
rob@100:         dx = sh;
rob@100:         sh = sw;
rob@100:         sw = sy;
rob@100:         sy = sx;
rob@100:         sx = src;
rob@100:         src = p;
rob@100:       }
rob@100:       p.blend(src, sx, sy, sw, sh, dx, dy, dw, dh, PConstants.REPLACE);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Blends a region of pixels from one image into another (or in itself again) with full alpha channel support. There
rob@100:     * is a choice of the following modes to blend the source pixels (A) with the ones of pixels in the destination image (B):
rob@100:     * BLEND - linear interpolation of colours: C = A*factor + B
rob@100:     * ADD - additive blending with white clip: C = min(A*factor + B, 255)
rob@100:     * SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0)
rob@100:     * DARKEST - only the darkest colour succeeds: C = min(A*factor, B)
rob@100:     * LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B)
rob@100:     * DIFFERENCE - subtract colors from underlying image.
rob@100:     * EXCLUSION - similar to DIFFERENCE, but less extreme.
rob@100:     * MULTIPLY - Multiply the colors, result will always be darker.
rob@100:     * SCREEN - Opposite multiply, uses inverse values of the colors.
rob@100:     * OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and screens light values.
rob@100:     * HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower.
rob@100:     * SOFT_LIGHT - Mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh.
rob@100:     * DODGE - Lightens light tones and increases contrast, ignores darks. Called "Color Dodge" in Illustrator and Photoshop.
rob@100:     * BURN - Darker areas are applied, increasing contrast, ignores lights. Called "Color Burn" in Illustrator and Photoshop.
rob@100:     * All modes use the alpha information (highest byte) of source image pixels as the blending factor. If the source and
rob@100:     * destination regions are different sizes, the image will be automatically resized to match the destination size. If the
rob@100:     * srcImg parameter is not used, the display window is used as the source image.  This function ignores imageMode().
rob@100:     *
rob@100:     * @param {int} x            X coordinate of the source's upper left corner
rob@100:     * @param {int} y            Y coordinate of the source's upper left corner
rob@100:     * @param {int} width        source image width
rob@100:     * @param {int} height       source image height
rob@100:     * @param {int} dx           X coordinate of the destination's upper left corner
rob@100:     * @param {int} dy           Y coordinate of the destination's upper left corner
rob@100:     * @param {int} dwidth       destination image width
rob@100:     * @param {int} dheight      destination image height
rob@100:     * @param {PImage} srcImg    image variable referring to the source image
rob@100:     * @param {PImage} MODE      Either BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN,
rob@100:     *                           OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN
rob@100:     * @see filter
rob@100:     */
rob@100:     p.blend = function(src, sx, sy, sw, sh, dx, dy, dw, dh, mode, pimgdest) {
rob@100:       if (src.isRemote) {
rob@100:         throw "Image is loaded remotely. Cannot blend image.";
rob@100:       }
rob@100: 
rob@100:       if (mode === undef) {
rob@100:         // shift everything, and introduce p
rob@100:         mode = dh;
rob@100:         dh = dw;
rob@100:         dw = dy;
rob@100:         dy = dx;
rob@100:         dx = sh;
rob@100:         sh = sw;
rob@100:         sw = sy;
rob@100:         sy = sx;
rob@100:         sx = src;
rob@100:         src = p;
rob@100:       }
rob@100: 
rob@100:       var sx2 = sx + sw,
rob@100:         sy2 = sy + sh,
rob@100:         dx2 = dx + dw,
rob@100:         dy2 = dy + dh,
rob@100:         dest = pimgdest || p;
rob@100: 
rob@100:       // check if pimgdest is there and pixels, if so this was a call from pimg.blend
rob@100:       if (pimgdest === undef || mode === undef) {
rob@100:         p.loadPixels();
rob@100:       }
rob@100: 
rob@100:       src.loadPixels();
rob@100: 
rob@100:       if (src === p && p.intersect(sx, sy, sx2, sy2, dx, dy, dx2, dy2)) {
rob@100:         p.blit_resize(p.get(sx, sy, sx2 - sx, sy2 - sy), 0, 0, sx2 - sx - 1, sy2 - sy - 1,
rob@100:                       dest.imageData.data, dest.width, dest.height, dx, dy, dx2, dy2, mode);
rob@100:       } else {
rob@100:         p.blit_resize(src, sx, sy, sx2, sy2, dest.imageData.data, dest.width, dest.height, dx, dy, dx2, dy2, mode);
rob@100:       }
rob@100: 
rob@100:       if (pimgdest === undef) {
rob@100:         p.updatePixels();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     // helper function for filter()
rob@100:     var buildBlurKernel = function(r) {
rob@100:       var radius = p.floor(r * 3.5), i, radiusi;
rob@100:       radius = (radius < 1) ? 1 : ((radius < 248) ? radius : 248);
rob@100:       if (p.shared.blurRadius !== radius) {
rob@100:         p.shared.blurRadius = radius;
rob@100:         p.shared.blurKernelSize = 1 + (p.shared.blurRadius<<1);
rob@100:         p.shared.blurKernel = new Float32Array(p.shared.blurKernelSize);
rob@100:         var sharedBlurKernal = p.shared.blurKernel;
rob@100:         var sharedBlurKernelSize = p.shared.blurKernelSize;
rob@100:         var sharedBlurRadius = p.shared.blurRadius;
rob@100:         // init blurKernel
rob@100:         for (i = 0; i < sharedBlurKernelSize; i++) {
rob@100:           sharedBlurKernal[i] = 0;
rob@100:         }
rob@100:         var radiusiSquared = (radius - 1) * (radius - 1);
rob@100:         for (i = 1; i < radius; i++) {
rob@100:           sharedBlurKernal[radius + i] = sharedBlurKernal[radiusi] = radiusiSquared;
rob@100:         }
rob@100:         sharedBlurKernal[radius] = radius * radius;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     var blurARGB = function(r, aImg) {
rob@100:       var sum, cr, cg, cb, ca, c, m;
rob@100:       var read, ri, ym, ymi, bk0;
rob@100:       var wh = aImg.pixels.getLength();
rob@100:       var r2 = new Float32Array(wh);
rob@100:       var g2 = new Float32Array(wh);
rob@100:       var b2 = new Float32Array(wh);
rob@100:       var a2 = new Float32Array(wh);
rob@100:       var yi = 0;
rob@100:       var x, y, i, offset;
rob@100: 
rob@100:       buildBlurKernel(r);
rob@100: 
rob@100:       var aImgHeight = aImg.height;
rob@100:       var aImgWidth = aImg.width;
rob@100:       var sharedBlurKernelSize = p.shared.blurKernelSize;
rob@100:       var sharedBlurRadius = p.shared.blurRadius;
rob@100:       var sharedBlurKernal = p.shared.blurKernel;
rob@100:       var pix = aImg.imageData.data;
rob@100: 
rob@100:       for (y = 0; y < aImgHeight; y++) {
rob@100:         for (x = 0; x < aImgWidth; x++) {
rob@100:           cb = cg = cr = ca = sum = 0;
rob@100:           read = x - sharedBlurRadius;
rob@100:           if (read<0) {
rob@100:             bk0 = -read;
rob@100:             read = 0;
rob@100:           } else {
rob@100:             if (read >= aImgWidth) {
rob@100:               break;
rob@100:             }
rob@100:             bk0=0;
rob@100:           }
rob@100:           for (i = bk0; i < sharedBlurKernelSize; i++) {
rob@100:             if (read >= aImgWidth) {
rob@100:               break;
rob@100:             }
rob@100:             offset = (read + yi) *4;
rob@100:             m = sharedBlurKernal[i];
rob@100:             ca += m * pix[offset + 3];
rob@100:             cr += m * pix[offset];
rob@100:             cg += m * pix[offset + 1];
rob@100:             cb += m * pix[offset + 2];
rob@100:             sum += m;
rob@100:             read++;
rob@100:           }
rob@100:           ri = yi + x;
rob@100:           a2[ri] = ca / sum;
rob@100:           r2[ri] = cr / sum;
rob@100:           g2[ri] = cg / sum;
rob@100:           b2[ri] = cb / sum;
rob@100:         }
rob@100:         yi += aImgWidth;
rob@100:       }
rob@100: 
rob@100:       yi = 0;
rob@100:       ym = -sharedBlurRadius;
rob@100:       ymi = ym*aImgWidth;
rob@100: 
rob@100:       for (y = 0; y < aImgHeight; y++) {
rob@100:         for (x = 0; x < aImgWidth; x++) {
rob@100:           cb = cg = cr = ca = sum = 0;
rob@100:           if (ym<0) {
rob@100:             bk0 = ri = -ym;
rob@100:             read = x;
rob@100:           } else {
rob@100:             if (ym >= aImgHeight) {
rob@100:               break;
rob@100:             }
rob@100:             bk0 = 0;
rob@100:             ri = ym;
rob@100:             read = x + ymi;
rob@100:           }
rob@100:           for (i = bk0; i < sharedBlurKernelSize; i++) {
rob@100:             if (ri >= aImgHeight) {
rob@100:               break;
rob@100:             }
rob@100:             m = sharedBlurKernal[i];
rob@100:             ca += m * a2[read];
rob@100:             cr += m * r2[read];
rob@100:             cg += m * g2[read];
rob@100:             cb += m * b2[read];
rob@100:             sum += m;
rob@100:             ri++;
rob@100:             read += aImgWidth;
rob@100:           }
rob@100:           offset = (x + yi) *4;
rob@100:           pix[offset] = cr / sum;
rob@100:           pix[offset + 1] = cg / sum;
rob@100:           pix[offset + 2] = cb / sum;
rob@100:           pix[offset + 3] = ca / sum;
rob@100:         }
rob@100:         yi += aImgWidth;
rob@100:         ymi += aImgWidth;
rob@100:         ym++;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     // helper funtion for ERODE and DILATE modes of filter()
rob@100:     var dilate = function(isInverted, aImg) {
rob@100:       var currIdx = 0;
rob@100:       var maxIdx = aImg.pixels.getLength();
rob@100:       var out = new Int32Array(maxIdx);
rob@100:       var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
rob@100:       var idxRight, idxLeft, idxUp, idxDown,
rob@100:           colRight, colLeft, colUp, colDown,
rob@100:           lumRight, lumLeft, lumUp, lumDown;
rob@100: 
rob@100:       if (!isInverted) {
rob@100:         // erosion (grow light areas)
rob@100:         while (currIdx<maxIdx) {
rob@100:           currRowIdx = currIdx;
rob@100:           maxRowIdx = currIdx + aImg.width;
rob@100:           while (currIdx < maxRowIdx) {
rob@100:             colOrig = colOut = aImg.pixels.getPixel(currIdx);
rob@100:             idxLeft = currIdx - 1;
rob@100:             idxRight = currIdx + 1;
rob@100:             idxUp = currIdx - aImg.width;
rob@100:             idxDown = currIdx + aImg.width;
rob@100:             if (idxLeft < currRowIdx) {
rob@100:               idxLeft = currIdx;
rob@100:             }
rob@100:             if (idxRight >= maxRowIdx) {
rob@100:               idxRight = currIdx;
rob@100:             }
rob@100:             if (idxUp < 0) {
rob@100:               idxUp = 0;
rob@100:             }
rob@100:             if (idxDown >= maxIdx) {
rob@100:               idxDown = currIdx;
rob@100:             }
rob@100:             colUp = aImg.pixels.getPixel(idxUp);
rob@100:             colLeft = aImg.pixels.getPixel(idxLeft);
rob@100:             colDown = aImg.pixels.getPixel(idxDown);
rob@100:             colRight = aImg.pixels.getPixel(idxRight);
rob@100: 
rob@100:             // compute luminance
rob@100:             currLum = 77*(colOrig>>16&0xff) + 151*(colOrig>>8&0xff) + 28*(colOrig&0xff);
rob@100:             lumLeft = 77*(colLeft>>16&0xff) + 151*(colLeft>>8&0xff) + 28*(colLeft&0xff);
rob@100:             lumRight = 77*(colRight>>16&0xff) + 151*(colRight>>8&0xff) + 28*(colRight&0xff);
rob@100:             lumUp = 77*(colUp>>16&0xff) + 151*(colUp>>8&0xff) + 28*(colUp&0xff);
rob@100:             lumDown = 77*(colDown>>16&0xff) + 151*(colDown>>8&0xff) + 28*(colDown&0xff);
rob@100: 
rob@100:             if (lumLeft > currLum) {
rob@100:               colOut = colLeft;
rob@100:               currLum = lumLeft;
rob@100:             }
rob@100:             if (lumRight > currLum) {
rob@100:               colOut = colRight;
rob@100:               currLum = lumRight;
rob@100:             }
rob@100:             if (lumUp > currLum) {
rob@100:               colOut = colUp;
rob@100:               currLum = lumUp;
rob@100:             }
rob@100:             if (lumDown > currLum) {
rob@100:               colOut = colDown;
rob@100:               currLum = lumDown;
rob@100:             }
rob@100:             out[currIdx++] = colOut;
rob@100:           }
rob@100:         }
rob@100:       } else {
rob@100:         // dilate (grow dark areas)
rob@100:         while (currIdx < maxIdx) {
rob@100:           currRowIdx = currIdx;
rob@100:           maxRowIdx = currIdx + aImg.width;
rob@100:           while (currIdx < maxRowIdx) {
rob@100:             colOrig = colOut = aImg.pixels.getPixel(currIdx);
rob@100:             idxLeft = currIdx - 1;
rob@100:             idxRight = currIdx + 1;
rob@100:             idxUp = currIdx - aImg.width;
rob@100:             idxDown = currIdx + aImg.width;
rob@100:             if (idxLeft < currRowIdx) {
rob@100:               idxLeft = currIdx;
rob@100:             }
rob@100:             if (idxRight >= maxRowIdx) {
rob@100:               idxRight = currIdx;
rob@100:             }
rob@100:             if (idxUp < 0) {
rob@100:               idxUp = 0;
rob@100:             }
rob@100:             if (idxDown >= maxIdx) {
rob@100:               idxDown = currIdx;
rob@100:             }
rob@100:             colUp = aImg.pixels.getPixel(idxUp);
rob@100:             colLeft = aImg.pixels.getPixel(idxLeft);
rob@100:             colDown = aImg.pixels.getPixel(idxDown);
rob@100:             colRight = aImg.pixels.getPixel(idxRight);
rob@100: 
rob@100:             // compute luminance
rob@100:             currLum = 77*(colOrig>>16&0xff) + 151*(colOrig>>8&0xff) + 28*(colOrig&0xff);
rob@100:             lumLeft = 77*(colLeft>>16&0xff) + 151*(colLeft>>8&0xff) + 28*(colLeft&0xff);
rob@100:             lumRight = 77*(colRight>>16&0xff) + 151*(colRight>>8&0xff) + 28*(colRight&0xff);
rob@100:             lumUp = 77*(colUp>>16&0xff) + 151*(colUp>>8&0xff) + 28*(colUp&0xff);
rob@100:             lumDown = 77*(colDown>>16&0xff) + 151*(colDown>>8&0xff) + 28*(colDown&0xff);
rob@100: 
rob@100:             if (lumLeft < currLum) {
rob@100:               colOut = colLeft;
rob@100:               currLum = lumLeft;
rob@100:             }
rob@100:             if (lumRight < currLum) {
rob@100:               colOut = colRight;
rob@100:               currLum = lumRight;
rob@100:             }
rob@100:             if (lumUp < currLum) {
rob@100:               colOut = colUp;
rob@100:               currLum = lumUp;
rob@100:             }
rob@100:             if (lumDown < currLum) {
rob@100:               colOut = colDown;
rob@100:               currLum = lumDown;
rob@100:             }
rob@100:             out[currIdx++]=colOut;
rob@100:           }
rob@100:         }
rob@100:       }
rob@100:       aImg.pixels.set(out);
rob@100:       //p.arraycopy(out,0,pixels,0,maxIdx);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:     * Filters the display window as defined by one of the following modes:
rob@100:     * THRESHOLD - converts the image to black and white pixels depending if they are above or below the threshold
rob@100:     * defined by the level parameter. The level must be between 0.0 (black) and 1.0(white). If no level is specified, 0.5 is used.
rob@100:     * GRAY - converts any colors in the image to grayscale equivalents
rob@100:     * INVERT - sets each pixel to its inverse value
rob@100:     * POSTERIZE - limits each channel of the image to the number of colors specified as the level parameter
rob@100:     * BLUR - executes a Guassian blur with the level parameter specifying the extent of the blurring. If no level parameter is
rob@100:     * used, the blur is equivalent to Guassian blur of radius 1.
rob@100:     * OPAQUE - sets the alpha channel to entirely opaque.
rob@100:     * ERODE - reduces the light areas with the amount defined by the level parameter.
rob@100:     * DILATE - increases the light areas with the amount defined by the level parameter.
rob@100:     *
rob@100:     * @param {MODE} MODE          Either THRESHOLD, GRAY, INVERT, POSTERIZE, BLUR, OPAQUE, ERODE, or DILATE
rob@100:     * @param {int|float} level    defines the quality of the filter
rob@100:     *
rob@100:     * @see blend
rob@100:     */
rob@100:     p.filter = function(kind, param, aImg){
rob@100:       var img, col, lum, i;
rob@100: 
rob@100:       if (arguments.length === 3) {
rob@100:         aImg.loadPixels();
rob@100:         img = aImg;
rob@100:       } else {
rob@100:         p.loadPixels();
rob@100:         img = p;
rob@100:       }
rob@100: 
rob@100:       if (param === undef) {
rob@100:         param = null;
rob@100:       }
rob@100:       if (img.isRemote) { // Remote images cannot access imageData
rob@100:         throw "Image is loaded remotely. Cannot filter image.";
rob@100:       }
rob@100:       // begin filter process
rob@100:       var imglen = img.pixels.getLength();
rob@100:       switch (kind) {
rob@100:         case PConstants.BLUR:
rob@100:           var radius = param || 1; // if no param specified, use 1 (default for p5)
rob@100:           blurARGB(radius, img);
rob@100:           break;
rob@100: 
rob@100:         case PConstants.GRAY:
rob@100:           if (img.format === PConstants.ALPHA) { //trouble
rob@100:             // for an alpha image, convert it to an opaque grayscale
rob@100:             for (i = 0; i < imglen; i++) {
rob@100:               col = 255 - img.pixels.getPixel(i);
rob@100:               img.pixels.setPixel(i,(0xff000000 | (col << 16) | (col << 8) | col));
rob@100:             }
rob@100:             img.format = PConstants.RGB; //trouble
rob@100:           } else {
rob@100:             for (i = 0; i < imglen; i++) {
rob@100:               col = img.pixels.getPixel(i);
rob@100:               lum = (77*(col>>16&0xff) + 151*(col>>8&0xff) + 28*(col&0xff))>>8;
rob@100:               img.pixels.setPixel(i,((col & PConstants.ALPHA_MASK) | lum<<16 | lum<<8 | lum));
rob@100:             }
rob@100:           }
rob@100:           break;
rob@100: 
rob@100:         case PConstants.INVERT:
rob@100:           for (i = 0; i < imglen; i++) {
rob@100:             img.pixels.setPixel(i, (img.pixels.getPixel(i) ^ 0xffffff));
rob@100:           }
rob@100:           break;
rob@100: 
rob@100:         case PConstants.POSTERIZE:
rob@100:           if (param === null) {
rob@100:             throw "Use filter(POSTERIZE, int levels) instead of filter(POSTERIZE)";
rob@100:           }
rob@100:           var levels = p.floor(param);
rob@100:           if ((levels < 2) || (levels > 255)) {
rob@100:             throw "Levels must be between 2 and 255 for filter(POSTERIZE, levels)";
rob@100:           }
rob@100:           var levels1 = levels - 1;
rob@100:           for (i = 0; i < imglen; i++) {
rob@100:             var rlevel = (img.pixels.getPixel(i) >> 16) & 0xff;
rob@100:             var glevel = (img.pixels.getPixel(i) >> 8) & 0xff;
rob@100:             var blevel = img.pixels.getPixel(i) & 0xff;
rob@100:             rlevel = (((rlevel * levels) >> 8) * 255) / levels1;
rob@100:             glevel = (((glevel * levels) >> 8) * 255) / levels1;
rob@100:             blevel = (((blevel * levels) >> 8) * 255) / levels1;
rob@100:             img.pixels.setPixel(i, ((0xff000000 & img.pixels.getPixel(i)) | (rlevel << 16) | (glevel << 8) | blevel));
rob@100:           }
rob@100:           break;
rob@100: 
rob@100:         case PConstants.OPAQUE:
rob@100:           for (i = 0; i < imglen; i++) {
rob@100:             img.pixels.setPixel(i, (img.pixels.getPixel(i) | 0xff000000));
rob@100:           }
rob@100:           img.format = PConstants.RGB; //trouble
rob@100:           break;
rob@100: 
rob@100:         case PConstants.THRESHOLD:
rob@100:           if (param === null) {
rob@100:             param = 0.5;
rob@100:           }
rob@100:           if ((param < 0) || (param > 1)) {
rob@100:             throw "Level must be between 0 and 1 for filter(THRESHOLD, level)";
rob@100:           }
rob@100:           var thresh = p.floor(param * 255);
rob@100:           for (i = 0; i < imglen; i++) {
rob@100:             var max = p.max((img.pixels.getPixel(i) & PConstants.RED_MASK) >> 16, p.max((img.pixels.getPixel(i) & PConstants.GREEN_MASK) >> 8, (img.pixels.getPixel(i) & PConstants.BLUE_MASK)));
rob@100:             img.pixels.setPixel(i, ((img.pixels.getPixel(i) & PConstants.ALPHA_MASK) | ((max < thresh) ? 0x000000 : 0xffffff)));
rob@100:           }
rob@100:           break;
rob@100: 
rob@100:         case PConstants.ERODE:
rob@100:           dilate(true, img);
rob@100:           break;
rob@100: 
rob@100:         case PConstants.DILATE:
rob@100:           dilate(false, img);
rob@100:           break;
rob@100:       }
rob@100:       img.updatePixels();
rob@100:     };
rob@100: 
rob@100: 
rob@100:     // shared variables for blit_resize(), filter_new_scanline(), filter_bilinear(), filter()
rob@100:     // change this in the future to not be exposed to p
rob@100:     p.shared = {
rob@100:       fracU: 0,
rob@100:       ifU: 0,
rob@100:       fracV: 0,
rob@100:       ifV: 0,
rob@100:       u1: 0,
rob@100:       u2: 0,
rob@100:       v1: 0,
rob@100:       v2: 0,
rob@100:       sX: 0,
rob@100:       sY: 0,
rob@100:       iw: 0,
rob@100:       iw1: 0,
rob@100:       ih1: 0,
rob@100:       ul: 0,
rob@100:       ll: 0,
rob@100:       ur: 0,
rob@100:       lr: 0,
rob@100:       cUL: 0,
rob@100:       cLL: 0,
rob@100:       cUR: 0,
rob@100:       cLR: 0,
rob@100:       srcXOffset: 0,
rob@100:       srcYOffset: 0,
rob@100:       r: 0,
rob@100:       g: 0,
rob@100:       b: 0,
rob@100:       a: 0,
rob@100:       srcBuffer: null,
rob@100:       blurRadius: 0,
rob@100:       blurKernelSize: 0,
rob@100:       blurKernel: null
rob@100:     };
rob@100: 
rob@100:     p.intersect = function(sx1, sy1, sx2, sy2, dx1, dy1, dx2, dy2) {
rob@100:       var sw = sx2 - sx1 + 1;
rob@100:       var sh = sy2 - sy1 + 1;
rob@100:       var dw = dx2 - dx1 + 1;
rob@100:       var dh = dy2 - dy1 + 1;
rob@100:       if (dx1 < sx1) {
rob@100:         dw += dx1 - sx1;
rob@100:         if (dw > sw) {
rob@100:           dw = sw;
rob@100:         }
rob@100:       } else {
rob@100:         var w = sw + sx1 - dx1;
rob@100:         if (dw > w) {
rob@100:           dw = w;
rob@100:         }
rob@100:       }
rob@100:       if (dy1 < sy1) {
rob@100:         dh += dy1 - sy1;
rob@100:         if (dh > sh) {
rob@100:           dh = sh;
rob@100:         }
rob@100:       } else {
rob@100:         var h = sh + sy1 - dy1;
rob@100:         if (dh > h) {
rob@100:           dh = h;
rob@100:         }
rob@100:       }
rob@100:       return ! (dw <= 0 || dh <= 0);
rob@100:     };
rob@100: 
rob@100:     var blendFuncs = {};
rob@100:     blendFuncs[PConstants.BLEND] = p.modes.blend;
rob@100:     blendFuncs[PConstants.ADD] = p.modes.add;
rob@100:     blendFuncs[PConstants.SUBTRACT] = p.modes.subtract;
rob@100:     blendFuncs[PConstants.LIGHTEST] = p.modes.lightest;
rob@100:     blendFuncs[PConstants.DARKEST] = p.modes.darkest;
rob@100:     blendFuncs[PConstants.REPLACE] = p.modes.replace;
rob@100:     blendFuncs[PConstants.DIFFERENCE] = p.modes.difference;
rob@100:     blendFuncs[PConstants.EXCLUSION] = p.modes.exclusion;
rob@100:     blendFuncs[PConstants.MULTIPLY] = p.modes.multiply;
rob@100:     blendFuncs[PConstants.SCREEN] = p.modes.screen;
rob@100:     blendFuncs[PConstants.OVERLAY] = p.modes.overlay;
rob@100:     blendFuncs[PConstants.HARD_LIGHT] = p.modes.hard_light;
rob@100:     blendFuncs[PConstants.SOFT_LIGHT] = p.modes.soft_light;
rob@100:     blendFuncs[PConstants.DODGE] = p.modes.dodge;
rob@100:     blendFuncs[PConstants.BURN] = p.modes.burn;
rob@100: 
rob@100:     p.blit_resize = function(img, srcX1, srcY1, srcX2, srcY2, destPixels,
rob@100:                              screenW, screenH, destX1, destY1, destX2, destY2, mode) {
rob@100:       var x, y;
rob@100:       if (srcX1 < 0) {
rob@100:         srcX1 = 0;
rob@100:       }
rob@100:       if (srcY1 < 0) {
rob@100:         srcY1 = 0;
rob@100:       }
rob@100:       if (srcX2 >= img.width) {
rob@100:         srcX2 = img.width - 1;
rob@100:       }
rob@100:       if (srcY2 >= img.height) {
rob@100:         srcY2 = img.height - 1;
rob@100:       }
rob@100:       var srcW = srcX2 - srcX1;
rob@100:       var srcH = srcY2 - srcY1;
rob@100:       var destW = destX2 - destX1;
rob@100:       var destH = destY2 - destY1;
rob@100: 
rob@100:       if (destW <= 0 || destH <= 0 || srcW <= 0 || srcH <= 0 || destX1 >= screenW ||
rob@100:           destY1 >= screenH || srcX1 >= img.width || srcY1 >= img.height) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       var dx = Math.floor(srcW / destW * PConstants.PRECISIONF);
rob@100:       var dy = Math.floor(srcH / destH * PConstants.PRECISIONF);
rob@100: 
rob@100:       var pshared = p.shared;
rob@100: 
rob@100:       pshared.srcXOffset = Math.floor(destX1 < 0 ? -destX1 * dx : srcX1 * PConstants.PRECISIONF);
rob@100:       pshared.srcYOffset = Math.floor(destY1 < 0 ? -destY1 * dy : srcY1 * PConstants.PRECISIONF);
rob@100:       if (destX1 < 0) {
rob@100:         destW += destX1;
rob@100:         destX1 = 0;
rob@100:       }
rob@100:       if (destY1 < 0) {
rob@100:         destH += destY1;
rob@100:         destY1 = 0;
rob@100:       }
rob@100:       destW = Math.min(destW, screenW - destX1);
rob@100:       destH = Math.min(destH, screenH - destY1);
rob@100: 
rob@100:       var destOffset = destY1 * screenW + destX1;
rob@100:       var destColor;
rob@100: 
rob@100:       pshared.srcBuffer = img.imageData.data;
rob@100:       pshared.iw = img.width;
rob@100:       pshared.iw1 = img.width - 1;
rob@100:       pshared.ih1 = img.height - 1;
rob@100: 
rob@100:       // cache for speed
rob@100:       var filterBilinear = p.filter_bilinear,
rob@100:         filterNewScanline = p.filter_new_scanline,
rob@100:         blendFunc = blendFuncs[mode],
rob@100:         blendedColor,
rob@100:         idx,
rob@100:         cULoffset,
rob@100:         cURoffset,
rob@100:         cLLoffset,
rob@100:         cLRoffset,
rob@100:         ALPHA_MASK = PConstants.ALPHA_MASK,
rob@100:         RED_MASK = PConstants.RED_MASK,
rob@100:         GREEN_MASK = PConstants.GREEN_MASK,
rob@100:         BLUE_MASK = PConstants.BLUE_MASK,
rob@100:         PREC_MAXVAL = PConstants.PREC_MAXVAL,
rob@100:         PRECISIONB = PConstants.PRECISIONB,
rob@100:         PREC_RED_SHIFT = PConstants.PREC_RED_SHIFT,
rob@100:         PREC_ALPHA_SHIFT = PConstants.PREC_ALPHA_SHIFT,
rob@100:         srcBuffer = pshared.srcBuffer,
rob@100:         min = Math.min;
rob@100: 
rob@100:       for (y = 0; y < destH; y++) {
rob@100: 
rob@100:         pshared.sX = pshared.srcXOffset;
rob@100:         pshared.fracV = pshared.srcYOffset & PREC_MAXVAL;
rob@100:         pshared.ifV = PREC_MAXVAL - pshared.fracV;
rob@100:         pshared.v1 = (pshared.srcYOffset >> PRECISIONB) * pshared.iw;
rob@100:         pshared.v2 = min((pshared.srcYOffset >> PRECISIONB) + 1, pshared.ih1) * pshared.iw;
rob@100: 
rob@100:         for (x = 0; x < destW; x++) {
rob@100:           idx = (destOffset + x) * 4;
rob@100: 
rob@100:           destColor = (destPixels[idx + 3] << 24) &
rob@100:                       ALPHA_MASK | (destPixels[idx] << 16) &
rob@100:                       RED_MASK   | (destPixels[idx + 1] << 8) &
rob@100:                       GREEN_MASK |  destPixels[idx + 2] & BLUE_MASK;
rob@100: 
rob@100:           pshared.fracU = pshared.sX & PREC_MAXVAL;
rob@100:           pshared.ifU = PREC_MAXVAL - pshared.fracU;
rob@100:           pshared.ul = (pshared.ifU * pshared.ifV) >> PRECISIONB;
rob@100:           pshared.ll = (pshared.ifU * pshared.fracV) >> PRECISIONB;
rob@100:           pshared.ur = (pshared.fracU * pshared.ifV) >> PRECISIONB;
rob@100:           pshared.lr = (pshared.fracU * pshared.fracV) >> PRECISIONB;
rob@100:           pshared.u1 = (pshared.sX >> PRECISIONB);
rob@100:           pshared.u2 = min(pshared.u1 + 1, pshared.iw1);
rob@100: 
rob@100:           cULoffset = (pshared.v1 + pshared.u1) * 4;
rob@100:           cURoffset = (pshared.v1 + pshared.u2) * 4;
rob@100:           cLLoffset = (pshared.v2 + pshared.u1) * 4;
rob@100:           cLRoffset = (pshared.v2 + pshared.u2) * 4;
rob@100: 
rob@100:           pshared.cUL = (srcBuffer[cULoffset + 3] << 24) &
rob@100:                         ALPHA_MASK | (srcBuffer[cULoffset] << 16) &
rob@100:                         RED_MASK   | (srcBuffer[cULoffset + 1] << 8) &
rob@100:                         GREEN_MASK |  srcBuffer[cULoffset + 2] & BLUE_MASK;
rob@100: 
rob@100:           pshared.cUR = (srcBuffer[cURoffset + 3] << 24) &
rob@100:                         ALPHA_MASK | (srcBuffer[cURoffset] << 16) &
rob@100:                         RED_MASK   | (srcBuffer[cURoffset + 1] << 8) &
rob@100:                         GREEN_MASK |  srcBuffer[cURoffset + 2] & BLUE_MASK;
rob@100: 
rob@100:           pshared.cLL = (srcBuffer[cLLoffset + 3] << 24) &
rob@100:                         ALPHA_MASK | (srcBuffer[cLLoffset] << 16) &
rob@100:                         RED_MASK   | (srcBuffer[cLLoffset + 1] << 8) &
rob@100:                         GREEN_MASK |  srcBuffer[cLLoffset + 2] & BLUE_MASK;
rob@100: 
rob@100:           pshared.cLR = (srcBuffer[cLRoffset + 3] << 24) &
rob@100:                         ALPHA_MASK | (srcBuffer[cLRoffset] << 16) &
rob@100:                         RED_MASK   | (srcBuffer[cLRoffset + 1] << 8) &
rob@100:                         GREEN_MASK |  srcBuffer[cLRoffset + 2] & BLUE_MASK;
rob@100: 
rob@100:           pshared.r = ((pshared.ul * ((pshared.cUL & RED_MASK) >> 16) +
rob@100:                        pshared.ll * ((pshared.cLL & RED_MASK) >> 16) +
rob@100:                        pshared.ur * ((pshared.cUR & RED_MASK) >> 16) +
rob@100:                        pshared.lr * ((pshared.cLR & RED_MASK) >> 16)) << PREC_RED_SHIFT) & RED_MASK;
rob@100:           pshared.g = ((pshared.ul * (pshared.cUL & GREEN_MASK) +
rob@100:                        pshared.ll * (pshared.cLL & GREEN_MASK) +
rob@100:                        pshared.ur * (pshared.cUR & GREEN_MASK) +
rob@100:                        pshared.lr * (pshared.cLR & GREEN_MASK)) >>> PRECISIONB) & GREEN_MASK;
rob@100:           pshared.b = (pshared.ul * (pshared.cUL & BLUE_MASK) +
rob@100:                        pshared.ll * (pshared.cLL & BLUE_MASK) +
rob@100:                        pshared.ur * (pshared.cUR & BLUE_MASK) +
rob@100:                        pshared.lr * (pshared.cLR & BLUE_MASK)) >>> PRECISIONB;
rob@100:           pshared.a = ((pshared.ul * ((pshared.cUL & ALPHA_MASK) >>> 24) +
rob@100:                        pshared.ll * ((pshared.cLL & ALPHA_MASK) >>> 24) +
rob@100:                        pshared.ur * ((pshared.cUR & ALPHA_MASK) >>> 24) +
rob@100:                        pshared.lr * ((pshared.cLR & ALPHA_MASK) >>> 24)) << PREC_ALPHA_SHIFT) & ALPHA_MASK;
rob@100: 
rob@100:           blendedColor = blendFunc(destColor, (pshared.a | pshared.r | pshared.g | pshared.b));
rob@100: 
rob@100:           destPixels[idx]     = (blendedColor & RED_MASK) >>> 16;
rob@100:           destPixels[idx + 1] = (blendedColor & GREEN_MASK) >>> 8;
rob@100:           destPixels[idx + 2] = (blendedColor & BLUE_MASK);
rob@100:           destPixels[idx + 3] = (blendedColor & ALPHA_MASK) >>> 24;
rob@100: 
rob@100:           pshared.sX += dx;
rob@100:         }
rob@100:         destOffset += screenW;
rob@100:         pshared.srcYOffset += dy;
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // Font handling
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     /**
rob@100:      * loadFont() Loads a font into a variable of type PFont.
rob@100:      *
rob@100:      * @param {String} name filename of the font to load
rob@100:      * @param {int|float} size option font size (used internally)
rob@100:      *
rob@100:      * @returns {PFont} new PFont object
rob@100:      *
rob@100:      * @see #PFont
rob@100:      * @see #textFont
rob@100:      * @see #text
rob@100:      * @see #createFont
rob@100:      */
rob@100:     p.loadFont = function(name, size) {
rob@100:       if (name === undef) {
rob@100:         throw("font name required in loadFont.");
rob@100:       }
rob@100:       if (name.indexOf(".svg") === -1) {
rob@100:         if (size === undef) {
rob@100:           size = curTextFont.size;
rob@100:         }
rob@100:         return PFont.get(name, size);
rob@100:       }
rob@100:       // If the font is a glyph, calculate by SVG table
rob@100:       var font = p.loadGlyphs(name);
rob@100: 
rob@100:       return {
rob@100:         name: name,
rob@100:         css: '12px sans-serif',
rob@100:         glyph: true,
rob@100:         units_per_em: font.units_per_em,
rob@100:         horiz_adv_x: 1 / font.units_per_em * font.horiz_adv_x,
rob@100:         ascent: font.ascent,
rob@100:         descent: font.descent,
rob@100:         width: function(str) {
rob@100:           var width = 0;
rob@100:           var len = str.length;
rob@100:           for (var i = 0; i < len; i++) {
rob@100:             try {
rob@100:               width += parseFloat(p.glyphLook(p.glyphTable[name], str[i]).horiz_adv_x);
rob@100:             }
rob@100:             catch(e) {
rob@100:               Processing.debug(e);
rob@100:             }
rob@100:           }
rob@100:           return width / p.glyphTable[name].units_per_em;
rob@100:         }
rob@100:       };
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * createFont() Loads a font into a variable of type PFont.
rob@100:      * Smooth and charset are ignored in Processing.js.
rob@100:      *
rob@100:      * @param {String}    name    filename of the font to load
rob@100:      * @param {int|float} size    font size in pixels
rob@100:      * @param {boolean}   smooth  not used in Processing.js
rob@100:      * @param {char[]}    charset not used in Processing.js
rob@100:      *
rob@100:      * @returns {PFont} new PFont object
rob@100:      *
rob@100:      * @see #PFont
rob@100:      * @see #textFont
rob@100:      * @see #text
rob@100:      * @see #loadFont
rob@100:      */
rob@100:     p.createFont = function(name, size) {
rob@100:       // because Processing.js only deals with real fonts,
rob@100:       // createFont is simply a wrapper for loadFont/2
rob@100:       return p.loadFont(name, size);
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * textFont() Sets the current font.
rob@100:      *
rob@100:      * @param {PFont}     pfont the PFont to load as current text font
rob@100:      * @param {int|float} size optional font size in pixels
rob@100:      *
rob@100:      * @see #createFont
rob@100:      * @see #loadFont
rob@100:      * @see #PFont
rob@100:      * @see #text
rob@100:      */
rob@100:     p.textFont = function(pfont, size) {
rob@100:       if (size !== undef) {
rob@100:         // If we're using an SVG glyph font, don't load from cache
rob@100:         if (!pfont.glyph) {
rob@100:           pfont = PFont.get(pfont.name, size);
rob@100:         }
rob@100:         curTextSize = size;
rob@100:       }
rob@100:       curTextFont = pfont;
rob@100:       curFontName = curTextFont.name;
rob@100:       curTextAscent = curTextFont.ascent;
rob@100:       curTextDescent = curTextFont.descent;
rob@100:       curTextLeading = curTextFont.leading;
rob@100:       var curContext = drawing.$ensureContext();
rob@100:       curContext.font = curTextFont.css;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * textSize() Sets the current font size in pixels.
rob@100:      *
rob@100:      * @param {int|float} size font size in pixels
rob@100:      *
rob@100:      * @see #textFont
rob@100:      * @see #loadFont
rob@100:      * @see #PFont
rob@100:      * @see #text
rob@100:      */
rob@100:     p.textSize = function(size) {
rob@100:       curTextFont = PFont.get(curFontName, size);
rob@100:       curTextSize = size;
rob@100:       // recache metrics
rob@100:       curTextAscent = curTextFont.ascent;
rob@100:       curTextDescent = curTextFont.descent;
rob@100:       curTextLeading = curTextFont.leading;
rob@100:       var curContext = drawing.$ensureContext();
rob@100:       curContext.font = curTextFont.css;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * textAscent() returns the maximum height a character extends above the baseline of the
rob@100:      * current font at its current size, in pixels.
rob@100:      *
rob@100:      * @returns {float} height of the current font above the baseline, at its current size, in pixels
rob@100:      *
rob@100:      * @see #textDescent
rob@100:      */
rob@100:     p.textAscent = function() {
rob@100:       return curTextAscent;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * textDescent() returns the maximum depth a character will protrude below the baseline of
rob@100:      * the current font at its current size, in pixels.
rob@100:      *
rob@100:      * @returns {float} depth of the current font below the baseline, at its current size, in pixels
rob@100:      *
rob@100:      * @see #textAscent
rob@100:      */
rob@100:     p.textDescent = function() {
rob@100:       return curTextDescent;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * textLeading() Sets the current font's leading, which is the distance
rob@100:      * from baseline to baseline over consecutive lines, with additional vertical
rob@100:      * spacing taking into account. Usually this value is 1.2 or 1.25 times the
rob@100:      * textsize, but this value can be changed to effect vertically compressed
rob@100:      * or stretched text.
rob@100:      *
rob@100:      * @param {int|float} the desired baseline-to-baseline size in pixels
rob@100:      */
rob@100:     p.textLeading = function(leading) {
rob@100:       curTextLeading = leading;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * textAlign() Sets the current alignment for drawing text.
rob@100:      *
rob@100:      * @param {int} ALIGN  Horizontal alignment, either LEFT, CENTER, or RIGHT
rob@100:      * @param {int} YALIGN optional vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE
rob@100:      *
rob@100:      * @see #loadFont
rob@100:      * @see #PFont
rob@100:      * @see #text
rob@100:      */
rob@100:     p.textAlign = function(xalign, yalign) {
rob@100:       horizontalTextAlignment = xalign;
rob@100:       verticalTextAlignment = yalign || PConstants.BASELINE;
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * toP5String converts things with arbitrary data type into
rob@100:      * string values, for text rendering.
rob@100:      *
rob@100:      * @param {any} any object that can be converted into a string
rob@100:      *
rob@100:      * @return {String} the string representation of the input
rob@100:      */
rob@100:     function toP5String(obj) {
rob@100:       if(obj instanceof String) {
rob@100:         return obj;
rob@100:       }
rob@100:       if(typeof obj === 'number') {
rob@100:         // check if an int
rob@100:         if(obj === (0 | obj)) {
rob@100:           return obj.toString();
rob@100:         }
rob@100:         return p.nf(obj, 0, 3);
rob@100:       }
rob@100:       if(obj === null || obj === undef) {
rob@100:         return "";
rob@100:       }
rob@100:       return obj.toString();
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * textWidth() Calculates and returns the width of any character or text string in pixels.
rob@100:      *
rob@100:      * @param {char|String} str char or String to be measured
rob@100:      *
rob@100:      * @return {float} width of char or String in pixels
rob@100:      *
rob@100:      * @see #loadFont
rob@100:      * @see #PFont
rob@100:      * @see #text
rob@100:      * @see #textFont
rob@100:      */
rob@100:     Drawing2D.prototype.textWidth = function(str) {
rob@100:       var lines = toP5String(str).split(/\r?\n/g), width = 0;
rob@100:       var i, linesCount = lines.length;
rob@100: 
rob@100:       curContext.font = curTextFont.css;
rob@100:       for (i = 0; i < linesCount; ++i) {
rob@100:         width = Math.max(width, curTextFont.measureTextWidth(lines[i]));
rob@100:       }
rob@100:       return width | 0;
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.textWidth = function(str) {
rob@100:       var lines = toP5String(str).split(/\r?\n/g), width = 0;
rob@100:       var i, linesCount = lines.length;
rob@100:       if (textcanvas === undef) {
rob@100:         textcanvas = document.createElement("canvas");
rob@100:       }
rob@100: 
rob@100:       var textContext = textcanvas.getContext("2d");
rob@100:       textContext.font = curTextFont.css;
rob@100: 
rob@100:       for (i = 0; i < linesCount; ++i) {
rob@100:         width = Math.max(width, textContext.measureText(lines[i]).width);
rob@100:       }
rob@100:       return width | 0;
rob@100:     };
rob@100: 
rob@100:     // A lookup table for characters that can not be referenced by Object
rob@100:     p.glyphLook = function(font, chr) {
rob@100:       try {
rob@100:         switch (chr) {
rob@100:         case "1":
rob@100:           return font.one;
rob@100:         case "2":
rob@100:           return font.two;
rob@100:         case "3":
rob@100:           return font.three;
rob@100:         case "4":
rob@100:           return font.four;
rob@100:         case "5":
rob@100:           return font.five;
rob@100:         case "6":
rob@100:           return font.six;
rob@100:         case "7":
rob@100:           return font.seven;
rob@100:         case "8":
rob@100:           return font.eight;
rob@100:         case "9":
rob@100:           return font.nine;
rob@100:         case "0":
rob@100:           return font.zero;
rob@100:         case " ":
rob@100:           return font.space;
rob@100:         case "$":
rob@100:           return font.dollar;
rob@100:         case "!":
rob@100:           return font.exclam;
rob@100:         case '"':
rob@100:           return font.quotedbl;
rob@100:         case "#":
rob@100:           return font.numbersign;
rob@100:         case "%":
rob@100:           return font.percent;
rob@100:         case "&":
rob@100:           return font.ampersand;
rob@100:         case "'":
rob@100:           return font.quotesingle;
rob@100:         case "(":
rob@100:           return font.parenleft;
rob@100:         case ")":
rob@100:           return font.parenright;
rob@100:         case "*":
rob@100:           return font.asterisk;
rob@100:         case "+":
rob@100:           return font.plus;
rob@100:         case ",":
rob@100:           return font.comma;
rob@100:         case "-":
rob@100:           return font.hyphen;
rob@100:         case ".":
rob@100:           return font.period;
rob@100:         case "/":
rob@100:           return font.slash;
rob@100:         case "_":
rob@100:           return font.underscore;
rob@100:         case ":":
rob@100:           return font.colon;
rob@100:         case ";":
rob@100:           return font.semicolon;
rob@100:         case "<":
rob@100:           return font.less;
rob@100:         case "=":
rob@100:           return font.equal;
rob@100:         case ">":
rob@100:           return font.greater;
rob@100:         case "?":
rob@100:           return font.question;
rob@100:         case "@":
rob@100:           return font.at;
rob@100:         case "[":
rob@100:           return font.bracketleft;
rob@100:         case "\\":
rob@100:           return font.backslash;
rob@100:         case "]":
rob@100:           return font.bracketright;
rob@100:         case "^":
rob@100:           return font.asciicircum;
rob@100:         case "`":
rob@100:           return font.grave;
rob@100:         case "{":
rob@100:           return font.braceleft;
rob@100:         case "|":
rob@100:           return font.bar;
rob@100:         case "}":
rob@100:           return font.braceright;
rob@100:         case "~":
rob@100:           return font.asciitilde;
rob@100:           // If the character is not 'special', access it by object reference
rob@100:         default:
rob@100:           return font[chr];
rob@100:         }
rob@100:       } catch(e) {
rob@100:         Processing.debug(e);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     // Print some text to the Canvas
rob@100:     Drawing2D.prototype.text$line = function(str, x, y, z, align) {
rob@100:       var textWidth = 0, xOffset = 0;
rob@100:       // If the font is a standard Canvas font...
rob@100:       if (!curTextFont.glyph) {
rob@100:         if (str && ("fillText" in curContext)) {
rob@100:           if (isFillDirty) {
rob@100:             curContext.fillStyle = p.color.toString(currentFillColor);
rob@100:             isFillDirty = false;
rob@100:           }
rob@100: 
rob@100:           // horizontal offset/alignment
rob@100:           if(align === PConstants.RIGHT || align === PConstants.CENTER) {
rob@100:             textWidth = curTextFont.measureTextWidth(str);
rob@100: 
rob@100:             if(align === PConstants.RIGHT) {
rob@100:               xOffset = -textWidth;
rob@100:             } else { // if(align === PConstants.CENTER)
rob@100:               xOffset = -textWidth/2;
rob@100:             }
rob@100:           }
rob@100: 
rob@100:           curContext.fillText(str, x+xOffset, y);
rob@100:         }
rob@100:       } else {
rob@100:         // If the font is a Batik SVG font...
rob@100:         var font = p.glyphTable[curFontName];
rob@100:         saveContext();
rob@100:         curContext.translate(x, y + curTextSize);
rob@100: 
rob@100:         // horizontal offset/alignment
rob@100:         if(align === PConstants.RIGHT || align === PConstants.CENTER) {
rob@100:           textWidth = font.width(str);
rob@100: 
rob@100:           if(align === PConstants.RIGHT) {
rob@100:             xOffset = -textWidth;
rob@100:           } else { // if(align === PConstants.CENTER)
rob@100:             xOffset = -textWidth/2;
rob@100:           }
rob@100:         }
rob@100: 
rob@100:         var upem   = font.units_per_em,
rob@100:           newScale = 1 / upem * curTextSize;
rob@100: 
rob@100:         curContext.scale(newScale, newScale);
rob@100: 
rob@100:         for (var i=0, len=str.length; i < len; i++) {
rob@100:           // Test character against glyph table
rob@100:           try {
rob@100:             p.glyphLook(font, str[i]).draw();
rob@100:           } catch(e) {
rob@100:             Processing.debug(e);
rob@100:           }
rob@100:         }
rob@100:         restoreContext();
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     Drawing3D.prototype.text$line = function(str, x, y, z, align) {
rob@100:       // handle case for 3d text
rob@100:       if (textcanvas === undef) {
rob@100:         textcanvas = document.createElement("canvas");
rob@100:       }
rob@100:       var oldContext = curContext;
rob@100:       curContext = textcanvas.getContext("2d");
rob@100:       curContext.font = curTextFont.css;
rob@100:       var textWidth = curTextFont.measureTextWidth(str);
rob@100:       textcanvas.width = textWidth;
rob@100:       textcanvas.height = curTextSize;
rob@100:       curContext = textcanvas.getContext("2d"); // refreshes curContext
rob@100:       curContext.font = curTextFont.css;
rob@100:       curContext.textBaseline="top";
rob@100: 
rob@100:       // paint on 2D canvas
rob@100:       Drawing2D.prototype.text$line(str,0,0,0,PConstants.LEFT);
rob@100: 
rob@100:       // use it as a texture
rob@100:       var aspect = textcanvas.width/textcanvas.height;
rob@100:       curContext = oldContext;
rob@100: 
rob@100:       curContext.bindTexture(curContext.TEXTURE_2D, textTex);
rob@100:       curContext.texImage2D(curContext.TEXTURE_2D, 0, curContext.RGBA, curContext.RGBA, curContext.UNSIGNED_BYTE, textcanvas);
rob@100:       curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_MAG_FILTER, curContext.LINEAR);
rob@100:       curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_MIN_FILTER, curContext.LINEAR);
rob@100:       curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_WRAP_T, curContext.CLAMP_TO_EDGE);
rob@100:       curContext.texParameteri(curContext.TEXTURE_2D, curContext.TEXTURE_WRAP_S, curContext.CLAMP_TO_EDGE);
rob@100:       // If we don't have a power of two texture, we can't mipmap it.
rob@100:       // curContext.generateMipmap(curContext.TEXTURE_2D);
rob@100: 
rob@100:       // horizontal offset/alignment
rob@100:       var xOffset = 0;
rob@100:       if (align === PConstants.RIGHT) {
rob@100:         xOffset = -textWidth;
rob@100:       } else if(align === PConstants.CENTER) {
rob@100:         xOffset = -textWidth/2;
rob@100:       }
rob@100:       var model = new PMatrix3D();
rob@100:       var scalefactor = curTextSize * 0.5;
rob@100:       model.translate(x+xOffset-scalefactor/2, y-scalefactor, z);
rob@100:       model.scale(-aspect*scalefactor, -scalefactor, scalefactor);
rob@100:       model.translate(-1, -1, -1);
rob@100:       model.transpose();
rob@100: 
rob@100:       var view = new PMatrix3D();
rob@100:       view.scale(1, -1, 1);
rob@100:       view.apply(modelView.array());
rob@100:       view.transpose();
rob@100: 
rob@100:       curContext.useProgram(programObject2D);
rob@100:       vertexAttribPointer("aVertex2d", programObject2D, "aVertex", 3, textBuffer);
rob@100:       vertexAttribPointer("aTextureCoord2d", programObject2D, "aTextureCoord", 2, textureBuffer);
rob@100:       uniformi("uSampler2d", programObject2D, "uSampler", [0]);
rob@100: 
rob@100:       uniformi("uIsDrawingText2d", programObject2D, "uIsDrawingText", true);
rob@100: 
rob@100:       uniformMatrix("uModel2d", programObject2D, "uModel", false,  model.array());
rob@100:       uniformMatrix("uView2d", programObject2D, "uView", false, view.array());
rob@100:       uniformf("uColor2d", programObject2D, "uColor", fillStyle);
rob@100:       curContext.bindBuffer(curContext.ELEMENT_ARRAY_BUFFER, indexBuffer);
rob@100:       curContext.drawElements(curContext.TRIANGLES, 6, curContext.UNSIGNED_SHORT, 0);
rob@100:     };
rob@100: 
rob@100: 
rob@100:     /**
rob@100:     * unbounded text function (z is an optional argument)
rob@100:     */
rob@100:     function text$4(str, x, y, z) {
rob@100:       var lines, linesCount;
rob@100:       if(str.indexOf('\n') < 0) {
rob@100:         lines = [str];
rob@100:         linesCount = 1;
rob@100:       } else {
rob@100:         lines = str.split(/\r?\n/g);
rob@100:         linesCount = lines.length;
rob@100:       }
rob@100:       // handle text line-by-line
rob@100: 
rob@100:       var yOffset = 0;
rob@100:       if(verticalTextAlignment === PConstants.TOP) {
rob@100:         yOffset = curTextAscent + curTextDescent;
rob@100:       } else if(verticalTextAlignment === PConstants.CENTER) {
rob@100:         yOffset = curTextAscent/2 - (linesCount-1)*curTextLeading/2;
rob@100:       } else if(verticalTextAlignment === PConstants.BOTTOM) {
rob@100:         yOffset = -(curTextDescent + (linesCount-1)*curTextLeading);
rob@100:       }
rob@100: 
rob@100:       for(var i=0;i<linesCount;++i) {
rob@100:         var line = lines[i];
rob@100:         drawing.text$line(line, x, y + yOffset, z, horizontalTextAlignment);
rob@100:         yOffset += curTextLeading;
rob@100:       }
rob@100:     }
rob@100: 
rob@100: 
rob@100:     /**
rob@100:     * box-bounded text function (z is an optional argument)
rob@100:     */
rob@100:     function text$6(str, x, y, width, height, z) {
rob@100:       // 'fail' on 0-valued dimensions
rob@100:       if (str.length === 0 || width === 0 || height === 0) {
rob@100:         return;
rob@100:       }
rob@100:       // also 'fail' if the text height is larger than the bounding height
rob@100:       if(curTextSize > height) {
rob@100:         return;
rob@100:       }
rob@100: 
rob@100:       var spaceMark = -1;
rob@100:       var start = 0;
rob@100:       var lineWidth = 0;
rob@100:       var drawCommands = [];
rob@100: 
rob@100:       // run through text, character-by-character
rob@100:       for (var charPos=0, len=str.length; charPos < len; charPos++)
rob@100:       {
rob@100:         var currentChar = str[charPos];
rob@100:         var spaceChar = (currentChar === " ");
rob@100:         var letterWidth = curTextFont.measureTextWidth(currentChar);
rob@100: 
rob@100:         // if we aren't looking at a newline, and the text still fits, keep processing
rob@100:         if (currentChar !== "\n" && (lineWidth + letterWidth <= width)) {
rob@100:           if (spaceChar) { spaceMark = charPos; }
rob@100:           lineWidth += letterWidth;
rob@100:         }
rob@100: 
rob@100:         // if we're looking at a newline, or the text no longer fits, push the section that fit into the drawcommand list
rob@100:         else
rob@100:         {
rob@100:           if (spaceMark + 1 === start) {
rob@100:             if(charPos>0) {
rob@100:               // Whole line without spaces so far.
rob@100:               spaceMark = charPos;
rob@100:             } else {
rob@100:               // 'fail', because the line can't even fit the first character
rob@100:               return;
rob@100:             }
rob@100:           }
rob@100: 
rob@100:           if (currentChar === "\n") {
rob@100:             drawCommands.push({text:str.substring(start, charPos), width: lineWidth});
rob@100:             start = charPos + 1;
rob@100:           } else {
rob@100:             // current is not a newline, which means the line doesn't fit in box. push text.
rob@100:             // In Processing 1.5.1, the space is also pushed, so we push up to spaceMark+1,
rob@100:             // rather than up to spaceMark, as was the case for Processing 1.5 and earlier.
rob@100:             drawCommands.push({text:str.substring(start, spaceMark+1), width: lineWidth});
rob@100:             start = spaceMark + 1;
rob@100:           }
rob@100: 
rob@100:           // newline + return
rob@100:           lineWidth = 0;
rob@100:           charPos = start - 1;
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // push the remaining text
rob@100:       if (start < len) {
rob@100:         drawCommands.push({text:str.substring(start), width: lineWidth});
rob@100:       }
rob@100: 
rob@100:       // resolve horizontal alignment
rob@100:       var xOffset = 1,
rob@100:           yOffset = curTextAscent;
rob@100:       if (horizontalTextAlignment === PConstants.CENTER) {
rob@100:         xOffset = width/2;
rob@100:       } else if (horizontalTextAlignment === PConstants.RIGHT) {
rob@100:         xOffset = width;
rob@100:       }
rob@100: 
rob@100:       // resolve vertical alignment
rob@100:       var linesCount = drawCommands.length,
rob@100:           visibleLines = Math.min(linesCount, Math.floor(height/curTextLeading));
rob@100:       if(verticalTextAlignment === PConstants.TOP) {
rob@100:         yOffset = curTextAscent + curTextDescent;
rob@100:       } else if(verticalTextAlignment === PConstants.CENTER) {
rob@100:         yOffset = (height/2) - curTextLeading * (visibleLines/2 - 1);
rob@100:       } else if(verticalTextAlignment === PConstants.BOTTOM) {
rob@100:         yOffset = curTextDescent + curTextLeading;
rob@100:       }
rob@100: 
rob@100:       var command,
rob@100:           drawCommand,
rob@100:           leading;
rob@100:       for (command = 0; command < linesCount; command++) {
rob@100:         leading = command * curTextLeading;
rob@100:         // stop if not enough space for one more line draw
rob@100:         if (yOffset + leading > height - curTextDescent) {
rob@100:           break;
rob@100:         }
rob@100:         drawCommand = drawCommands[command];
rob@100:         drawing.text$line(drawCommand.text, x + xOffset, y + yOffset + leading, z, horizontalTextAlignment);
rob@100:       }
rob@100:     }
rob@100: 
rob@100:     /**
rob@100:      * text() Draws text to the screen.
rob@100:      *
rob@100:      * @param {String|char|int|float} data       the alphanumeric symbols to be displayed
rob@100:      * @param {int|float}             x          x-coordinate of text
rob@100:      * @param {int|float}             y          y-coordinate of text
rob@100:      * @param {int|float}             z          optional z-coordinate of text
rob@100:      * @param {String}                stringdata optional letters to be displayed
rob@100:      * @param {int|float}             width      optional width of text box
rob@100:      * @param {int|float}             height     optional height of text box
rob@100:      *
rob@100:      * @see #textAlign
rob@100:      * @see #textMode
rob@100:      * @see #loadFont
rob@100:      * @see #PFont
rob@100:      * @see #textFont
rob@100:      */
rob@100:     p.text = function() {
rob@100:       if (textMode === PConstants.SHAPE) {
rob@100:         // TODO: requires beginRaw function
rob@100:         return;
rob@100:       }
rob@100:       if (arguments.length === 3) { // for text( str, x, y)
rob@100:         text$4(toP5String(arguments[0]), arguments[1], arguments[2], 0);
rob@100:       } else if (arguments.length === 4) { // for text( str, x, y, z)
rob@100:         text$4(toP5String(arguments[0]), arguments[1], arguments[2], arguments[3]);
rob@100:       } else if (arguments.length === 5) { // for text( str, x, y , width, height)
rob@100:         text$6(toP5String(arguments[0]), arguments[1], arguments[2], arguments[3], arguments[4], 0);
rob@100:       } else if (arguments.length === 6) { // for text( stringdata, x, y , width, height, z)
rob@100:         text$6(toP5String(arguments[0]), arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]);
rob@100:       }
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Sets the way text draws to the screen. In the default configuration (the MODEL mode), it's possible to rotate,
rob@100:      * scale, and place letters in two and three dimensional space. <br /><br /> Changing to SCREEN mode draws letters
rob@100:      * directly to the front of the window and greatly increases rendering quality and speed when used with the P2D and
rob@100:      * P3D renderers. textMode(SCREEN) with OPENGL and JAVA2D (the default) renderers will generally be slower, though
rob@100:      * pixel accurate with P2D and P3D. With textMode(SCREEN), the letters draw at the actual size of the font (in pixels)
rob@100:      * and therefore calls to <b>textSize()</b> will not affect the size of the letters. To create a font at the size you
rob@100:      * desire, use the "Create font..." option in the Tools menu, or use the createFont() function. When using textMode(SCREEN),
rob@100:      * any z-coordinate passed to a text() command will be ignored, because your computer screen is...flat!
rob@100:      *
rob@100:      * @param {int} MODE Either MODEL, SCREEN or SHAPE (not yet supported)
rob@100:      *
rob@100:      * @see loadFont
rob@100:      * @see PFont
rob@100:      * @see text
rob@100:      * @see textFont
rob@100:      * @see createFont
rob@100:      */
rob@100:     p.textMode = function(mode){
rob@100:       textMode = mode;
rob@100:     };
rob@100: 
rob@100:     // Load Batik SVG Fonts and parse to pre-def objects for quick rendering
rob@100:     p.loadGlyphs = function(url) {
rob@100:       var x, y, cx, cy, nx, ny, d, a, lastCom, lenC, horiz_adv_x, getXY = '[0-9\\-]+', path;
rob@100: 
rob@100:       // Return arrays of SVG commands and coords
rob@100:       // get this to use p.matchAll() - will need to work around the lack of null return
rob@100:       var regex = function(needle, hay) {
rob@100:         var i = 0,
rob@100:           results = [],
rob@100:           latest, regexp = new RegExp(needle, "g");
rob@100:         latest = results[i] = regexp.exec(hay);
rob@100:         while (latest) {
rob@100:           i++;
rob@100:           latest = results[i] = regexp.exec(hay);
rob@100:         }
rob@100:         return results;
rob@100:       };
rob@100: 
rob@100:       var buildPath = function(d) {
rob@100:         var c = regex("[A-Za-z][0-9\\- ]+|Z", d);
rob@100:         var beforePathDraw = function() {
rob@100:           saveContext();
rob@100:           return drawing.$ensureContext();
rob@100:         };
rob@100:         var afterPathDraw = function() {
rob@100:           executeContextFill();
rob@100:           executeContextStroke();
rob@100:           restoreContext();
rob@100:         };
rob@100: 
rob@100:         // Begin storing path object
rob@100:         path = "return {draw:function(){var curContext=beforePathDraw();curContext.beginPath();";
rob@100: 
rob@100:         x = 0;
rob@100:         y = 0;
rob@100:         cx = 0;
rob@100:         cy = 0;
rob@100:         nx = 0;
rob@100:         ny = 0;
rob@100:         d = 0;
rob@100:         a = 0;
rob@100:         lastCom = "";
rob@100:         lenC = c.length - 1;
rob@100: 
rob@100:         // Loop through SVG commands translating to canvas eqivs functions in path object
rob@100:         for (var j = 0; j < lenC; j++) {
rob@100:           var com = c[j][0], xy = regex(getXY, com);
rob@100: 
rob@100:           switch (com[0]) {
rob@100:             case "M":
rob@100:               //curContext.moveTo(x,-y);
rob@100:               x = parseFloat(xy[0][0]);
rob@100:               y = parseFloat(xy[1][0]);
rob@100:               path += "curContext.moveTo(" + x + "," + (-y) + ");";
rob@100:               break;
rob@100: 
rob@100:             case "L":
rob@100:               //curContext.lineTo(x,-y);
rob@100:               x = parseFloat(xy[0][0]);
rob@100:               y = parseFloat(xy[1][0]);
rob@100:               path += "curContext.lineTo(" + x + "," + (-y) + ");";
rob@100:               break;
rob@100: 
rob@100:             case "H":
rob@100:               //curContext.lineTo(x,-y)
rob@100:               x = parseFloat(xy[0][0]);
rob@100:               path += "curContext.lineTo(" + x + "," + (-y) + ");";
rob@100:               break;
rob@100: 
rob@100:             case "V":
rob@100:               //curContext.lineTo(x,-y);
rob@100:               y = parseFloat(xy[0][0]);
rob@100:               path += "curContext.lineTo(" + x + "," + (-y) + ");";
rob@100:               break;
rob@100: 
rob@100:             case "T":
rob@100:               //curContext.quadraticCurveTo(cx,-cy,nx,-ny);
rob@100:               nx = parseFloat(xy[0][0]);
rob@100:               ny = parseFloat(xy[1][0]);
rob@100: 
rob@100:               if (lastCom === "Q" || lastCom === "T") {
rob@100:                 d = Math.sqrt(Math.pow(x - cx, 2) + Math.pow(cy - y, 2));
rob@100:                 a = Math.PI + Math.atan2(cx - x, cy - y);
rob@100:                 cx = x + (Math.sin(a) * (d));
rob@100:                 cy = y + (Math.cos(a) * (d));
rob@100:               } else {
rob@100:                 cx = x;
rob@100:                 cy = y;
rob@100:               }
rob@100: 
rob@100:               path += "curContext.quadraticCurveTo(" + cx + "," + (-cy) + "," + nx + "," + (-ny) + ");";
rob@100:               x = nx;
rob@100:               y = ny;
rob@100:               break;
rob@100: 
rob@100:             case "Q":
rob@100:               //curContext.quadraticCurveTo(cx,-cy,nx,-ny);
rob@100:               cx = parseFloat(xy[0][0]);
rob@100:               cy = parseFloat(xy[1][0]);
rob@100:               nx = parseFloat(xy[2][0]);
rob@100:               ny = parseFloat(xy[3][0]);
rob@100:               path += "curContext.quadraticCurveTo(" + cx + "," + (-cy) + "," + nx + "," + (-ny) + ");";
rob@100:               x = nx;
rob@100:               y = ny;
rob@100:               break;
rob@100: 
rob@100:             case "Z":
rob@100:               //curContext.closePath();
rob@100:               path += "curContext.closePath();";
rob@100:               break;
rob@100:           }
rob@100:           lastCom = com[0];
rob@100:         }
rob@100: 
rob@100:         path += "afterPathDraw();";
rob@100:         path += "curContext.translate(" + horiz_adv_x + ",0);";
rob@100:         path += "}}";
rob@100: 
rob@100:         return ((new Function("beforePathDraw", "afterPathDraw", path))(beforePathDraw, afterPathDraw));
rob@100:       };
rob@100: 
rob@100:       // Parse SVG font-file into block of Canvas commands
rob@100:       var parseSVGFont = function(svg) {
rob@100:         // Store font attributes
rob@100:         var font = svg.getElementsByTagName("font");
rob@100:         p.glyphTable[url].horiz_adv_x = font[0].getAttribute("horiz-adv-x");
rob@100: 
rob@100:         var font_face = svg.getElementsByTagName("font-face")[0];
rob@100:         p.glyphTable[url].units_per_em = parseFloat(font_face.getAttribute("units-per-em"));
rob@100:         p.glyphTable[url].ascent = parseFloat(font_face.getAttribute("ascent"));
rob@100:         p.glyphTable[url].descent = parseFloat(font_face.getAttribute("descent"));
rob@100: 
rob@100:         var glyph = svg.getElementsByTagName("glyph"),
rob@100:           len = glyph.length;
rob@100: 
rob@100:         // Loop through each glyph in the SVG
rob@100:         for (var i = 0; i < len; i++) {
rob@100:           // Store attributes for this glyph
rob@100:           var unicode = glyph[i].getAttribute("unicode");
rob@100:           var name = glyph[i].getAttribute("glyph-name");
rob@100:           horiz_adv_x = glyph[i].getAttribute("horiz-adv-x");
rob@100:           if (horiz_adv_x === null) {
rob@100:             horiz_adv_x = p.glyphTable[url].horiz_adv_x;
rob@100:           }
rob@100:           d = glyph[i].getAttribute("d");
rob@100:           // Split path commands in glpyh
rob@100:           if (d !== undef) {
rob@100:             path = buildPath(d);
rob@100:             // Store glyph data to table object
rob@100:             p.glyphTable[url][name] = {
rob@100:               name: name,
rob@100:               unicode: unicode,
rob@100:               horiz_adv_x: horiz_adv_x,
rob@100:               draw: path.draw
rob@100:             };
rob@100:           }
rob@100:         } // finished adding glyphs to table
rob@100:       };
rob@100: 
rob@100:       // Load and parse Batik SVG font as XML into a Processing Glyph object
rob@100:       var loadXML = function() {
rob@100:         var xmlDoc;
rob@100: 
rob@100:         try {
rob@100:           xmlDoc = document.implementation.createDocument("", "", null);
rob@100:         }
rob@100:         catch(e_fx_op) {
rob@100:           Processing.debug(e_fx_op.message);
rob@100:           return;
rob@100:         }
rob@100: 
rob@100:         try {
rob@100:           xmlDoc.async = false;
rob@100:           xmlDoc.load(url);
rob@100:           parseSVGFont(xmlDoc.getElementsByTagName("svg")[0]);
rob@100:         }
rob@100:         catch(e_sf_ch) {
rob@100:           // Google Chrome, Safari etc.
rob@100:           Processing.debug(e_sf_ch);
rob@100:           try {
rob@100:             var xmlhttp = new window.XMLHttpRequest();
rob@100:             xmlhttp.open("GET", url, false);
rob@100:             xmlhttp.send(null);
rob@100:             parseSVGFont(xmlhttp.responseXML.documentElement);
rob@100:           }
rob@100:           catch(e) {
rob@100:             Processing.debug(e_sf_ch);
rob@100:           }
rob@100:         }
rob@100:       };
rob@100: 
rob@100:       // Create a new object in glyphTable to store this font
rob@100:       p.glyphTable[url] = {};
rob@100: 
rob@100:       // Begin loading the Batik SVG font...
rob@100:       loadXML(url);
rob@100: 
rob@100:       // Return the loaded font for attribute grabbing
rob@100:       return p.glyphTable[url];
rob@100:     };
rob@100: 
rob@100:     /**
rob@100:      * Gets the sketch parameter value. The parameter can be defined as the canvas attribute with
rob@100:      * the "data-processing-" prefix or provided in the pjs directive (e.g. param-test="52").
rob@100:      * The function tries the canvas attributes, then the pjs directive content.
rob@100:      *
rob@100:      * @param   {String}    name          The name of the param to read.
rob@100:      *
rob@100:      * @returns {String}    The parameter value, or null if parameter is not defined.
rob@100:      */
rob@100:     p.param = function(name) {
rob@100:       // trying attribute that was specified in CANVAS
rob@100:       var attributeName = "data-processing-" + name;
rob@100:       if (curElement.hasAttribute(attributeName)) {
rob@100:         return curElement.getAttribute(attributeName);
rob@100:       }
rob@100:       // trying child PARAM elements of the CANVAS
rob@100:       for (var i = 0, len = curElement.childNodes.length; i < len; ++i) {
rob@100:         var item = curElement.childNodes.item(i);
rob@100:         if (item.nodeType !== 1 || item.tagName.toLowerCase() !== "param") {
rob@100:           continue;
rob@100:         }
rob@100:         if (item.getAttribute("name") === name) {
rob@100:           return item.getAttribute("value");
rob@100:         }
rob@100:       }
rob@100:       // fallback to default params
rob@100:       if (curSketch.params.hasOwnProperty(name)) {
rob@100:         return curSketch.params[name];
rob@100:       }
rob@100:       return null;
rob@100:     };
rob@100: 
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     // 2D/3D methods wiring utils
rob@100:     ////////////////////////////////////////////////////////////////////////////
rob@100:     function wireDimensionalFunctions(mode) {
rob@100:       // Drawing2D/Drawing3D
rob@100:       if (mode === '3D') {
rob@100:         drawing = new Drawing3D();
rob@100:       } else if (mode === '2D') {
rob@100:         drawing = new Drawing2D();
rob@100:       } else {
rob@100:         drawing = new DrawingPre();
rob@100:       }
rob@100: 
rob@100:       // Wire up functions (Use DrawingPre properties names)
rob@100:       for (var i in DrawingPre.prototype) {
rob@100:         if (DrawingPre.prototype.hasOwnProperty(i) && i.indexOf("$") < 0) {
rob@100:           p[i] = drawing[i];
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // Run initialization
rob@100:       drawing.$init();
rob@100:     }
rob@100: 
rob@100:     function createDrawingPreFunction(name) {
rob@100:       return function() {
rob@100:         wireDimensionalFunctions("2D");
rob@100:         return drawing[name].apply(this, arguments);
rob@100:       };
rob@100:     }
rob@100:     DrawingPre.prototype.translate = createDrawingPreFunction("translate");
rob@100:     DrawingPre.prototype.transform = createDrawingPreFunction("transform");
rob@100:     DrawingPre.prototype.scale = createDrawingPreFunction("scale");
rob@100:     DrawingPre.prototype.pushMatrix = createDrawingPreFunction("pushMatrix");
rob@100:     DrawingPre.prototype.popMatrix = createDrawingPreFunction("popMatrix");
rob@100:     DrawingPre.prototype.resetMatrix = createDrawingPreFunction("resetMatrix");
rob@100:     DrawingPre.prototype.applyMatrix = createDrawingPreFunction("applyMatrix");
rob@100:     DrawingPre.prototype.rotate = createDrawingPreFunction("rotate");
rob@100:     DrawingPre.prototype.rotateZ = createDrawingPreFunction("rotateZ");
rob@100:     DrawingPre.prototype.shearX = createDrawingPreFunction("shearX");
rob@100:     DrawingPre.prototype.shearY = createDrawingPreFunction("shearY");
rob@100:     DrawingPre.prototype.redraw = createDrawingPreFunction("redraw");
rob@100:     DrawingPre.prototype.toImageData = createDrawingPreFunction("toImageData");
rob@100:     DrawingPre.prototype.ambientLight = createDrawingPreFunction("ambientLight");
rob@100:     DrawingPre.prototype.directionalLight = createDrawingPreFunction("directionalLight");
rob@100:     DrawingPre.prototype.lightFalloff = createDrawingPreFunction("lightFalloff");
rob@100:     DrawingPre.prototype.lightSpecular = createDrawingPreFunction("lightSpecular");
rob@100:     DrawingPre.prototype.pointLight = createDrawingPreFunction("pointLight");
rob@100:     DrawingPre.prototype.noLights = createDrawingPreFunction("noLights");
rob@100:     DrawingPre.prototype.spotLight = createDrawingPreFunction("spotLight");
rob@100:     DrawingPre.prototype.beginCamera = createDrawingPreFunction("beginCamera");
rob@100:     DrawingPre.prototype.endCamera = createDrawingPreFunction("endCamera");
rob@100:     DrawingPre.prototype.frustum = createDrawingPreFunction("frustum");
rob@100:     DrawingPre.prototype.box = createDrawingPreFunction("box");
rob@100:     DrawingPre.prototype.sphere = createDrawingPreFunction("sphere");
rob@100:     DrawingPre.prototype.ambient = createDrawingPreFunction("ambient");
rob@100:     DrawingPre.prototype.emissive = createDrawingPreFunction("emissive");
rob@100:     DrawingPre.prototype.shininess = createDrawingPreFunction("shininess");
rob@100:     DrawingPre.prototype.specular = createDrawingPreFunction("specular");
rob@100:     DrawingPre.prototype.fill = createDrawingPreFunction("fill");
rob@100:     DrawingPre.prototype.stroke = createDrawingPreFunction("stroke");
rob@100:     DrawingPre.prototype.strokeWeight = createDrawingPreFunction("strokeWeight");
rob@100:     DrawingPre.prototype.smooth = createDrawingPreFunction("smooth");
rob@100:     DrawingPre.prototype.noSmooth = createDrawingPreFunction("noSmooth");
rob@100:     DrawingPre.prototype.point = createDrawingPreFunction("point");
rob@100:     DrawingPre.prototype.vertex = createDrawingPreFunction("vertex");
rob@100:     DrawingPre.prototype.endShape = createDrawingPreFunction("endShape");
rob@100:     DrawingPre.prototype.bezierVertex = createDrawingPreFunction("bezierVertex");
rob@100:     DrawingPre.prototype.curveVertex = createDrawingPreFunction("curveVertex");
rob@100:     DrawingPre.prototype.curve = createDrawingPreFunction("curve");
rob@100:     DrawingPre.prototype.line = createDrawingPreFunction("line");
rob@100:     DrawingPre.prototype.bezier = createDrawingPreFunction("bezier");
rob@100:     DrawingPre.prototype.rect = createDrawingPreFunction("rect");
rob@100:     DrawingPre.prototype.ellipse = createDrawingPreFunction("ellipse");
rob@100:     DrawingPre.prototype.background = createDrawingPreFunction("background");
rob@100:     DrawingPre.prototype.image = createDrawingPreFunction("image");
rob@100:     DrawingPre.prototype.textWidth = createDrawingPreFunction("textWidth");
rob@100:     DrawingPre.prototype.text$line = createDrawingPreFunction("text$line");
rob@100:     DrawingPre.prototype.$ensureContext = createDrawingPreFunction("$ensureContext");
rob@100:     DrawingPre.prototype.$newPMatrix = createDrawingPreFunction("$newPMatrix");
rob@100: 
rob@100:     DrawingPre.prototype.size = function(aWidth, aHeight, aMode) {
rob@100:       wireDimensionalFunctions(aMode === PConstants.WEBGL ? "3D" : "2D");
rob@100:       p.size(aWidth, aHeight, aMode);
rob@100:     };
rob@100: 
rob@100:     DrawingPre.prototype.$init = noop;
rob@100: 
rob@100:     Drawing2D.prototype.$init = function() {
rob@100:       // Setup default 2d canvas context.
rob@100:       // Moving this here removes the number of times we need to check the 3D variable
rob@100:       p.size(p.width, p.height);
rob@100: 
rob@100:       curContext.lineCap = 'round';
rob@100: 
rob@100:       // Set default stroke and fill color
rob@100:       p.noSmooth();
rob@100:       p.disableContextMenu();
rob@100:     };
rob@100:     Drawing3D.prototype.$init = function() {
rob@100:       // For ref/perf test compatibility until those are fixed
rob@100:       p.use3DContext = true;
rob@100:       p.disableContextMenu();
rob@100:     };
rob@100: 
rob@100:     DrawingShared.prototype.$ensureContext = function() {
rob@100:       return curContext;
rob@100:     };
rob@100: 
rob@100:     //////////////////////////////////////////////////////////////////////////
rob@100:     // Keyboard Events
rob@100:     //////////////////////////////////////////////////////////////////////////
rob@100: 
rob@100:     // In order to catch key events in a canvas, it needs to be "specially focusable",
rob@100:     // by assigning it a tabindex. If no tabindex is specified on-page, set this to 0.
rob@100:     if (!curElement.getAttribute("tabindex")) {
rob@100:       curElement.setAttribute("tabindex", 0);
rob@100:     }
rob@100: 
rob@100:     function getKeyCode(e) {
rob@100:       var code = e.which || e.keyCode;
rob@100:       switch (code) {
rob@100:         case 13: // ENTER
rob@100:           return 10;
rob@100:         case 91: // META L (Saf/Mac)
rob@100:         case 93: // META R (Saf/Mac)
rob@100:         case 224: // META (FF/Mac)
rob@100:           return 157;
rob@100:         case 57392: // CONTROL (Op/Mac)
rob@100:           return 17;
rob@100:         case 46: // DELETE
rob@100:           return 127;
rob@100:         case 45: // INSERT
rob@100:           return 155;
rob@100:       }
rob@100:       return code;
rob@100:     }
rob@100: 
rob@100:     function getKeyChar(e) {
rob@100:       var c = e.which || e.keyCode;
rob@100:       var anyShiftPressed = e.shiftKey || e.ctrlKey || e.altKey || e.metaKey;
rob@100:       switch (c) {
rob@100:         case 13:
rob@100:           c = anyShiftPressed ? 13 : 10; // RETURN vs ENTER (Mac)
rob@100:           break;
rob@100:         case 8:
rob@100:           c = anyShiftPressed ? 127 : 8; // DELETE vs BACKSPACE (Mac)
rob@100:           break;
rob@100:       }
rob@100:       return new Char(c);
rob@100:     }
rob@100: 
rob@100:     function suppressKeyEvent(e) {
rob@100:       if (typeof e.preventDefault === "function") {
rob@100:         e.preventDefault();
rob@100:       } else if (typeof e.stopPropagation === "function") {
rob@100:         e.stopPropagation();
rob@100:       }
rob@100:       return false;
rob@100:     }
rob@100: 
rob@100:     function updateKeyPressed() {
rob@100:       var ch;
rob@100:       for (ch in pressedKeysMap) {
rob@100:         if (pressedKeysMap.hasOwnProperty(ch)) {
rob@100:           p.__keyPressed = true;
rob@100:           return;
rob@100:         }
rob@100:       }
rob@100:       p.__keyPressed = false;
rob@100:     }
rob@100: 
rob@100:     function resetKeyPressed() {
rob@100:       p.__keyPressed = false;
rob@100:       pressedKeysMap = [];
rob@100:       lastPressedKeyCode = null;
rob@100:     }
rob@100: 
rob@100:     function simulateKeyTyped(code, c) {
rob@100:       pressedKeysMap[code] = c;
rob@100:       lastPressedKeyCode = null;
rob@100:       p.key = c;
rob@100:       p.keyCode = code;
rob@100:       p.keyPressed();
rob@100:       p.keyCode = 0;
rob@100:       p.keyTyped();
rob@100:       updateKeyPressed();
rob@100:     }
rob@100: 
rob@100:     function handleKeydown(e) {
rob@100:       var code = getKeyCode(e);
rob@100:       if (code === PConstants.DELETE) {
rob@100:         simulateKeyTyped(code, new Char(127));
rob@100:         return;
rob@100:       }
rob@100:       if (codedKeys.indexOf(code) < 0) {
rob@100:         lastPressedKeyCode = code;
rob@100:         return;
rob@100:       }
rob@100:       var c = new Char(PConstants.CODED);
rob@100:       p.key = c;
rob@100:       p.keyCode = code;
rob@100:       pressedKeysMap[code] = c;
rob@100:       p.keyPressed();
rob@100:       lastPressedKeyCode = null;
rob@100:       updateKeyPressed();
rob@100:       return suppressKeyEvent(e);
rob@100:     }
rob@100: 
rob@100:     function handleKeypress(e) {
rob@100:       if (lastPressedKeyCode === null) {
rob@100:         return; // processed in handleKeydown
rob@100:       }
rob@100:       var code = lastPressedKeyCode, c = getKeyChar(e);
rob@100:       simulateKeyTyped(code, c);
rob@100:       return suppressKeyEvent(e);
rob@100:     }
rob@100: 
rob@100:     function handleKeyup(e) {
rob@100:       var code = getKeyCode(e), c = pressedKeysMap[code];
rob@100:       if (c === undef) {
rob@100:         return; // no keyPressed event was generated.
rob@100:       }
rob@100:       p.key = c;
rob@100:       p.keyCode = code;
rob@100:       p.keyReleased();
rob@100:       delete pressedKeysMap[code];
rob@100:       updateKeyPressed();
rob@100:     }
rob@100: 
rob@100:     // Send aCode Processing syntax to be converted to JavaScript
rob@100:     if (!pgraphicsMode) {
rob@100:       if (aCode instanceof Processing.Sketch) {
rob@100:         // Use sketch as is
rob@100:         curSketch = aCode;
rob@100:       } else if (typeof aCode === "function") {
rob@100:         // Wrap function with default sketch parameters
rob@100:         curSketch = new Processing.Sketch(aCode);
rob@100:       } else if (!aCode) {
rob@100:         // Empty sketch
rob@100:         curSketch = new Processing.Sketch(function (){});
rob@100:       } else {
rob@100:   //#if PARSER
rob@100:         // Compile the code
rob@100:         curSketch = Processing.compile(aCode);
rob@100:   //#else
rob@100:   //      throw "PJS compile is not supported";
rob@100:   //#endif
rob@100:       }
rob@100: 
rob@100:       // Expose internal field for diagnostics and testing
rob@100:       p.externals.sketch = curSketch;
rob@100: 
rob@100:       wireDimensionalFunctions();
rob@100: 
rob@100:       // the onfocus and onblur events are handled in two parts.
rob@100:       // 1) the p.focused property is handled per sketch
rob@100:       curElement.onfocus = function() {
rob@100:         p.focused = true;
rob@100:       };
rob@100: 
rob@100:       curElement.onblur = function() {
rob@100:         p.focused = false;
rob@100:         if (!curSketch.options.globalKeyEvents) {
rob@100:           resetKeyPressed();
rob@100:         }
rob@100:       };
rob@100: 
rob@100:       // 2) looping status is handled per page, based on the pauseOnBlur @pjs directive
rob@100:       if (curSketch.options.pauseOnBlur) {
rob@100:         attachEventHandler(window, 'focus', function() {
rob@100:           if (doLoop) {
rob@100:             p.loop();
rob@100:           }
rob@100:         });
rob@100: 
rob@100:         attachEventHandler(window, 'blur', function() {
rob@100:           if (doLoop && loopStarted) {
rob@100:             p.noLoop();
rob@100:             doLoop = true; // make sure to keep this true after the noLoop call
rob@100:           }
rob@100:           resetKeyPressed();
rob@100:         });
rob@100:       }
rob@100: 
rob@100:       // if keyboard events should be handled globally, the listeners should
rob@100:       // be bound to the document window, rather than to the current canvas
rob@100:       var keyTrigger = curSketch.options.globalKeyEvents ? window : curElement;
rob@100:       attachEventHandler(keyTrigger, "keydown", handleKeydown);
rob@100:       attachEventHandler(keyTrigger, "keypress", handleKeypress);
rob@100:       attachEventHandler(keyTrigger, "keyup", handleKeyup);
rob@100: 
rob@100:       // Step through the libraries that were attached at doc load...
rob@100:       for (var i in Processing.lib) {
rob@100:         if (Processing.lib.hasOwnProperty(i)) {
rob@100:           if(Processing.lib[i].hasOwnProperty("attach")) {
rob@100:             // use attach function if present
rob@100:             Processing.lib[i].attach(p);
rob@100:           } else if(Processing.lib[i] instanceof Function)  {
rob@100:             // Init the libraries in the context of this p_instance (legacy)
rob@100:             Processing.lib[i].call(this);
rob@100:           }
rob@100:         }
rob@100:       }
rob@100: 
rob@100:       // sketch execute test interval, used to reschedule
rob@100:       // an execute when preloads have not yet finished.
rob@100:       var retryInterval = 100;
rob@100: 
rob@100:       var executeSketch = function(processing) {
rob@100:         // Don't start until all specified images and fonts in the cache are preloaded
rob@100:         if (!(curSketch.imageCache.pending || PFont.preloading.pending(retryInterval))) {
rob@100:           // the opera preload cache can only be cleared once we start
rob@100:           if (window.opera) {
rob@100:             var link,
rob@100:                 element,
rob@100:                 operaCache=curSketch.imageCache.operaCache;
rob@100:             for (link in operaCache) {
rob@100:               if(operaCache.hasOwnProperty(link)) {
rob@100:                 element = operaCache[link];
rob@100:                 if (element !== null) {
rob@100:                   document.body.removeChild(element);
rob@100:                 }
rob@100:                 delete(operaCache[link]);
rob@100:               }
rob@100:             }
rob@100:           }
rob@100: 
rob@100:           curSketch.attach(processing, defaultScope);
rob@100: 
rob@100:           // pass a reference to the p instance for this sketch.
rob@100:           curSketch.onLoad(processing);
rob@100: 
rob@100:           // Run void setup()
rob@100:           if (processing.setup) {
rob@100:             processing.setup();
rob@100:             // if any transforms were performed in setup reset to identity matrix
rob@100:             // so draw loop is unpolluted
rob@100:             processing.resetMatrix();
rob@100:             curSketch.onSetup();
rob@100:           }
rob@100: 
rob@100:           // some pixels can be cached, flushing
rob@100:           resetContext();
rob@100: 
rob@100:           if (processing.draw) {
rob@100:             if (!doLoop) {
rob@100:               processing.redraw();
rob@100:             } else {
rob@100:               processing.loop();
rob@100:             }
rob@100:           }
rob@100:         } else {
rob@100:           window.setTimeout(function() { executeSketch(processing); }, retryInterval);
rob@100:         }
rob@100:       };
rob@100: 
rob@100:       // Only store an instance of non-createGraphics instances.
rob@100:       addInstance(this);
rob@100: 
rob@100:       // The parser adds custom methods to the processing context
rob@100:       // this renames p to processing so these methods will run
rob@100:       executeSketch(p);
rob@100:     } else {
rob@100:       // No executable sketch was specified
rob@100:       // or called via createGraphics
rob@100:       curSketch = new Processing.Sketch();
rob@100: 
rob@100:       wireDimensionalFunctions();
rob@100: 
rob@100:       // Hack to make PGraphics work again after splitting size()
rob@100:       p.size = function(w, h, render) {
rob@100:         if (render && render === PConstants.WEBGL) {
rob@100:           wireDimensionalFunctions('3D');
rob@100:         } else {
rob@100:           wireDimensionalFunctions('2D');
rob@100:         }
rob@100: 
rob@100:         p.size(w, h, render);
rob@100:       };
rob@100:     }
rob@100:   };
rob@100: 
rob@100:   // Place-holder for overridable debugging function
rob@100:   Processing.debug = (function() {
rob@100:     if ("console" in window) {
rob@100:       return function(msg) {
rob@100:         window.console.log('Processing.js: ' + msg);
rob@100:       };
rob@100:     }
rob@100:     return noop;
rob@100:   }());
rob@100: 
rob@100:   // bind prototype
rob@100:   Processing.prototype = defaultScope;
rob@100: 
rob@100:   /**
rob@100:    * instance store and lookup
rob@100:    */
rob@100:   Processing.instances = processingInstances;
rob@100:   Processing.getInstanceById = function(name) {
rob@100:     return processingInstances[processingInstanceIds[name]];
rob@100:   };
rob@100: 
rob@100:   // Unsupported Processing File and I/O operations.
rob@100:   (function(Processing) {
rob@100:     var unsupportedP5 = ("open() createOutput() createInput() BufferedReader selectFolder() " +
rob@100:                          "dataPath() createWriter() selectOutput() beginRecord() " +
rob@100:                          "saveStream() endRecord() selectInput() saveBytes() createReader() " +
rob@100:                          "beginRaw() endRaw() PrintWriter delay()").split(" "),
rob@100:         count = unsupportedP5.length,
rob@100:         prettyName,
rob@100:         p5Name;
rob@100: 
rob@100:     function createUnsupportedFunc(n) {
rob@100:       return function() {
rob@100:         throw "Processing.js does not support " + n + ".";
rob@100:       };
rob@100:     }
rob@100: 
rob@100:     while (count--) {
rob@100:       prettyName = unsupportedP5[count];
rob@100:       p5Name = prettyName.replace("()", "");
rob@100:       Processing[p5Name] = createUnsupportedFunc(prettyName);
rob@100:     }
rob@100:   }(defaultScope));
rob@100: 
rob@100:   // we're done. Return our object.
rob@100:   return Processing;
rob@100: };
rob@100: 
rob@100: },{}],27:[function(require,module,exports){
rob@100: // Base source files
rob@100: var source = {
rob@100:   virtEquals: require("./Helpers/virtEquals"),
rob@100:   virtHashCode: require("./Helpers/virtHashCode"),
rob@100:   ObjectIterator: require("./Helpers/ObjectIterator"),
rob@100:   PConstants: require("./Helpers/PConstants"),
rob@100:   ArrayList: require("./Objects/ArrayList"),
rob@100:   HashMap: require("./Objects/HashMap"),
rob@100:   PVector: require("./Objects/PVector"),
rob@100:   PFont: require("./Objects/PFont"),
rob@100:   Char: require("./Objects/Char"),
rob@100:   XMLAttribute: require("./Objects/XMLAttribute"),
rob@100:   XMLElement: require("./Objects/XMLElement"),
rob@100:   PMatrix2D: require("./Objects/PMatrix2D"),
rob@100:   PMatrix3D: require("./Objects/PMatrix3D"),
rob@100:   PShape: require("./Objects/PShape"),
rob@100:   colors: require("./Objects/webcolors"),
rob@100:   PShapeSVG:  require("./Objects/PShapeSVG"),
rob@100:   CommonFunctions: require("./P5Functions/commonFunctions"),
rob@100:   defaultScope: require("./Helpers/defaultScope"),
rob@100:   Processing: require("./Processing"),
rob@100:   setupParser: require("./Parser/Parser"),
rob@100:   finalize: require("./Helpers/finalizeProcessing")
rob@100: };
rob@100: 
rob@100: // Additional code that gets tacked onto "p" during
rob@100: // instantiation of a Processing sketch.
rob@100: source.extend = {
rob@100:   withMath: require("./P5Functions/Math.js"),
rob@100:   withProxyFunctions: require("./P5Functions/JavaProxyFunctions")(source.virtHashCode, source.virtEquals),
rob@100:   withTouch: require("./P5Functions/touchmouse"),
rob@100:   withCommonFunctions: source.CommonFunctions.withCommonFunctions
rob@100: };
rob@100: 
rob@100: /**
rob@100:  * Processing.js building function
rob@100:  */
rob@100: module.exports = function buildProcessingJS(Browser, testHarness) {
rob@100:   var noop = function(){},
rob@100:       virtEquals = source.virtEquals,
rob@100:       virtHashCode = source.virtHashCode,
rob@100:       PConstants = source.PConstants,
rob@100:       CommonFunctions = source.CommonFunctions,
rob@100:       ObjectIterator = source.ObjectIterator,
rob@100:       Char = source.Char,
rob@100:       XMLAttribute = source.XMLAttribute(),
rob@100: 
rob@100:       ArrayList = source.ArrayList({
rob@100:         virtHashCode: virtHashCode,
rob@100:         virtEquals: virtEquals
rob@100:       }),
rob@100: 
rob@100:       HashMap = source.HashMap({
rob@100:         virtHashCode: virtHashCode,
rob@100:         virtEquals: virtEquals
rob@100:       }),
rob@100: 
rob@100:       PVector = source.PVector({
rob@100:         PConstants: PConstants
rob@100:       }),
rob@100: 
rob@100:       PFont = source.PFont({
rob@100:         Browser: Browser,
rob@100:         noop: noop
rob@100:       }),
rob@100: 
rob@100:       XMLElement = source.XMLElement({
rob@100:         Browser: Browser,
rob@100:         XMLAttribute: XMLAttribute
rob@100:       }),
rob@100: 
rob@100:       PMatrix2D = source.PMatrix2D({
rob@100:         p:CommonFunctions
rob@100:       }),
rob@100: 
rob@100:       PMatrix3D = source.PMatrix3D({
rob@100:         p:CommonFunctions
rob@100:       }),
rob@100: 
rob@100:       PShape = source.PShape({
rob@100:         PConstants: PConstants,
rob@100:         PMatrix2D: PMatrix2D,
rob@100:         PMatrix3D: PMatrix3D
rob@100:       }),
rob@100: 
rob@100:       PShapeSVG = source.PShapeSVG({
rob@100:         CommonFunctions: CommonFunctions,
rob@100:         PConstants: PConstants,
rob@100:         PShape: PShape,
rob@100:         XMLElement: XMLElement,
rob@100:         colors: source.colors
rob@100:       }),
rob@100: 
rob@100:       defaultScope = source.defaultScope({
rob@100:         ArrayList: ArrayList,
rob@100:         HashMap: HashMap,
rob@100:         PVector: PVector,
rob@100:         PFont: PFont,
rob@100:         PShapeSVG: PShapeSVG,
rob@100:         ObjectIterator: ObjectIterator,
rob@100:         PConstants: PConstants,
rob@100:         Char: Char,
rob@100:         XMLElement: XMLElement,
rob@100:         XML: XMLElement
rob@100:       }),
rob@100: 
rob@100:       Processing = source.Processing({
rob@100:         defaultScope: defaultScope,
rob@100:         Browser: Browser,
rob@100:         extend: source.extend,
rob@100:         noop: noop
rob@100:       });
rob@100: 
rob@100:   // set up the Processing syntax parser
rob@100:   Processing = source.setupParser(Processing, {
rob@100:     Browser: Browser,
rob@100:     aFunctions: testHarness,
rob@100:     defaultScope: defaultScope
rob@100:   });
rob@100: 
rob@100:   // finalise the Processing object
rob@100:   Processing = source.finalize(Processing, {
rob@100:     version: require('../package.json').version,
rob@100:     isDomPresent: false || Browser.isDomPresent,
rob@100:     window: Browser.window,
rob@100:     document: Browser.document,
rob@100:     noop: noop
rob@100:   });
rob@100: 
rob@100:   // done.
rob@100:   return Processing;
rob@100: };
rob@100: 
rob@100: },{"../package.json":2,"./Helpers/ObjectIterator":3,"./Helpers/PConstants":4,"./Helpers/defaultScope":5,"./Helpers/finalizeProcessing":6,"./Helpers/virtEquals":7,"./Helpers/virtHashCode":8,"./Objects/ArrayList":9,"./Objects/Char":10,"./Objects/HashMap":11,"./Objects/PFont":12,"./Objects/PMatrix2D":13,"./Objects/PMatrix3D":14,"./Objects/PShape":15,"./Objects/PShapeSVG":16,"./Objects/PVector":17,"./Objects/XMLAttribute":18,"./Objects/XMLElement":19,"./Objects/webcolors":20,"./P5Functions/JavaProxyFunctions":21,"./P5Functions/Math.js":22,"./P5Functions/commonFunctions":23,"./P5Functions/touchmouse":24,"./Parser/Parser":25,"./Processing":26}]},{},[1])
rob@100: ;