Smooth Curves with "createPath" expression

Report · Dec 19, 2020

I'm using the "createPath()" function in an expression to generate a parametric curve in after effects and it is quite detailed. I'm not placing very many points to keep it running fast, but unfortunately that means that it looks pretty jagged:

I can solve this by increasing the number of points I use, but this seriously slows down the whole project and is less than ideal. I know that this could be done with fewer points by setting tangents, but naturally those would be very difficult to calculate and highly depend on the particular curve that I"m using (I think I would have to use calculus to differentiate it to calculate the tangents). I'm hoping there's a more general technique to smooth the curve so that it looks something like this:

without taking the performance hit from increasing the number of points too much.

Is there a faster way to smooth the curve, or must I increase the number of points / calculate the tangents with calculus?

This is my expression, if you're curious. The layer is a 4K solid in a 28 second 60fps composition:

P=[];

var height = 2160
var width = 3840
var R = 320
var pi = Math.PI;
for (i=0;i<R;i++)
{
var z = pi*(2*i/(R-1) - 1);
var tt = 2*time*Math.PI/56;
var xp = 1500*Math.sin(7*pi*z + tt)*Math.cos(4*pi*z - tt) + width/2;
var yp = 1500*Math.sin(5*pi*z - tt)*Math.cos(4*pi*z + tt) + height/2;
P.push([xp,yp]);
}

createPath(P,[],[], false)

Report · Dec 19, 2020

The auto bezier tangent calculation isn't that bad:

P=[];

var height = 2160
var width = 3840
var R = 320
var pi = Math.PI;
for (i=0;i<R;i++)
{
  var z = pi*(2*i/(R-1) - 1);
  var tt = 2*time*Math.PI/56;
  var xp = 1500*Math.sin(7*pi*z + tt)*Math.cos(4*pi*z - tt) + width/2;
  var yp = 1500*Math.sin(5*pi*z - tt)*Math.cos(4*pi*z + tt) + height/2;
  P.push([xp,yp]);
}
iT = [];
oT = [];
for (i = 0; i < P.length; i++){
  prev = (i > 0) ? i-1 : P.length-1;
  next = (i < P.length-1) ? i+1 : 0;
  xT = (P[next] - P[prev])/6;
  oT.push(xT);
  iT.push([-xT[0],-xT[1]]);
}

createPath(P,iT,oT, false)

Report · Dec 19, 2020

@Dan Ebberts , this worked wonderfully! I didn't realize just doing basic vector math like that would work so well. The only thing I don't understand is the division by 6. Do you know where that 6 comes from? As I decrease 6 to 5,4,3,2,1, etc. I noticed that it becomes more jagged, and as I increase 6 to 7,8,9,etc. it also becomes more jagged. What makes 6 the magic number for this?

Report · Dec 19, 2020

I honestly don't remember exactly. My guess is that it was some emperical observation based on how roto-beziers work, but it's possible I just lifted it from somebody else's code.

Dan