let grid;

​

function preload() {

  bongs[0] = loadImage('images/bong0.png');

  bongs[1] = loadImage('images/bong1.png');

  bongs[2] = loadImage('images/bong2.png');

  bongs[3] = loadImage('images/bong3.png');

  bongs[4] = loadImage('images/bong4.png');

  bongs[5] = loadImage('images/bong5.png');

  bongs[6] = loadImage('images/bong6.png');

  bongs[0] = loadImage('images/face1.png');

  bongs[1] = loadImage('images/face2.png');

}

​

function setup() {

  createCanvas(350, 600);

  noStroke();

  let grid = new EasyGrid({

    x: 10,

    y: 10,

    width: width + 50,

    height: height + 50,

    gutter: 10,

    columns: 15,

    rows: 15,

  });

​

  //got through the arrage of imgs and extract the blues and reds into each blues and reds array

​

  // Loop through each row and column dynamically

  for (let row = 1; row <= grid.state.rows; row++) {

    for (let col = 1; col <= grid.state.columns; col++) {

      let cell = grid.getModule(col, row);

​

      //pick a random image and draw it on each color layer

      let z = floor(random(bongs.length));

​

      print(z);

      image(bongs[z],cell.x, cell.y, cell.width, cell.height);

    }

  }

}

​

function draw() {

    textSize(width/3);

    fill('darkblue');

    text("BONG BONG", 0, width/2, height/2);

}

​

​

​