Having trouble with mouseClicked() function in p5js

Get Help JavaScript
#1

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!! :slightly_smiling_face:

1 Like