y = -40;

m = 0;

​

function setup() {

  createCanvas(700, 700);

  background(200);

  stroke(150);

  strokeWeight(0.1);

}

​

function draw() {

​

  let shades = ["#F5F5F5", "#E7CFD2", "#F5F5F5", "#F5F5F5", "#E7E2D6", "#E7E2D6", "#E7CFD2", "#E7E2D6", "#E7E2D6", "#E7E2D6", "#FFB5D5", "#F50000", "#F06456", "#E67400", "#EEBB2B", "#EEBB2B", "#00B643", "#99D6C9", "#81C7E1", "#0463A0", "#2D375C", "#CFB08F"];

​

  let shade = random(shades);

  c = color(shade);

  fill(c)

​

  quad(x, y, x + 10 + m, y + 10 + m, x - 30 + m, y + 50 + m, x - 40, y + 40);

​

  let tones = ["#E7E2D6", "#E7E2D6", "#E7E2D6", "#E7E2D6", "#E7E2D6", "#E7CFD2", "#FFB5D5", "#F5F5F5", "#F5F5F5", "#E7CFD2", "#F50000", "#F06456", "#E67400", "#EEBB2B", "#EEBB2B", "#00B643", "#99D6C9", "#81C7E1", "#0463A0", "#2D375C", "#CFB08F"];

​

  let tone = random(tones);

  c = color(tone);

  fill(c)

​

  quad(x + 10 + m, y + 10 + m, x + 50 + m, y + 50 + m, x + 40, y + 60 + (m * 2), x, y + 20 + (m * 2));

  y = y + 20 + (m * 2);

​

  if (y > 700) {

    y = -40;

    x = x + 80;

  }

}

​

function keyReleased() {

  if (key == '1') {

    background(200);

    x = -75;

    y = -40;

    m = 0;

  }

  if (key == '2') {

    background(200);

    x = -75;

    y = -40;

    m = 5;

  }

  if (key == '3') {

    background(200);

    x = -75;

    y = -40;

    m = 10;

  }

  if (key == '4') {

    background(200);

    x = -75;

    y = -40;

    m = 20;

  }

  if (key == '5') {

    background(200);

    x = -75;

    y = -40;

    m = 30;

  }

  if (key == '6') {

    background(200);

    x = -75;

    y = -40;

    m = 40;

  }

  if (key == '7') {

    background(200);

    x = -75;

    y = -40;

    m = 50;

  }

  if (key == '8') {

    background(200);

    x = -75;

    y = -40;

    m = 70;

  }

  if (key == '9') {

    background(200);

    x = -75;

    y = -40;

    m = 90;

  }

  if (key == '0') {

    background(200);

    x = -75;

    y = -40;

    m = 100;

  }

}