let angle = 89;

let angle2 = 0;

let press = 200;

let x = -500;

let y = -500;

let d = 100;

​

function setup() {

  createCanvas(1000, 1000, WEBGL);

  background(0);

}

​

function draw() {

  but(); //button functionality

  bgclr(); //changes background color

  ang(); //rotation functionality

  strokeColor();

  fiveCubes(); //draws 5 cubes

}

​

function drawCube(size) {

  var nnn = [-size / 2, -size / 2, -size / 2];

  var pnn = [size / 2, -size / 2, -size / 2];

  var pnp = [size / 2, -size / 2, size / 2];

  var nnp = [-size / 2, -size / 2, size / 2];

  var npn = [-size / 2, size / 2, -size / 2];

  var npp = [-size / 2, size / 2, size / 2];

  var ppn = [size / 2, size / 2, -size / 2];

  var ppp = [size / 2, size / 2, size / 2];

  push();

  noFill();

  side(nnn[1],nnn[2],nnn[3],pnn[1],pnn[2],pnn[3],pnp[1],pnp[2],pnp[3],nnp[1],nnp[2],nnp[3]);// Top

  side(npn[1],npn[2],npn[3],ppn[1],ppn[2],ppn[3],ppp[1],ppp[2],ppp[3],npp[1],npp[2],npp[3]);// Bottom

  side(nnn[1],nnn[2],nnn[3],nnp[1],nnp[2],nnp[3],npp[1],npp[2],npp[3],npn[1],npn[2],npn[3]);// Left

  side(pnn[1],pnn[2],pnn[3],pnp[1],pnp[2],pnp[3],ppp[1],ppp[2],ppp[3],ppn[1],ppn[2],ppn[3]);// Right

  side(nnp[1],nnp[2],nnp[3],pnp[1],pnp[2],pnp[3],ppp[1],ppp[2],ppp[3],npp[1],npp[2],npp[3]);// Front

  side(nnn[1],nnn[2],nnn[3],pnn[1],pnn[2],pnn[3],ppn[1],ppn[2],ppn[3],npn[1],npn[2],npn[3]);// Back

​

  // Draw the inner recursive cube

  if (size > press) {

    // Limit the recursion

    push();

    scale(0.9);

    drawCube(size * 0.9);

    pop();

  }

  pop();

​

  function side(vo1,vo2,vo3,vt1,vt2,vt3,vh1,vh2,vh3,vf1,vf2,vf3){

  cubeClr();

  beginShape();

  vertex(vo1,vo2,vo3);

  vertex(vt1,vt2,vt3);

  vertex(vh1,vh2,vh3);

  vertex(vf1,vf2,vf3);

  endShape(CLOSE);

  noFill();

  }

}

​

function newCube(hed, hair) {

  push();

  translate(hed, hair, 0);

  drawCube(200);

  pop();

}

​

function ang() {

  //cube rotation

  // Rotate the cube around the Y-axis and X-axis

  rotateY(angle);

  rotateX(angle2);

​

  // Increment the angle for continuous rotation

  angle += 0.001;

  angle2 += 0.002;

}

​

function but() { //top left corner button functionality

  circle(x, y, d);

  let distance = dist(mouseX, mouseY, 0, 0);

  if (mouseIsPressed && (distance < d / 2)) {

    console.log(press);

    if (press > 100) {

      press = press - 1;

    }

    fill(0);

  } else {

    fill(255);

  }

}

​

function bgclr() {

  //change background color every 10 secs

  let s = second();

  if (s % 10 == 0) {

    let r = random(0, 255);

    let g = random(0, 255);

    let b = random(0, 255);

​

    background(r, g, b);

  }

}

​

function cubeClr() {

  let r = random(0, 255);

  let g = random(0, 255);

  let b = random(0, 255);

  let s = second();

  if (s % 5 == 0) {

    fill(r, g, b);

  }

}

​

function strokeColor(){

  let r = random(0, 255);

  let g = random(0, 255);

  let b = random(0, 255);

    let s = second();

  if (s % 10 == 0) {

    stroke(r, b, g);

  }

}

function fiveCubes(){

  drawCube(200); // Draw the outer cube

  newCube(300, 0); // Move to the right and draw another cube

  newCube(-300, 0); // Move to the left and draw another cube

  newCube(0, -300); // Move upwards and draw another cube

  newCube(0, 300); // Move downwards and draw another cube

}

​