Hello! I’m having a problem with the “mouseClicked()” function in a JavaScript framework called p5js. My aim is to make an agent system with some bubbles with a single aim, that is not to collide with it’s neighboring bubbles. I have created a function in the Bubble class to check if the mouse pointer is inside the bubble or not, it returns true if it is or false if it’s not. Then I used that to inside the mouseClicked() function along with a global variable checkIn to limit the deployment of a new bubble upon an existing bubble but it doesn’t seem to work. I have also setup a colorChange() function for knowing when the bubbles collide each other.
This is the code :-
let b = [];
let checkIn = false;
function setup() {
createCanvas(600, 400);
for (var i = 0; i < b.lenght; i++) {
b[i] = new Bubble();
}
}
function mouseClicked() {
if (checkIn == false) {
b.push(new Bubble(mouseX, mouseY));
}
}
function draw() {
background(18);
for (bubble of b) {
bubble.widthCollide(600);
bubble.lengthCollide(400);
bubble.show();
bubble.move();
if (bubble.inside(mouseX, mouseY)) {
checkIn = true;
} else {
checkIn = false;
}
let over = false;
for (oth of b) {
if (bubble !== oth && bubble.colide(oth)) {
over = true;
}
}
if (over == true) {
bubble.colorChange(255);
bubble.xspeedchange();
bubble.yspeedchange();
} else {
bubble.colorChange(18);
}
}
}
class Bubble {
constructor(x_, y_) {
this.pos = createVector(x_, y_);
this.r = random(5, 9);
this.c = 18;
this.acc = createVector(random(-.5, 0.5), random(-.5, 0.5));
this.show = function() {
stroke(255);
strokeWeight(3);
fill(this.c, 175);
ellipse(this.pos.x, this.pos.y, this.r * 2, this.r * 2);
};
this.move = function() {
this.pos.x = this.pos.x + this.acc.x;
this.pos.y = this.pos.y + this.acc.y;
};
this.colide = function(other) {
this.d = dist(this.pos.x, this.pos.y, other.pos.x, other.pos.y);
if (this.d < this.r + other.r) {
return true;
} else {
return false;
}
};
this.colorChange = function(val) {
this.c = val;
};
this.widthCollide = function(width_) {
if (this.pos.x > width_ || this.pos.x < 0) {
this.acc.x = this.acc.x * -1;
}
}
this.lengthCollide = function(length_) {
if (this.pos.y > length_ || this.pos.y < 0) {
this.acc.y = this.acc.y * -1;
}
}
this.xspeedchange = function() {
this.acc.x = this.acc.x * -1;
}
this.yspeedchange = function() {
this.acc.y = this.acc.y * -1;
}
this.inside = function(mx, my) {
this.checkDist = dist(mx, my, this.pos.x, this.pos.y);
if (this.checkDist < this.r) {
return true;
} else {
return false;
}
}
}
}
Thanks for the help!!