​

var columnSlider, rowSlider;

​

function setup() {

  createCanvas(400, 400);

   rowSlider = createSlider(1, 100, 12);

  rowSlider.input(pattern);

​

  var saveImageButton = createButton("Save Image");

  saveImageButton.mousePressed(saveImage);

  saveImageButton.position(30, height - 50);

​

  columnSlider = createSlider(3, 255, 50);

  columnSlider.input(pattern);

​

  pattern();

}

function pattern() {

  background(0);

  strokeWeight(3);

  stroke(255);

  let rows = rowSlider.value();

  let h = height / rows;

  var r = columnSlider.value();

  var s = columnSlider.value();

​

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

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

      fill(random(r), 0, random(355));

      ellipse(x, y, s, 35);

      fill(random(r), 0, random(155));

      ellipse(x, y, s / 2, 23);

      square(x, y, h, 4,);

    }

  }

}

function saveImage() {

  save("myimage.jpg");

}

​