码绘—动态图形临摹

动态图形临摹

主题：从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展

临摹对象以及临摹成果

对象

成果

临摹过程

观察规律

这个动态图案中总共有19个正六边形，除中心的正六边形外，都在进行一定的变化，这个图案总结为四层，第一层就是中心层，只有一个正六边形，还没有变化，第二层，为中心层外十二个组成六芒星的正六边形，它们从中心层边缘放大，同时平移至既定位置，第三层，是里中心层最近的六个正六边形，它们向外进行平移，远离中心层，第四层，是外围十二个正六边形，它们向外平移，逐渐接近画布边缘，同时变小直至消失。

代码

正六边形

最开始，当然要先构造正六边形：

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

为了让它们能动起来，需要定义个时间

var T=36000; 
var M=millis()%T;
var time=(M/36)%53;

然后一层一层地做出来，第一层：

polygon(400,400,50,6);

第二层：

  polygon(350-time,400,time,6);
  polygon(450+time,400,time,6);
  polygon(375-time/2,340-time/2,time,6);
  polygon(425+time/2,340-time/2,time,6);
  polygon(300-time,340-time/2,time,6);
  polygon(500+time,340-time/2,time,6);
  polygon(400,280-time,time,6);
  polygon(425+time/2,460+time/2,time,6);
  polygon(500+time,460+time/2,time,6);
  polygon(375-time/2,460+time/2,time,6);
  polygon(300-time,460+time/2,time,6);
  polygon(400,520+time,time,6);

第三层：

  polygon(300-2*time,400,50,6);
  polygon(500+2*time,400,50,6);
  polygon(450+time,315-17*time/10,50,6);
  polygon(350-time,315-17*time/10,50,6);
  polygon(350-time,485+17*time/10,50,6);
  polygon(450+time,485+17*time/10,50,6);

第四层：

  polygon(500+3*time,570+3*time,50-time,6);
  polygon(300-3*time,570+3*time,50-time,6);
  polygon(500+3*time,230-3*time,50-time,6);
  polygon(300-3*time,230-3*time,50-time,6);
  polygon(200-4*time,400,50-time,6);
  polygon(600+4*time,400,50-time,6);
  polygon(400,570+2*time,50-time,6);
  polygon(400,230-2*time,50-time,6);  
  polygon(250-2*time,485+2*time,50-time,6);
  polygon(550+2*time,485+2*time,50-time,6);  
  polygon(250-2*time,315-2*time,50-time,6);
  polygon(550+2*time,315-2*time,50-time,6);

因为图片中，每一次变换中间有个间隔，于是加了个条件，能有个停顿：

if(time<=50)
  {
  ...
  }
  else
  {
    polygon(600,400,50,6);
    polygon(200,400,50,6);
    polygon(500,400,50,6);
    polygon(300,400,50,6);
    
    polygon(250,485,50,6);
    polygon(550,485,50,6);
    polygon(250,315,50,6);
    polygon(550,315,50,6);
    polygon(450,485,50,6);
    polygon(350,485,50,6);
    polygon(450,315,50,6);
    polygon(350,315,50,6);
    
    polygon(400,570,50,6);
    polygon(300,570,50,6);
    polygon(500,570,50,6);
    polygon(400,230,50,6);
    polygon(300,230,50,6);
    polygon(500,230,50,6);
  }

总代码如下：

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(0);
  noStroke();  //没有描边
  var T=36000; 
  var M=millis()%T;
  polygon(400,400,50,6);
  var time=(M/36)%53;
  if(time<=50)
  {
  polygon(350-time,400,time,6);
  polygon(450+time,400,time,6);
  polygon(375-time/2,340-time/2,time,6);
  polygon(425+time/2,340-time/2,time,6);
  polygon(300-time,340-time/2,time,6);
  polygon(500+time,340-time/2,time,6);
  polygon(400,280-time,time,6);
  polygon(425+time/2,460+time/2,time,6);
  polygon(500+time,460+time/2,time,6);
  polygon(375-time/2,460+time/2,time,6);
  polygon(300-time,460+time/2,time,6);
  polygon(400,520+time,time,6);
 
  polygon(300-2*time,400,50,6);
  polygon(500+2*time,400,50,6);
  polygon(450+time,315-17*time/10,50,6);
  polygon(350-time,315-17*time/10,50,6);
  polygon(350-time,485+17*time/10,50,6);
  polygon(450+time,485+17*time/10,50,6);
  
  polygon(500+3*time,570+3*time,50-time,6);
  polygon(300-3*time,570+3*time,50-time,6);
  polygon(500+3*time,230-3*time,50-time,6);
  polygon(300-3*time,230-3*time,50-time,6);
  polygon(200-4*time,400,50-time,6);
  polygon(600+4*time,400,50-time,6);
  polygon(400,570+2*time,50-time,6);
  polygon(400,230-2*time,50-time,6);  
  polygon(250-2*time,485+2*time,50-time,6);
  polygon(550+2*time,485+2*time,50-time,6);  
  polygon(250-2*time,315-2*time,50-time,6);
  polygon(550+2*time,315-2*time,50-time,6);
  }
  else
  {
    polygon(600,400,50,6);
    polygon(200,400,50,6);
    polygon(500,400,50,6);
    polygon(300,400,50,6);
    
    polygon(250,485,50,6);
    polygon(550,485,50,6);
    polygon(250,315,50,6);
    polygon(550,315,50,6);
    polygon(450,485,50,6);
    polygon(350,485,50,6);
    polygon(450,315,50,6);
    polygon(350,315,50,6);
    
    polygon(400,570,50,6);
    polygon(300,570,50,6);
    polygon(500,570,50,6);
    polygon(400,230,50,6);
    polygon(300,230,50,6);
    polygon(500,230,50,6);
  }
}
function polygon(x, y, radius, numberOfPoints) {
    var angle = TWO_PI / numberOfPoints;
    beginShape();
    for (var a = 0; a < TWO_PI; a += angle) {
        var sx = x + sin(a) * radius;
        var sy = y + cos(a) * radius;
        vertex(sx, sy);
    }
    endShape();
}

拓展

完成了临摹，感觉黑白颜色过于单调，拓展就加了点颜色，如下：