Skip to content

Commit

Permalink
Merge pull request #745 from futuremarc/master
Browse files Browse the repository at this point in the history 
p5.dom CSS transforms #389, translate() rotate()
  • Loading branch information
Lauren McCarthy committed Jun 29, 2015
2 parents d8cea74 + 882c81d commit fe4ce6c
Showing 1 changed file with 180 additions and 62 deletions.
242 changes: 180 additions & 62 deletions lib/addons/p5.dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
* <div><code class='norender'>
* 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);
* }
* </code></div>
*/
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
* <div><code class='norender'>
* function setup() {
* var cnv = createCanvas(100,100);
* //translates canvas 50px to the right and 100px down
* cnv.translate(50,100);
* }
* </code></div>
*/
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
* <div><code class='norender'>
* 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);
* }
* </code></div>
*/
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.
Expand All @@ -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;
};
Expand Down Expand Up @@ -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;
};

/**
Expand Down

0 comments on commit fe4ce6c

Please sign in to comment.