createCanvas(400, 400);

}

​

function draw() {

  background(255);

  for (let x=0 ; x<=width ; x+=100){

    fill(209,192,20,mouseX);

    for (let y=100 ; y<=height ; y+=100)

      //The if condition is used to alter the coordinates of the triangles depending on the row

      if (y==100 || y==300){ //executes for first and third row

        triangle(x-50,y,x,y-100,x,y-30);

        triangle(x+50,y,x,y-100,x,y-30);

        triangle(x-50,y,x,y-30,x+50,y);

      } else { //executes for second and fourth row

        triangle(x,y,x+50,y-100,x+50,y-30);

        triangle(x+100,y,x+50,y-100,x+50,y-30);

        triangle(x,y,x+50,y-30,x+100,y);

      }

  }

//The second for loop given below works exactly like the first one and has been used to create the inverted triangles

  for (let x=0 ; x<=width ; x+=100){

    fill(205,175,64,mouseX);

    for (let y=100 ; y<=height ; y+=100)

      if (y==100 || y==300){

        triangle(x+50,y,x,y-100,x+50,y-70);

        triangle(x+50,y,x+100,y-100,x+50,y-70);

        triangle(x,y-100,x+50,y-70,x+100,y-100);

      } else {

        triangle(x,y,x-50,y-100,x,y-70);

        triangle(x,y,x+50,y-100,x,y-70);

        triangle(x-50,y-100,x,y-70,x+50,y-100);

      }

  }

  //The below code represents the closed panel view, executed when the mouse is pressed

  if (mouseIsPressed){

    background("rgb(140,199,243)")

    fill(209,192,20);

    for (let x=0 ; x<=width ; x+=100){

      for (let y=100 ; y<=height ; y+=100)

        if (y==100 || y==300){

          triangle(x-50,y,x-10,y-50,x,y-30);

          triangle(x-10,y-50,x,y-100,x+10,y-50);

          triangle(x+10,y-50,x+50,y,x,y-30);

          triangle(x-10,y-50,x+10,y-50,x,y-30);

      } else {

        triangle(x,y,x+40,y-50,x+50,y-30);

        triangle(x+40,y-50,x+50,y-100,x+60,y-50);

        triangle(x+60,y-50,x+50,y-30,x+100,y);

        triangle(x+40,y-50,x+60,y-50,x+50,y-30);

      }

  }

  for (let x=0 ; x<=width ; x+=100){

    for (let y=100 ; y<=height ; y+=100)

      if (y==100 || y==300){

        triangle(x,y-100,x+40,y-50,x+50,y-75);

        triangle(x+50,y-75,x+100,y-100,x+60,y-50);

        triangle(x+40,y-50,x+60,y-50,x+50,y);

        triangle(x+40,y-50,x+50,y-75,x+60,y-50);

      } else {

        triangle(x-50,y-100,x-10,y-50,x,y-70);

        triangle(x,y-70,x+50,y-100,x+10,y-50);

        triangle(x-10,y-50,x+10,y-50,x,y);

        triangle(x-10,y-50,x+10,y-50,x,y-70);

      }

  }

  }

}