let img;

let cubeSize = 200;

let flatPanel = false;

let panelDistance = 0;

let targetDistance = 0;

let lerpSpeed = 0.05;

​

function preload() {

  img = loadImage("https://files.cargocollective.com/c1090206/LOGO-CUBE.jpg");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

}

​

function draw() {

  background(0);

  noCursor();

  ambientLight(100);

  directionalLight(255, 255, 255, 0, 0, -1);

​

  panelDistance = lerp(panelDistance, targetDistance, lerpSpeed);

​

  push();

  rotateX(radians(65));

  rotateZ(radians(45));

  push();

  rotateX(mouseX * 0.02);

  rotateZ(frameCount * 0.02);

  rotateY(mouseX);

  rotateZ(mouseX);

  noStroke();

  texture(img);

​

  for (let i = 0; i < 6; i++) {

    push();

    switch (i) {

      case 0:

        translate(0, 0, panelDistance);

        break;

      case 1:

        translate(0, 0, -panelDistance);

        break;

      case 2:

        translate(panelDistance, 0, 0);

        rotateY(HALF_PI);

        break;

      case 3:

        translate(-panelDistance, 0, 0);

        rotateY(HALF_PI);

        break;

      case 4:

        translate(0, panelDistance, 0);

        rotateX(HALF_PI);

        break;

      case 5:

        translate(0, -panelDistance, 0);

        rotateX(HALF_PI);

        break;

    }

    plane(cubeSize, cubeSize);

    pop();

  }

  pop();

​

  pop();

}

​

function mouseClicked() {

  flatPanel = !flatPanel;

  targetDistance = flatPanel ? cubeSize / 2 : 0;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  print("resizing");

}

​