用p5.js复制动态图形

首先，复制

最近在学习用代码画画，就根据下面的动态图片自己复制了一张图片

对复制结果的观察表明，整个图案由基本规则的六边形组成

首先创建一个画布

函数setup() { createCanvas(400，400)；}画六边形的功能是

函数多边形(x，y，半径，npoits){//画正多边形函数让angle=TWO _ PI/npoits；beginShape()；for(设a=0；一个二；a=角度){让sx=x sin(a) *半径；设sy=y cos(a) *半径；顶点(sx，sy)；} end shape(CLOSE)；}x、y分别代表六边形的位置，半径代表图的边长，n点代表图的边数

发现六边形一直绕着自己的中心旋转，没有发生其他的变换，只需要批量创建六边形并不断旋转即可。

通过循环和平移函数绘制一个六边形

六边形的中心位置通过平移功能不断变化，

通过时间函数，达到连续旋转的效果

完整的代码如下

函数setup() { createCanvas(400，400)；}函数draw() { background(10，10，10)；var t=毫希()/2000；填充(123，0，0)；for(var j=0；j=4；j){ for(var h=0；h=4；h){ push()；平移(宽度*(0.1 j*0.2)、高度*(0.17h * 0.34))；旋转(t)；多边形(0，0，40，6)；pop()；} } for(var I=0；I=5；I){ for(var k=0；k=5；k){ push()；平移(宽度*i*0.2，高度* k * 0.34)；旋转(t)；多边形(0，0，40，6)；pop()；}}}函数多边形(x，y，半径，npoits){//绘制正多边形函数让angle=TWO _ PI/npoits；beginShape()；for(设a=0；一个二；a=角度){让sx=x sin(a) *半径；设sy=y cos(a) *半径；顶点(sx，sy)；} end shape(CLOSE)；}效果图

图形改编

只做了微小的改动，颜色可以随意切换，有一个从小到大的过程

代码如下

函数setup() { createCanvas(400，400)；}函数draw() { background(0，10，200)；var t=5 *毫希()/1000；//填充(211，0，0)；for(var j=0；j=4；j){ for(var h=0；h=4；h){ push()；平移(宽度*(0.1 j*0.2)、高度*(0.17h * 0.34))；旋转(帧数/22.0)；设c2=随机(100，255)；填充(0，c2，0)；if(T50){多边形(0，0，t，6)；} if(t50) { fill(255，0，0)；多边形(0，0，50，6)；} pop()；} } for(var I=0；I=5；I){ for(var k=0；k=5；k){ push()；平移(宽度*(0 i*0.2)、高度*(0k * 0.34))；旋转(帧数/22.0)；设c2=随机(100，255)；填充(0，c2，0)；if(T50){多边形(0，0，t，6)；} if(t50) { fill(0，255，0)；多边形(0，0，50，6)；} pop()；}}}函数多边形(x，y，半径，npoits){//绘制正多边形函数让angle=TWO _ PI/npoits；beginShape()；for(设a=0；一个二；a=角度){让sx=x sin(a) *半径；设sy=y cos(a) *半径；顶点(sx，sy)；} end shape(CLOSE)；}摘要

这个实验让我对代码编程有了初步的了解，逐渐学会了分析问题和解决问题，虽然目前解决的问题还很简单。图形不够有创意。这门课非常有趣。我希望以后能抽出更多的时间学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。