createCanvas(1200, 540);

  elementScale = 1;

  element = ["fire", "earth", "air", "water"];

  tilesPerRow = 12;

  tileWidth = width/tilesPerRow;

  tilesPerColumn = 4;

  tileHeight = height/tilesPerColumn;

}

​

function draw() {

  background(255);

​

for (let rowsDrawn = 0; rowsDrawn < tilesPerColumn; rowsDrawn++) {

for (let columnsDrawn = 0; columnsDrawn < tilesPerRow;                 columnsDrawn++) {

  // repeats the pattern through the array horizontally and             // vertically

  let thisElement = element[(columnsDrawn + rowsDrawn) % element.length];

  let thisX = columnsDrawn * tileWidth;

  let thisY = rowsDrawn * tileHeight;

  addFourElements(thisElement, thisX, thisY); 

  } 

 }  

}

​

function addFourElements(element, x, y) {

  push();

  translate(x, y);

  scale(elementScale);

  noFill();

  stroke("black");

  // if/else to easily include all elements in the array

  // "fill" colors are purposely outside the outlines as a design       // preference

  if (element == "fire") {

    noStroke();

    fill("coral");

    triangle(65, 35, 35, 95, 95, 95);

    noFill();

    stroke("black");

    triangle(60, 30, 30, 90, 90, 90);

  } else if (element == "earth") {

    noStroke();

    fill("olivedrab");

    triangle(65, 95, 35, 35, 95, 35);

    noFill();

    stroke("black");

    triangle(60, 90, 30, 30, 90, 30);

    line(30, 60, 90, 60);

  } else if (element == "air") {

    noStroke();

    fill("gainsboro");

    triangle(65, 35, 35, 95, 95, 95);

    noFill();

    stroke("black");

    triangle(60, 30, 30, 90, 90, 90);

    line(30, 60, 90, 60);

  } else if (element == "water") {

    noStroke();

    fill("lightsteelblue");

    triangle(65, 95, 35, 35, 95, 35);

    noFill();

    stroke("black");

    triangle(60, 90, 30, 30, 90, 30);

  }  

  pop();  

}