FORUMS: list search recent posts

# sup all, new here, but i got something for ya :D

FAQ   •   VIEW ALL
 sup all, new here, but i got something for ya :D on May 9, 2016 at 5:06:23 pm

sup guys, so I have been working on this code for a bit, it still a work in progress, I would like to make a plug in for it, to create the objects in an interface : anyway here ya go:

let me know if you guys need help with how to make ur own event objects..

so the application for this, well its endless.. u don't need to create keyframes.. all u need to know is when where and how :D

ill add more tween formulas later if their is an intrest... and the ability to add ur own callback within each object.

```I am using Object oriented programming in the example below: var _Database=[]; // database for the value of x function easeInQuad(t,b,c,d){ return c*(t/=d)*t + b;} ; function easeInOutExpo (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) &lt; 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;}; function easeInOutElastic(t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a &lt; Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t &lt; 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }; function easeInBack(t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }; var timeToFrame = 0; function ToFrame(){ timeToFrame= timeToFrames(time); var d = timeToFrame;if(d > _Database.length-1){ return d= _Database.length-1 } return d }; var Creator = (function(){ var _switch = true; var database = []; function Stage(event){ if(!event){ return this} this.from = event.from; this.to = event.to - event.from ; this.duration = event.duration; this.type = event.type; } Stage.prototype.timeEvent = function (){ function cell(t, b, c, d) { switch (now) { case "easeInQuad" : return easeInQuad(t,b,c,d) ; case "easeInBack" : return easeInBack(t,b,c,d) ; case "easeInOutElastic" :return easeInOutElastic(t,b,c,d); } } var frameRate = 1.0 / thisComp.frameDuration; var now = this.type; var c = this.to; var b = this.from; var d = this.duration * frameRate; ; for(var t = 0; t <d ; t++){ database.push(cell(t,b,c,d)); _Database.push(cell(t,b,c,d)); } }; Stage.prototype.getData = function (){ return database }; return Stage }()) function Events() { var d= []; for(var i = 0; i &lt; arguments.length ;i++){ d[i] = new Creator(arguments[i]); d[i].timeEvent(); } var current = d[0].getData(); for(var v = 0; v &lt; current.length ; v++){ x = current[ToFrame()] } return x} v = Events({to:360, from:0, duration: 2, type: "easeInBack" },{to:720, from:360, duration: 4, type: "easeInOutElastic"},{to:0, from:720, duration: 4, type: "easeInOutElastic"} ); ```

 Re: sup all, new here, but i got something for ya :Don May 9, 2016 at 5:21:57 pm

so one of the principle OOP is encapsulation, all u need to know is the Events takes the following:

{to: (location of where to go) , from : ( location before), duration : (how log it will take to get there in sec), type: ( the "ease type you want to apply to each object)}

so what makes this code interesting is one two things... u can have different type of "ease" for each object, and u can have an endless about of event objects within a position...

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 9:19:59 am

So, tell me if I understand this correctly:

You input the desired beginning and end locations, the duration and ease type into the table "v" at the end of the expression, and then apply this to the position value of an object?

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 3:54:03 pm

thats correct, at the moment i only have 3 type of "ease" you can select from:

"easeInBack"

"easeInOutElastic"

so test this copy the statment from the org post, and then modify this line:

v = Events({to:360, from:0, duration: 2, type: "easeInBack" },{to:720, from:360, duration: 4, type: "easeInOutElastic"},{to:0, from:720, duration: 4, type: "easeInOutElastic"} );

to be whatever u want, u can create as many or as lil objects withi event....

this can be applied to anything, from effect to poistion..

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 12:30:03 pm

I haven't tried your expression, but i wouldnt be surprised you quickly run into performance issues. Given that image processing can already be a heavy task, expressions should be as simple as possible imo, and go straight to the result whenever possible.

I think you could achieve the same thing in a much simpler and efficient fashion.

Xavier

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 3:45:23 pm

just becuase there is alot of data their doesnt mean that its not efficient, rather the code is very simple...However i will try to overload my pc to see the results... ill get back to this post..

however if u have an idea how i can create movment without key frames for automation let me know.

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 4:07:38 pm

so what i am trying to create in affer effect is a page from robert penner programing in macromdia but in affter effects:

http://robertpenner.com/easing/

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 4:19:14 pm

Yes agreed, but for this type of animation you only need to stack up sub-animations durations to find the correct time interval in which the current time lies, then calculate the interpolation only for that time interval. You dont need all these definitions, nor instantiate a new Creator for every time interval, even less calculate d[i].timeEvent() for every single instance, given that AE is only interested in what happens at current time.

Something simple like this:

//============== user data ================

database = [{}, {}, ...]; // some data

//============== solve side ================
1- find the index of database entry containing the current time (sum up durations until hit)
2- for that time interval, interpolate using the specified interpolation

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 4:32:07 pm

funny thing is that is how that code works, ill breake it down.. but u are right i have stuff int here that can be removed, tho i left it in for lazyness, and its only a concept at the moment..

the creator ( a class object) takes 4 propeties, and contains them in an object, creates the data in a datase ( array), then Event fucntion goes over the database via timeToFrames method, and once it reaches the end thats it..

 Re: sup all, new here, but i got something for ya :Don May 10, 2016 at 5:40:44 pm

ok so i updated the below code that that it doesnt do the math twice, as i had it doing so before, i did test this out on 20 shape layers at the same time, performance was fine.. but the more shape layers the more the pc has to cal..

ok be singing off now :p

```var _Database=[]; // database for the value of x function easeInQuad(t,b,c,d){ return c*(t/=d)*t + b;} ; function easeInOutExpo (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) &lt; 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;}; function easeInOutElastic(t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a &lt; Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t &lt; 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }; function easeInBack(t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }; var timeToFrame = 0; function ToFrame(){ timeToFrame= timeToFrames(time); var d = timeToFrame;if(d > _Database.length-1){ return d= _Database.length-1 } return d }; var Creator = (function(){ var _switch = true; var database = []; function Stage(event){ if(!event){ return this} this.from = event.from; this.to = event.to - event.from ; this.duration = event.duration; this.type = event.type; } Stage.prototype.timeEvent = function (){ function cell(t, b, c, d) { switch (now) { case "easeInQuad" : return easeInQuad(t,b,c,d) ; case "easeInBack" : return easeInBack(t,b,c,d) ; case "easeInOutElastic" :return easeInOutElastic(t,b,c,d); } } var frameRate = 1.0 / thisComp.frameDuration; var now = this.type; var c = this.to; var b = this.from; var d = this.duration * frameRate; ; for(var t = 0; t <d ; t++){ database.push(cell(t,b,c,d)); _Database.push(cell(t,b,c,d)); } }; Stage.prototype.getData = function (){ return database }; return Stage }()) function Events() { var d= []; for(var i = 0; i &lt; arguments.length ;i++){ d[i] = new Creator(arguments[i]); d[i].timeEvent(); } var current = d[0].getData(); for(var v = 0; v &lt; current.length ; v++){ x = current[ToFrame()] } return x} v = Events({to:2000, from:0, duration: 2, type: "easeInBack" },{to:400, from:2000, duration: 4, type: "easeInOutElastic"},{to:1200, from:400, duration: 2, type: "easeInBack"} ); ```

```var _Database=[]; // database for the value of x function easeInQuad(t,b,c,d){ return c*(t/=d)*t + b;} ; function easeInOutExpo (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) &lt; 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;}; function easeInOutElastic(t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a &lt; Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t &lt; 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }; function easeInBack(t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }; var timeToFrame = 0; function ToFrame(){ timeToFrame= timeToFrames(time); var d = timeToFrame;if(d > _Database.length-1){ return d= _Database.length-1 } return d }; var Creator = (function(){ var _switch = true; var database = []; function Stage(event){ if(!event){ return this} this.from = event.from; this.to = event.to - event.from ; this.duration = event.duration; this.type = event.type; } Stage.prototype.timeEvent = function (){ function cell(t, b, c, d) { switch (now) { case "easeInQuad" : return easeInQuad(t,b,c,d) ; case "easeInBack" : return easeInBack(t,b,c,d) ; case "easeInOutElastic" :return easeInOutElastic(t,b,c,d); } } var frameRate = 1.0 / thisComp.frameDuration; var now = this.type; var c = this.to; var b = this.from; var d = this.duration * frameRate; ; for(var t = 0; t <d ; t++){ database.push(cell(t,b,c,d)); _Database.push(t); } }; Stage.prototype.getData = function (){ return database }; return Stage }()) function Events() { var d= []; for(var i = 0; i &lt; arguments.length ;i++){ d[i] = new Creator(arguments[i]); d[i].timeEvent(); } var current = d[0].getData(); for(var v = 0; v &lt; current.length ; v++){ x = current[ToFrame()] } return x} v = Events({to:2000, from:0, duration: 2, type: "easeInBack" },{to:400, from:2000, duration: 4, type: "easeInOutElastic"},{to:1200, from:400, duration: 2, type: "easeInBack"} ); ```