diff --git a/lib/addons/p5.dom.js b/lib/addons/p5.dom.js
index 6f94f05a4e..4604438707 100644
--- a/lib/addons/p5.dom.js
+++ b/lib/addons/p5.dom.js
@@ -175,21 +175,38 @@
*
* @method createImg
* @param {String} src src path or url for image
- * @param {String} alt alternate text to be used if image does not
- * load
+ * @param {String} [alt] alternate text to be used if image does not load
+ * @param {Function} [successCallback] callback to be called once image data is loaded
* @return {Object/p5.Element} pointer to p5.Element holding created
* node
*/
- p5.prototype.createImg = function(src, alt) {
+ p5.prototype.createImg = function() {
var elt = document.createElement('img');
- elt.src = src;
- if (typeof alt !== 'undefined') {
- elt.alt = alt;
+ var args = arguments;
+ var self;
+ var setAttrs = function(){
+ self.width = elt.width;
+ self.height = elt.height;
+ if (args.length === 3 && typeof args[2] === 'function'){
+ self.fn = args[2];
+ self.fn();
+ }
+ };
+ elt.src = args[0];
+ if (args.length > 1 && typeof args[1] === 'string'){
+ elt.alt = args[1];
}
- return addElement(elt, this);
+ if (elt.complete){
+ setAttrs();
+ }else{
+ elt.onload = function(){
+ setAttrs();
+ }
+ }
+ self = addElement(elt, this);
+ return self;
};
-
/**
* Creates an <a></a> element in the DOM for including a hyperlink.
* Appends to the container node if one is specified, otherwise
@@ -651,36 +668,127 @@
*
* Sets the position of the element relative to (0, 0) of the
* window. Essentially, sets position:absolute and left and top
- * properties of style.
+ * properties of style. If no arguments given returns the x and y position
+ * of the element in an object.
*
* @method position
- * @param {Number} x x-position relative to upper left of window
- * @param {Number} y y-position relative to upper left of window
+ * @param {Number} [x] x-position relative to upper left of window
+ * @param {Number} [y] y-position relative to upper left of window
* @return {p5.Element}
* @example
*
* function setup() {
* var cnv = createCanvas(100, 100);
- * background(0);
- * // positions canvas 50px to right and 100px
+ * // positions canvas 50px to the right and 100px
* // below upper left corner of the window
* cnv.position(50, 100);
* }
*
*/
- p5.Element.prototype.position = function(x, y) {
+ p5.Element.prototype.position = function() {
+ if (arguments.length === 0){
+ return { 'x' : this.elt.offsetLeft , 'y' : this.elt.offsetTop };
+ }else{
+ this.elt.style.position = 'absolute';
+ this.elt.style.left = arguments[0]+'px';
+ this.elt.style.top = arguments[1]+'px';
+ this.x = arguments[0];
+ this.y = arguments[1];
+ return this;
+ }
+ };
+
+ /**
+ * Translates an element with css transforms in either 2d (if 2 arguments given)
+ * or 3d (if 3 arguments given) space.
+ * @method translate
+ * @param {Number} x x-position in px
+ * @param {Number} y y-position in px
+ * @param {Number} [z] z-position in px
+ * @param {Number} [perspective] sets the perspective of the parent element in px,
+ * default value set to 1000px
+ * @return {p5.Element}
+ * @example
+ *
+ * function setup() {
+ * var cnv = createCanvas(100,100);
+ * //translates canvas 50px to the right and 100px down
+ * cnv.translate(50,100);
+ * }
+ *
+ */
+ p5.Element.prototype.translate = function(){
this.elt.style.position = 'absolute';
- var offset = this.elt.getBoundingClientRect();
- //this.elt.style.left = (x-offset.left)+'px';
- //this.elt.style.top = (y-offset.top)+'px';
- this.elt.style.left = x+'px';
- this.elt.style.top = y+'px';
-
- return this;
+ if (arguments.length === 2){
+ var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
+ style = style.replace(/translate[X-Z]?\(.*\)/g, '');
+ this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
+ this.elt.style.transform += style;
+ }else if (arguments.length === 3){
+ var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
+ style = style.replace(/translate[X-Z]?\(.*\)/g, '');
+ this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
+ this.elt.style.transform += style;
+ this.elt.parentElement.style.perspective = '1000px';
+ }else if (arguments.length === 4){
+ var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
+ style = style.replace(/translate[X-Z]?\(.*\)/g, '');
+ this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
+ this.elt.style.transform += style;
+ this.elt.parentElement.style.perspective = arguments[3]+'px';
+ }
+ return this;
+ };
+
+ /**
+ * Rotates an element with css transforms in either 2d (if 2 arguments given)
+ * or 3d (if 3 arguments given) space.
+ * @method rotate
+ * @param {Number} x amount of degrees to rotate the element along the x-axis in deg
+ * @param {Number} y amount of degrees to rotate the element along the y-axis in deg
+ * @param {Number} [z] amount of degrees to rotate the element along the z-axis in deg
+ * @return {p5.Element}
+ * @example
+ *
+ * var cnv,
+ * x = 0,
+ * y = 0,
+ * z = 0;
+ * function setup(){
+ * cnv = createCanvas(100,100);
+ * }
+ * function draw(){
+ * x+=.5 % 360;
+ * y+=.5 % 360;
+ * z+=.5 % 360;
+ * //rotates the canvas .5deg (degrees) on every axis each frame.
+ * cnv.rotate(x,y,z);
+ * }
+ *
+ */
+ p5.Element.prototype.rotate = function(){
+ if (arguments.length === 1){
+ var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+ style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
+ this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
+ this.elt.style.transform += style;
+ }else if (arguments.length === 2){
+ var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+ style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
+ this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
+ this.elt.style.transform += style;
+ }else if (arguments.length === 3){
+ var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+ style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
+ this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
+ this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
+ this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
+ this.elt.style.transform += style;
+ }
+ return this;
};
/**
- *
* Sets the given style (css) property of the element with the given value.
* If no value is specified, returns the value of the given property,
* or undefined if the property is not.
@@ -706,9 +814,12 @@
this.elt.style[parts[0].trim()] = parts[1].trim();
}
}
- // console.log(this.elt.style)
} else {
this.elt.style[prop] = val;
+ if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top'){
+ var numVal = val.replace(/\D+/g,'');
+ this[prop] = parseInt(numVal);
+ }
}
return this;
};
@@ -788,55 +899,62 @@
/**
*
* Sets the width and height of the element. AUTO can be used to
- * only adjust one dimension.
+ * only adjust one dimension. If no arguments given returns the width and height
+ * of the element in an object.
*
* @method size
- * @param {Number} w width of the element
- * @param {Number} h height of the element
+ * @param {Number} [w] width of the element
+ * @param {Number} [h] height of the element
* @return {p5.Element}
*/
p5.Element.prototype.size = function(w, h) {
- var aW = w;
- var aH = h;
- var AUTO = p5.prototype.AUTO;
- if (aW !== AUTO || aH !== AUTO) {
- if (aW === AUTO) {
- aW = h * this.width / this.height;
- } else if (aH === AUTO) {
- aH = w * this.height / this.width;
- }
- // set diff for cnv vs normal div
- if (this.elt instanceof HTMLCanvasElement) {
- var j = {};
- var k = this.elt.getContext('2d');
- for (var prop in k) {
- j[prop] = k[prop];
+ if (arguments.length === 0){
+ return { 'width' : this.elt.offsetWidth , 'height' : this.elt.offsetHeight };
+ }else{
+ var aW = w;
+ var aH = h;
+ var AUTO = p5.prototype.AUTO;
+ if (aW !== AUTO || aH !== AUTO) {
+ if (aW === AUTO) {
+ aW = h * this.width / this.height;
+ } else if (aH === AUTO) {
+ aH = w * this.height / this.width;
}
- this.elt.setAttribute('width', aW * this._pInst.pixelDensity);
- this.elt.setAttribute('height', aH * this._pInst.pixelDensity);
- this.elt.setAttribute('style', 'width:' + aW + 'px !important; height:' + aH + 'px !important;');
- this._pInst.scale(this._pInst.pixelDensity, this._pInst.pixelDensity);
- for (var prop in j) {
- this.elt.getContext('2d')[prop] = j[prop];
+ // set diff for cnv vs normal div
+ if (this.elt instanceof HTMLCanvasElement) {
+ var j = {};
+ var k = this.elt.getContext('2d');
+ for (var prop in k) {
+ j[prop] = k[prop];
+ }
+ this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
+ this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
+ this.elt.setAttribute('style', 'width:' + aW + 'px; height:' + aH + 'px');
+ this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
+ for (var prop in j) {
+ this.elt.getContext('2d')[prop] = j[prop];
+ }
+ } else {
+ this.elt.style.width = aW+'px';
+ this.elt.style.height = aH+'px';
+ this.elt.width = aW;
+ this.elt.height = aH;
+ this.width = aW;
+ this.height = aH;
}
- } else {
- this.elt.style.width = aW+'px !important';
- this.elt.style.height = aH+'px !important';
- this.elt.width = aW;
- this.elt.height = aH;
- }
- this.elt.style.overflow = 'hidden';
- this.width = this.elt.offsetWidth;
- this.height = this.elt.offsetHeight;
-
- if (this._pInst) { // main canvas associated with p5 instance
- if (this._pInst._curElement.elt === this.elt) {
- this._pInst._setProperty('width', this.elt.offsetWidth);
- this._pInst._setProperty('height', this.elt.offsetHeight);
+ this.elt.style.overflow = 'hidden';
+ this.width = this.elt.offsetWidth;
+ this.height = this.elt.offsetHeight;
+
+ if (this._pInst) { // main canvas associated with p5 instance
+ if (this._pInst._curElement.elt === this.elt) {
+ this._pInst._setProperty('width', this.elt.offsetWidth);
+ this._pInst._setProperty('height', this.elt.offsetHeight);
+ }
}
}
+ return this;
}
- return this;
};
/**