利用p5.js实现动图的临摹与拓展

互动媒体艺术的课程让我们用p5.js实现对gif的临摹，如图所示:

 

这是我最终实现的效果：

好像从肉眼来说看上去好像是一样的；

下面我们来介绍一下我们是如何实现利用p5.js实现用代码对于动图的重现

一、首先我们在ps中拾取黑色和灰色的RBG值供我们在给方块上色使用

二、然后我们再寻找其中的规律，由于一开始在用眼睛慢慢观察的时候会让眼睛十分的不舒服，然后我用ps打开这个GIF的每一帧以便更好的观察其中的规律；然后总结到如下的规律：

1、该动图大概分为一个周期的两次变化，前半个周期是在黑色背景下灰色方块的变化有一个短暂的停留，后半个周期是在灰色的背景下黑色方块的变化有一个短暂的停留。

2、方块在缩放的过程中是从左上角开始运匀速向右下角进行。

观察到大致的规律以后就要进行一些计算：

该匀速运动是一种正弦的运动其中会有一定的相位差和周期之间的变化

二、我是利用https://editor.p5js.org/的网页编程

三、最后我们附上源码：

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
}

function draw() {
  //消去边框
  noStroke();
  
  //给方块调色
  let gray=color(220,220,210);
  let black=color(38,38,38);
 
  
  var T=2880; 
  var temp=millis()%T;
  
  //前半个周期为灰色背景，黑色方块，后半个周期相反
  if(temp<T/2){    
    drawSquare(gray,black,T,false);   
  }
  else {
      drawSquare(black,gray,T,true);    
  }  
}

function cycle(i,j,T){   //方块大小变换周期
   
    var residuetime=millis()%T-(i+j)*50;  //大于周期的剩余时间
    
    if(residuetime>=0&&residuetime<PI*200)
    {
      return (50-25*sin(residuetime/200));
       
    }
    else if((residuetime>=T/2&&residuetime<T/2+PI*200))
    {
       return (50-25*sin((residuetime-T/2)/200));
    }
    else 
      return 50;
    
  }

function drawSquare(back_clr,fill_clr,T,overturn){
  
    background(back_clr);   //底色
    fill(fill_clr);        //填充色
     for(var i=0;i<8;i++){      //循环绘制方块
        for(var j=0;j<8;j++){ 
          
          var sum =i+j;            //i+j总和
            var Dangdraw=(sum%2===1);//选择行数
          
              var size=cycle(i,j,T);//方块大小
      
              if(Dangdraw){  
                  if(!overturn){
                    rect(i*50+25,j*50+25,size,size);
                    }
              }
             else{
                if(overturn){
                      rect(i*50+25,j*50+25,size,size);
                }
              }
        }
      }
}