/* Pattern Grid

Michal Shahaf

11/19/22 

*/

var columnSlider, rowSlider;

​

function setup() {

  createCanvas(400, 400);

​

  columnSlider = createSlider(1, 100, 12);

  rowSlider = createSlider(1, 100, 12);

​

  columnSlider.input(pattern);

  rowSlider.input(pattern);

​

  pattern();

​

  var saveButton = createButton("Save Image");

  saveButton.mousePressed(saveImage);

}

​

function saveImage() {

  save("pattern.png");

}

function pattern() {

  background(220);

​

  let cols = columnSlider.value();

  let rows = rowSlider.value();

​

  let w = width / cols;

  let h = height / rows;

​

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

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

      push();

      translate(x, y);

​

      var r = random(100, 255);

      var g = map(x, 0, width, 100, 255);

      var b = random(150);

​

      fill(r, b, g);

      noStroke();

​

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

      var rh = h + random(-200, 150);

      rect(0, 0, rw, rh);

      pop();

    }

  }

}

​