var columnWidth = 70

var columnSlider

function setup() {

  createCanvas(450, 400);

  var newPatternButton = createButton("New Pattern")

  newPatternButton.mousePressed(pattern)

  newPatternButton.position(5,370)

  var saveImageButton =createButton ("Save Pattern")

  saveImageButton.mousePressed(saveImages)

  saveImageButton.position(350,370)

  columnSlider=createSlider(20,100);

  columnSlider.input(pattern);

  pattern();

}

// Circle random patterns

function pattern() 

//background color changes from black to gray when the column slider moves

{

  background(columnSlider.value());

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

  var r= random(255);

  var b = random(0,255);

  var g = random(0,250);

  noStroke()

  fill (r,b,g);

  circle(r+20,b+53,g-20);

  }

}

function saveImages(){

  save("interface.jpg")

}