const maxBallons = 20;

const alphaSet = [35, 45, 55, 65, 75];

const alphaDiff = 5;

let   ballons = [];

​

class BallonVect {

  constructor(xPos, yPos, color, radius) {

    this.center = createVector(xPos, yPos);

    this.color = color;

    this.r = radius;

    this.dirLastTime = 0;

    this.dirTotalTime = floor(random(12, 22));

    this.dirVect = this.applySpeed();

    this.BACount = this.color.alpha / alphaDiff;

    this.BACurCount = 0;

    this.maxLifeTime = floor(random(50, 150));

    this.curLifeTime = 0;

    this.DACount = this.color.alpha / alphaDiff;

    this.DACurCount = 0;

    this.colorExp = null;

    this.dead = false;                     // new 

​

  }

  bornAnimate() {

    const curEnteringAlpha = (this.BACurCount * alphaDiff) / 100;

    const colorExp = 'rgba(' + this.color.r + '%,' + this.color.g + '%,' + this.color.b + '%,' + curEnteringAlpha + ')';

    this.colorExp = colorExp;

    this.BACurCount++;

  }

  deadAnimate() {

    const curFadingAlpha = (this.color.alpha - this.DACurCount * alphaDiff) / 100;

    const colorExp = 'rgba(' + this.color.r + '%,' + this.color.g + '%,' + this.color.b + '%,' + curFadingAlpha + ')';

    this.colorExp = colorExp;

    this.DACurCount++;

  }

  resetDir() {

    this.dirLastTime = 0;

    this.dirTotalTime = floor(random(12, 22));

    this.dirVect = this.applySpeed();

  }

  applySpeed() {

    let xOffset = this.setOffsetPer();

    let yOffset = this.setOffsetPer();

    return createVector(xOffset, yOffset);

  }

  setDir() {

    return random(0, 1) < 0.5 ? -1 : 1;

  }

  setOffsetPer() {

    return this.setDir() * floor(random(1, 3));

  }

  outScreen() {

    return (this.center.x - this.r > width || this.center.x + this.r < 0 ||

      this.center.y - this.r > height || this.center.y + this.r < 0);

  }

  checkLife() {

    if ( this.outScreen() )   this.dead = true;      // kill from array see renew_Ballon() 

    if (this.curLifeTime >= this.maxLifeTime) {

      if (this.DACurCount <= this.DACount)

        this.deadAnimate();

      else

        this.dead = true;                           // kill from array see renew_Ballon() 

    } else {

      if (this.dirLastTime === this.dirTotalTime)

        this.resetDir();

      if (this.BACurCount <= this.BACount)

        this.bornAnimate();

      else {

        if (this.colorExp != null) this.colorExp = null;

      }

    }

  }

  update() {

    this.center.add(this.dirVect);

  }

  paint() {

    this.checkLife();    // check

    this.update();       // move first

    if (this.colorExp != null)

      stroke(this.colorExp);

    else

      stroke(this.color.colorExp);

    strokeWeight(this.r);

    point(this.center.x, this.center.y);

    stroke(0);

    strokeWeight(5);

    point(this.center.x, this.center.y);

    this.dirLastTime++;

    if (this.curLifeTime <= this.maxLifeTime) this.curLifeTime++;

  }

}   //  end class

​

function setup() {

  createCanvas(600, 600);

  frameRate(14);

  for (let i = 0; i < maxBallons; i++) 

    ballons.push(new BallonVect(random(width), random(height), makeColorExp(), floor(random(74, 135))));

}

​

function renew_Ballon() {

  for (let i = 0; i < ballons.length - 1; i++) {

    if ( ballons[i].dead ) {

      ballons.splice(i, 1);

      ballons.push(new BallonVect(random(width), random(height), makeColorExp(), floor(random(74, 135))));

    }

  }

}

​

function lineBallons() {

  for (let i = 0; i < ballons.length - 1; i++) {

    for (let j = i + 1; j < ballons.length; j++) {

      if (dist(ballons[i].center.x, ballons[i].center.y, ballons[j].center.x, ballons[j].center.y) < boundThreshold) {

        strokeWeight(1);

        line(ballons[i].center.x, ballons[i].center.y, ballons[j].center.x, ballons[j].center.y);

      }

    }

  }

}

​

​

function draw() {

  background(255);

  renew_Ballon();                                              // check if dead and make new

  for (let i = 0; i < ballons.length; i++) ballons[i].paint(); // draw all

  lineBallons();                                               // make lines if close

}

​

function makeColorExp() {

  let r = floor(random(0, 30));

  let b = floor(random(30, 50));

  let g = floor(random(50, 70));

  let alpha = random(alphaSet);

  return {

    colorExp: 'rgba(' + r + '%,' + g + '%,' + b + '%,' + (alpha / 100) + ')',

    alpha: alpha,

    r: r,

    g: g,

    b: b

  };

}