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() {

  stuff(); //*Magical function*

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

function stuff(){

  but(); //button functionality

  bgClr(); //changes background color

  ang(); //rotation functionality

  fiveCubes(); //draws 5 cubes

}

function drawCube(size) { //function to draw cube

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

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

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

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

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

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

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

  var ppp = [0, 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) {  //renders each side

    cubeClr();

    strokeClr();

    beginShape();

    vertex(vo1, vo2, vo3);

    vertex(vt1, vt2, vt3);

    vertex(vh1, vh2, vh3);

    vertex(vf1, vf2, vf3);

    endShape(CLOSE);

    noFill();

  }

}

​

function newCube(hed, hair) { //creates a new cube in a different location

  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() { // Change Cube Color

  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 strokeClr() { // Change Stroke Color

  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

}

​