​

const num = 15;

const startRad = 30;

const speed = 0.3;

​

​

function setup() {

  createCanvas(600, 600);

  background(220);

  noStroke();

  createBurst(width/2, height/2);

}

​

function draw() {

  managers = managers.filter(manager => {

    manager.update();

    return !manager.done;

  });

}

​

function mouseReleased() {

  createBurst(mouseX, mouseY);

}

​

function createBurst(x, y) {

  managers.push(new TentacleManager(x, y, num, startRad));

}

​

class Point {

  constructor(x, y, ang, rad) {

    this.x = x;

    this.y = y;

    this.ang = ang;

    this.rad = rad;

  }

  update() {

    this.rad -= 0.5;

    this.ang += random(-PI/6, PI/6);

    this.x += cos(this.ang) * this.rad * speed;

    this.y += sin(this.ang) * this.rad * speed;

  }

  draw() {

    const startColor = color(80, 0, 80);

    const endColor = color(255, 200, 255);

    const col = lerpColor(startColor, endColor, map(this.rad, startRad, 0, 0, 1));

    fill(col);

    circle(this.x, this.y, this.rad * 2);

  }

}

​

class TentacleManager {

  constructor(x, y, num, startRad) {

    this.points = [];

    this.done = false;

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

      this.points.push(new Point(x, y, random(TAU), startRad));

    }    

  }

  update() {

    this.points.forEach(point => {

      point.update();

      point.draw();

      if(point.rad < 0) {

        this.done = true;

      }

    });

  }

}