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){