What's the math of shape morphing?

Question

Imagine I have an arbitrary shape, say $ f(x) = x^2 $ and I want to morph this curve to $ f(x) = x^3 $ by morphing the curve or even a square to a circle or visa versa, just something that I have the equation for to another thing that I also has the equation for,

Visual example in this video made by using manim

How does it "generically" transforms any shape, with a deformation animation that's not hardcoded per equation, what's the maths behind this pure magic ? every single result I found was research maths papers that I was not able to even read the first page, I wonder if there's a simpler solution, or at least a simpler explanation for the same papers, any resource that I could use for this one.

More examples are in the official docs of MorphSVG JS plugin of GSAP

They literally take any shape and make some kind of deformation then change to the new shape, assuming we have the first shape points, we end up with a nice animation, clearly not the same as manim but it's still good.

Someone just take my hand and put it on a cover of a good book or even the field of maths that can help me with this one, my Maths is mostly practical (senior engineering student maths)

EDIT: thanks everyone for replying, I got it now, would this idea scale to 3d ?

Answer 1

One common and simple way is to do a linear combination that continuously transitions from one curve to the other. To that end, introduce an additional parameter $t\in[0,1]$. For example,

$$f_t(x) = (1-t)x^2 + tx^3$$

$f_0$ is a parabola and $f_1$ is a cubic. Here is a Desmos plot with more examples like square ↔ circle. Just play around with the sliders.

One of the square ↔ circle examples uses $$|y|^z = a^z+|x|^z$$ For some constant "radius" $r$. For $z=1$ it's a square, for $z=2$ it's a circle, and for $z\to\infty$ it's a square again.

Answer 2

The way that the thing you've pointed to works is to take the two paths describing the two shapes, break them into even pieces, assign the piece to near pieces on the other shape, and then create a lot of intermediate paths between the two paths with a formula of the form $$ r_i=(1-t) p_i+t q_i $$ where $p_i$ are the points on the "from" path and $q_i$ are the points on the "to" path, and $t$ varies between $t=0$ for the original shape, and $t=1$ for the final shape, with $t=0.5$ being the "midway point".

Assigning the points $p_i$ to $q_j$ is probably a matter of calculating the total distance $$ \sum_i |p_i-q_{i+o}| $$ for an offset $o$ between $i$ and $j$ and finding the value of $o$ which minimises that, assuming you have the same number of points on both paths. The subscript $i+o$ here would be "modulo" the total number of points in the "to" line.

Anyway, a simple "morphing" between two line shapes doesn't require any fancy mathematics beyond engineering maths. It probably doesn't require any calculus. You could probably program a simple system fairly easily.