Implementing Catenaries for Games

This is the second part of the series dedicated to the catenary, the mathematical object used to model hanging wires, cables and chains. This post will show how to implement catenaries in a game engine like Unity.

Part 1. The Mathematics of Catenary
Part 2. Implementing Catenaries for Games

You can find the Unity package to create catenaries in Unity at the end of the post.

In the previous part of this short online course, we have introduced catenaries. A catenary is a mathematical objects that can be used to model chains anchored between two points.

The simplest equation for a catenary is expressed in terms of $\cosh$ , the hyperbolic cosine. Loosely speaking, that is the equivalent of the more well-known cosine function, but on a hyperbola rather than a circle.

The equation of a catenary is:

(1) $\begin{equation*} y=a \cosh{\left(\frac{x-p}{a}\right)}+q\end{equation*}$

and has three parameter:

$a$ : the size/scale;
$p$ : the horizontal shift;
$q$ : the vertical shift.

Since many games features hanging wires and chains, getting catenaries right is pretty much critical. A friendly tool should allow to place a chains from three pieces of information:

Two points, $P_1=\left(x_1, y_1\right)$ and $P_2=\left(x_2, y_2\right)$ , which the chain has to pass through;
The length of the chain between $P_1$ and $P_2$ is $l$ .

We can satisfy these constraints by carefully selecting the three parameters of (1):

(2) $\begin{equation*} p=\frac{x_1+x_2-a \ln{\left(\frac{l+v}{l-v}\right)}}{2}\end{equation*}$

(3) $\begin{equation*} q=\frac{y_1+y_2-l \coth{\left(\frac{h}{2a}\right)} }{2}\end{equation*}$

where:

(4) $\begin{equation*}\begin{split}h & = x_2 - x_1 \\v & = y_2 - y_1 \\\end{split}\end{equation*}$

One major problem is $a$ , which unfortunately cannot be expressed in a closed-form. In a nuthsell, it means that there is no easy equation that can be derived to calculate $a$ as we did for $p$ and $q$ .

The rest of this post will explore alternative ways to calculate $a$ .

Finding a…

While it is true that there is no closed-form for $a$ , it is possible to derive the following equation:

(5) $\begin{equation*} \sqrt{l^2-v^2}=2 a \sinh{\left(\frac{h}{2 a}\right)}\end{equation*}$

As it turns out, this is a transcendental equation from which $a$ cannot be extracted directly. This means that, no matter how hard we try, it is not possible to rewrite (5) in such such a way that the equation looks like $a=...$ , where $a$ does not appear on the right-hand side. The best we can do is to bring all of the variables on one side. There might be way to rewrite (5) that allow to do that, but they will all require an infinite number of operations (such as an infinite series or an integral).

For this reason, we need a different way must be taken in order to find the value of $a$ . Luckily for us, this particular transcendental equation is easy to solve.

Geometrically speaking, solving (5) is not that complicated: equating two functions means plotting and finding the point in which they touch. This is particularly easy to visualise for (5), since the left-hand side of the equation ( $\sqrt{l^2-v^2}$ ) is a constant value, which we can imagine as a straight, horizontal line. At some point, it will intersect the curve drawn by the right-hand side of equation (5) ( $2 a \sinh{\left(\frac{h}{2 a}\right)}$ ). The x-coordinate of that point is the elusive value of $a$ we are looking for.

The chart below plots the two sides of (5) when $h=v=1$ and $l=2$ , which results in a value of $a$ approximately equal to $0.2613328$ :

Numerical Integration

In general, finding the intersections of two functions is a rather complex problems, and there are is guarantee that a single point exists. In this specific case, however, we can guarantee that exactly one solution in the range $\left(0, +\infty\right)$ does exist.

We can prove that by studying both functions involved:

$\sqrt{l^2-v^2}$ is a constant value which is the result of a square root; it means it is strictly positive;
$2 a \sinh{\left(\frac{h}{2 a}\right)}$ is monotonically decreasing in the interval $\left(0, +\infty\right)$ , and tends to $+\infty$ when $a$ tends to $0$ .

This means that, at some point, $2 a \sinh{\left(\frac{h}{2 a}\right)}$ will decrease enough to reach $\sqrt{l^2-v^2}$ .

With this knowledge, we can already come up with a simple algorithm to estimate $a$ : starting with $a=0$ as a first guess, we can increase its value by a small amount until $\sqrt{l^2-v^2} \geq 2 a \sinh{\left(\frac{h}{2 a}\right)}$ :

const double IntervalStep = 0.01;
double a = 0;
do
{
    a += IntervalStep;
}
while (Math.Sqrt(Math.Pow(l, 2) - Math.Pow(v, 2)) < 2 * a * Math.sinh(h/(2*a)));

The precision of this method can be increased by using a smaller increment for a.

While this works, it is very slow and it can take several tens of thousands of iterations, even for a relatively small catenary.

Bisection Method

A better approach relies on two steps. First, we can find a rough estimate using the method shown above (for instance, using IntervalStep = 1.0;). This helps us finding an interval an interval in which the right value of $a$ will definitely lie. Then, we can run a more sophisticated approach to refine the our guess.

There are many techniques to find the solution of an equation that lies in an interval. In this case, a simple and effective one is the bisection method, which many programmers will recognise as a variant of the binary search algorithm.

We can understand how it work with the help of a simple example. Let’s imagine that you are trying to find a specific word in a dictionary. Your best guess is to open the dictionary on an arbitrary page: let’s say exactly in the middle. Perhaps you have been lucky, and the word you were searching for is just there; more likely, it will not. But since al words are in order, you can now tell in which half of the dictionary you need to keep searching.

Now, you can ignore the other half and repeat the procedure again, opening the dictionary in the middle of the section you know has to contain the word. By repeating this many times, you will eventually reach to the page containing the word you are looking for. With every iteration, the binary search algorithm halves the search space. This is way more efficient than linearly searching for the desires item in a list starting from its first element.

The same method can be used here. We have an interval in which the solution should be (let’s call it a_prev, a_next), and we can iteratively split it in two halves, repeating the process until the interval size is arbitrarily small. When this is running on an actual machine, it is very unlikely we will find the exact, theoretical value of $a$ . This is because of rounding errors resulted from the way modern computer are storing numbers. You can read more about this on a series of articles dedicated to Floating-Point Arithmetic.

In our case, we know which half of the interval we should keep searching, because on one side $a \sinh{\left(\frac{h}{2 a}\right)}$ is greater than $\sqrt{l^2-v^2}$ , while on the other the opposite is true.

const float Precision = 0.0001;

double a_prev = a - IntervalStep;
double a_next = a;

do
{
    a = (a_prev + a_next) / 2f;

    if (Math.Sqrt(Math.Pow(l, 2) - Math.Pow(v, 2)) < 2 * a * Math.sinh(h/(2*a)))
        a_prev = a;
    else
        a_next = a;
} while (a_next - a_prev > Precision);

If we want to be extra safe, we could also add another condition to make sure that we exit after a maximum numbers of iterations.

A Practical Example

The interactive charts below allow to play with the parameters of a catenary: one of its anchor points, $P_2$ and the chain length $l$ . In the second chart you can see both $\sqrt{l^2-v^2}$ and $2 a \sinh{\left(\frac{h}{2 a}\right)}$ plotted. The x-coordinate of point in which they touch is $a$ .

$P_2^x$	5
$P_2^y$	5
$l$	25
$a$	25

This is facilitated by the fact that $2 a \sinh{\left(\frac{h}{2 a}\right)}$ is a rather well-behaved function. Since it is monotonically decreasing, and the part we are interested on is in the first quadrant. Starting with a low estimate of $a=0$ , we can simply increase its value little by little, until the value of the function becomes smaller than $\sqrt{l^2-v^2}$ . A more sophisticated approach could use binary search to speed up the search.

If you are interested in a more detailed analysis of how to solve (5) numerically, you can have a look at this article on StackExchange.

From 2D to 3D…

…

Conclusion

This post concludes our journey to explore the mathematics and implementation of catenaries in videogame.

Part 1. The Mathematics of Catenary
Part 2. Implementing Catenaries for Games

Download Unity Package

Become a Patron!

There are two different Unity packages available for this tutorial. They contain a simple library to draw efficiently catenaries, which you can use in your games. Both packages are available through Patreon.

The Standard package contains the scripts to draw catenaries in 3D and 3D, along with a test scene. The Advanced package contains support for rigged models (such as corded cables or chains), along with some advanced code to sample catenaries uniformly.

Feature	Standard	Advanced
Catenary 2D	✅	✅
Catenary 3D	✅	✅
Rigged Model Support	❌	✅
Cable Shader	❌	✅

💖 Support this blog

This website exists thanks to the contribution of patrons on Patreon. If you think these posts have either helped or inspired you, please consider supporting this blog.

Follow @AlanZucconi

📧 Stay updated

You will be notified when a new tutorial is released!

📝 Licensing

You are free to use, adapt and build upon this tutorial for your own projects (even commercially) as long as you credit me.

You are not allowed to redistribute the content of this tutorial on other platforms, especially the parts that are only available on Patreon.

If the knowledge you have gained had a significant impact on your project, a mention in the credit would be very appreciated. ❤️🧔🏻

Published

December 13, 2020

Alan Zucconi in Uncategorized | December 13, 2020