let initialAdCreated = false;

let clickCount = 0;

​

// Load the image.

function preload() {

    articleImg = loadImage('ads_ss.png');

}

​

function setup() {

  createCanvas(1522, 767);  

​

  // Create the initial ad after 4 seconds

  setTimeout(() => {

    ads.push(new Ad(400, 400, random(100, 300), random(50, 200)));

    initialAdCreated = true;

  }, 4000);

}

​

function draw() {

  // Display all ads

  image(articleImg, 0, 0);

  for (let ad of ads) {

    ad.display();

  }

}

​

function mousePressed() {

  // Check if the mouse is over any ad's close button

  let newAds = [];

  for (let ad of ads) {

    if (ad.isCloseButtonClicked(mouseX, mouseY)) {

      // Increment the click count

      clickCount++;

      // Calculate the number of new ads to create

      let numNewAds = Math.pow(2, clickCount);

      for (let i = 0; i < numNewAds; i++) {

        newAds.push(new Ad(random(width - 200), random(height - 100), random(200, 400), random(100, 300)));

      }

    } else {

      newAds.push(ad);

    }

  }

  ads = newAds;

}

​

class Ad {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.closeButtonSize = 20;

  }

​

  display() {

    // Draw the ad rectangle

    fill(255, 0, 0);

    rect(this.x, this.y, this.w, this.h);

    // Draw the close button

    fill(0);

    rect(this.x + this.w - this.closeButtonSize, this.y, this.closeButtonSize, this.closeButtonSize);

    // Draw the 'X' on the close button

    stroke(255);

    strokeWeight(2);

    line(this.x + this.w - this.closeButtonSize + 5, this.y + 5, this.x + this.w - 5, this.y + this.closeButtonSize - 5);

    line(this.x + this.w - this.closeButtonSize + 5, this.y + this.closeButtonSize - 5, this.x + this.w - 5, this.y + 5);

  }

​

  isCloseButtonClicked(mx, my) {

    return mx > this.x + this.w - this.closeButtonSize && mx < this.x + this.w && my > this.y && my < this.y + this.closeButtonSize;

  }

}

​