When I try to mess with the velocity with the collision

nature of code.mov

with collision

https://editor.p5js.org/ca2969/full/f7gLS7iLy

let balls = [];
let ballSize = 20;
let spacing = 30;
let collideCOUNT =0; // EVERYTIME THE UPDATE OF COLLIDE IS TRUE THEN +=1
function setup() {
createCanvas(600, 600);
}

function draw() {
background(0);

// Display and update each ball
for (let i = balls.length - 1; i >= 0; i--) {
balls[i].update();
balls[i].display();
}
}

function mouseClicked() {
// Create a new ball at mouse position with a random color
let newBall = new ColorBall(random(255), random(255), random(255),key, mouseX, mouseY);
balls.push(newBall);
}

class ColorBall {
constructor(r, g, b,x,y) {
this.pos = createVector(x,y);
this.vel = p5.Vector.random2D();
this.vel.mult(5); // Set the speed
this.color = color(r, g, b);
this.size = ballSize;
// this.colorKey = colorKey; // Unique key for each color
this.count=1;

}

update() {
this.pos.add(this.vel);

// Bounce off the canvas edges if (this.pos.x < 0 || this.pos.x > width) { this.vel.x *= -1; } if (this.pos.y < 0 || this.pos.y > height) { this.vel.y *= -1; }

// Check for collisions with other balls for (let other of balls) { if (other !== this && this.collidesWith(other) && this.colorKey === other.colorKey) { this.morph(other); // everytime thisline run will do the math this.count will be count this.count += other.count; } }

}

display() {
noStroke();
fill(this.color);
ellipse(this.pos.x, this.pos.y, this.size, this.size);

}

collidesWith(otherBall) {
// Check if this ball collides with another ball
let d = dist(
this.pos.x,
this.pos.y,
otherBall.pos.x,
otherBall.pos.y
);
return d < (this.size + otherBall.size) / 2;
}

morph(otherBall) {
// Morph the balls (increase the size of the bigger ball)
let biggerBall = this.size >= otherBall.size ? this : otherBall;
let smallerBall = this.size < otherBall.size ? this : otherBall;

biggerBall.size += smallerBall.size / 2; smallerBall.size = 0; // Make the smaller ball disappear

}
}

without collision

https://editor.p5js.org/ca2969/full/xPOvTJEwt

let balls = [];
let ballSize = 20;

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(0);

  // Display and update each ball
  for (let i = balls.length - 1; i >= 0; i--) {
    balls[i].update();
    balls[i].display();
  }
}

function mouseClicked() {
  // Create a new ball at mouse position with a random color
  let newBall = new ColorBall(random(255), random(255), random(255), mouseX, mouseY);
  balls.push(newBall);
}

class ColorBall {
  constructor(r, g, b, positionX, positionY) {
    this.position = createVector(positionX, positionY);
    this.velocity = p5.Vector.random2D().mult(random(1, 3)); // Random speed
    this.color = color(r, g, b);
    this.size = ballSize;
  }

  update() {
    this.position.add(this.velocity);

    // Bounce off the canvas edges
    if (this.position.x < 0 || this.position.x > width) {
      this.velocity.x *= -1;
    }
    if (this.position.y < 0 || this.position.y > height) {
      this.velocity.y *= -1;
    }
  }

  display() {
    noStroke();
    fill(this.color);
    ellipse(this.position.x, this.position.y, this.size, this.size);
  }
}