createCanvas(windowWidth, windowHeight);

  pattern();

}

​

function mousePressed(){

  pattern();

}

​

function pattern() {

  background('#88A075');

  var cols = 28; // number of columns

  var w = width / cols; //column width

  //var rows = 28;

  var rows = cols * (height / width);

  var h = height / rows; // row height

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

    for (let y = 0; y <= height; y += h) {

      //set transform

      push();

      translate(x + w / 10, y+ h / 10);

   // using randomness

      var r = random (50, 255);

       var g = random (100, 255); + map(y,0,height,0,100);

       var b = random (100, 255); 

      fill(r, g, b);

      var _x = w / 2; // move to center of grid cell

      var _y = h / 2; // move to center of grid cell

      var s = random (40, w / 2); + map(y, 0, height, 0, 10);

      var yOffset = random(0, map(y,0, height, 0, 100));

      noStroke

      rect(0, y + yOffset, s);

      // reset transform

      pop();

      // using transformation

  //for (var x = 0; x <= width; x += 50){

    //for (var y = 0; y <= width; y += 50) {

      //fill('#D0A34D');

      //push();

      //translate(x, y);

      //rect(0,0, 50, 25, 25, 50);

      //fill('#FEC6E0')

      //ellipse(10,1,30, 40)

      //fill(' #C33310')

      //square(0,0, 40, 25)

      //pop();

       // columns

      //var cols = 28; // number of columns

      //var colWidth = width / cols; //wth canvas/col

      //var rows = cols * (height / width);

      //var rowHeight = height / rows;

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

        //for (let y = 0; y <= width; y += rowHeight) {

    } 

}

}