count = 0

const boxSize = 100,

  maxSteps = 4

const halfBox = boxSize / 2,

  speed = 0.05,

  maxDistance = boxSize * maxSteps

​

function setup() {

  createCanvas(800, 800, WEBGL);

}

​

function draw() {

  background(220);

  orbitControl()

  normalMaterial()

​

  //re-center

  translate(-maxDistance / 2, 0)

​

  //initial left

  createBox()

​

  //right box

  push()

  rotateY(HALF_PI)

  createBox(0, 0, maxDistance)

  pop()

​

  //top right box

  push()

  rotateY(-PI)

  createBox(-maxDistance, 0, maxDistance)

  pop()

​

  //top left box

  push()

  rotateY(-HALF_PI)

  createBox(-maxDistance, 0, 0)

  pop()

​

  //increase the angle

  angle += speed

​

  //reset the angle to make the next step

  if (angle >= HALF_PI) {

    count++

    angle = 0

  }

​

  //reset steps and sent box to the origin

  if (count > maxSteps - 1) count = 0

}

​

​

//create a box

function createBox(posX = 0, posY = 0, posZ = 0) {

  push()

  translate(halfBox, halfBox)

  translate(posX, posY, posZ)

​

  if (count)

    translate(boxSize * count, 0)

​

  rotateZ(angle)

  translate(-halfBox, -halfBox, 0)

  box(boxSize)

  pop()

}

​

​

//end refactoring, thanks for watching ;D