P5.js动态图形描摹以及拓展

创意编程作业

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

每一个都是四个圆构成的一个框架，中间是一个正方形分成四个扇形进行旋转，每一个扇形都是在圆里进行旋转的。对角的扇形运动方向是一致的。

绘制图案

由图形运动规律可知，方格绘制并非直接绘制圆和正方形，而是 依据周期分为两次绘制：绘制黑背景白方框

再对图形进行填充色，填充色是运用了fill函数

并且用了正弦函数用于返回自程序开始来的毫秒数

正弦函数

绘制圆的函数

绘制矩形的函数

完全代码与生成

代码：

function setup() {
   createCanvas(600,600);
   frameRate(25);
}
function draw() {
  background(0);
         var dx=0
  dx+=PI/180;
  var recS = 48.75;
  var t=(millis()/20)*sin(dx);
  if(dx==PI)
  {
   dx=0;
  }
  for(var i=0;i<6;i++)
   {
    for(var j=0;j<6;j++)
    {
     fill(255);
     ellipse(i*100+50, j*100+50, 95, 95); 
     fill(0);
    translate(i*100+50, j*100+50);
     if(i%2==0&&j%2==0)
     {
      rotate(-t);
      rect(0,0,recS,recS); 
     }
     else if(i%2==1&&j%2==0)
     {
      rotate(t);
      rect(-recS,0,recS,recS); 
     }
     else if(i%2==1&&j%2==1)
     { 
      rotate(-t);
      rect(-recS,-recS,recS,recS); 
     }
     else
     { 
      rotate(t);
      rect(0,-recS,recS,recS); 
     }
    resetMatrix();
    }
   }
}

生成截图：

拓展

圖片截圖：

其中旋转的函数rotate，在拓展中旋转的是矩形

背景不是圆而是多个矩形构成的背景

完整代码：

function setup() {
   createCanvas(600,600);
   frameRate(25);
}
function draw() {
  background(0);
         var dx=0
  dx+=PI/180;
  var recS = 48.75;
  var t=(millis()/20)*sin(dx);
  if(dx==PI)
  {
   dx=0;
  }
  for(var i=0;i<6;i++)
   {
    for(var j=0;j<6;j++)
    {
     fill(255);
     rect(i*100+50, j*100+50, 95, 95); 
     fill(0);
    translate(i*100+50, j*100+50);
     if(i%2==0&&j%2==0)
     {
      rotate(-t);
      ellipse(0,0,recS,recS); 
     }
     else if(i%2==1&&j%2==0)
     {
      rotate(t);
      rect(-recS,0,recS,recS); 
      }
    
     else
     { 
      rotate(t);
      rect(0,-recS,recS,recS); 
     }
    resetMatrix();
    }
   }
 }

總結

這次對代碼和函數有了進一步認識，通过这次实验的亲身操作和实践，学习掌握了许多原本不知道的或者不太熟悉的地方。所以下次课的时候一定要更认真的听讲，争取把所有的东西都搞懂。