offsetX, offsetZ, angle = 0,

  speed = 2,

  steps = 4,

  img, btn, useTexture=false;

​

//debug

let p

​

function preload() {

  img = loadImage('dog_crazy.jpeg');

}

​

function toggleTexture(){

  useTexture = !useTexture

}

​

function setup() {

  createCanvas(800, 800, WEBGL);

  //debugMode()

  p = createP('p-text')

  btn = createButton('add-texture')

  btn.mousePressed(toggleTexture)

}

​

function draw() {

  smooth()

  angleMode(DEGREES)

  orbitControl()

  normalMaterial()

  background(220);

​

  offsetZ = width / 4

  offsetX = width / 4

​

  //first box

  createPosBox((-offsetX + boxSize / 2) / 2, (offsetZ - boxSize / 2) / 2, () => translate(angle / 2, 0, 0), () => rotateZ(angle), useTexture, textureSource=img)

​

  createPosBox((offsetX - boxSize / 2) / 2, (offsetZ - boxSize / 2) / 2, () => translate(0, 0, -angle / 2), () => rotateX(angle))

  createPosBox((offsetX - boxSize / 2) / 2, (-offsetZ + boxSize / 2) / 2, () => translate(-angle / 2, 0, 0), () => rotateZ(-angle))

​

  createPosBox((-offsetX + boxSize / 2) / 2, (-offsetZ + boxSize / 2) / 2, () => translate(0, 0, angle / 2), () => rotateX(-angle))

​

  if (angle / 90 < steps)

    angle += speed

  else

    angle = 0

​

  p.elt.innerText = `angle=${angle} steps=${angle/90}`

}

​

//box passing pos x,z

function createPosBox(x, z, move, rotation, useTexture, textureSource) {

  push()

  if (useTexture && textureSource)

    texture(textureSource)

  translate(x, 0, z)

  move()

  rotation()

  box(boxSize)

  pop()

}

​

​

//thanks ! :D