Porting an Image (P5.js)

function setup() {
  //set canvas size
  createCanvas(1024, 768);
  
  //set background color
  background(206, 207, 193);
}

function draw() {
  //top rectangle
  noStroke();
  fill(105, 156, 157);
  rect(0, 0, width, 100);
  
  //big triangles plot placement
   for(var x = 0; x <= width; x += width/2) {
    for(var y = 0; y <= height; y += height) {
      noStroke();
      fill(179,175, 149);
      triangle(x, height, x, 0, x+50, height);
    }
  }
  //plot placement
  for(var x = 146; x <= width - 146; x += 146) {
    for(var y = 153; y <= height - 153; y += 153) {
      
      // draw the roof
      fill(72,143,130);
      noStroke();
      triangle(x-25,y+15,x,y-15,x+25,y+15);
      
      // draw the base
      fill(231, 221, 204);
      rect(x-15, y+15, 30, 55);
    }
  }