canvas mouse modifier
diff --git a/player/index.html b/player/index.html
index 8444836..1f307a7 100644
--- a/player/index.html
+++ b/player/index.html
@@ -119,21 +119,22 @@
var elem = document.getElementById('bodymovin')
var animData = {
container: elem,
- renderer: 'svg',
+ renderer: 'canvas',
loop: true,
autoplay: true,
rendererSettings: {
- progressiveLoad:false
+ progressiveLoad:false,
+ dpr: 1
},
- path: 'exports/render/data3.json'
+ path: 'exports/render/data.json'
};
anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', function(){
window.addEventListener('mousemove', function(ev){
- anim.renderer.globalData.mouseX = ev.offsetX || ev.pageX;
- anim.renderer.globalData.mouseY = ev.offsetY || ev.pageY;
+ anim.renderer.globalData.mouseCoords.x = ev.offsetX || ev.pageX;
+ anim.renderer.globalData.mouseCoords.y = ev.offsetY || ev.pageY;
})
- //createDrawingCanvas();
+ createDrawingCanvas();
})
function createDrawingCanvas(){
@@ -144,8 +145,12 @@
var maxOffset = 250;
var currentOffset = 0;
var offsetDir = -1;
+ var lastSecond = Number.NEGATIVE_INFINITY;
+ var xOffset = 0;
+ var newSegmentHeight = 40;
+ var pairs = [];
- function tick(){
+ function tick(time){
////
/*// get svg data
var xml = new XMLSerializer().serializeToString(sourceSVG);
@@ -162,9 +167,9 @@
////
isEven = !isEven;
if(isEven){
- canvasCtx.globalCompositeOperation = 'exclusion';
+ //canvasCtx.globalCompositeOperation = 'exclusion';
}else {
- canvasCtx.globalCompositeOperation = 'multiply';
+ //canvasCtx.globalCompositeOperation = 'multiply';
}
if(offsetDir > 0){
currentOffset = currentOffset >= maxOffset ? maxOffset : currentOffset + offsetDir;
@@ -173,22 +178,38 @@
}
if(anim.currentFrame !== currentAnimFrame){
+ var newPairs = false;
+ if(time - lastSecond > 1000){
+ newPairs = true;
+ pairs.length = 0;
+ }
currentAnimFrame = anim.currentFrame;
- var currentH = 0;
+ var currentH = 0, currentPair = 0;
while(currentH < canvasH){
- var newSegmentHeight = 2 + Math.round(2*Math.random());
- if(currentH + newSegmentHeight > canvasH){
- newSegmentHeight = canvasH - currentH;
+ 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 = Math.round(Math.random()*canvasW/10);
- var xOffset = 1 + Math.round(Math.random()*currentOffset);
+ //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);
}
@@ -227,7 +248,7 @@
elem.appendChild(canvas);
elem.addEventListener('mousedown', elemDownHandler);
elem.addEventListener('mouseup', elemUpHandler);
- tick();
+ requestAnimationFrame(tick);
}
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 91261c5..4433605 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -221,6 +221,26 @@
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
@@ -231,10 +251,12 @@
animData.layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
}*/
// CIRCLE
- /*animData.layers[0].shapes.push({"ty": "ms","dc":.5, "ss": 140, "mx": 15});
+ //animData.assets[1].layers[1].shapes.push({"ty": "ms","dc":.5, "ss": 140, "mx": 15});
+
+ ////
if(this.renderer && this.renderer.destroyed){
return;
- }*/
+ }
//console.log(JSON.parse(JSON.stringify(animData)));
//animData.w = Math.round(animData.w/blitter);
//animData.h = Math.round(animData.h/blitter);
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index 6658bc4..73ed5c2 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -87,8 +87,14 @@
var comp = this.comp;
while(flag){
if(comp.finalTransform){
- if(comp.data.hasMask){
- transforms.splice(0,0,comp.finalTransform);
+ transforms.push(comp.finalTransform);
+ if(comp.hierarchy){
+ i = 0;
+ len = comp.hierarchy.length;
+ while(i < len) {
+ transforms.push(comp.hierarchy[i].finalTransform);
+ i += 1;
+ }
}
comp = comp.comp;
} else {
@@ -123,8 +129,14 @@
var comp = this.comp;
while(flag){
if(comp.finalTransform){
- if(comp.data.hasMask){
- transforms.splice(0,0,comp.finalTransform);
+ transforms.splice(0,0,comp.finalTransform);
+ if(comp.hierarchy){
+ len = comp.hierarchy.length;
+ i = 0;
+ while(i < len) {
+ transforms.splice(0,0,comp.hierarchy[i].finalTransform);
+ i += 1;
+ }
}
comp = comp.comp;
} else {
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 2c4ca28..a2642df 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -160,6 +160,10 @@
w: animData.w,
h: animData.h
};
+ this.globalData.mouseCoords = {
+ x: 0,
+ y: 0
+ };
this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
this.layers = animData.layers;
this.transformCanvas = {};
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 5b6bacd..25acbc0 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -68,6 +68,10 @@
w: animData.w,
h: animData.h
};
+ this.globalData.mouseCoords = {
+ x: 0,
+ y: 0
+ };
this.data = animData;
this.globalData.frameRate = animData.fr;
var maskElement = document.createElementNS(svgNS, 'clipPath');
diff --git a/player/js/utils/shapes/MouseModifier.js b/player/js/utils/shapes/MouseModifier.js
index b3b98bd..0256a03 100644
--- a/player/js/utils/shapes/MouseModifier.js
+++ b/player/js/utils/shapes/MouseModifier.js
@@ -196,15 +196,15 @@
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);
- // }
+ 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;
@@ -233,9 +233,7 @@
}*/
////OPTION D
- //console.log('mouseCoords:', mouseCoords)
var localMouseCoords = this.elem.globalToLocal(mouseCoords, transformers);
- //console.log(localMouseCoords);
var maxDist = this.data.maxDist;
var perc, distance;
@@ -243,11 +241,6 @@
//globalPt = this.elem.localToGlobal(path.v[i],transformers);
- /*theta = Math.atan2(
- path.v[i][1] - localMouseCoords[1],
- path.v[i][0] - localMouseCoords[0]
- );*/
-
x = path.v[i][0] - localMouseCoords[0];
y =path.v[i][1] - localMouseCoords[1];
distance = Math.sqrt( (x * x) + (y * y) );
@@ -274,8 +267,8 @@
}
MouseModifier.prototype.processShapes = function(){
- var mouseX = this.elem.globalData.mouseX || 100;
- var mouseY = this.elem.globalData.mouseY || 100;
+ var mouseX = this.elem.globalData.mouseCoords.x;
+ var mouseY = this.elem.globalData.mouseCoords.y;
var shapePaths;
var i, len = this.shapes.length;
var j, jLen;
@@ -321,6 +314,7 @@
this.getValue = this.processKeys;
this.data = data;
this.positions = [];
+ this.dynamicProperties.push({});
};
