const W = S / 3;

const H = S / 10;

const shiftX = W/2;

​

let isCubeTwo = true;

​

function setup() {

  createCanvas(400, 400, WEBGL);

}

​

function draw() {

  background(0);

​

  /*

  push();

  noStroke();

  translate( 0, 0, -S )

  const c1 = color('black')

  const c2 = color('white')

  const circleDiam = abs( sin( frameCount * 0.01 ) ) * 200

  for (var y = 0; y < circleDiam; y++) {

    var inter = map(y, 0, circleDiam, 0, 1);

    var c = lerpColor(c1, c2, inter);

    fill(c);

    circle( 0, 0, circleDiam - inter * circleDiam )

  }

  pop();

  */

  // stroke("orange")

  stroke("white")

  strokeWeight( 1 )

  noFill();

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

​

  if( !isCubeTwo ){

     box(S);

  }

  beginShape()

  vertex(S/-2,S/-2,0)

  vertex(-W + shiftX,S/-2,0)

​

  let currentY = S/2 - 7*H;

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

​

    let y = currentY;

​

    vertex( -W + shiftX, y, 0)

    vertex( 0 + shiftX, y, 0)

    vertex( 0 + shiftX, y + H, 0)

    vertex( -W + shiftX, y + H, 0)

    vertex( -W + shiftX, y + H*2, 0)

    currentY += H*2

  }

  vertex(0,currentY,0)

  vertex(S/2,currentY,0)

​

  vertex(S/2,S/2,0)

  if( isCubeTwo ){

    vertex(S/2,S/2,-S/2)

    vertex(S/2,-S/2,-S/2)

    vertex(-S/2,-S/2,-S/2)

    vertex(-S/2,S/2,-S/2)

    vertex(-S/2,S/2,S/2)

    vertex(S/2,S/2,S/2)

    vertex(S/2,-S/2,S/2)

    vertex(-S/2,-S/2,S/2)

    vertex(S/-2,S/-2,0)

  }

  endShape()

}

​

function mousePressed(){

  isCubeTwo = !isCubeTwo;

}