​

var columnSlider, rowSlider;

​

function setup() {

  createCanvas(400, 400);

  background(220);

   columnSlider = createSlider(1, 100, 12);

  rowSlider = createSlider(1, 100, 12);

  columnSlider.input(pattern);

  rowSlider.input(pattern);

   var newPatternButton = createButton("Generate New Pattern");

  newPatternButton.mousePressed(pattern);

   var saveButton = createButton("Save Image");

  saveButton.mousePressed(saveImage);

​

  pattern();

}

​

function saveImage() {

  save("patterngrid.jpg");

}

​

function pattern() {

  let cols = columnSlider.value();

  let rows = rowSlider.value();

  let w = width / cols; //width of one column

  let h = height / rows; //height of one row

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

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

      push();

      translate(x, y);

      //randomized color

      var r = random(150);

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

      var b = random(255);

      fill(r, g, b);

      stroke(r, g, b);

      //randomized sixe

      // rect width, rect height, can't change w and h

      var rw = w + random(-10, 10);

      var rh = h + random(-20, 20);

      let sh = round(random(1, 3)); // shape

      if (sh === 1) {

        noStroke();

        rect(0, 0, rw, rh);  

      } else if (sh === 2) {

        strokeWeight(5);

        noFill();

        triangle(30, 75, 58, 20, 86, 75);

      } else if (sh === 3) {

         strokeWeight(5);

        line(0, 0, w, h);

        line(w, 0, 0, h);

      }

      pop();

    }

  }

}