Lemniscate in Hyperbola: HTML Canvas Animation

Introduction

In this post, we'll look at envelopes of families of curves, and end with an animation! If you can't wait to read it all, jump right to the animation!

Background: String Art

You've probably heard of string art, and seen it too. Something like this:

You can't help marveling at how these shapes emerge from the strings, each of which, by themselves, are no more than a piece of line. That makes a mathematician think of envelopes, and today I'm going to tell you about them, and look at one cool example.

One parameter family of curves

To introduce the thing, let's talk about one parameter family of curves. This is a set of curves of the form $f\left(x,y,c\right)=0$ . You get a member of the family, one individual curve, for each value of $c$. Together they make the family.

To make it more concrete, let's illustrate this with one particular family. Consider a string stretched taut against a post pegged at the origin of the coordinate plane, with its two portions lying along the two axes. Let's also say the length of the string is $1$ unit, and this length is fixed. Now consider a second string stretched taut between the ends of the first string. This string can, however, stretch or shrink. What's the equation of this string?

Say, one end of the first string is at $\left(c,0\right)$ . The other must be at $\left(0,1-c\right)$ . The equation of the second string, then, is

${\displaystyle \frac{x}{c}+\frac{y}{1-c}=1}$

There you have the parameter $c$. By varying $c$ from $0$ to $1$, you get a family of curves (lines, actually, in this case). Let's see what they look like.

Pretty! Notice that they all seem to lie against one curve. I've put the curve in thick red. This red curve is what we call the envelope of this family. For fun, let's put the family and their envelope on the upper right corner of the square too.

Can you see how the picture above was made from copies of this?

Circles on a hyperbola

Now, let's up our game a little. This time the curves in our family will actually be curves. We'll consider a circle that has its center on a hyperbola, and that goes through the origin. By choosing different points on the hyperbola, we get different members of the family of circles. What does this family look like?

Why, if this family isn't enveloped by the famed lemniscate! I've put the hyperbola on which the centers of the circles lie as a dashed curve here so it doesn't mess with the rest of the picture much.

Animate me!

Now, for the finale, we'll let a curve sweep through the family. I'll explain HTML5 animation in a future post, but for now let's just enjoy the sweet animation!

And that's all for today. See you next time!