let size = 20;

let size1_5 = size * 1.5;

let size2 = size * 2;

let sizeD2 = size / 2;

​

let x = 0;

let y = -size;

let xPos = 0;

let yPos = 0;

​

function setup() {

  createCanvas(400, 400);

  background(40, 5, 35);

  strokeWeight(2);

  stroke(255);

}

​

let freq = 1;

​

function draw() {

  noStroke();

  if (random() < 0.5)

    // translate(0, noise(x * freq, y * freq) * sizeD2);

    translate(0, random(sizeD2));

  if (yPos % 2 == 0) {

    translate(-size, 0);

  }

  fill(255, 50, 100);

  beginShape();

  vertex(x, y);

  vertex(x, y + size1_5)

  vertex(x + size, y + size2)

  vertex(x + size, y + sizeD2);

  endShape(CLOSE);

​

  fill(100, 50, 255);

  beginShape();

  vertex(x + size, y + sizeD2);

  vertex(x + size2, y);

  vertex(x + size2, y + size1_5);

  vertex(x + size, y + size2);

  endShape(CLOSE);

  if (random() < 0.5) {

    fill(200, 45, 20);

  } else {

    fill(120, 140, 20);

  }

  beginShape();

  vertex(x, y);

  vertex(x + size, y - sizeD2);

  vertex(x + size2, y);

  vertex(x + size, y + sizeD2);

  endShape(CLOSE);

//   stroke(0);

//   line(x, y, x + size, y + sizeD2);

//   line(x + size, y + sizeD2, x + size2, y);

//   if (yPos % 2 == 0) {

//     line(x, y, x + size, y - sizeD2);

//     line(x + size, y - sizeD2, x + size2, y);

//     line(x, y, x, y + size1_5);

//   } else {

//     line(x, y + size, x + size, y + sizeD2);

//     line(x + size, y + sizeD2, x + size2, y + size);

//     line(x + size, y + sizeD2, x + size, y + size2);

//   }

  // line(x + size, y + sizeD2, x + size, y + size1_5);

  x += size2;

  xPos++;

  if (x > width) {

    x = 0;

    xPos = 0;

    y += size1_5;

    // y += yPos % 2 == 0 ? size1_5 : size * 2.5;

    yPos++;

    if (y > height)

      noLoop();

  }

}