Pattern 3: grid

*/

​

var columnSlider, rowSlider;

​

function setup() {

  createCanvas(400, 400);

​

  var saveImageButton = createButton("Save Image");

  saveImageButton.mousePressed(saveImage);

​

  columnSlider = createSlider(1, 100, 12);

  rowSlider = createSlider(1, 100, 12);

​

  columnSlider.input(pattern);

  rowSlider.input(pattern);

​

  pattern();

}

function saveImage() {

  save("pattern.jpg");

}

function pattern() {

  background(220);

​

  let cols = columnSlider.value();

  let rows = rowSlider.value();

​

  let w = width / cols;

  let h = height / rows;

​

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

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

      push();

      translate(x, y);

​

      var r = random(150);

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

      var b = random(255);

​

      fill(r, g, b);

      stroke(r, g, b);

      var a1 =map(x,0,width,0,PI);

      arc(w, h, 14, 14, a1, y + PI);

​

      pop();

    }

  }

}

​