p5.js如何实现旋转爱心图案的动态效果？

本文共计1653个文字，预计阅读时间需要7分钟。

使用p5.js实现旋转爱心，提供参考内容，整体内容如下：

+ 原图 + 我的实现 + 效果不差的示例，让我们看看实现过程。+ 第一步：+ 分析原图GIF + 原因：原图中旋转速度过快，无法用肉眼观察找到规律。+ 定住旋转过程，寻找规律。

运用p5.js临摹旋转爱心，供大家参考，具体内容如下

原图

我的临摹

效果不错的样子，让我们看看实现过程。

第一步、分析原图GIF

因为原图中旋转速度较快，无法用肉眼直观地找到规律。所以我把gif分解，共90帧，一帧一帧的寻找旋转规律。

从上往下顺序，第一层到第六层。从简单的说起。
第六层：逆时针匀速旋转一圈。
第五层：先逆时针旋转α，速度由v1变为0。再顺时针旋转180°+2α，速度由0变为v2，再变为0。最后逆时针旋转α，速度由0变为v1。（观察原图，我将α设为30°0）
第四层：先逆时针旋转α，再顺时针旋转3×180°+2α，最后逆时针旋转α。速度规律与第五层相同。
第三层：先逆时针旋转α，再顺时针旋转5×180°+2α，最后逆时针旋转α。速度规律与第五层相同。
第二层：先逆时针旋转α，再顺时针旋转7×180°+2α，最后逆时针旋转α。速度规律与第五层相同。
第一层：先逆时针旋转α，再顺时针旋转9×180°+2α，最后逆时针旋转α。速度规律与第五层相同。
（注：使用时记得转化为弧度制。