​

let colorbox = 80;

let colorboxSlider;

let nameInput;

​

​

function setup() {

 // createCanvas(600, 390);

  let canvas = createCanvas(600, 390);

  var parent = canvas.parent();

 var patternButton = createButton('Generate New Pattern');

  patternButton.mousePressed (pattern);

  patternButton.style('color', 'pink')

  patternButton.parent(parent);

  var saveButton = createButton('save Image');

  saveButton.mousePressed(savePatternImage);

  saveButton.style('color', 'yellow');

  saveButton.parent(parent);

  saveButton.style('right', '0');

  colorboxSlider = createSlider(10, 200, 80);

  colorboxSlider.input(updatecolorboxSlider);

  nameInput = createInput("Name the pattern");

  console.log(parent);

  pattern();

}

​

function updatecolorboxSlider (){

  colorbox = colorboxSlider.value()

  pattern();

}

​

function savePatternImage() {

    save(nameInput.value() +  "-pattern.png");

}

//function mouseClicked() {

 // save ("Assigment 8.png");

//}

​

function pattern() {

  background(220);

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

   soyyo(x);

  }  

  function soyyo(x){

    let r = random(500);

    let g = random(100);

    let b = random (500);

    noStroke() 

    fill(r, g, b);

    let y = 200;

    rect(x, 330, 55, 55, 20);

    rect(x, 270, 55, 55, 20); 

   rect(x, 210, 55, 55, 20); 

   rect(x, 150, 55, 55, 20); 

   rect(x, 90, 55, 55, 20);

    rect(x, 30, 55, 55, 20);

    rect(x, -30, 55, 55, 20);

   let round = 30;

    let d = dist(mouseX, mouseY, x, y);

    if (mouseIsPressed && d < 50) {

      round = 70;

    }

    fill(b, r, g);

    rect(x + 12, 330, 30, round, 20);

    rect(x + 12, 270, 30, round, 20);

   rect(x + 12, 210, 30, round, 20);

    rect(x + 12, 150, 30, round, 20);

    rect(x + 12, 90, 30, round, 20);

    rect(x + 12, 30, 30, round, 20);

   rect(x + 12, -30, 30, round, 20);

  }

 text(nameInput.value(), width / 2, height / 2);

}