Other maths

The rotation properties speak degrees while JavaScript's Math trigonometry speaks radians; these two convert between them. The whole standard Math object is available as well.

degreesToRadians#

degreesToRadians(d: number): number

Degrees to radians.

Determinism: pure.

After Effects equivalent: degreesToRadians.

Worked example: Follow a circular path#

The scene. A gold sun near the centre, a small blue planet above it, and a hidden Rig null carrying the expression controls that steer the scene.

• The comp Orbit: 640 by 360 at 25 fps, 200 frames (8 seconds).
• Sun: a solid layer, at [320, 180], 80 by 80, filled #f2a833.
• Planet: a solid layer, at [320, 60], 30 by 30, filled #4d9de0.
• Rig: a null (an invisible controller host), at [320, 180].
  • An expression control: Speed, a slider (0 to 100, step 1, unit %), set to 40.
  • An expression control: Show planet, a checkbox, set to true.
  • An expression control: Start angle, a angle, set to 90.
  • An expression control: Direction, a dropdown (items Clockwise / Anticlockwise), set to 0.
  • An expression control: Centre, a point, set to [320, 180].
  • An expression control: Target, a layer, set to layer_2.

The script. Add a project script named Orbit and paste:

export const outputs = ["layer_2:transform.position"];

export function frame() {
  const centre = control("Centre").value;
  const start = control("Start angle").value;
  const speed = control("Speed").value;
  const angle = degreesToRadians(start + time * speed * 3.6);
  return [centre[0] + Math.cos(angle) * 120, centre[1] - Math.sin(angle) * 120];
}

Line by line:

• Lines 4-6: Three controls from the Rig steer the whole path: where the circle sits, where on it the planet starts, and how fast it travels. In the editor these strings show the control names; the stored script keeps their ids.
• Line 7: The angle grows with time - at Speed 100 that is 360 degrees per second. Math.cos and Math.sin speak radians, so degreesToRadians() converts the comfortable degree count first.
• Line 8: Cosine gives the x of a point on a circle, sine the y; a radius of 120 pixels draws the path. Subtracting the sine sends the planet anticlockwise, upwards first.

What you see. The planet sweeps a perfect 120 pixel circle around the sun, its pace set by the Speed slider - drag the Centre point control and the whole orbit relocates.

radiansToDegrees#

radiansToDegrees(r: number): number

Radians to degrees.

Determinism: pure.

After Effects equivalent: radiansToDegrees.

Worked example: Aim at the leader#

The scene. A teal leader square keyframed to cross the stage left to right, with an orange follower resting below its start point.

• The comp Leaders: 640 by 360 at 25 fps, 100 frames (4 seconds).
• Leader: a solid layer, at [80, 140], 40 by 40, filled #2ec4b6.
  • Keyframe transform.position at frame 0: [80, 140] (linear).
  • Keyframe transform.position at frame 96: [560, 140] (linear).
• Follower: a solid layer, at [80, 240], 40 by 40, filled #f2a833.

The script. Add a project script named Aim and paste:

export const outputs = ["layer_2:transform.rotation"];

export function frame() {
  const leader_pos = prop("Leader:transform.position").value;
  const gap = sub(leader_pos, prop("Follower:transform.position").value);
  return radiansToDegrees(Math.atan2(gap[1], gap[0]));
}

Line by line:

• Line 5: The vector from the follower to the leader.
• Line 6: Math.atan2 answers the angle of that vector in radians; radiansToDegrees() converts it to the degrees the rotation property speaks. The follower square turns to face the leader as it marches past.

What you see. The follower square rotates continuously to aim at the leader - tipped up-left as the leader starts ahead and above, swinging as it passes.