var gridarr = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
        [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 1, 3, 3, 1, 1, 1, 3, 3, 1, 0, 0],
        [0, 0, 1, 1, 3, 3, 2, 2, 1, 3, 3, 2, 2, 0, 0],
        [0, 0, 1, 1, 3, 3, 2, 2, 1, 3, 3, 2, 2, 0, 0],
        [0, 1, 1, 1, 3, 3, 3, 3, 1, 3, 3, 3, 3, 1, 0],
        [0, 1, 1, 1, 1, 3, 3, 1, 1, 1, 3, 3, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0],
        [0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0],
        ];

        var gridarr2 = [
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 1, 2, 3, 1, 2, 0, 1, 3, 2, 1, 2, 3, 1, 0],
                [0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 3, 0, 0, 0, 0],
                [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0],
                [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
                [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0],
                [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0],
                [0, 2, 3, 1, 2, 3, 0, 0, 0, 0, 1, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 3, 1, 0, 2, 3, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 2, 2, 0, 1, 1, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 1, 0, 3, 0, 2, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                ];

        var a = 0;
        var b = 0;

        function setup() {

        createCanvas(1200, 1200);

        background(0);





        for (var i = 0; i < 15; i++) {
                for (var j = 0; j < 15; j++) {
                  a = gridarr[i][j];
                      if (a === 1) {
                        fill(255, 0, 20)
                      } else {
                      if (a === 2) {
                        fill(0,255,255)
                      } else {
                      if (a === 3) {
                        fill(255)
                      } else {
                        fill(0);
                      }
                    }
                  }


                  rect((j * 30) + 15, (i * 30) + 15,30,30);


                }
            }

            push();
            translate(600, 600);
            rotate(radians(-45));
            scale(.3);
            drawarray(100);
            for (var i = 0; i < 15; i++) {
                    for (var j = 0; j < 15; j++) {
                      a = gridarr[i][j];
                          if (a === 1) {
                            fill(255, 0, 20)
                          } else {
                          if (a === 2) {
                            fill(0,255,255)
                          } else {
                          if (a === 3) {
                            fill(255)
                          } else {
                            fill(0);
                          }
                        }
                      }

                      rect((j * 30) + 15, (i * 30) + 15,30,30);


                    }
                }

                pop();




                for (var z = 0; z < 15; z++) {
                        for (var t = 0; t < 15; t++) {
                          b = gridarr2[z][t];
                              if (b === 1) {
                                fill(255, 0, 20)
                              } else {
                              if (b === 2) {
                                fill(0,255,255)
                              } else {
                              if (b === 3) {
                                fill(255)
                              } else {
                                fill(0);
                              }
                            }
                          }


                          rect((z * 30) + 600, (t * 30) + 15,30,30);


                        }
                    }

                    push();
                    translate(0, 600);
                    rotate(radians(-78));
                    scale(.5);
                    drawarray(100);
                    for (var z = 0; z < 15; z++) {
                            for (var t = 0; t < 15; t++) {
                              b = gridarr2[z][t];
                                  if (b === 1) {
                                    fill(255, 0, 20)
                                  } else {
                                  if (b === 2) {
                                    fill(0,255,255)
                                  } else {
                                  if (b === 3) {
                                    fill(255)
                                  } else {
                                    fill(0);
                                  }
                                }
                              }

                              rect((z * 30) + 15, (t * 30) + 15,30,30);


                            }
                        }

                        pop();

    }

    function drawarray(fade) {
    for (var i = 0; i < gridarr.length; i++) {
    fill(gridarr[i] * 2,fade);
    rect(i * 10, 20, 10, 10);
    }
    }

    function drawarray2(fade) {
    for (var z = 0; z < gridarr2.length; z++) {
    fill(gridarr[z] * 2,fade);
    rect(z * 10, 20, 10, 10);
    }
    }