updates
diff --git a/player/index.html b/player/index.html
index 1f307a7..fbb5f1e 100644
--- a/player/index.html
+++ b/player/index.html
@@ -11,11 +11,11 @@
}
#bodymovin{
- background-color:#333;
- width:800px;
- height:800px;
- width:1024px;
- height:768px;
+ background-color:#000;
+ width:100%;
+ height:100%;
+/* width:1820px;
+ height:275px;*/
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
@@ -25,6 +25,10 @@
display:none
}
+ * {
+ pointer-events: none;
+ }
+
</style>
<!-- build:js bodymovin.js -->
<script src="js/main.js"></script>
@@ -114,145 +118,27 @@
<div id="bodymovin"></div>
<script>
+ var mouseCoords = {
+ x:0,
+ y:0
+ }
+ var windowInnerWidth = window.innerWidth, windowInnerHeight = window.innerHeight;
var anim;
var elem = document.getElementById('bodymovin')
var animData = {
container: elem,
- renderer: 'canvas',
+ renderer: 'svg',
loop: true,
autoplay: true,
rendererSettings: {
progressiveLoad:false,
dpr: 1
},
- path: 'exports/render/data.json'
+ path: 'exports/render/omanzano.json'
};
anim = bodymovin.loadAnimation(animData);
- anim.addEventListener('DOMLoaded', function(){
- window.addEventListener('mousemove', function(ev){
- anim.renderer.globalData.mouseCoords.x = ev.offsetX || ev.pageX;
- anim.renderer.globalData.mouseCoords.y = ev.offsetY || ev.pageY;
- })
- createDrawingCanvas();
- })
-
- function createDrawingCanvas(){
-
- var canvasW, canvasH;
- var currentAnimFrame = -1;
- var isEven = false;
- var maxOffset = 250;
- var currentOffset = 0;
- var offsetDir = -1;
- var lastSecond = Number.NEGATIVE_INFINITY;
- var xOffset = 0;
- var newSegmentHeight = 40;
- var pairs = [];
-
- function tick(time){
- ////
- /*// get svg data
- var xml = new XMLSerializer().serializeToString(sourceSVG);
-
- // make it base64
- var svg64 = btoa(xml);
- var b64Start = 'data:image/svg+xml;base64,';
-
- // prepend a "header"
- var image64 = b64Start + svg64;
-
- // set it as the source of the img element
- imgHelper.src = image64;*/
- ////
- isEven = !isEven;
- if(isEven){
- //canvasCtx.globalCompositeOperation = 'exclusion';
- }else {
- //canvasCtx.globalCompositeOperation = 'multiply';
- }
- if(offsetDir > 0){
- currentOffset = currentOffset >= maxOffset ? maxOffset : currentOffset + offsetDir;
- } else {
- currentOffset = currentOffset <= 0 ? 0 : currentOffset + offsetDir;
- }
-
- if(anim.currentFrame !== currentAnimFrame){
- var newPairs = false;
- if(time - lastSecond > 1000){
- newPairs = true;
- pairs.length = 0;
- }
- currentAnimFrame = anim.currentFrame;
- var currentH = 0, currentPair = 0;
- while(currentH < canvasH){
- if(newPairs){
- newSegmentHeight = 2 + Math.round(20*Math.random());
- if(currentH + newSegmentHeight > canvasH){
- newSegmentHeight = canvasH - currentH;
- }
- xOffset = Math.round(Math.random()*(canvasW - 1));
- pairs.push([newSegmentHeight, xOffset]);
- } else {
- newSegmentHeight = pairs[currentPair][0];
- xOffset = pairs[currentPair][1];
- currentPair += 1;
- }
- //var xOffset = 1 + Math.round(Math.random()*currentOffset);
- //xOffset = 0;
- bufferCanvasCtx.drawImage(source, xOffset, currentH, canvasW - xOffset, newSegmentHeight, 0 , currentH, canvasW - xOffset, newSegmentHeight);
- bufferCanvasCtx.drawImage(source, 0, currentH, xOffset, newSegmentHeight, canvasW - xOffset , currentH, xOffset, newSegmentHeight);
- currentH += newSegmentHeight;
- }
- canvasCtx.drawImage(bufferCanvas, 0, 0);
- if(newPairs){
- lastSecond = time;
- }
- }
-
- requestAnimationFrame(tick);
- }
-
- function elemDownHandler(){
- offsetDir = 2;
- }
-
- function elemUpHandler(){
- offsetDir = -5;
- }
-
- var source;
- ///
- var sourceCanvas = elem.getElementsByTagName('canvas')[0];
- sourceCanvas.style.display = 'none';
- source = sourceCanvas;
- canvasW = sourceCanvas.width;
- canvasH = sourceCanvas.height;
- ///
- /*var sourceSVG = elem.getElementsByTagName('svg')[0];
- sourceSVG.style.display = 'none';
- var imgHelper = document.createElement('img');
- source = imgHelper;
- canvasW = 1024;
- canvasH = 768;*/
- ///
- var canvas = document.createElement('canvas');
- var bufferCanvas = document.createElement('canvas');
- var canvasCtx = canvas.getContext('2d');
- var bufferCanvasCtx = bufferCanvas.getContext('2d');
- canvas.width = canvasW;
- canvas.height = canvasH;
- bufferCanvas.width = canvasW;
- bufferCanvas.height = canvasH;
- //canvasCtx.globalCompositeOperation = 'darken';
- elem.appendChild(canvas);
- elem.addEventListener('mousedown', elemDownHandler);
- elem.addEventListener('mouseup', elemUpHandler);
- requestAnimationFrame(tick);
-
-
- }
-
+
</script>
</body>
</html>
diff --git a/player/js/3rd_party/transformation-matrix.js b/player/js/3rd_party/transformation-matrix.js
index 6a06af2..667a7fb 100644
--- a/player/js/3rd_party/transformation-matrix.js
+++ b/player/js/3rd_party/transformation-matrix.js
@@ -253,7 +253,7 @@
return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
}
- function inversePoints(pts){
+ function inversePoint(pt){
//var determinant = this.a * this.d - this.b * this.c;
var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
var a = this.props[5]/determinant;
@@ -262,9 +262,13 @@
var d = this.props[0]/determinant;
var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12])/determinant;
var f = - (this.props[0] * this.props[13] - this.props[1] * this.props[12])/determinant;
+ return [pt[0] * a + pt[1] * c + e, pt[0] * b + pt[1] * d + f, 0];
+ }
+
+ function inversePoints(pts){
var i, len = pts.length, retPts = [];
for(i=0;i<len;i+=1){
- retPts[i] = [pts[i][0] * a + pts[i][1] * c + e, pts[i][0] * b + pts[i][1] * d + f, 0]
+ retPts[i] = inversePoint(pts[i]);
}
return retPts;
}
@@ -329,6 +333,7 @@
this.clone = clone;
this.cloneFromProps = cloneFromProps;
this.inversePoints = inversePoints;
+ this.inversePoint = inversePoint;
this._t = this.transform;
this.props = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 4433605..c9e35cf 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -30,8 +30,59 @@
this.pendingSegment = false;
this._idle = true;
this.projectInterface = ProjectInterface();
+ this.wrapperSize = {
+ w: 1,
+ h: 1
+ }
};
+AnimationItem.prototype.measureWrapper = function() {
+ this.wrapperSize.w = this.wrapper.clientWidth;
+ this.wrapperSize.h = this.wrapper.clientHeight;
+}
+
+AnimationItem.prototype.createWrapperTransformObject = function(){
+ return {
+ mProp: {
+ v: {
+ inversePoint: function inversePoint(pt){
+ var sc = 1;
+ var svgRel = this.animationData.w / this.animationData.h;
+ var elemRel = this.wrapperSize.w/this.wrapperSize.h;
+ if(elemRel > svgRel) {
+ sc = this.wrapperSize.h/this.animationData.h;
+ } else {
+ sc = this.wrapperSize.w/this.animationData.w;
+ }
+ var props13 = (this.wrapperSize.h - this.animationData.h*sc)/2;
+ var props12 = (this.wrapperSize.w - this.animationData.w*sc)/2;
+ var determinant = sc * sc;
+ var a = sc/determinant;
+ var d = sc/determinant;
+ var e = (-sc * props12)/determinant;
+ var f = -(sc * props13)/determinant;
+ return [pt[0] * a + e, pt[1] * d + f, 0];
+ }.bind(this),
+
+ applyToPointArray: function applyToPointArray(x,y){
+ var sc = 1;
+ var svgRel = this.animationData.w / this.animationData.h;
+ var elemRel = this.wrapper.clientWidth/this.wrapper.clientHeight;
+ if(elemRel > svgRel) {
+ sc = this.wrapper.clientHeight/this.animationData.h;
+ } else {
+ sc = this.wrapper.clientWidth/this.animationData.w;
+ }
+ var props13 = (this.wrapper.clientHeight - this.animationData.h*sc)/2;
+ var props12 = (this.wrapper.clientWidth - this.animationData.w*sc)/2;
+
+ return [x * sc + props12, y * sc + props13];
+ }.bind(this)
+ }
+ }
+ }
+}
+
AnimationItem.prototype.setParams = function(params) {
var self = this;
if(params.context){
@@ -54,6 +105,14 @@
this.renderer = new HybridRenderer(this, params.rendererSettings);
break;
}
+
+ this._wrapperTransformObject = this.createWrapperTransformObject();
+
+ Object.defineProperty(this.renderer, 'finalTransform',{
+ get: function(){
+ return this._wrapperTransformObject
+ }.bind(this)
+ })
this.renderer.setProjectInterface(this.projectInterface);
this.animType = animType;
@@ -134,7 +193,6 @@
if(prerender === 'false'){
params.prerender = false;
}
- console.log('animElements:', params)
this.setParams(params);
};
@@ -220,38 +278,6 @@
AnimationItem.prototype.configAnimation = function (animData) {
//ERASE
- console.log(animData);
- // two_dance
- for(var i =0; i < animData.assets[0].layers.length; i += 1){
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":50,"dc":0.95}); /// OPTION C 2
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":0.25}); /// OPTION A 1
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.75}); /// OPTION A 2
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.95}); /// OPTION A 3
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":.999}); /// OPTION A 4
- if(animData.assets[0].layers[i].ty === 4){
- animData.assets[0].layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
- }
- }
- for(var i =0; i < animData.assets[1].layers.length; i += 1){
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":50,"dc":0.95}); /// OPTION C 2
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":0.25}); /// OPTION A 1
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.75}); /// OPTION A 2
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.95}); /// OPTION A 3
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":.999}); /// OPTION A 4
- animData.assets[1].layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
- }
-
- // DANCING DARWIN
- /*for(var i =0; i < 32; i+= 1){
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":50,"dc":0.95}); /// OPTION C 2
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":0.25}); /// OPTION A 1
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.75}); /// OPTION A 2
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.95}); /// OPTION A 3
- //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":.999}); /// OPTION A 4
- animData.layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
- }*/
- // CIRCLE
- //animData.assets[1].layers[1].shapes.push({"ty": "ms","dc":.5, "ss": 140, "mx": 15});
////
if(this.renderer && this.renderer.destroyed){
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index 73ed5c2..8b28932 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -86,7 +86,7 @@
var flag = true;
var comp = this.comp;
while(flag){
- if(comp.finalTransform){
+ if(comp){
transforms.push(comp.finalTransform);
if(comp.hierarchy){
i = 0;
@@ -128,7 +128,7 @@
var flag = true;
var comp = this.comp;
while(flag){
- if(comp.finalTransform){
+ if(comp){
transforms.splice(0,0,comp.finalTransform);
if(comp.hierarchy){
len = comp.hierarchy.length;
@@ -145,12 +145,12 @@
}
len = transforms.length;
for(i=0;i<len;i+=1){
- pt = transforms[i].mProp.v.inversePoints([pt])[0];
+ pt = transforms[i].mProp.v.inversePoint(pt);
}
if(extraTransforms){
len = extraTransforms.length;
for(i = 0;i < len; i += 1){
- pt = extraTransforms[i].mProps.v.inversePoints([pt])[0];
+ pt = extraTransforms[i].mProps.v.inversePoint(pt);
}
}
return pt;
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index f28fd2d..46abf0e 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -17,7 +17,7 @@
CVShapeElement.prototype.createElements = function(){
this._parent.createElements.call(this);
- this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.dynamicProperties, true);
+ this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.dynamicProperties,[], true);
};
CVShapeElement.prototype.createStyleElement = function(data, dynamicProperties){
@@ -85,10 +85,11 @@
return elementData;
}
-CVShapeElement.prototype.createShapeElement = function(data, dynamicProperties) {
+CVShapeElement.prototype.createShapeElement = function(data, ownTransformers, dynamicProperties) {
var elementData = {
nodes:[],
trNodes:[],
+ transformers: ownTransformers,
tr:[0,0,0,0,0,0]
};
var ty = 4;
@@ -125,7 +126,7 @@
for(i=0;i<len;i+=1){
this.prevViewData[i] = this.itemsData[i];
}
- this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.dynamicProperties, true);
+ this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.dynamicProperties, [], true);
var i, len = this.dynamicProperties.length;
for(i=0;i<len;i+=1){
this.dynamicProperties[i].getValue();
@@ -133,7 +134,8 @@
this.renderModifiers();
}
-CVShapeElement.prototype.searchShapes = function(arr,itemsData, prevViewData,dynamicProperties, render){
+CVShapeElement.prototype.searchShapes = function(arr,itemsData, prevViewData,dynamicProperties, transformers, render){
+ var ownTransformers = [].concat(transformers);
var i, len = arr.length - 1;
var j, jLen;
var ownArrays = [], ownModifiers = [], processedPos;
@@ -161,14 +163,15 @@
itemsData[i].prevViewData[j] = itemsData[i].it[j];
}
}
- this.searchShapes(arr[i].it,itemsData[i].it,itemsData[i].prevViewData,dynamicProperties, render);
+ this.searchShapes(arr[i].it,itemsData[i].it,itemsData[i].prevViewData,dynamicProperties, ownTransformers, render);
}else if(arr[i].ty == 'tr'){
if(!processedPos){
itemsData[i] = this.createTransformElement(arr[i], dynamicProperties);
}
+ ownTransformers.push(itemsData[i].transform);
}else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){
if(!processedPos){
- itemsData[i] = this.createShapeElement(arr[i], dynamicProperties);
+ itemsData[i] = this.createShapeElement(arr[i], ownTransformers, dynamicProperties);
}
}else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'ms'){
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 25acbc0..58b6e47 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -52,6 +52,7 @@
this.layerElement.setAttribute('preserveAspectRatio',this.renderConfig.preserveAspectRatio);
this.layerElement.style.width = '100%';
this.layerElement.style.height = '100%';
+ this.svgElement = this.layerElement;
//this.layerElement.style.transform = 'translate3d(0,0,0)';
//this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
this.animationItem.wrapper.appendChild(this.layerElement);
diff --git a/player/js/utils/shapes/MouseModifier.js b/player/js/utils/shapes/MouseModifier.js
index 0256a03..0bc781c 100644
--- a/player/js/utils/shapes/MouseModifier.js
+++ b/player/js/utils/shapes/MouseModifier.js
@@ -79,9 +79,9 @@
positions.i[i][1] = Math.sin(theta) * Math.max(0,this.data.maxDist-positions.distI[i])/2 + (path.i[i][1]);
/////OPTION 1
- // cloned_path.setTripleAt(positions.v[i][0],positions.v[i][1]
- // ,positions.o[i][0],positions.o[i][1]
- // ,positions.i[i][0],positions.i[i][1], i);
+ cloned_path.setTripleAt(positions.v[i][0],positions.v[i][1]
+ ,positions.o[i][0],positions.o[i][1]
+ ,positions.i[i][0],positions.i[i][1], i);
@@ -107,7 +107,7 @@
//// OPTION B
- /*for(i=0;i<len;i+=1){
+ for(i=0;i<len;i+=1){
if(!positions.v[i]){
positions.v[i] = [path.v[i][0],path.v[i][1]];
positions.o[i] = [path.o[i][0],path.o[i][1]];
@@ -156,10 +156,11 @@
positions.i[i][0] += Math.cos(theta) * distance + (path.i[i][0] - positions.i[i][0]) * this.data.dc;
positions.i[i][1] += Math.sin(theta) * distance + (path.i[i][1] - positions.i[i][1]) * this.data.dc;
+
/////OPTION 1
- cloned_path.setTripleAt(positions.v[i][0],positions.v[i][1]
- ,positions.o[i][0],positions.o[i][1]
- ,positions.i[i][0],positions.i[i][1], i);
+ // cloned_path.setTripleAt(positions.v[i][0],positions.v[i][1]
+ // ,positions.o[i][0],positions.o[i][1]
+ // ,positions.i[i][0],positions.i[i][1], i);
@@ -171,16 +172,16 @@
/////OPTION 3
- //vValues.push(positions.v[i]);
- //iValues.push(path.i[i]);
- //oValues.push(path.o[i]);
+ // cloned_path.setTripleAt(positions.v[i][0],positions.v[i][1]
+ // ,path.i[i][0],path.i[i][1]
+ // ,path.o[i][0],path.o[i][1], i);
/////OPTION 4
- //vValues.push(path.v[i]);
- // oValues.push(positions.o[i]);
- // iValues.push(positions.i[i]);
- }*/
+ cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
+ ,positions.o[i][0],positions.o[i][1]
+ ,positions.i[i][0],positions.i[i][1], i);
+ }
////OPTION C
@@ -196,28 +197,28 @@
perc = Math.min(1,distance/maxDist);
//// OPTION 1
- if(distance < maxDist){
- cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
- ,path.v[i][0]+(path.o[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.o[i][1] - path.v[i][1])*perc
- ,path.v[i][0]+(path.i[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.i[i][1] - path.v[i][1])*perc, i);
- } else {
- cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
- ,path.o[i][0],path.o[i][1]
- ,path.i[i][0],path.i[i][1], i);
- }
-
- //// OPTION 2
- // perc = 1 - perc*5;
// if(distance < maxDist){
- // cloned_path.setTripleAt(path.v[i][0] * perc,path.v[i][1] * perc
- // ,path.o[i][0] * perc,path.o[i][1] * perc
- // ,path.i[i][0] * perc,path.i[i][1] * perc, i);
+ // cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
+ // ,path.v[i][0]+(path.o[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.o[i][1] - path.v[i][1])*perc
+ // ,path.v[i][0]+(path.i[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.i[i][1] - path.v[i][1])*perc, i);
// } else {
// cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
// ,path.o[i][0],path.o[i][1]
// ,path.i[i][0],path.i[i][1], i);
// }
+ //// OPTION 2
+ perc = 1 - perc*2;
+ if(distance < maxDist){
+ cloned_path.setTripleAt(path.v[i][0] * perc,path.v[i][1] * perc
+ ,path.o[i][0] * perc,path.o[i][1] * perc
+ ,path.i[i][0] * perc,path.i[i][1] * perc, i);
+ } else {
+ cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
+ ,path.o[i][0],path.o[i][1]
+ ,path.i[i][0],path.i[i][1], i);
+ }
+
//// OPTION 3
// perc = 1 - perc;
// if(distance < maxDist){
@@ -233,7 +234,8 @@
}*/
////OPTION D
- var localMouseCoords = this.elem.globalToLocal(mouseCoords, transformers);
+ /*var localMouseCoords = this.elem.globalToLocal(mouseCoords, transformers);
+ //console.log(localMouseCoords);
var maxDist = this.data.maxDist;
var perc, distance;
@@ -242,24 +244,40 @@
//globalPt = this.elem.localToGlobal(path.v[i],transformers);
x = path.v[i][0] - localMouseCoords[0];
- y =path.v[i][1] - localMouseCoords[1];
+ y = path.v[i][1] - localMouseCoords[1];
distance = Math.sqrt( (x * x) + (y * y) );
- var mult = -0.15*(distance/200);
- //var mult = -.55*(Math.exp(distance/300)-1);
- //var mult = -.55*(Math.log(distance/250));
- //mult = -0.55*Math.cos(distance*Math.PI/180);
+ var mult = 0.2*(distance/200);
+ var mult = .95*(Math.exp(distance/400)-1);
+ var mult = .25*(Math.log(distance/450));
+ //mult = -0.15*Math.cos(distance*3*Math.PI/180);
+
+ //var mult = .75*(Math.exp(distance/400)-1); // OPTION 2
+ // mult = -0.75*Math.cos(distance/3*Math.PI/180); //OPTION 2
+ //var mult = .45*(Math.log(distance*5/450)); // OPTION 2
+ //var mult = .95*(Math.exp(distance/400)-1); // OPTION 3
+ //var mult = .25*(Math.log(distance/450)); OPTION 3
//// OPTION 1
- cloned_path.setTripleAt(path.v[i][0] + (localMouseCoords[0] - path.v[i][0]) * mult, path.v[i][1] + (localMouseCoords[1] - path.v[i][1]) * mult
- ,path.o[i][0],path.o[i][1]
- ,path.i[i][0],path.i[i][1], i);
+ // cloned_path.setTripleAt(path.v[i][0] + (localMouseCoords[0] - path.v[i][0]) * mult, path.v[i][1] + (localMouseCoords[1] - path.v[i][1]) * mult
+ // ,path.o[i][0],path.o[i][1]
+ // ,path.i[i][0],path.i[i][1], i);
//// OPTION 2
// cloned_path.setTripleAt(path.v[i][0] + (localMouseCoords[0] - path.v[i][0]) * mult, path.v[i][1] + (localMouseCoords[1] - path.v[i][1]) * mult
// ,path.o[i][0] + (localMouseCoords[0] - path.o[i][0]) * mult, path.o[i][1] + (localMouseCoords[1] - path.o[i][1]) * mult
// ,path.i[i][0] + (localMouseCoords[0] - path.i[i][0]) * mult, path.i[i][1] + (localMouseCoords[1] - path.i[i][1]) * mult, i);
- }
+ //// OPTION 3
+ cloned_path.setTripleAt(path.v[i][0] + (localMouseCoords[0] + path.v[i][0]) * mult, path.v[i][1] + (localMouseCoords[1] + path.v[i][1]) * mult
+ ,path.o[i][0] + (localMouseCoords[0] + path.o[i][0]) * mult, path.o[i][1] + (localMouseCoords[1] + path.o[i][1]) * mult
+ ,path.i[i][0] + (localMouseCoords[0] + path.i[i][0]) * mult, path.i[i][1] + (localMouseCoords[1] + path.i[i][1]) * mult, i);
+
+ //// OPTION 4
+ // cloned_path.setTripleAt(path.v[i][0] - (localMouseCoords[0] - path.v[i][0]) * mult, path.v[i][1] - (localMouseCoords[1] - path.v[i][1]) * mult
+ // ,path.o[i][0] - (localMouseCoords[0] - path.o[i][0]) * mult, path.o[i][1] - (localMouseCoords[1] - path.o[i][1]) * mult
+ // ,path.i[i][0] - (localMouseCoords[0] - path.i[i][0]) * mult, path.i[i][1] - (localMouseCoords[1] - path.i[i][1]) * mult, i);
+
+ }*/
//return shape_pool.clone(path);
@@ -272,42 +290,36 @@
var shapePaths;
var i, len = this.shapes.length;
var j, jLen;
-
- if(mouseX){
-
- var shapeData, newPaths, localShapeCollection, localMouseCoords;
- for(i=0;i<len;i+=1){
- shapeData = this.shapes[i];
- //localMouseCoords = this.elem.localToGlobal([mouseX,mouseY], shapeData.transformers);
- localMouseCoords = [mouseX,mouseY];
- newPaths = shapeData.shape.paths;
- localShapeCollection = shapeData.localShapeCollection;
- if(!(!shapeData.shape.mdf && !this.mdf)){
- localShapeCollection.releaseShapes();
- shapeData.shape.mdf = true;
- shapePaths = shapeData.shape.paths;
- jLen = shapePaths._length;
- for(j=0;j<jLen;j+=1){
- if(!this.positions[i][j]){
- this.positions[i][j] = {
- v:[],
- o:[],
- i:[],
- distV:[],
- distO:[],
- distI:[]
- };
- }
- localShapeCollection.addShape(this.processPath(shapePaths.shapes[j],localMouseCoords,shapeData.transformers, this.positions[i][j]));
+ var shapeData, newPaths, localShapeCollection, localMouseCoords;
+ for(i=0;i<len;i+=1){
+ shapeData = this.shapes[i];
+ //localMouseCoords = this.elem.localToGlobal([mouseX,mouseY], shapeData.transformers);
+ localMouseCoords = [mouseX,mouseY];
+ newPaths = shapeData.shape.paths;
+ localShapeCollection = shapeData.localShapeCollection;
+ if(!(!shapeData.shape.mdf && !this.mdf)){
+ localShapeCollection.releaseShapes();
+ shapeData.shape.mdf = true;
+ shapePaths = shapeData.shape.paths;
+ jLen = shapePaths._length;
+ for(j=0;j<jLen;j+=1){
+ if(!this.positions[i][j]){
+ this.positions[i][j] = {
+ v:[],
+ o:[],
+ i:[],
+ distV:[],
+ distO:[],
+ distI:[]
+ };
}
- for(j=0;j<jLen;j+=1){
- }
- shapeData.shape.paths = shapeData.localShapeCollection;
+ localShapeCollection.addShape(this.processPath(shapePaths.shapes[j],localMouseCoords,shapeData.transformers, this.positions[i][j]));
}
+ for(j=0;j<jLen;j+=1){
+ }
+ shapeData.shape.paths = shapeData.localShapeCollection;
}
-
}
-
}
MouseModifier.prototype.initModifierProperties = function(elem,data){
