开始第一张“码绘”——使用P5.JS画出旋转的爱心

最新推荐文章于 2024-04-13 12:01:44 发布

我为什么啥都不会

最新推荐文章于 2024-04-13 12:01:44 发布

阅读量2k

点赞数 3

文章标签： p5.js

本文链接：https://blog.csdn.net/kkk17368648771/article/details/102003695

版权

本文介绍了如何使用P5.JS库来绘制旋转的爱心，并实现鼠标交互功能。通过分析爱心结构，定义函数参数简化绘图过程，使用push()和pop()实现每个爱心独立旋转。此外，还展示了如何通过正弦函数让爱心上下移动，增加视觉效果。

摘要由CSDN通过智能技术生成

用P5.JS画出旋转的爱心

首先我们来看看想实现的原图：

在这里插入图片描述

对这张图片进行观察可以发现图中一共有16颗相同的爱心在旋转。

我们拿出其中一个爱心进行分析。

在这里插入图片描述

我们可以发现，这个爱心是由27个正方体构成。

此处应该注意的是：

①是正方体，而不是正方形，应该用box()函数而不是rect()函数，不然无法实现旋转效果；

②选定好第三行第四个正方体作为中心，其他的正方体由第三行的第四个正方体translate()得到；

③因为原图是由16个爱心组成的，如果直接计算坐标绘图，虽然可以做到，但太过繁琐。
在这里，我们设定几个函数参数来简化后面的画图步骤。
（BoxSize,posX,posY,posZ,r,g,b）

BoxSize —— 组成爱心的方块的大小
posX，posY，posZ —— 中心方块与画布中心的偏移量
r，g，b —— 方块颜色的RGB值

将构造一个爱心的方法写成一个函数如下：

function drawHeart(BoxSize,posX,posY,posZ,r,g,b,)
{
   
fill(r,g,b);

translate(posX,posY,posZ);//第三行第四个正方体
box(BoxSize);//translate()函数使用的是偏移量而不是坐标值！
translate(-(10/9)*BoxSize,0,0);//每两个方块间应该有些间距，距离产生美！
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(4*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);

translate(0,-(10/9)*BoxSize,0);//第二行
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);

translate((10/9)*BoxSize,-(10/9)*BoxSize,0);//第一行
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate(2*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);

translate(0,3*(10/9)*BoxSize,0);//第四行
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);

translate((10/9)*BoxSize,(10/9)*BoxSize,0);//第五行
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);

translate(-(10/9)*BoxSize,(10/9)*BoxSize,0);//第六行
box(BoxSize);
}

运行一下，画出来的效果如下图：

在这里插入图片描述

通过在draw()中反复调用画出16个爱心来。

function draw() {
   
  // put drawing code here
background(0);

drawHeart(13,-width/2+80,-height/2+80,0,255,64,64);//这里的posX和posY都是根据效果写的，暂时还没明白是怎么一回事
drawHeart(13,140,-42.5,0,255,140,105);
drawHeart(13,140,-42.5,0,255,64,64);
drawHeart(13,140,-42.5,0,255,14