| # ease interpolation based on values• | **ease interpolation based on values**
on May 13, 2020 at 8:29:34 pm |
Hi guys,
Please help me, I'm stucked while learning expression lenguage and CSV data driven animation in the same time. Now I'm making infographic charts. I have a very simple CSV database, 4 rows and 6 columns. Each row is a path, and the columns are 6 groups with values according to the 4 pathes. There's a slider controlling the call of each data group. The algorhytm is comparing all values in the same column/group, picks the highest number and trims each pathes scaling them relatively to highest one wich is 100 %. It's working well, but the trim is jumping one value to the other. I tried to use ease interpolation to get a smooth animated trim but it's not working for me.
the CSV looks has these values:
place,perc1,perc2,perc3,perc4,perc5,perc6
1,200,300,234,232,56,896
2,610,343,56,34,77,213
3,1450,324,1611,23,0,111
4,50,342,444,22,666,45
Thanks for helping me
`slide = Math.round(thisComp.layer("BarControls").effect("DataGroups")("Slider"));`
h = new Array();
for(i=0; i <4; i++) {
h1 = footage("04_2_YourCSV.csv").dataValue([slide,i]);
h.push([h1]);
}
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
vMax = myArrayMax(h);
v0 = footage("04_2_YourCSV.csv").dataValue([slide,0]);
x0 = (v0/vMax)*100;
v1 = footage("04_2_YourCSV.csv").dataValue([slide+1,0]);
x1 = (v1/vMax)*100;
end = ease(slide,0,slide+1,[x0],[x1]); • | **Re: ease interpolation based on values** on May 13, 2020 at 9:56:18 pm |
You need to not round your slider at the beginning.
Then I think you could work with Math.floor() and Math.ceil() to get the results you're after:
`v0 = footage("04_2_YourCSV.csv").dataValue([Math.floor(slide),0]);`
x0 = (v0/vMax)*100;
v1 = footage("04_2_YourCSV.csv").dataValue([Math.ceil(slide),0]);
x1 = (v1/vMax)*100;
end = ease(slide, Math.floor(slide), Math.ceil(slide), [x0], [x1]);
It's also possible I've misunderstood the goal :)
Darby Edelen • | **Re: ease interpolation based on values** on May 14, 2020 at 7:26:48 am |
Thanks for the rapid response, Darby but it's not what I wanted to do. Maybe I wasn't clear - sorry for that.
So the goal is to make the path trim tweening through values after one another. Now it's like hold interpolation.
• | **Re: ease interpolation based on values** on May 14, 2020 at 9:33:30 am |
Okay I dont get it exactly, the expression is on your trim path end property? And are you trying to animate your slider or what? A screenshot or better a project file would really help to understand what exactly you are trying to do • | **Re: ease interpolation based on values** on May 14, 2020 at 11:37:05 am |
Yes, the expression is on trim path end property. And I want to animate trimming of the end property. For example the first percentage is 25%, then 13,8%, 80%, 45%, 100%, etc.. and the bar now jumps from one value to the other. My goal is to slide trough the inbetween numbers from the first value to the second and from the second to the third etc..
Here're two pictures with my original code:
the last value
• | **Re: ease interpolation based on values** on May 15, 2020 at 9:00:40 am |
Ok some thoughts: First of all, this isnt going to work how you are imagining it. Since the slider is just selecting the columns, theres no way for doing that by animating the slider since AE cant interpolate between whole data blocks. However, you can ease with just expressions using time as the ease parameter
`end = ease(time,0,1,[x0],[x1]);`
With 0 being the starting time of the ease and 1 being the length. However for this to be useful in your case you would have to get every possible value and put them in an array. But even if you would be fine with just 2 different states of the graph you would still need to update your expression, since your calculation for the next value does not work properly
`v1 = footage("04_2_YourCSV.csv").dataValue([slide+1,0]);`
x1 = (v1/vMax)*100;
First of all there is no 7th column in your CSV so if you reach the 6th value it cant just add 1 and fails. You need to check for that.
Second your second value is compared to the max value of your first array.
• | **Re: ease interpolation based on values** on May 15, 2020 at 4:01:15 pm |
Thanks for helping me guys both of you gave cool tips for the solution.
The first(0) and the last(7 - it's same like the first ) group of data are not important they are just containers. And finally I made it with createPath() not trimming.
here's a gif (the design needs some adjusting but it works)
https://media.giphy.com/media/SULCqXRiwj5AIexNKf/giphy.gif
`slide= thisComp.layer("BarControls").effect("DataGroups")("Slider")+1;`
h = new Array();
for(i=0; i <4; i++) {
h1 = footage("04_2_YourCSV.csv").dataValue([slide,i]);
h.push([h1]);
}
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
vMax = myArrayMax(h);
slide0= thisComp.layer("BarControls").effect("DataGroups")("Slider");
h00 = new Array();
for(i=0; i <4; i++) {
h0 = footage("04_2_YourCSV.csv").dataValue([slide0,i]);
h00.push([h0]);
}
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
v0Max = myArrayMax(h00);
v1 = footage("04_2_YourCSV.csv").dataValue([slide,0]);
v0 = footage("04_2_YourCSV.csv").dataValue([slide0,0]);
x0 = (v0/v0Max)*1353;
x1 = (v1/vMax)*1353;
s0 = Math.floor(slide);
s1 = Math.ceil(slide);
end = linear(slide, s0, s1, x0, x1);
createPath(points = [[0,0], [end,0]], inTangents = [], outTangents = [], is_closed = false);
| |