JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="particle.js"></script>
  </body>
</html>

JavaScript

let myPartArray = [];
let radius = 10;

//let gravity;  // just add a king of "gravity" in order to help the balls converge more directly to the desired point.

function setup() {
  
  gravity = createVector(0,1);
  createCanvas(500,600);
  
  for(i=0;i<5;i++){
    let newPart = new Particle(createVector(random(0,i + 3),random(0,i + 5)));
    myPartArray.push(newPart);
  }
  
  
}

function pickParticule(x,y){
  let anotherNewPart = new Particle(createVector(x,y));
  myPartArray.push(anotherNewPart);
}


function draw() {
  background(151);
  // draw the median line
  fill(0);
  line(width/2,0,width/2,height);
  for (i = 0; i < myPartArray.length; i++){
    myPartArray[i].update();
    myPartArray[i].display();
    
  }
}

function mouseClicked(){
  pickParticule(mouseX, mouseY);
}

//  Class Particle
class Particle {
  constructor(pos) {
    
    this.pos = pos;
    this.vel = createVector(0,0);
    
    this.vel.y = 1.5;
    this.vel.x = map(this.pos.x,width/2,0,0,1); // try with map
    this.color = color(255,0,8);
  }

  update(){
    this.pos = this.pos.add(this.vel);
    this.pos = this.pos.add(gravity);
  }

  display() {
    fill(this.color);
    ellipse(this.pos.x, this.pos.y, radius, radius);
  }
}