Tutorial 35: Three Body Problem

How do you keep 3 ellipses orbiting around each other, without separating or crossing each other’s boundaries, while they scale in size? Answer – Math. Lots of it. And the best part, you can get it all done in Cavalry with JS Math Nodes. Also, you should refer to JavaScript Cheat Sheet here, as well.

Setup

General idea on solving this problem is to use parenting. I used one ellipse (C0), as the main ellipse that will control overall position of the whole group. The other two ellipses, are simply offset from each other and from main ellipse using math. This has two benefits:

  • We can easily reposition whole group as a whole
  • We “lock” one of the variables – position of main Ellipse – this makes it easier to use native Cavalry tools, without writing complex JavaScript code

At the end, whole principle rest on a trigonometry – we calculate distance between each ellipse, offset them from each other and reposition them based on their angles, relative to each other.

Math Formulas

Here are all the formulas and calculations used in creating the animation.

Calculate Side Lengths

We are using Radius of each circle to calculate side lengths of a triangle.

\( a = R_{0} + R_{1}\\ b = R_{0} + R_{2}\\ b = R_{1} + R_{2}\\ \)

Circle 0 Position

This circle will control overall position of the entire animation.

\( C_{0} = (o,o) \)

Circle 1 Position

By parenting the Circle 1 to Circle 0, we force Circle 1 to use Circle 0 coordinates. We can easily offset C1 by sum of both radii.

\( C_{1} = (a,o) \)

Compute the Gamma Angle

I think this is the most complex formula to setup in this project. We have to use multiple nodes, run multiple calculations and then write everything in a one JSMath node.

\( \cos\gamma = \frac{a^{2} + b^{2} - c^{2}}{2ab} \)

Clamp Gamma Angle

Things get easy from now on. We need to clamp or convert Gamma Angle to values between -1 and 1. Essentially, we normalize the values for later use.

\( \cos\gamma = \max(-1, \min(1, \cos\gamma)) \)

Inverse cosine function

At this stage, we will “flip” the previous angle. This will allow us to reposition final Circle 2, away from Circle 1.

\( \gamma = \arccos(\cos\gamma) \)

Inverse cosine function

At this stage, we will “flip” the previous angle. This will allow us to reposition final Circle 2, away from Circle 1.

\( C_{2} = (b\cos\gamma, b\sin\gamma) \)

Examples

Get Project File From Gumroad

This project file contains all the assets necessary to make animation in the tutorial in final form. Everything is labeled, linked, with expressions and ready to use, if you wish to make your own version or just play around with it.

If you have any suggestions for tutorials or how I can improve, please do get in touch. I would love to hear from you.

Found it helpful? Consider sharing it with others.

Other tutorials

2025-12-01T10:56:03+00:00
Go to Top