Skip to main content
johnt53984649
Inspiring
April 29, 2019
Answered

How do Spatial Tangents Work (After Effects Scripting)?

  • April 29, 2019
  • 2 replies
  • 1182 views

Consider the problem of making a layer move along a perfectly circular path about the center of the composition.  I found that this seems to be possible by manually choosing the value of the spatial tangents at points of the circle using scripting:

var width = 1920

var height = 1080

mycomp = get_comp_by_name("BACK")

var testlayer = mycomp.layers[1]

var radius = 150

var x_offset = width/2

var y_offset = height/2

var magicRatio = 9/16

mycomp.layers[1].property("Position").setValueAtTime(framesToSeconds(0), [-radius + x_offset, 0 + y_offset])

mycomp.layers[1].property("Position").setValueAtTime(framesToSeconds(100), [0 + x_offset, radius + y_offset])

mycomp.layers[1].property("Position").setValueAtTime(framesToSeconds(200), [radius + x_offset, 0 + y_offset])

mycomp.layers[1].property("Position").setValueAtTime(framesToSeconds(300), [0 + x_offset, -radius + y_offset])

mycomp.layers[1].property("Position").setValueAtTime(framesToSeconds(400), [-radius + x_offset, 0 + y_offset])

mycomp.layers[1].property("Position").setSpatialTangentsAtKey(1, [0, -radius*magicRatio, 0], [0, radius*magicRatio, 0])

mycomp.layers[1].property("Position").setSpatialTangentsAtKey(2, [-radius*magicRatio, 0, 0], [radius*magicRatio, 0, 0])

mycomp.layers[1].property("Position").setSpatialTangentsAtKey(3, [0, radius*magicRatio, 0], [0, -radius*magicRatio, 0])

mycomp.layers[1].property("Position").setSpatialTangentsAtKey(4, [radius*magicRatio, 0, 0], [-radius*magicRatio, 0, 0])

mycomp.layers[1].property("Position").setSpatialTangentsAtKey(5, [0, -radius*magicRatio, 0], [0, radius*magicRatio, 0])

This will make the layer move in a perfect circle around the center of the composition with a radius of 150 pixels.  We can see this as the result:

KqT2qwV.png

But you'll notice I have this "magicRatio" of 9/16 defined in the code.  I verified that it has nothing to do with the composition aspect ratio or the layer's aspect ratio; irrespective of those, a perfect circle is always produced.  I only found that ratio by trial and error.

So here's my question: why 9/16?  How exactly does setSpatialTangentsAtKey() work?

This topic has been closed for replies.
Correct answer Dan Ebberts

The magic ratio is  actually more like 0.5523, or  (4/3)*tan(pi/8). See this post:

bezier - How to create circle with Bézier curves? - Stack Overflow

Dan

2 replies

stib
Inspiring
September 17, 2019
mycomp.layers.property("Position").expression = "let r = " + radius + "; let spd = " + framesToSeconds(100) + " * Math.PI; [Math.sin(time / spd), Nath.cos(time / spd) ] *  r"

 

That would give the layer an expression that would generate a perfectly circular motion.

Dan Ebberts
Dan EbbertsCorrect answer
Community Expert
April 29, 2019

The magic ratio is  actually more like 0.5523, or  (4/3)*tan(pi/8). See this post:

bezier - How to create circle with Bézier curves? - Stack Overflow

Dan