let img; // Declare variable for the image

let reloadButton;

​

function preload() {

  img = loadImage('lover-klimt.png'); 

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let d = 0.9 * min(width, height);

  circles.push(new Circle(width / 2, height / 2, d));

​

  // Create reload button

  reloadButton = createButton('Reload Sketch');

  reloadButton.position(20, 20);

  reloadButton.mousePressed(reloadSketch);

}

​

function draw() {

  background('#e4ae13');

  update();

  for (let i = 0; i < circles.length; i++) {

    circles[i].show();

  }

}

​

function update() {

  let newGeneration = [];

  for (let i = 0; i < circles.length; i++) {

    let circle = circles[i];

    if (circle.mouseOver() && circle.d > 1) {

      let newCircles = circle.split();

      newGeneration.push(...newCircles);

    } else {

      newGeneration.push(circle);

    }

  }

  circles = newGeneration;

}

​

function Circle(x, y, d) {

  this.x = x;

  this.y = y;

  this.d = d;

​

  this.show = function() {

    imageMode(CENTER);

    noFill();

    // Draw the image as the background of the circle

    image(img, this.x, this.y, this.d, this.d);

    // Draw the ellipse (circle) on top of the image

    noFill();

    stroke('#2F242C');

    strokeWeight(4);

    ellipse(this.x, this.y, this.d);

  }

​

  this.split = function() {

    let newCircles = [];

    newCircles.push(new Circle(this.x - this.d / 4, this.y - this.d / 4, this.d / 2));

    newCircles.push(new Circle(this.x - this.d / 4, this.y + this.d / 4, this.d / 2));

    newCircles.push(new Circle(this.x + this.d / 4, this.y - this.d / 4, this.d / 2));

    newCircles.push(new Circle(this.x + this.d / 4, this.y + this.d / 4, this.d / 2));

    return newCircles;

  }

​

  this.mouseOver = function() {

    return dist(mouseX, mouseY, this.x, this.y) < this.d / 2;

  }

}

​

function reloadSketch() {

  circles = [];

  let d = 0.9 * min(width, height);

  circles.push(new Circle(width / 2, height / 2, d));

}

​