p5.js动态图形临摹

p5.js动态图形临摹

p5.js动态图形

临摹的动图如下

观察图形，提取规律

基本图形为白色六边形，背景颜色为黑色
六边形是顺时针旋转的，速度有差异，呈向外扩张趋势，内层六边形先旋转，逐渐扩展到外层
六边形每旋转60度会停顿一下，停顿瞬间会形成两种图案，一种是平铺的六芒星，一种是蜂窝形状

平铺的六芒星
蜂窝形状

具体实现过程

画出正六边形

function polygon(x, y, radius,npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a +=angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

让多边形以一定的速率顺时针旋转

function drawpolygon(x,y)
{
  push();
  translate(x,y);
  rotate(frameCount/50.0);
  polygon(0,0,30,6);
  pop();
}

在画布上排列六边形，并调整间距，让每一行的正六边形错开摆放

function draw() {
  background('#222222');//背景颜色
  for(i=0;i<420;i++)
  {
    drawpolygon(i,20);
    drawpolygon(i,120);
     drawpolygon(i,220);
     drawpolygon(i,320);
     drawpolygon(i,420);
     drawpolygon(i,520);
    i+=58;
  }
  for(j=27;j<400;j++)
  {
    drawpolygon(j,70);
    drawpolygon(j,170)
    drawpolygon(j,270)
    drawpolygon(j,370)
    drawpolygon(j,470)
    j+=58;
  }
}

最终图形

图形扩展

改变多边形边数和旋转方向，让正三角形和正六边形隔行排列，正六边形顺时针旋转，正三角形逆时针旋转

小结

这个动态图形的临摹还不是很像，对于正六边形的旋转还不能很好的控制，暂时只能让所有的正六边形以一样的方式旋转。