使用p5.js画一幅动态图

例子效果

思路

首先看到，示例动图由五个静止的长方形和四个旋转的正方形组成。
其次观察到这幅动图很有层次感，每个正方体压在前一个长方形，并被后面的长方形压住，所以在绘制图形是要注意层次。
最后就是正方形的旋转方式，是绕着中心旋转。

使用的方法

frameRate();frameRate
fill();fill
rect();rect
translate();translate
rotate();rotate
resetMatrix();resetMatrix
millis();millis
sin();sin

实验代码

function setup() {
   
  createCanvas(500, 400);
  frameRate(30);
}

function draw() {
   
  background(220);

  //11111111111
  noStroke();
  fill('#682708');
  rect(0,0,100,400);
  var x1=0
  x1+=PI/180