createCanvas(800, 400, WEBGL);

  noLoop();

}

​

function draw() {

  background(200);

​

  push();

  translate(-width / 4, 0);

  drawIsometricCubeGrayscale();

  pop();

​

  push();

  translate(width / 4, 0);

  drawIsometricCubeColors();

  pop();

}

​

function drawIsometricCubeGrayscale() {

  let grayValues = [220, 170, 120];

​

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

    push();

    rotateX(45);

    rotateY(45);

    fill(grayValues[i]);

    noStroke();

    translate(0, -i * 20, i * 20);

    box(100);

    pop();

  }

}

​

function drawIsometricCubeColors() {

  let colors = [color(255, 0, 0), color(255, 255, 0), color(0, 0, 255)];

​

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

    push();

    rotateX(45);

    rotateY(45);

    fill(colors[i]);

    noStroke();

    translate(0, -i * 20, i * 20);

    box(100);

    pop();

  }

}

​

function keyPressed() {

  if (key == 's' || key == 'S') {

    saveCanvas('double_drawing', 'png');

  }

}

​