let bubbleSize = 300;

​

function setup() {

  createCanvas(600, 600);

  bubble1 = new Bubble(

    width / 3,

    height / 2,

    color(255, 255, 255),

    "statement"

  );

  bubble2 = new Bubble(

    (2 * width) / 3,

    height / 2,

    color(255, 0, 0),

    "project"

  );

}

​

function draw() {

  background(200);

​

  bubble1.update(bubble2);

  bubble1.display();

  bubble2.update(bubble1);

  bubble2.display();

}

​

function mouseClicked() {

  let d1 = dist(mouseX, mouseY, bubble1.position.x, bubble1.position.y);

  let d2 = dist(mouseX, mouseY, bubble2.position.x, bubble2.position.y);

​

  if (d1 < bubble1.size / 2) {

    bubble1.changeSize(bubble1.size + 20);

    bubble2.changeSize(bubble2.size - 20);

  } else if (d2 < bubble2.size / 2) {

    bubble2.changeSize(bubble2.size + 20);

    bubble1.changeSize(bubble1.size - 20);

  }

}

​

class Bubble {

  constructor(x, y, bubbleColor, text) {

    this.position = createVector(x, y);

    this.velocity = createVector(random(-2, 2), random(-2, 2));

    this.acceleration = createVector(0, 0);

    this.size = bubbleSize;

    this.color = bubbleColor;

    this.text = text;

  }

​

  update(otherBubble) {

    this.velocity.add(this.acceleration);

    this.position.add(this.velocity);

​

    // Check collision with other bubble

    let minDist = this.size / 2 + otherBubble.size / 2;

    let distBetween = p5.Vector.dist(this.position, otherBubble.position);

    if (distBetween < minDist) {

      let dir = p5.Vector.sub(this.position, otherBubble.position).normalize();

      let moveAmt = minDist - distBetween;

      let moveVec = dir.mult(moveAmt / 2);

      this.position.add(moveVec);

      otherBubble.position.sub(moveVec);

    }

​

    // Prevent going outside canvas

    this.position.x = constrain(

      this.position.x,

      this.size / 2,

      width - this.size / 2

    );

    this.position.y = constrain(

      this.position.y,

      this.size / 2,

      height - this.size / 2

    );

​

    // Bounce off walls

    if (

      this.position.x + this.size / 2 > width ||

      this.position.x - this.size / 2 < 0

    ) {

      this.velocity.x *= -1;

    }

    if (

      this.position.y + this.size / 2 > height ||

      this.position.y - this.size / 2 < 0

    ) {

      this.velocity.y *= -1;

    }

  }

​

  display() {

    stroke(1);

    strokeWeight(4);

    fill(this.color);

    ellipse(this.position.x, this.position.y, this.size, this.size);

​

    // Dynamically adjust text size based on bubble size

    let textSizeRatio = map(this.size, 50, 200, 10, 30); // Map the bubble size to text size

    fill(255);

    textFont("HELVETICA");

    textAlign(CENTER, CENTER);

    textSize(textSizeRatio);

    text(this.text, this.position.x, this.position.y);

  }

​

  changeSize(newSize) {

    this.size = constrain(newSize, 10, 600);

  }

}

​