sparkler (https://codepen.io/chooblarin/pen/LLvgoG)

sparkler.js

class Fireball {

  constructor(position, velocity, size) {
    this.position = position
    this.velocity = velocity
    this.size = size
    this.acceleration = createVector(0, 0)
    this.radius = size / 2
    this.mass = this.size / 100
    this.lifespan = 50

    this.colorR = floor(random(255))
    this.colorG = floor(random(255))
    this.colorB = floor(random(255))
    this.colorA = 0.6
  }

  addForce(f) {
    const a = p5.Vector.div(f, this.mass)
    this.acceleration.add(a)
  }

  update() {
    this.velocity.add(this.acceleration)
    this.position.add(this.velocity)
    this.lifespan -= 2
    this.colorA -= 0.1
    this.acceleration.mult(0)
  }

  draw() {
    noStroke()
    const x = this.position.x
    const y = this.position.y
    const gradient = drawingContext.createRadialGradient(x, y, 0.0, x, y, this.radius)
    gradient.addColorStop(0, `rgba(${this.colorR},60,30,${this.colorA})`)
    gradient.addColorStop(1, 'rgba(0,0,0,0')
    drawingContext.fillStyle = gradient
    ellipse(x, y, this.size, this.size)
  }

  isAlive() {
    return 0 < this.lifespan
  }
}

function randomDest(len) {
  const x = len * cos(random(TWO_PI))
  const y = len * sin(random(TWO_PI))
  return createVector(x, y)
}

class Spark {

  constructor(origin, length) {
    this.origin = origin
    this.length = length
    this.t = 0
    this.T = randomGaussian(60, 10)
  }

  update() {
    this.t += 1
  }

  draw() {
    if (this.t < this.T) return

    this.t = 0

    strokeWeight(1)
    stroke(250, 150, 80)
    let bam = (layer, dest, len) => {
      if (0 != layer) {
        line(0, 0, dest.x, dest.y)
        push()
        translate(dest.x, dest.y)
        for (let i = 0; i < random(2, 5); i += 1) {
          bam(layer - 1, randomDest(len * 0.7), len * 0.65)
        }
        pop()
      }
    }
    push()
    translate(this.origin.x, this.origin.y)
    bam(4, randomDest(this.length), this.length)
    pop()
  }
}

let fireballs = []
let sparks = []

function setup() {
  const w = 500
  const h = 500
  createCanvas(w, h)
  noCursor()

  const center = createVector(w / 2, h / 2)
  const numOfSpark = 100
  const l = 50

  for (let i = 0; i < numOfSpark; i++) {
    const theta = i * TWO_PI / numOfSpark
    const d = createVector(l * cos(theta), l * sin(theta))
    const spark = new Spark(p5.Vector.add(center, d), 40)
    sparks.push(spark)
  }

  blendMode(ADD)
}

function draw() {
  clear()
  background(30)

  for (let i = 0; i < 5; i++) {
    const center = createVector(width / 2, height / 2)
    const vel = createVector(randomGaussian(), -randomGaussian(1, 3))
    const fireball = new Fireball(center, vel, 30)
    fireballs.push(fireball)
  }

  const copies = [].concat(fireballs)
  copies.reverse()
  copies.forEach(function (fireball) {
    fireball.update()
    fireball.draw()
  })
  fireballs = fireballs.filter(function (fireball) {
    return fireball.isAlive()
  })

  sparks.forEach((s) => {
    s.update()
    s.draw()
  })
}