xxxxxxxxxx
113
let bubble1, bubble2;
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);
}
}