图形图像中的数学

图形图像中的数学-跳动的红心

2023-01-24 本文已影响0人杜凌霄

跳动的红心

最新一步电视剧里面有程序员写的跳动的红心，不少人私下问我是如何实现的。红心图像如下

heart.jpg

红心中的数学

红心的顶部其实比较简单，左边和右边的心瓣都可以用半圆来构成。

半径为r的标准圆的方程为：
$x^2 + y^2 = r^2$
分别把这个圆的圆心向平移 $(-r, 0), (r, 0)$ 并抛弃 $y<0$ 的部分我们就可以得到红心的上半部分：
$y = \begin{cases} \sqrt{r^2 - (x+r)^2}, & x \in [-2r, 0] \\ \sqrt{r^2 - (x-r)^2}, & x \in [0, 2r] \end{cases}$

halfcircle.png

现在就剩下下半部分。

我们可以看一下 $y = acos(x)$ 的图形

acos.png

看起来非常的像半个心尖了。我们把这个图在x方向向左平移1，向下平移 $\pi$ 就可以得到左半部分的心尖。
$y = acos(x + 1) - \pi$

acos_left.png

右边部分只需要对称一下就好了，最后的公式为
$y = acos(1-|x|) - \pi, x \in [-2, 2]$
这样全部的数学公式就已经完成。

使用上面的公式，文章开头的图其实就已经可以绘制出来了。现在需要解决的问题是，我们怎么心动？

其实稍微分析一下也很简单，无非就是一个缩放。上面的两个半圆半径需要缩放，下面的反正弦函数也缩放一下就好了。半圆公式已经支持不同的半径，我们先把反正弦函数改造如下
$y = \alpha(acos(1-|x/r|) - \pi), x \in [-2, 2]$
其中 $r$ 的半圆的半径，这个半径会跟随时间变化。
$r = r_0 \alpha$
$\alpha$ 是一个随着时间变化的参数。它来控制整体形状的大小，为了变化平滑，我们可以让它为帧号的函数
$\alpha = 1 - 0.2*\cos(t*2)$
这里t是当前的时间戳， $2， 0.2$ 都是根据自己喜好可以调整的，0.2控制大小变化的幅度，2控制变化的速度。

到这里，其实我们的心就已经可以随着时间变化了。

最终结果

编写程序就可以绘制出最终我们想要的红心。这里我使用python分别绘制了边框的红心和填充的红心。使用的函数都是比较简单的，简单实用。

animation.gif

heart_fill.gif

更多文章在公众号“探知轩”发布，欢迎关注。

上一篇下一篇

猜你喜欢

热点阅读