I want to write some code that will "merge" two circles into each other. Let me illustrate:
I want the red circle to move toward the blue circle, in order to have the exact same size and position as the blue circle after, say, $n$ steps. But, as you can see in the picture, the top-left corner has to cover a lot more distance than the bottom-right corner.
Any ideas on this?
At every step move the center of the blue circle by $\Delta x$ towards the center of the red circle, and at the same time increase the radius of the blue circle by $\Delta r$. Choose $\Delta x$ and $\Delta r$ in such a way that after $n$ steps the two circles have the same center and the same radius.
Simple proportions will achieve your goal.
Suppose that the red circle (with center $A$ and radius $a$) is moving onto the blue circle (with center $B$ and radius $b$). As the distance between the centers decreases, we proportionally decrease the difference between the radii. Specifically, for $n$ steps, write $P_k$ for the position of the center of the moving circle at step $K$ (so, $P_0 = A$ and $P_n = B$; also, write $r_k$ for the radius of that circle (so, $r_0 = a$ and $r_n = b$. Then we have this key relation:
$$\frac{|\overline{P_kB}|}{|\overline{AB}|} = \frac{a-r_k}{a - b} = \frac{n-k}{n} \tag{$\star$}$$
(Double check that this works as expected for $k=0$ and $k=n$.) We can solve $(\star)$ for the changing radius, getting $$r_k = a + \frac{k}{n}(b-a) \tag{1}$$ (So, at $k=0$, the right-hand side is simply $a$. With each step, we subtract more and more bits of $a$ while adding more and more bits of $b$, until, at $k=n$, there's no $a$ remaining, only $b$.) Likewise, we can write the vector equation for the moving center: $$P_k = A + \frac{k}{n}\left(\; B-A \;\right) \tag{2}$$ with the arithmetic done coordinate-wise, as in $$P_k = (x_k, y_k) = \left(\;x_A + \frac{k}{n}\left(\; x_B - x_A \;\right)\;,\;y_A + \frac{k}{n}\left(\;y_B - y_A\;\right)\;\right) \tag{3}$$ where $A := (x_A,y_A)$ and $B:=(x_B,y_B)$.
Note: You'll notice that all the equations above share this form: $$\text{start} + t (\,\text{end}-\text{start}\,) \tag{4}$$ As $t$ moves from $0$ to $1$, expression $(4)$ generates values from "start" to "end" (and beyond, if we extend the range of $t$). When $t$'s movement is steady, the transition is as well; when $t$ "eases in" and/or "eases out" at its endpoints, or bounces back and forth between them, or, or, or, ... the transition reflects this behavior. If you're going to be coding a lot of animations, then you'll want to become familiar with $(4)$.
