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,pnn,pnp,nnp);// Top

  side(npn,ppn,ppp,npp);// Bottom

  side(nnn,nnp,npp,npn);// Left

  side(pnn,pnp,ppp,ppn);// Right

  side(nnp,pnp,ppp,npp);// Front

  side(nnn,pnn,ppn,npn);// Back

​

  // Draw the inner recursive cube

  if (size > press) {

    // Limit the recursion

    push();

    scale(0.9);

    drawCube(size * 0.9);

    pop();

  }

  pop();

​

  function side(vo,vt,vh,vf){

  cubeClr();

  beginShape();

  vertex(vo);

  vertex(vt);

  vertex(vh);

  vertex(vf);

  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

}

​