const boundThreshold = 80;

const maxBallons = 10;

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.or = 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 = radius / 2;

    this.DACurCount = 0;

  }

  bornAnimate() {

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

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

    this.update();

    //this.paint(colorExp);

    this.BACurCount++;

  }

  deadAnimate() {

    this.update();

    this.r -= 2;

    //this.paint();

    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);

  }

  update() {

    this.center.add(this.dirVect);

  }

  paint(r) {

    if (r)      stroke(r);

    else        stroke(this.color.colorExp);

    strokeWeight(this.r);

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

    stroke(0);

    const centerWeight = map(this.r, 0, this.or, 0, 5);

    strokeWeight(centerWeight);

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

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

      this.dirLastTime++;

      this.curLifeTime++;

    }

  }

}

​

function setup() {

  createCanvas(600, 600);

  frameRate(30);

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

    const objColor = makeColorExp();

    Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));

  }

}

​

function draw() {

  background(255);

​

  function killBallon(i) {

    Ballons.splice(i, 1);

    const objColor = makeColorExp();

    Ballons.push(new BallonVect(random(width), random(height), objColor, floor(random(74, 135))));

  }

​

  for (let i = 0; i < Ballons.length; i++) {

​

    if (Ballons[i].outScreen()) killBallon(i);

​

    if (Ballons[i].curLifeTime >= Ballons[i].maxLifeTime) {

      if (Ballons[i].DACurCount <= Ballons[i].DACount)         Ballons[i].deadAnimate();

      else                                                     killBallon(i);

    } else {

      if (Ballons[i].dirLastTime === Ballons[i].dirTotalTime) Ballons[i].resetDir();

      if (Ballons[i].BACurCount <= Ballons[i].BACount) Ballons[i].bornAnimate();

    }

    Ballons[i].update();

    Ballons[i].paint();

  }

​

  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 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

  }

}