How do Spatial Tangents Work (After Effects Scripting)?

[johnt53984649]

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:

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?

[Dan Ebberts · Accepted solution]

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

[stib]

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.