• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Smooth Curves with "createPath" expression

Engaged ,
Dec 19, 2020 Dec 19, 2020

Copy link to clipboard

Copied

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:

johnt53984649_2-1608408396211.png

 

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:

johnt53984649_1-1608408382221.png

 

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)

 

TOPICS
Expressions , FAQ , Performance , Scripting

Views

770

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2020 Dec 19, 2020

Copy link to clipboard

Copied

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)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 19, 2020 Dec 19, 2020

Copy link to clipboard

Copied

@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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2020 Dec 19, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines