使用使用p5.js临摹动态图形临摹动态图形
一、临摹一、临摹
最近正在学习用代码绘图,于是按照下面的动态图形自己临摹了一幅图形
临摹结果临摹结果
观察发现,整个图案都是由基础的正六边形组成
首先创建一个画布
function setup() {
createCanvas(400, 400);
}
画六边形的函数为
function polygon(x, y, radius, npoints) {//绘制正多边形函数
let angle = TWO_PI / npoints;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + sin(a) * radius;
let sy = y + cos(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}
x,y分别表示六边形的位置,radius表示图形的边长,npoints表示图形的边数
发现六边形一直在绕着自己的中心旋转,并未发生其他变换,因此只需要将六边形批量创建,并使它不断旋转即可。
通过循环以及平移函数画出六边形
通过translate函数不断更改六边形的中心位置,
评论0