​

​

var columnSlider, rowSlider

​

function setup() {

  createCanvas(500, 400);

  var saveImageButton =createButton ("Save Pattern")

  saveImageButton.mousePressed(saveImages)

  var newPatternButton = createButton("New Pattern")

  newPatternButton.mousePressed(pattern)

​

  columnSlider = createSlider(1,100,12);

  rowSlider = createSlider(1,100,12); 

  columnSlider.input(pattern)

  rowSlider.input(pattern)

  pattern();

}

  function pattern(){

 background(220);

  let cols = columnSlider.value();

  let rows = rowSlider.value()

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

  let h = height / rows;

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

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

​

      push()

    translate(x,y);

    //Color

    var r = random(255);

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

    var b= random (155);

 fill(r,g,b);

    stroke(r,b,g)

     // shapes and line width and height

    var rw = w + random(-50,50)

    var rh = h + random(-100,100)

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

    if(sh === 1) {

      noStroke();

    rect(0,0,rw,rh);

    } else if (sh===2) {

      line(0,0,w,h);

      line(w,0,w,h);

      } else if (sh ===3){

        circle(60,60,rw,rh)

      }

    pop()

  }

 }

}

function saveImages(){

  save("interface.jpg")

}