createCanvas(400, 400);

  background(220);

   generatepattern();

  var saveButton = createButton("Save Button");

  saveButton.mousePressed(saveImage);

  saveButton.id("save-button");

  saveButton.class("button-class");

  var b = createButton("Generate Pattern")

  b.mousePressed(generatepattern);

}

​

function saveImage(){

  save("Squares and Circles.png");

}

​

function generatepattern() {

  // Outer loop for rows

  for (let y = 20; y < height; y += 40) {

    // Inner loop for columns

    for (let x = 20; x < width; x += 40) {

      // Randomly choose a color

      let r = random(255);

      let g = random(255);

      let b = random(255);

      fill(r, g, b);

      // Randomly choose a shape (circle or square)

      if (random() > 0.5) {

        // Draw a circle

        ellipse(x, y, 30, 30);

      } else {

        // Draw a square

        rect(x - 15, y - 15, 30, 30);

      }

    }

  }

}