圖形圖像中的數(shù)學-跳動的紅心

跳動的紅心

最新一步電視劇里面有程序員寫的跳動的紅心，不少人私下問我是如何實現(xiàn)的。紅心圖像如下

heart.jpg

紅心中的數(shù)學

紅心的頂部其實比較簡單，左邊和右邊的心瓣都可以用半圓來構成。

半徑為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

現(xiàn)在就剩下下半部分。

我們可以看一下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]
這樣全部的數(shù)學公式就已經(jīng)完成。

使用上面的公式，文章開頭的圖其實就已經(jīng)可以繪制出來了?，F(xiàn)在需要解決的問題是，我們怎么心動？

其實稍微分析一下也很簡單，無非就是一個縮放。上面的兩個半圓半徑需要縮放，下面的反正弦函數(shù)也縮放一下就好了。半圓公式已經(jīng)支持不同的半徑，我們先把反正弦函數(shù)改造如下
y = \alpha(acos(1-|x/r|) - \pi), x \in [-2, 2]
其中r的半圓的半徑，這個半徑會跟隨時間變化。
r = r_0 \alpha
\alpha是一個隨著時間變化的參數(shù)。它來控制整體形狀的大小，為了變化平滑，我們可以讓它為幀號的函數(shù)
\alpha = 1 - 0.2*\cos(t*2)
這里t是當前的時間戳，2， 0.2都是根據(jù)自己喜好可以調整的，0.2控制大小變化的幅度，2控制變化的速度。

到這里，其實我們的心就已經(jīng)可以隨著時間變化了。

最終結果

編寫程序就可以繪制出最終我們想要的紅心。這里我使用python分別繪制了邊框的紅心和填充的紅心。使用的函數(shù)都是比較簡單的，簡單實用。

animation.gif
heart_fill.gif

更多文章在公眾號“探知軒”發(fā)布，歡迎關注。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容