SOURCE

let a = 0.0;
let s = 0.0;
let d=  0.0;
function setup() {
  createCanvas(450, 450);
  noStroke();
}

function draw() {
  background(0);

  a = a + 0.04;
  s = cos(a) * 2;
  d = cos(a+Math.PI) * 2;
  
  //左上开始的黑方块
  push();
  scale(s);
  fill(random(0,255));
  rect(0, 0, 50, 50)
  rect(100,0,50,50);
  rect(50,50,50,50);
  rect(150,50,50,50);
  rect(100,100,50,50);
  rect(0,100,50,50);
  rect(150, 150, 50, 50);
  rect(50,150,50,50);
  rect(200,200,50,50);
  rect(100,200,50,50);
  pop();
  
  //右上开始的白方块
  push();
  translate(400, 0);
  fill(random(0,255));
  scale(d);
  rect(-50, 0, 50, 50);
  rect(-150,0,50,50);
  rect(-100,50, 50, 50);
  rect(-200,50,50,50);
  rect(-150,100,50,50);
  rect(-50,100,50,50);
  rect(-200,150,50,50);
  rect(-100,150,30,30);
  pop();
  
  //右下开始的白方块
  push();
  translate(400,400);
  fill(random(0,255));
  scale(s);
  rect(-100,-50,50,50);
  rect(-200,-50,50,50);
  rect(-50,-100,50,50);
  rect(-50,-200,50,50);
  rect(-150,-200,50,50);
  rect(-200,-150,50,50);
  rect(-100,-150,50,50);
  rect(-150,-100,50,50);
  pop();
  //左下开始的黑方块
  push();
  translate(0,400);
  fill(random(0,255));
  scale(d);
  rect(0,-100,50,50);
  rect(0,-200,50,50);
  rect(100,-200,50,50);
  rect(150,-150,50,50);
  rect(50,-150,50,50);
    rect(100,-100,50,50);
    rect(50,-50,50,50);
  rect(150,-50,50,50);
  pop();
}

<script src=“https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js”></script>