bubble canvas background

bubble.js

function rand(min, max) {
  return (Math.random() * (max - min)) + min;
}

export default class Bubble {
  constructor(canvas) {
    this.colors = [
      '255, 255, 255'
    ];
    // adds gradient to particles on true
    this.blurry = true;
    // adds white border
    this.border = false;
    // particle radius min/max
    this.minRadius = 10;
    this.maxRadius = 35;
    // particle opacity min/max
    this.minOpacity = 0.005;
    this.maxOpacity = 0.5;
    // particle speed min/max
    this.minSpeed = 0.05;
    this.maxSpeed = 0.5;
    // frames per second
    this.fps = 60;
    // number of particles
    this.numParticles = 100;
    // required canvas variables
    this.canvas = document.querySelector(canvas);
    this.ctx = this.canvas.getContext('2d');
  }

  init() {
    this.render();
    this.createCircle();
  }

  render() {
    const wHeight = window.innerHeight;
    const wWidth = window.innerWidth;

    this.canvas.width = wWidth;
    this.canvas.height = wHeight;

    window.addEventListener('resize', () => {
      this.render();
    });
  }

  createCircle() {
    const particle = [];

    for (let i = 0; i < this.numParticles; i++) {
      const color = this.colors[Math.floor((rand(0, this.colors.length)))];
      particle[i] = {
        radius: rand(this.minRadius, this.maxRadius),
        xPos: rand(0, this.canvas.width),
        yPos: rand(0, this.canvas.height),
        xVelocity: rand(this.minSpeed, this.maxSpeed),
        yVelocity: rand(this.minSpeed, this.maxSpeed),
        color: `rgba(${color}, ${rand(this.minOpacity, this.maxOpacity)})`
      };
      this.draw(particle, i);
    }
    this.animate(particle);
  }

  draw(particle, i) {
    const ctx = this.ctx;
    if (this.blurry === true) {
      const grd = ctx.createRadialGradient(particle[i].xPos,
      particle[i].yPos,
      particle[i].radius, particle[i].xPos, particle[i].yPos, particle[i].radius / 1.25);
      grd.addColorStop(1.000, particle[i].color);
      grd.addColorStop(0.000, 'rgba(255, 255, 255, 0)');
      ctx.fillStyle = grd;
    } else {
      ctx.fillStyle = particle[i].color;
    }
    if (this.border === true) {
      ctx.strokeStyle = '#fff';
      ctx.stroke();
    }
    ctx.beginPath();
    ctx.arc(particle[i].xPos, particle[i].yPos, particle[i].radius, 0, 2 * Math.PI, false);
    ctx.fill();
  }

  animate(particle) {
    setInterval(() => {
      this.clearCanvas();
      for (let i = 0; i < this.numParticles; i++) {
        particle[i].xPos += particle[i].xVelocity;
        particle[i].yPos -= particle[i].yVelocity;

        if (particle[i].xPos > this.canvas.width + particle[i].radius
        || particle[i].yPos > this.canvas.height + particle[i].radius) {
          this.resetParticle(particle, i);
        } else {
          this.draw(particle, i);
        }
      }
    }, 1000 / this.fps);
  }

  resetParticle(particle, i) {
    const random = rand(0, 1);

    if (random > 0.5) {
      particle[i].xPos = -particle[i].radius;
      particle[i].yPos = rand(0, this.canvas.height);
    } else {
      particle[i].xPos = rand(0, this.canvas.width);
      particle[i].yPos = this.canvas.height + particle[i].radius;
    }
    this.draw(particle, i);
  }

  clearCanvas() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}