ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Drawing Graphs for animated values (Scale, Position etc)

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Vadim Akhmetzyanov
Drawing Graphs for animated values (Scale, Position etc)
on Jun 16, 2020 at 11:37:48 am

Hello everyone! I have a very specific need to render graphs of what happens to objects that I animate in AE - it's game interface animations related and this is going to help other people understand my animations.
All tutorials I found are CSV-based graphs but I need my graphs to be scale-driven or position-driven (any given value actually).
I imagine such graphs to be plotted in realtime, every frame, till the end of timeline. For scale, for example, it could be like this:


I'm really hoping for a ready recipe for that (my expression skills are almost 0) - maybe someone did something similar before, but any advice would be apreciated.
P.S. Thats a CSV tutor I watched -





Return to posts index

Robert Müller
Re: Drawing Graphs for animated values (Scale, Position etc)
on Jun 17, 2020 at 12:31:26 pm

Hi Vadim,
I quickly hacked this together, which plots a line for the scale value of a specific object. It might not be exactly what you are looking for but this should point you in the general direction and give you something to work with ☺

yBase=400; //y Position the graph should "start" on.
xStart=-900; //leftmost point of the graph
xEnd=xStart*-1; //rightmost point of the graph
fTotal= timeToFrames(thisComp.duration); // getting the total number of frames so that each frame will represent a point on the path
xStep=length(xStart,xEnd)/fTotal; //distance between the points, steps
pointArr = []; //creating an empty array
lay= thisComp.layer("Object"); //the "watched" layer

for (i=0; i<= fTotal; i++){
pointArr.push([xStart+(i*xStep),yBase-(lay.transform.scale.valueAtTime(framesToTime(i))[0])])
}
/*
I get the x position of each point on each frame, starting from the xStart value.
Then I get the values of one of the scale dimensions on every frame and substract that from my yBase line.
Then I push the value as x and y into my empty array
*/
createPath(pointArr,[],[],isClosed=false);

Since I dont go after tangents I added a round corners to the shape layer.
And to have the graph animate I simply put this expression on the end property of a trim paths I added on my graph:
linear(time,0,thisComp.duration,0,100)


Return to posts index

Vadim Akhmetzyanov
Re: Drawing Graphs for animated values (Scale, Position etc)
on Jun 17, 2020 at 12:58:38 pm

Hi! Thanks a lot! I can totally work with that, I will definetely study your example and try to adapt it for my needs, realy apreciate.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2020 CreativeCOW.net All Rights Reserved
[TOP]