let bubbles = [];

​

function preload() {

  font = loadFont("Poppins.ttf");

}

​

function setup() {

  createCanvas(600, 400);

  noStroke();

​

  let points = font.textToPoints("beep", 100, 250, 150, {

    sampleFactor: 0.1,

    simplifyThreshold: 0,

  });

​

  for (let p of points) {

    const bubble = new Bubble(p.x, p.y);

    bubbles.push(bubble);

  }

}

​

function draw() {

  background(42);

  bubbles.forEach((i) => {

    i.behaviours();

    i.update();

    i.show();

  });

}

​

class Bubble {

  constructor(x, y) {

    this.pos = createVector(random(width), random(height));

    this.target = createVector(x, y);

    this.vel = p5.Vector.random2D();

    this.acc = createVector();

    this.r = 4;

    this.maxspeed = 10;

    this.maxforce = 1;

  }

   arrive(target){

    let desired = p5.Vector.sub(target, this.pos);

     let d = desired.mag();

     let speed = this.maxspeed;

     if(d < 100){

       speed = map(d, 0, 100, 0, this.maxspeed);

     }

    desired.setMag(speed);

    let steer = p5.Vector.sub(desired, this.vel);

    steer.limit(this.maxforce);

    return steer;

  }

  flee(target){

    let desired = p5.Vector.sub(target, this.pos);

    var d = desired.mag();

    if(d < 50) {

       desired.setMag(this.maxspeed);

    desired.mult(-1);

    let steer = p5.Vector.sub(desired, this.vel);

    steer.limit(this.maxforce);

    return steer;

    } else {

      return createVector(0,0);

    }

  }

  behaviours(){

    let arrive = this.arrive(this.target);

    let mouse = createVector(mouseX, mouseY);

    let flee = this.flee(mouse);

    arrive.mult(1);

    flee.mult(5);

    this.applyForce(arrive);

    this.applyForce(flee);

  }

  applyForce(f){

    this.acc.add(f);

  }

  update() {

    this.pos.add(this.vel);

    this.vel.add(this.acc);

    this.acc.mult(0);

  }

  show() {

    circle(this.pos.x, this.pos.y, this.r);

  }

}

​